App Inventor

Mobile Computing (4) Media

Leave a comment

第5章　メディア

(Chapter 4. No Texting While Driving) — 運転中チャット（Texting）しない

内容はショットメッセージ受信してたら、電話番号とメッセージの音声の読み上げ、自動返信です。

日本では、ショットメッセージあまり普及しないので、このコース実験用スマートフォンは回線契約もないので、実施は困難。

そこで、内容は日本人の間流行っているTwitterの発信、受信（ 読み上げ？）にアレンジする。

これをベースに、音声の読み上げ (発音テスト？)、翻訳ツールの作成、IoTのセンサー情報の公開も考えられます。

参考ビデオ映像

https://www.youtube.com/watch?v=5404RBvbvfA

Twitter とは

Twitterは、140文字以内の短文「ツイート」の投稿を共有するウェブ上の情報サービスである。

https://twitter.com/

Twitterへようこそ. 「いま」起きていることを見つけよう。国内のニュースから身近なできごとまで、みんなの話題がわかる。

Twitterアカウント申請

Twitterアプリを作る場合は「Twitter」の「Properties」にある「ConsumerKey」と「ConsumerSecret」が必要になります。これはTwitterアプリの製造者番号のようなので、アプリ単位にTwitterに申請をするともらえます。

番号を取得するためにはTwitterアカウントを持っていてログイン出来ていることが前提条件になります。またアプリ製作者はモバイル登録されていることが条件になっています。携帯電話の番号を事前に登録しておきます。

Twitter App申請

アプリ登録は下記リンクの「Create New App」からできます。

必要事項を入力して登録が完了すれば「Keys and Access Tokens」から「Consumer Key (API Key)」「Consumer Secret (API Secret)」がすぐにもらえます。

  • ConsumerKey
  • ConsumerSecret

Application Management

https://apps.twitter.com/

フォームに登録内容を入力してください。

［Name］

自分で考えてアプリの名前を入力。適当でよい。ただし、世界中に唯一無二の名前でないと登録するときに怒られる

［Description］

簡単なアプリの説明を入力。最低でも10文字必要

［Website］

存在するWebサイトのアドレスを入力。お持ちのWebサイトやブログのアドレスがよい。持っていない方は日本App Inventorユーザー会のアドレスである「http://www.app-inventor.jp」を使ってもらってもよい

［Callback URL］

Websiteと同じアドレスを入力

［Developer Rules of the Road］

チェックをONに

［CAPTCHA］

画像に表示されている読みにくい文字を入力

申請する際、必須項目は赤い✴️　と表示、しかしCall back URL は必須ではないですが、入れないとアプリで「連携アプリの認証」画面出ないので、必ず入力すること。

上記のフォームを入力し終わったら画面の一番下にある「Create your Twitter application」をクリックして登録を実行してください。

Twitter　発信

スクリーンショット 2017-09-12 14.05.15.png

ブロックエディタ

ブロックエディタでは以下のイベントを作成します（下記リストは、インデックスになっています）。

  1. 起動時にTwitterにログイン
  2. Twitterにログインしたらボタンを押せるように
  3. 「つぶやく」ボタンを押したらツイートを投稿

App InventorのTwitter機能の多くは非同期になっています。Twitterにログインした後に、認証が通るとお知らせが届くようになっています。それを受け取る部分は別のイベントとして用意する必要があります。

では、上記の機能を1つずつ組み立てていきましょう。

【1】起動時にTwitterにログイン

アプリ起動時に何かさせたい場合に使用するのは「Screen1.Initialize」です。そしてTwitter認証をするためのブロックは「Twitter1.Authorize」です。この2つで「起動時にTwitterにログインする」という動きを表現できます。

ブロックエディタ上では図のようになります。取得元は以下のようになります。この図のようにブロックを組み合わせてください。

ここで使用している「Twitter1.Authorize」を実行すると認証画面が開き、そこにTwitterのログインIDとパスワードを入力すると認証が実施され、アプリからTwitterの各種サービスにアクセス可能になります。

TwitButtonをクリックするとテキストボックスの内容をツイートとして投稿します。同じ内容の投稿して、怒られてしまうことを防ぐため、システム時刻を先頭につけ、クラスの生徒たちの投稿を一覧できるため、ハッシュタグ #upspress を加えた。

