AI2(9) Take Quiz

11章 Web API (WordPress TinyWebDB API)

WordPressは人気のCMSであり、サーバセキュリティ、パフォーマンスチューニング、スケールアップ、クラウド対応など沢山ノウハウが蓄積された。WordPressに API機能を追加して、クライドとして利用する方法を試み。

WordPressとApp Inventorの連携

App InventorはAndroidのApp作りに簡単な環境である。そのTinyWebDBコンポーネントは、TinyDBのWeb版といったものです。タグをつけてメッセージをサーバーに保存したり、サーバーにタグ名を送信してその値を受け取ったりすることができます。あらかじめTinyWebDBにあわせてサーバー側にプログラムを用意し、そこにアクセスする形で処理を用意しなければいけません。

WordPressは人気のCMSであり、サーバセキュリティ、パフォーマンスチューニング、スケールアップ、クラウド対応など沢山ノウハウが蓄積された。WordPressをWebコンテンツを作るに最適な環境。WordPressサイトは、App InventorのTinyWebDBサービスとして利用できるか?

答えはYes.

WordPress に TinyWebDB API

WordPressに API機能を追加して、クライドとして利用する方法を試み。

WP-TinyWebDB-APIは、両者の長所を連携し、WordPressをAppInventorのTinyWebDBサービスとして利用するためのAPIを、WordPressのプラグインとして提供したもの。

本章は、WP-TinyWebDB-APIのインストール、Postman を使ってAPIの動作確認, そして第9章のWebデータベースに応用する検証を行う。

 

WP-TinyWebDB-APIのインストール

公式サイトを利用する

  1. FTPツールでtinywebdb-api ディレクトリー全体を WordPress の pluginsフォルダーにコピーして下さい(/wp-content/plugins/).

  2. FTP the entire tinywebdb-api directory to your WordPress blog’s plugins folder (/wp-content/plugins/).

  3. 管理パネルの「Plugins」タブ上のpluginを有効化してください。

  4. Activate the plugin on the “Plugins” tab of the administration panel.

Postman を使ってAPIの動作確認

サイトをブラウザーで開くと、普通のWordPressのサイトに見える

http://tinywebdb.edu2web.com/api/

追加したAPI機能をみる。(これをTinyWebDBのServiceURLにセットする)

http://tinywebdb.edu2web.com/api/getvalue/?tag=questionsChenLab

image

ブラウザから取得したデータは、少々見にくい。PostmanというChrome の拡張を使うと、便利。認証、パラメタ引き渡しもできる。

image

データの送信

http://tinywebdb.edu2web.com/api/storeavalue/

Webデータベースのアプリで検証

第9章のアプリから、上記のAPIへアクセスして見た。

問題なく、問題が保存できる。

image

ブラウザーからも、保存したデータの確認できる。

image

Take Quiz

Design:

Take Quiz Interface
Components:
Take Quiz Comps
Blocks:
image

AI2(8) Make Quiz

**第9章 Web データベース **

TinyWebDB

(Chapter 10. MakeQuiz and TakeQuiz)

Chapter 8 に、TinyDBを使って簡単なメッセージを保存する処理を作成しました。

Androidでは、ネットワーク経由でサーバーにアクセスするアプリが多数あります。Androidのシステムにネットワーク通信のための機能が備わっており、それを利用して非常に簡単にサーバーとやり取りするアプリを作れるのです。

App Inventorでも、サーバーとやり取りするアプリを作ることができます。これは「TinyWebDB」という部品として用意されています。

image

image

TinyWebDBは、TinyDBのWeb版といったものです。タグをつけてメッセージをサーバーに保存したり、サーバーにタグ名を送信してその値を受け取ったりすることができます。ただし、それ以上に複雑なことは、現時点ではできません。ですから、あらかじめTinyWebDBにあわせてサーバー側にプログラムを用意し、そこにアクセスする形で処理を用意しなければいけません。

下記のテスト用サーバが用意されてる

http://tinydb.edu2web.com/

※TinyWebDBの仕様

では、TinyWebDBは、どのような形でサーバーにアクセスするのでしょうか。データの保管と取得について、その仕様をざっと整理しておきましょう。

○データの送信

URL: アドレス/storeavalue
パラメータ: tag=タグ名&value=値

データをサーバーに送信する場合、送信先となるWebサイトのアドレスの./storeavalueというURLにアクセスをします。送られるタグ名と値は、それぞれ「tag」「value」というパラメータとして送られます。

○データの取得

URL: アドレス/getvalue
パラメータ: tag=タグ名

