ThunkableでAPIをコーディングする

このレッスンでは ...

アプリケーション・プログラミング・インターフェース（API）とは何かを学びます
アプリでAPIを使用して情報を取得します

アクティビティー

このレッスンのアクティビティ：

アクティビティフルーツ栄養アプリ

API

API は Application Programming Interface の頭文字をとったものです。

APIとはウェブサイトやデータベースから情報を取得する方法です。

クラウドストレージはアプリ内で共有される内部情報のことですが、APIはアプリがインターネットから外部の情報にアクセスすることを可能にします。

例えば、天気から着る服を決めるためのアプリを作るとしましょう。天気に関するデータをデータベースにアップロードするのに多くの時間を費やすこともできますが、天気を表示するウェブサイトはたくさんあります。

より良い解決策は、APIを使用することによって天気予報のウェブサイトからデータを取得し、アプリを通してユーザーに表示することでしょう。

APIがどのように機能するかについてのわかりやすい解説ビデオがあります。

APIを使うには

APIを使用しているウェブサイトを見つけましょう。以下はリスト公開されているAPIの一覧です。
APIの使い方については、各サイトのドキュメントを読んでみましょう。ほとんどのサイトが例を挙げてくれています。
サイトによっては、APIを利用する前にAPIキーの登録が必要な場合があります。 APIによっては利用料がかかるものもあるので注意しましょう。
APIコードをThunkableに組み込みましょう。

コーディング例

以下はThunkableでWeb APIを使う練習をするためのチュートリアルです。

注意！ここに記載されているいくつかのチュートリアルでは、Web API コンポーネントは Designer ウィンドウに表示されています。しかし、Thunkable の現在のバージョンでは、Web API コンポーネントは Blocks Editor の Advanced にあります。

+をクリックしてWeb APIコンポーネントを追加します。表示されるプロパティ・ウィンドウで、またはコードでURLとクエリ・パラメータを追加できます。ブロックのコーディングは同じです。

ウェブAPIの使い方

このビデオでは、APIとThunkable Web APIコンポーネントの概要を説明します。

Google Maps

APIを使う際にとても基本的な例です。 Google Maps API を使えば、自分のアプリから特定の場所をターゲットにGoogle Mapsアプリを起動できます。

天気

このチュートリアルの例では Open Weather Map.

その他のチュートリアル

ThunkableによるさまざまなウェブAPIの例。

アクティビティ：フルーツ栄養アプリ

所要時間30分

APIを使った果実情報の表示

Thunkableでスタータープロジェクトを開く。
アプリを起動して動作を確認する。
プロジェクトのコピーを作成し、編集できるようにする。
以下のJSON文字列の例をチェックして、どのように見えるかを理解しよう。
現在、アプリはカロリー情報のみを表示しています。CalorieLabelの下に2つ目のラベルを追加して、返される他の栄養価のいずれかを表示します。

スターター・プロジェクトを開く

Tip

ベストプラクティスプラクティス 楽しい事実、jsonは何の略？「JavaScript Object Notation」の略。Jsonは1999年に作成され、私たちが毎日使用したり取得したりするデータのほとんどすべてが、何らかの形でjsonを使用する必要がある。もしjsonがなかったら、我々が持っている技術のほとんどすべてが役に立たないだろう。クラウドからのほとんどすべてのデータは、データを受け渡すためにjsonを必要とする。

生徒への質問

友人との間にAPIを作れるか？

友達の誰かが"/hello "と言ったら、あなたは挨拶で応えようとする。これは基本的にAPIだ。ある人が何か（hello）をリクエストしたら、あなたは好きな挨拶で返事を返す。もっと複雑な例があるだろうか？/hug、/triviaQuestion、/story、/weekendSummary。

メンターTipsは、AmeriCorpsから提供されたものです。

以下は、JSON文字列の例です。 FruityViceによって返される JSON 文字列の例です。

{ "genus": "Musa", 
  "name": "Banana", 
  "id": 1, 
  "family": "Musaceae", 
  "order": "Zingiberales", 
  "nutritions": 
     { "carbohydrates": 22, 
       "protein": 1, 
       "fat": 0.2, 
       "calories": 96,  
       "sugar": 17.2 
     } 
}