スクリーンショット 2017-09-12 14.14.10.png

Appのテスト

Appの初期化する際、Twitterの認証を行う。

利用者のTwitterアカウント情報（Id / Pw）でログインしてください。

Twitter　写真投稿

Twitter 読み上げ？

App Inventor

Mobile Computing (3) Mole Mash

Leave a comment

第4章　アニメーション(Mole Mash)

(Chapter 3. MoleMash)

**Mole Mashは、**ゲームセンターによくあるもので、画面のデザイン、Campas部品、さらにImageSprite使い方が学べます。

表3- 1 “もぐら叩き”アプリ中のコンポーネント一覧

コンポーネント パレット 命名 用途
Canvas Drawing and Animation Canvas1 ImageSpriteのコンテナ
ImageSprite Drawing and Animation Mole タッチ目标
Button User Interface ResetButton スコアリセット
Clock Sensors Clock1 移動速度
Sound Media Sound1 的中された際振動
Label User Interface HitsLabel 的中と表示
Label User Interface HitsCountLabel 的中数の表示
HorizontalArrangement Layout HorizontalArrangement1 HitsLabelとHitsCountLabel置き場
Label User Interface MissesLabel 失敗と表示
Label User Interface MissesCountLabel 失敗回数
HorizontalArrangement Layout HorizontalArrangement2 MissesLabelとMissesCountLabel置き場

デザイナー画面

まずは、新しいプロジェクトを作りましょう。名前は、「mole」としました。

「Screen1」ができております。さっそく「Screen1」のプロパティから変更します。

  • Title 　　　　　　　「もぐらたたき」「アプリの名前になります。」
  • ScreenOrientation 「Portrait」「縦長固定のアプリにします。」
  • Scrollable 　　　　 チェックをはずす。「スクロールするような状況になっても、画面にスクロールバーが表示されず、画面がスクロールしなくなります。

というわけで、ここに置くコンポーネントのHeightのFillParentがきちんと効くようになります。

スコア表示部分を作成

スコア表示部を作ります。

「LayOut」内の「HorizontalArrangement」を置き、その中に、Labelを2つ入れます。

こんな感じ↓

後で、ブロックエディタでプログラミングするときに、分からなくならないように「Components」を「Rename」します。

  • 「HorizontalArrangement」　→Rename→　「ScoreArrangement」
  • 「Label1」　→Rename→　「HitsLabel」（プロパティのTextを「Hits:」に変更する。）
  • 「Label2」　→Rename→　「HitsCountLabel」（プロパティのTextを「0」に変更する。）

これは、点数を表示させるラベルとなります。

デザイナー画面を完成させます。

  1. 「Button」を１つ配置します。「Button1」　→Rename→　「RestartButton」（プロパティのTextを「Restart」にする。
  2. 「Canvas1」を配置します。（プロパティWidth: Fillparent, Height: Fillparent）
  3. 「Canvas1」の中に「ImageSprite」を一つ入れます。「ImageSprite1」　→Rename→　「MoleImage1」（プロパティのPictureに「mole.png」を設定し、もぐらを表示します。）(mole.png), 「MoleImage1」の配置は、Canvas内であれば、どこでもかまいません。好きなところにおいてください。
  4. 「Clock1」を配置します。Non-visible Componentとして、下に配置されます。（プロパティのTimerIntervalを500に設定します。）
  5. 「Sound1」を配置します。これも、Non-visible Componentとして、下に配置されます。（プロパティの変更はなし。）

これらが完成するとこうなります。↓

モグラたたきのブロックエディタその１

「Blocks」のボタンを押し、ブロックエディタを表示します。

まずは、点数を表示するための変数「Score」を設置します。初期値は「０」としておきます。

次は、モグラをランダムに表示させるブロックを作ります。左側にあるBlocksの「Clock1」をクリックし、「When Clock1.Timer」ブロックをドラッグします。

これです。↓

これは、「Clock1」のTimerIntervalで指定した時間ごとにイベントを発生するためのブロックです。プロパティで500 msと設定したので、0.5秒ごとにこのブロック内のイベントを発生させます。0.5秒ごとにモグラのを表示させるようにします。