サーバーからデータを受け取る場合、送信先となるWebサイトのアドレスの./getvalueというURLにアクセスをします。取得したい値のタグ名が「tag」パラメータで送信されます。

注意しておきたいのは、「サーバーからTinyWebDBが受け取るデータは、JSON形式でなければいけない」という点です。JSONというのは「JavaScript Object Notation」というもので、JavaScriptのオブジェクトを記述するためのフォーマットです。これを利用して、テキストやリストなどを送れるようにしています。

TinyWebDBでは、あらかじめ決められた形式でまとめられたJSONデータを受け取り、それを利用します。また送信先のURLや、送付するパラメータ名なども決まっています。それらに従って、サーバー側に処理用のプログラムを用意しなければいけないのです。

サンプルプログラム

Make Quiz

Design:

Make Quiz Interface
Components:
Make Quiz Components
Blocks:
image

Refer:

  • http://www.appinventor.org/MakeQuiz10 – (English)

AI2(7) TinyDB

**第8章 データベース **

(TinyDB)

(Chapter 7. Android, Where’s My Car?’)
ANDROID 、私の車はどこですか

アプリの内容はロケーションセンサ(LocationSensor)でケータイの位置を記憶(TinyDB)し、別の場所に移動した後に記憶した場所がどの方向にあるかを示すものです。なお、ロケーションセンサはエミュレータでは動作しません。動作の確認はAndroidケータイで行ってください。

データベース

TinyDB : アプリを終了させても残るデ-タを持つことができる部品。デ-タはキ-とバリュ-の対で記憶される.

デザイン

デザイン画面

image

コンポーネントリストの後半

image

部品の一覧(プロパティ名も変更してください)

グル-プ 部品名 COMPONENT上の部品名 プロパティ名 プロパティ値
Screen Screen1 Title 私の車はどこですか?
Basic Label CurrentHeaderLabel FontBold ON
Text あなたの現在位置
Screen Arrangement HorizontalArrangement HorizontalArrangement1
Screen Arrangement HorizontalArrangement HorizontalArrangement2
Basic Button RememberButton Text 現在位置を記憶
Enabled OFF
Basic Label RememberedHeaderLabel FontBold ON
Text 記憶した位置
Screen Arrangement HorizontalArrangement HorizontalArrangement3
Screen Arrangement HorizontalArrangement HorizontalArrangement4
Basic Button DirectionsButton Text 現在位置から記憶した位置の方向を表示
Enabled OFF
Sensors LocationSensor LocationSensor1
Basic TinyDB TinyDB1
Other Staff ActivityStarter ActivityStarter1 Action android.intent.action.VIEW
ActivityClass com.google.android.maps.MapsActivity
ActivityPackage com.google.android.apps.maps
HorizontalArrangement1の中
Basic Label CurrentAddressLabel Text Address:
Basic Label CurrentAddressDataLabel Text 値は空にしておく
HorizontalArrangement2の中
Basic Label GPSLabel Text GPS:
Basic Label CurrentLatLabel Text 0.0
Basic Label CommaLabel Text ,(カンマ)
Basic Label CurrentLongLabel Text 0.0
HorizontalArrangement3の中
Basic Label RememberedAddressLabel Text Address:
Basic Label RememberedAddressDataLabel Text 空にする
HorizontalArrangement4の中
Basic Label RememberedGPSLabel Text GPS:
Basic Label RememberedLatLabel Text 0.0
Basic Label Comma2Label Text ,(カンマ)
Basic Label RememberedLongLabel Text 0.0

ブロックエディタ

このアプリでは以下の4つのイベントを使用します。

  1. 位置情報が更新されたら現在位置の表示を更新
  2. 「RememberButton」をクリックしたら現在位置を記憶
  3. 「DirectionsButton」をクリックしたら現在位置から記憶した位置の方向を表示
  4. アプリ起動時に現在位置を記憶している場合復元し、画面に表示

必要なイベントが分かり、このアプリがどのように動くかの大まかなイメージができたと思います。以下にイベントごとのブロックを組み立てた完成図と使用する部品を表に示しますので、それに倣って組み立てましょう。

image

【1】現在位置更新時のイベント

位置情報更新時のイベントでは、現在位置を表示するラベルに値を反映し、現在の位置を記憶するボタンを使用可能にします。以下の図5の完成図のように表にある部品を組み立ててください。

【2】RememberButtonがクリックされたときのイベント

RememberButtonがクリックされたときのイベントでは、記憶する位置情報を表示するためのラベルに現在の位置情報反映し、TinyDB1に同じ内容を記録します。また、位置を記憶したら方向を表示するボタンを使用可能にします。

