使用 Thunkable 对应用程序接口进行编码

  • 了解什么是应用程序编程接口 (API) 

  • 在应用程序中使用应用程序接口获取信息

这些是本课的活动:

应用程序接口

API 代表 应用程序编程接口.

应用程序接口是一种可以 获取从网站或数据库获取信息的方式。

云存储通常是应用程序共享的内部信息,而应用程序接口则允许应用程序从互联网访问外部信息。

云存储
www 连接到 3 部电话
应用程序接口

假设您正在开发一款应用程序,帮助人们根据天气决定穿什么衣服。您可以花费大量时间将有关天气的数据上传到数据库,但有许多网站可以显示天气。 

更好的解决方案是从天气网站抓取数据,然后通过应用程序接口向用户展示。

下面的视频很好地解释了 API 的工作原理。

要使用应用程序接口,您必须 

  1. 查找使用应用程序接口的网站。下面是一份 列表 按主题列出的可用公共 API。
  2. 阅读它们的文档,了解如何使用 API。大多数网站都会给出示例。
  3. 有些网站要求您在使用其 API 之前注册一个 API 密钥。 请注意,有些 API 的使用需要付费。
  4. 将应用程序接口代码纳入 Thunkable。 

编码示例

下面是一些在 Thunkable 中练习使用网络 API 的教程。

注意!在这里列出的一些教程中,Web API 组件显示在设计器窗口中。然而,在当前版本的 Thunkable 中,你可以在 "块编辑器"(Blocks Editor)的 "高级"(Advanced)下找到 Web API 组件。

单击 + 添加 Web API 组件。您可以在出现的属性窗口或代码中添加 URL 和查询参数。代码块的编码应该是一样的。

组件窗口 Thunkable 显示网络 API
本视频概述了 API 和 Thunkable Web API 组件。

下面是一个使用 谷歌地图 API 从自己的应用程序启动 Google 地图应用程序,锁定特定位置。

本示例教程使用了 OpenWeatherMap.

可作为不同网络应用程序接口示例的整个播放列表。

活动:水果营养应用程序

预计时间30 分钟

使用应用程序接口显示水果信息

  1. 在 Thunkable 中打开启动项目。
  2. 运行应用程序,看看它是如何工作的。
  3. 复制一份项目,以便进行编辑。
  4. 请查看下面的 JSON 字符串示例,了解它的外观。
  5. 现在,应用程序只显示卡路里信息。在 CalorieLabel 下方添加第二个标签,以显示返回的其他营养值之一。
开放式启动项目

最佳实践: 有趣的事实,json 代表什么?"JavaScript Object Notation(JavaScript 对象符号)"。json 创建于 1999 年,我们每天使用或获取的几乎所有数据都需要以某种方式使用 json。如果没有 json,我们所拥有的几乎所有技术都将毫无用处。几乎所有来自云端的数据都需要 json 来传递数据。

向学生提出指导性问题:

您能在您和您的朋友之间创建一个 API 吗? 

如果你的朋友说"/hello",你就会回应一句问候。这本质上就是一个 API。一个人提出请求(hello),然后你用自己选择的问候语进行回应。还有更复杂的例子吗?/hug、/triviaQuestion、/story、/weekendSummary

导师提示由 AmeriCorps 提供支持。

风格化的 A,海军蓝的 AmeriCorps 徽标

下面是 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
}
}

希望您成功添加了第二个含有原料药信息的营养标签!

如果您想查看可能的解决方案,请点击此按钮。 

反思

在应用程序中使用应用程序接口是一个非常强大的工具,但实施起来并不容易!

您必须花时间阅读网站的 API 文档,了解如何获取所需的信息。

互联网络
您认为这对您的应用程序有用吗?
您能找到提供所需信息的在线网站吗?
上一张幻灯片
下一张幻灯片

关键术语回顾

  • 应用程序编程接口 (API)- 从其他网站或数据库获取信息并在应用程序中使用的一种方式