モグラを表示させるのは「MoleImage1」をクリックし、「call MoleImage1.MoveTo」をはめ込みます。このブロックは、「x」と「y」に指定した場所に「モグラの図」を表示します。

「MoveTo」となっているブロックなので、その位置にアニメーションしながら動いていくのかと思いがちですが、「x」「y」の座標の位置までジャンプしていくイメージです。動いている様子は、エミュレートして見て下さい。モグラたたきっぽくなっています。

ここまでだとこうなります。↓

最後に「x」と「y」の部分に入れるものは、ランダムで表示させるブロック「random integer　from ① to ②」のブロックを使います。

「x」の①から②の範囲は、下の図を参考に考えて下さい。①は「０」、②は、「Canvas1.width – MoleImage1.Width」となります。

ということで、ここを完成するとこうなります。↓

モグラたたきのブロックエディタその２

「when MoleImage1.Touched」のブロックを使います。

これです。↓

カンバス内の「MoleImage1」にタッチしたときの処理を決めるブロックです。

この中に入れるブロックは、次のものになります。

１，変数「Score」の値を１増やす。

２．変数「Score」の値を「ScoreLabel」に表示する。

３．0.1 秒間(100 ms)スマートフォンを振動させる。

これらを組み合わせて完成させます。

モグラたたきのブロックエディタその３

「Restart」ボタンを動かすブロックです。今回の「Restart」ボタンは、ただ、点数を「０」にもどすだけです。

ブロックエディタで、「RestartButton」ボタンをクリックし、「when RestartButton.click」をドラッグします。

これです。↓

中は、こんなブロックです。

１．変数「Score」を「0」にします。

２．変数「Score」の値を「ScoreLabel」に表示する。

（これは、「モグラたたきのブロックエディタその２」の時に作ったブロックと全く同じものなので、それをクリックし、「Ctrl+C」キーを押し、「Ctrl+V」キーを押す。つまりコピーアンドペーストが使用できます。１．の変数もコピー＆ペースとしてから、数値の部分を変えた方が楽です。）

全部一緒にするとこんな感じです。↓

MITでのサンプルはここで終わりです。ここから先は、自分で工夫してみます。

  1. 応用例１：もぐらを３匹にしてみよう。
  2. 応用例２：もぐらを叩いたら音が出るようにしてみよう。
  3. 応用例３：猫を１匹足してみよう。
  4. 応用例４：「Restart」ボタンを、「Start」ボタンに変更。
  5. 応用例５：制限時間を３０秒に設定。
App Inventor

Mobile Computing (2) Paint Pot

Leave a comment

第3章 Paint Pot

(Chapter 2. PaintPot)

PaintPotはネコの顔に赤青緑の線を引いたり点をうったりでき、書いたものを消したり、点を打つ大きさを変えたり、背景の写真をカメラで撮ったりできるアプリです。

画面のデザイン、Campas部品の使い方が学べます。

**
**

簡略な手順

http://ai2.appinventor.mit.edu/　を開いて、gmailで登録してください。

デザイン

これがDesignerの画面です。左側のPaletteから、HorizontalArrangement持って来て、

上に3個ボタンを持って来てレイアウトの中にセット！

左側のPaletteから、Drawing and AnimationからCanvasを1個持って来て、置いたCanvasをクリックしてPropertiesから大きさを変更しましょう。今回は横幅をFill parentに、縦幅を300ピクセルに設定しました。Propertiesからボタンの色やテキストも変更できます。ついでにボタンごとの呼び名もわかりやすいように変えておくといいと思います。Componentsから対象のボタンを選択して、下のRenameから変更できます。

次にCanvasのBackgroundImageを選択します。

LayoutからHorizontalArrangementを1個持って来て、

左からボタンを持って来てレイアウトの中に4個置きます。こんな感じに並べましょう

最後にMediaからCameraを持って来てDesignerでの作業は終了になります。**
**

プログラミング

次はいよいよBlocksでの作業になります。右上のBlocksと書いてあるボタンを押してBlocks編集画面へ移動します。まずはなぞった部分に線を引いていく処理を作ります。左側のCanvasからwhen canvas1 .Draggedというブロックを持ってきます。その中に同じくCanvasから持ってきたcall Canvas1 .DrawLineをセットします。次に始点と終点の座標は下の図のようにセットしてください。これだけで画面に線が引けるようになりました！