では、先ほどと同じように部品を組み立ててください。

 

【3】DirectionsButtonがクリックされたときのイベント

DIrectionsButtonがクリックされたときのイベントでは、現在の位置情報と記憶した位置情報を使って方向を表示するためのGoogleマップ用のリクエストURIを組み立ててActivityStarterに渡し、別のアプリを起動します。このイベントも先ほどと同じように例に倣って部品を組み立ててください。

【4】アプリ起動時のイベント

アプリ起動時のイベントでは、TinyDB1に位置を保存していれば画面上の記憶した位置情報を表示するラベルに復元します。例によって、図と一覧表を見て部品を組み立ててください。

image

これでアプリは完成です。最後に、実際に動かしてみましょう。

センサアプリを実機でテストするには

今回使ったロケーションセンサはエミュレータでは動かないのでAndroid端末の実機で動かします。また、ケーブルを抜いても動かすために今までと違う手順でAndroid端末の実機にインストールします。

ブロックエディタでAndroid端末に接続し、一度アプリを起動します。その後、デザイナ画面の右上にある[Package for Phone]の[Download to Connected Phone]を選ぶと、Android端末の実機にダウンロードされます。

後は普通のアプリのように起動すれば、このように起動します。お好きな場所で「現在位置を記憶する」ボタンを押し、少し移動して「現在位置から記憶した位置の方向を表示」を押しすと、別のアクティビティ(Activity)が開き、現在位置から記憶した位置の方向を表示してくれます。

このとき、ケータイの位置情報を取得する機能をONにしておくことを忘れないでください。位置情報のONの仕方はAndroid端末の[設定]画面の[現在位置とセキュリティ]内の[GPS機能を使用]のチェックボックスを[ON]にすればOKです。

AI2(6) Tokyo Map Tour

第7章 位置情報

(Chapter 6. Map Tour)

(Walking Tour)

今回はTokyo Map Tourというアプリを作ります。

予め登録してある3つの場所をセレクトボタンから選択すると、その場所のマップやストリートビューが表示される、というものです。

Androidでは、あるアプリから別のアプリを起動して、それに処理を渡したり、別のアプリでの実行結果を受け取ったりすることが比較的簡単にできるのです。
Tokyo Map Tourでは、Android端末に用意されているGoogle Mapのアプリを利用します。

1.Map Tour

東京の観光地の地図を表示するアプリです。

[目的地リスト]のボタンを押すと、東京の観光地のリストが表示されます。

  • Tokyo Tower (東京タワー)
  • Imperial Palace(「皇居」二重橋)
  • Sensoji Temple(浅草寺)

リストの中から、行きたい場所を選択すると、地図が表示されます。

では、チュートリアルに従って、作ってみます。

Designer

まずは、「Designer」ですね。

image

使用するコンポーネントは、Image、ListPicker、ActiveStarterです。

Table 6-1. Components for the Paris Map Tour

部品 PALETTE 名前 用途
Image User Interface Image1 東京画像
Label User Interface Label1 Androidで東京発見を表示
ListPicker User Interface ListPicker1 目的地リスト
ActivityStarter Connectivity ActivityStarter1 地図アプリを開く

Imageに、最初の画面で表示する地図の画像を設定します。

ListPickerは、テキストデータのリストから一つのデータを選択するためのコンポーネントです。
観光地のリストを入れておくためのものです。
ActiveStarterは、アプリ内から別のアプリを起動するためのコンポーネントです。
ここでは、Google Mapを起動するように設定しています。

Table 6-2. ActivityStarter properties for launching Google Maps

属性
Action android.intent.action.VIEW
ActivityClass com.google.android.maps.MapsActivity
ActivityPackage com.google.android.apps.maps

Blocks Editor

続いて、「Blocks Editor」

destinationsというリストを用意して、観光地の名称を入れておきます。

Screen1.Initializeは、スクリーンが初期化されるときに呼ばれるブロックでしたね。

ListPickerの要素として、destinationsリストを設定します。
そして、ListPickerが押されたときの処理。

“http://maps.google.com/?q=” の文字列の後に、選択された観光地の名称が連結されます。
別のアプリ(Google Map)を起動したとき、この文字列が渡されます。

image

「Blocks Editor」はこれだけです。

検索して、地図が表示するのは、Google Mapの処理です。
q= の後に、検索したい文字列をくっつけていたのですね。

ActiveStarterの代わりに

ActiveStarterからMap開く動作は機能しないので、代わりにWebViewerを利用する。

デザイン

image

ブロック

image