使用 Thunkable 編寫 API - Technovation Girls

Learn what Application Programming Interfaces (APIs) are
Use an API in an app to get information

活動

以下是本課的活動：

Activity: Fruit Nutrition App

API

API stands for application programming interface.

An API is a way you can get information from a website or database.

While cloud storage is usually internal information shared within your app, APIs allow your app to access external information from the internet.

Let’s say you are building an app to help people decide what to wear based on the weather. You could spend lots of time uploading data about the weather into a database, but there are many websites that show the weather.

A better solution would be just to grab data from a weather website and show it to your users through your app, by using an API.

Here is a good video explainer of how APIs work.

To use an API, you have to:

Find a website that uses APIs. Here is a list of public APIs that are available, listed by topic.
Read their documentation for how to use their APIs. Most sites give examples.
Some sites require you register for an API key before using their APIs. Note, some APIs cost money to use.
Incorporate the API code into Thunkable.

CODING EXAMPLES

以下是一些教程，可為您提供在 Thunkable 中使用 Web API 的練習。

注意！ 在此處列出的一些教程中，Web API 元件顯示在「設計器」視窗中。但是，在當前版本的 Thunkable 中，您將在 Blocks Editor 的 Advanced 下找到 Web API 元件。

按兩下“+”以添加Web API元件。您可以在顯示的屬性視窗中或代碼中新增 URL 和查詢參數。對塊進行編碼應該是相同的。

如何使用 Web API

此視頻概述了 API 和 Thunkable Web API 元件。

Google Maps

Here is a very basic example of using the Google Maps API 從您自己的應用啟動Google地圖應用，並定位到特定位置。

Weather

This example tutorial uses an API from OpenWeatherMap.

更多教程

可作為不同 Web API 示例的整個播放清單進行 Thunkable。

ACTIVITY: FRUIT NUTRITION APP

Estimated time: 30 minutes

Display Fruit Information using API

在 Thunkable 中打開啟動器專案。
Run the app to see how it works.
製作專案的副本，以便進行編輯。
Check the example JSON string below to understand what it looks like.
Right now, the app displays only Calorie information. Add a second label below CalorieLabel to display one of the other nutritional values returned.

打開 Starter Project

導師小貼士

Best practices: Fun Fact, what does json stand for? “JavaScript Object Notation”. Json was created in 1999 and almost every single piece of data that we use or get every day needs to use json in some way. If we didn’t have json, almost every bit of tech we have would be useless. Almost all data from the cloud needs json to pass data.

Guiding Questions to ask students:

Can you create an API between you and your friends?

If one of your friends says “/hello” you are going to respond with a greeting. That’s essentially an API. One person requests something (the hello) and then you respond back with the greeting of your choice. Could there be more complicated examples? /hug, /triviaQuestion, /story, /weekendSummary

導師提示由 AmeriCorps 提供支援。

Here is an example JSON string returned by FruityVice for banana.

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