次はボタンを押たときに線や点の色を変更できるようにします。対象のボタンのとこからwhenなんとか .ClickBlockを持って来て、Canvasから色をセットするブロックを、色は左のColorsから持ってきましょう。

また、似たような処理はCtrl+C Ctrl+Vでコピペすることが出来ます。

次にタッチしたところに点を打てるようにします。…って言ってもやることはさっきとほとんど一緒です。こんな感じ。点の大きさはMathのとこから数字を持って来て、とりあえず5をセットしました。**
**

最後にカメラを使えるようにしましょう。といってもMIT AI2ではカメラ画面をそのまま使えるわけではなく、端末のカメラアプリを起動して、戻り値としてカメラの画像を受け取ることになります。Cameraからcall Camera1.TakePictureを持って来て、カメラで写真をとったらCanvasの背景に設定するようにします。

これでPaintPotは完成です！

完成したプログラム

改造

  1. ペンの太さの変更（大丸、小丸）
  2. 現在の色、ペンの太さの表示
  3. ペンの太さの自由設定
App Inventor

Mobile Computing (1) Hello Purr

Leave a comment

第2章　UI

3.1イベントドリブンとは

3.2 Hello World (Hello Purr)

Chapter 1. Hello Purr

Hello Purrは最初に学ぶAI2のプログラム、画面のデザイン、ボタン部品の使い方が学べます。

App Inventor のチュートリアル

画像をクリックすると、「ニャー」と猫の鳴き声がするアプリを作る

素材の準備

チュートリアルページよりダウンロード  http://appinventor.mit.edu/explore/ai2/hellopurr.html

  1. Kitty picture: png
  2. Meow sound: mp3

 

MIT App Inventorのプログラミング環境

  1. Chromeブラウザを開き、http://ai2.appinventor.mit.edu/ を入力する
    （教室の機材はプロキシの認証画面が出たら、指示した内容を入力する）
  2. Google アカウントでログインする
    （自分のGoogle アカウント、または演習用アカウントtest @edu2web.comを利用する）
  3. ウインドウがPopupしていれば、Continueボタンを押して先に進む。
  4. すでに作成済みのProjectがあれば、それが見える。
  5. 今回はHellopurr という Project を新規に作る
    メニューから「Project」→「Start new project」を開き、「Project nameを入れ」→「OK」順に操作。Project name はhellopurrとする。
  6. 画面の右上に「Designer」「Blocks」がある。Designerは、ユーザインタフェースを、Blocksは処理を書くためにあるので、適宜切り替える

 

アプリの作成は3ステップで完了

  1. デザイン画面にボタンのブロックを置いてボタンに猫の写真を配置
  2. メディア・コンポーネントのサウンド・ブロックを置いて猫の鳴き声のオーディオファイルとリンク
  3. 「when Button1.Click」を置き、その中に「call Sound1.Play」のブロックを組み込み

image

image

 

スマホ・アプリ動作確認

エミュレータデバイスにまたはAndroid機材に接続し、猫をタッチしてみて、なき声を確認。

image

最後不要な文字の消去、説明のラベルの追加など、アプリの形を整える。

QRコードでスマホにスキャンさせ、ダウンロードしてインストールして動作を確認する、またはPCにapk fileとして保存して、配布する 。

App Inventor

Mobile Computing (0) Guidance

Leave a comment

ガイダンス

コンピュータは、日常生活に様々な変化をもたらしました。

歴史的なコンピュータの利用形態の変遷は、以下とも言われる。

  1. メインフレーム全盛期の集中処理
  2. 分散システム（オープンシステム）の抬頭によるクライアント・サーバなどの分散処理
  3. インターネットに代表されるネットワーク中心の、新しい集中処理
  4. 世界に分散したユーザーがサーバを意識せずサービスを受ける、クラウドコンピューティングの処理形態

モバイルコンピューティングとは、移動中、あるいは外出先でコンピュータを利用すること。ノートパソコンや携帯情報端末の高性能化・高機能化や、携帯電話やPHSによるデータ通信の高速化に伴い、外出中でも家や職場と同様の環境を再現できるようになりつつある。携帯電話などによるデータ通信を併用する場合のみを指してモバイルコンピューティングと呼ぶ場合もある。

