MIT App Inventor で遊ぶ (Public API ２）

前回のランダムに料理の写真を表示する超簡単なアプリのプログラムの復習（備忘録的に）。

一応、データを提供するサーバーのURLをurlという変数を作り、割り当てておく。

MIT App Inventorにはウエッブサーバーとのやりとりを助けてくれるWeb（プログラムの中ではWeb1）という部品(Component)がある。

このWeb1がやりとりしてくれるURLとして変数urlを割り当てる。

最後にサーバーに対してGETメソッドにてデータを取得する。

GETメソッドについては、たとえば、こちらを参照。

ネット上でデータをやり取りする際の標準的な記述形式であるJSON(JavaScript Object Notation)形式でデータを取得するが、プログラムに沿って見てみると、その流れは以下の通り。

(1) まず、ネットを介したデータ取得に問題なけれ、responseCodeとして 200 が返ってくるので、まず200が返ってきているかを確認する。

(2) 取得するJSON形式のデータは以下。

{
   "image":"https://foodish-api.com/images/rice/rice18.jpg"
}

この取得したデータをMIT App Inventorにて扱えるデータ形式にデコード（今回はMIT App InventorのDictionary形式）すると

{"image":"https://foodish-api.com/images/rice/rice18.jpg"}　（同じ）

"image"がキー(key)で、"https://foodish-api.com/images/rice/rice18.jpg"が値(value)となる。

 

 

今回は、前回と重複した箇所が多かったが。次回より他のPublic APIも見ていく。

 

MIT App Inventorで遊ぶ (Public API １）

今回は、いわゆるPublic APIを使った、一番シンプルなアプリ。Public APIとは「あらゆる外部の開発者や企業が利用できる一般公開されたAPI」（　https://wakame-msds.com/　より）。では、APIとは、何か？適当にググれば説明は五万とあろうが、ここから。

要するに企業なりが持っているデータベースにアクセスして条件に合ったデータを取得するための仕組みと言えばいいのかな。

単純なものは別だが、どうしても複雑な構造のデータを扱いたくなるもので、このPublic APIは正に一筋縄ではいかない（いかなかった）。

今回は単純なものだが、例えば、こんな天気予報アプリもブロックを組み合わせれば作れる。これは作成途中のもの。今後、言語を選択して各国語（と言っても、日本語、英語、フランス語？）で表示できるようにしたい。

今回のアプリは、ボタンをクリックするとランダムに料理の写真が表示されるというもの。シンプル！

操作状況を示したYouTubeはこちらをクリック。

上記YouTubeとは若干異なるが、取得するデータのデコード方法によりその結果が若干異なることを実証するため若干プログラムを変更。その画面は以下の通り。

ウエッブサイトは、https://foodish-api.com/

APIは、https://foodish-api.com/api/

このAPIのJSONデータは、

{
   "image":"https://foodish-api.com/images/pasta/pasta30.jpg"
}

ブロック（プログラム）は以下の通りで、dictionary型でのデコードとlist型でのデコードをそれぞれ確認できるようにしている。(1) はdictionary型、(2)はList型でそれぞれデコードしている。

その結果、上の画面イメージではわかりにくいが、拡大表示すると以下のように２通りのデコードを表示させている。

プログラム（ブロック）では、(1)のdictionary型でのデコードを採用している。

dictionary型の場合は、キー（「image」）とペアーとなっている値を取得するだけでよい。

一方、List型のデコードを使えば、ブロック数もわずかだが多くなる。Listの中の1番目（一つしかないが）のListの中の2番目の値（画像のURL）を取得することになる。

 

MIT App Inventor で遊び始める 「ことわざ遊び その５」

「ことわざ遊び」の最終回。

今回ことわざの意味を追加するに当たって参考にした（と言うより、やり方をそのまま利用させてもらった）YouTubeは以下の通り。

Save, Update & Delete Firebase to Listview MIT App Inventor

インドネシアのYouTuberらしく、インドネシア語であったが、やり方を学ぶのに特に支障はなかった。

このYouTuberより学んだのは、いたって簡単なことだが、値に「次の句」と「ことわざの意味」を例えば「|」で連結して保存し、取り出した時は「|」で分割しそれぞれをキーとペアーにしてdictionaryを別々に作成すると言うやり方。

説明より実際にプログラム（ブロック）を見た方が早い。画面展開は以下ビデオの通り。

FirebaseのRealtime Databaseのデータ構造は以下の通り。上記画面展開のデモビデオ撮影の際に追加したデータが一番上に表示されている。

前回とプログラム（ブロック）の相違点は、次の句と意味を「|」で連結して追加保存する部分と、データを取得した時に「|」で分割して、それぞれをキーとペアーにしたdictionaryを作成する部分。

1. Firebase Realtime Databaseにデータを追加保存

次の句と意味のテキストを単純に「|」で連結して保存している。「|」で連結する理由は、通常の文章では使用されないからかな？他の記号でもなんでもOK。

 

2. データを取得し分割してdictionaryを２種類作成

データを種痘した時は、「|」で分解してそれぞれを利用するだけ。

 

次回は、Public APIを利用したアプリ。

MIT App Inventor （参考になった、又は参考にしているYouTube、ウエッブサイト）

この数ヶ月特に色々なことを教えてくれたYouTube、ウエッブサイトのTutorialsは以下の通り。今もこれらYouTuber、サイトより新しいことを学んでいます。

 

The Coding Bus

https://www.youtube.com/@TheCodingBus

 

MIT App Inventor

https://www.youtube.com/@MITAppInventor/videos

 

Obsidian Soft

https://www.youtube.com/@ObsidianSoftEducation

 

Kelas Kodular - Ahmad Nasril

https://www.youtube.com/@kelaskodular-ahmadnasril

 

METRIC RAT AI2

https://ai2.metricrat.co.uk/home

 

追加：今一番興味をそそるYouTubeを忘れていました。

Tutorials Azaotl

https://www.youtube.com/@azaotl