ICTのトレンドは、クラウド、IoT、AIへ変換しています。変わらないものは、コンピューターサイエンスであります。

スマートフォンは、様々なセンサーを装備、クラウドと繋がる能力が持つIoTデバイスと見なすことができます。

ユビキタス情報システム論は、特定のコンピューター言語にこだわらない、コンピューターサイエンスの基層知識を用いで、

みなさん手持ちのスマートフォンを教材に、センサー情報の収集、そしてクラウドとの連携する技術を学び、

何時でも、どこでも利用できるユビキタス 情報システムの構築技法を学びます。

本コースの構成

（1-7基礎編）

（8-10ネットワーク編）

（総合編11-13）

スマホ・アプリ開発

世界の携帯電話契約数は世界の人口を上回った。携帯電話中スマホの普及率は67.4％、スマホの販売数はパソコンを超えた、動画視聴ネットショッピングに使用する機器は、スマホがパソコンを超えた!! スマホ・アプリ開発人材不足のため、求人が増えた。

スマホOSのシェアは、主にAndroidとiOSであり。日本にはほぼ半々だが、全世界の場合Androidは78％。

ゲームが作りたい、でもアイディアがない、プログラミングがわからない！

「100万のタマゴ」を検索してみましょう — 「誰もやりたくないアプリ」を3日でつくったら、広告収益3,500万円超え。800万ダウンロードの無駄タップアプリ「100万のタマゴ」が世界各国でヒットするまで。

スマホ・アプリ開発は、従来のプログラミングとビジュアルプログラミングがある。従来のプログラミングは習得まで時間がかかるが、ビジュアルプログラミングは入門がすぐでもできる。

MIT App Inventorとは

  • Android用ビジュアル プログラミング
    • コーディングなし、プログラムの部品をドラッグ＆ドロップで組み合わせるだけでできる。
  • 使ってみたいアプリを自分で作る
    • ひらめいたアイデアから簡単にアプリが作ることができる、プロトタイプにも適する
  • 実用のアプリ開発も可能
    • Java プログラマー向けの Android アプリ開発の解説書の例題１０戦全勝

 

MIT App Inventorできること

Googleはコンピュータ科学専攻ではない大学生、看護学生、女子高生、小学生などを対象にApp Inventorのテストを行ってきた。サンフランシスコ大学の学生は車の運転中に送られてきたテキストメッセージに自動返信するアプリを作成。看護学生は加速度センサーを用いて患者が倒れたときに、患者の携帯電話から救急メッセージが送信されるようにした。レゴマインドストームというロボットもプログラムで動かす。

 

準備するもの

  • PC
  • Google アカウント
  • Androidマシン（スマホ or タブレット）
    • 「MIT Ai2 Companion」
    • QRコードスキャナー
  • 無線LAN(WiFi) あると便利

 

image

開発環境

下記何れの開発環境を用意

  1. Androidデバイス+WiFiがある
    => Androidデバイス+WiFiで実行
  2. Androidデバイスがない
    => エミュレータで実行
  3. AndroidデバイスはあるがWiFiがない
    => Androidデバイス+USBケーブルで実行

Swift2

Swift2 (1) Hello world to iPhone

Leave a comment

[Swift][超入門]初心者向けはじめてのHelloWorld!

まずはXcodeのDownloadからはじまる

MacのApp StoreからXcodeを検索して、ダウンロードする（無料）。

プロジェクトの作成

1. プロジェクトの新規作成 まずXCodeを開いたら

File>New>Project　を選択。

2.　テンプレートの選択

次に作りたいアプリに合わせてテンプレが選べます。
今回は　iOS>Application>Single New Application　を選択。

3.　プロダクト名の決定

次にプロダクト名を設定します。Product Nameの中にHelloWorldと入力しましょう。

4.　保存先の設定
デフォルトでは~/Applications内に保存されるそうです。
Desktopに変更してください。

HelloWorldを出力

上記を全て終えるとプロジェクトが立ち上がります。

1. 　ラベルを配置

2.　ボタンを配置

3.　ボタンのイベント処理を追加

ラベルに”HelloWorld”文字列を代入。

//
//  ViewController.swift
//  MyFirstApp
//
//  Created by Hong Chen on 2017/02/22.
//  Copyright © 2017年 DIT. All rights reserved.
//

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var label: UILabel!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


    @IBAction func tappedButton(_ sender: Any) {
        label.text = "Hello!!"
    }
}

 

 

4.　実行してみる

左上の実行ボタンをクリック！！エミュレータが起動。

エミュレータのボタンをクリックすると、ラベル文字はHelloWorldに変わればOK！！

これでSwiftエンジニアデビュー！！

使用する参考書：

[amazonjs asin=”4774178713″ locale=”JP”]

Uncategorized

Mobile Computing with App Inventor – CS Principles

Leave a comment

edXオンライン授業プラットフォーム

大規模公開オンライン講座（MOOC：Massive Open Online Course) の提供機関であるedX（米国ハーバード大学とMITが創設）。

https://www.edx.org/

アメリカには大学レベルの授業を無償で提供するedXというオンライン授業プラットフォームがあり、ハーバード大学やマサチューセッツ工科大学(MIT)、日本の京都大学、早稲田大学などが参加しています。

Mobile Computing with App Inventor – CS Principles

モバイルコンピューティング（App Inventor利用）のコースは2月再開（Starts on February 7, 2017）。ちょうと春休み期間中、英語得意の学生はユビキタス・クラブで一緒に楽しく勉強して、Certificationを取りませんか？

  • Length: 6 weeks　（February 7, 2017 – March 20, 2017?）
  • Effort: 8 hours per week
  • Price: FREE
    Add a Verified Certificate for $49
  • Institution: TrinityX
  • Subject: Computer Science
  • Level: Introductory
  • Languages: English
  • Video Transcripts: English

This course introduces basic principles of computer science by designing and building mobile apps in App Inventor for Android.

https://www.edx.org/course/mobile-computing-app-inventor-cs-trinityx-t007x

About this course

Learn to use the open development tool, App Inventor, to program on Android devices. You will learn how to design and build mobile apps — apps that are aware of their location, send and receive text messages, and give advice and directions. The only limit on the types of apps you will learn to build is your own imagination!

However, computer science is not just about coding and building apps. We will also learn some of  the fundamental principles of computer science. We’ll learn about the potential and the limitations of computing and coding. We’ll learn how the Internet works and about the positive and negative aspects of computing in today’s society, and much more!

For these broader computing concepts we will work within an emerging curricular framework — the Computer Science Principles (CSP). The CSP framework is being developed by leading computer science educators from around the country under the auspices of the College Board and with funding support of the National Science Foundation.

In addition to programming and CSP the course is project-based and emphasizes writing, communication, and creativity. Multiple-choice questions, in the style that students can expect to encounter on the AP exam, will also be a key component of this course.

MITが無料オンライン講座で修士学位を取得可能

edxは大学レベルの授業を受けられるだけで単位は付与されないことになっているのですが、MITがedxの無料オンライン講座を受講した学生に単位を付与するパイロットプログラムを発表し話題を呼んでいます。

http://professional.mit.edu/programs/short-programs/educational-mobile-computing/

Prerequisites:

  • Six-week App Inventor MOOC Mobile Computing with App Inventor – CS Principles (ID Verified Certificate of Achievement: $50) offered by edX starting February 1, 2017. Registration for this MOOC will open soon.
  • Master Trainer applicants who already have experience teaching App Inventor can submit proof of coursework taught in lieu of taking Mobile Computing with App Inventor – CS Principles.
  • Ten weeks of online independent coursework beginning May 8, 2017 (included in the $3,500 course fee).
Thankable

ラッグ＆ドロップで直感的にアプリが作れる「Thunkable」

Leave a comment

プログラミング知識ほぼ不要!?ドラッグ＆ドロップで直感的にアプリが作れる「Thunkable」 | Techable(テッカブル)

商用フォークのプロジェクトThankableが日本語でも紹介されてます。

「Thunkable」はドラッグ＆ドロップでスマホアプリを作れるサービスだ。”ボタン”や”テキストボックス”など必要な素材を選択するだけで、アプリができあがっていく仕様で、Googleフォームでアンケートなどを作る感覚に近い。

Source: プログラミング知識ほぼ不要!?ドラッグ＆ドロップで直感的にアプリが作れる「Thunkable」 | Techable(テッカブル)

APPs, photoblog

Enhanced photoblog

Leave a comment

Project Title. Enhanced Photo Blog publisher

Elevator Pitch. “Easy Photo Blog publisher” is easy way to make a photo blog to own WordPress site, this cloud app enhanced with addtional post viewer, custom Auth UI with base64 encode implement.

Description.
The Easy Photo Blog publisher is a mobile app that make easy to publish a post with photo to self hosted WordPress site.  Enhanced Photo Blog publisher was enhanced with following funtions:

  1. A post viewer for you browse recent posts.
  2. A custom Auth UI let you manage a WordPress REST API service lists.

The app’s social benefit comes from its ability to make a quick post, and improve later, give a motivation to help user more publish. Also this a good example to use WordPress REST API.

2015-12-11 13.51.55

Download and Test. Because this is a app using WordPress REST API, the only way to fully test its functionality would require using the WordPress REST API powered Blog site. You can feel free to use my test site. To download the app, scan the QR code to the left with the MIT AI2 Companion app or some other Scanner or click on this download link.

PhotoBlog2_V2-download

a screen shot show a post on WordPress REST API powered Blog site.

2015-12-11 13.54.22
Technical Description. As shown in this screenshot, the app exceeds the project’s minimum technical requirements. It contains 2 global variables, 4 list data, 2 procedures or functions, and 2 if/else structure.

PhotoBlog2-blocks2

Appendix.

WP REST API web service

The WP REST API is a WordPress plugin that intends to be eventually integrated into WordPress’ core as another (big) step towards transforming WordPress from a blogging platform/CMS into a fully fledged application framework.

To start a service, you have own a own WordPress site, and use 2 plugins:

  1. WP REST API plugin, install and active (schedule uptake to core WP 4.4 and WP 4.5)
  2. BASIC Auth plugin, git clone https://github.com/WP-API/Basic-Auth basicAuth,  and active.

 

tinywebdb-base64 web service

WP REST API provide OAuth 1.0a and Basic Auth algorithm. Currently it is no way to use OAuth 1.0a on App Inventor, so I use Basic Auth on this app. Because , I create a tinywebdb-base64 program, which use App Inventor Tinywebdb feature to get value = base64_encode(tag) . You need install tinywebdb-base64 program on your server and set URL to program. You can feel free to use my tinywebdb-base64 web service.

APPs, photoblog

Photoblog

Project Title. Easy Photo Blog publisher

Elevator Pitch. This cloud app pickup a photo from device’s image gallay, save the photo on self hosted WordPress site as a media file，and create a post with the media file attachement.

Description.
The Easy Photo Blog publisher is a mobile app that make easy to publish a post with photo to self hosted WordPress site. To make a post, user could follow steps:

  1. Type the post title
  2. Pickup a photo from device’s image gallay.
  3. Press “Post to madia” button to save the photo on WordPress site as a media file
  4. Type the post main content
  5. Press “Post Blog” to create a post with the media file attachement.

the app is easy way to make a photo blog to own WordPress site.

The app’s social benefit comes from its ability to make a quick post, and improve later, give a motivation to help user more publish. Also this a good example to use WordPress REST API.

screen1

Download and Test. Because this is a app using WordPress REST API, the only way to fully test its functionality would require using the WordPress REST API powered Blog site. You can feel free to use my test site. To download the app, scan the QR code to the left with the MIT AI2 Companion app or some other Scanner or click on this download link.

apk-download

a screen shot show a post on WordPress REST API powered Blog site.

2015-12-10 07.51.15
Technical Description. As shown in this screenshot, the app exceeds the project’s minimum technical requirements. It contains 2 global variables, 4 list data, 2 procedures or functions, and 2 if/else structure.

blocks2

Appendix.

The WP REST API is a WordPress plugin that intends to be eventually integrated into WordPress’ core as another (big) step towards transforming WordPress from a blogging platform/CMS into a fully fledged application framework.

WP REST API provide OAuth 1.0a and Basic Auth algorithm. it is no way to use OAuth 1.0a on App Inventor, so I use Basic Auth on this app. Basic Auth use base64 encode and not way to do on App Inventor, so on this app, just use a global variable to store a text which already encoded auth text.