这份教程将从零开始，带你全面了解 App Inventor,从基础概念到实际项目开发。

第一部分：App Inventor 简介

什么是 App Inventor？

App Inventor 是一个由 Google（后由麻省理工学院 MIT 接手）开发的在线可视化开发平台，它允许用户通过图形化的“积木块”来创建功能丰富的安卓应用程序。

App Inventor 的优势

• 零编程基础入门：完全基于积木块，像玩乐高一样编程,直观易懂。
• 快速原型开发：可以非常快速地将想法变成一个可运行的应用,验证创意。
• 实时预览：连接手机或模拟器后，代码修改后可以立即看到效果,开发效率高。
• 免费开源：所有资源免费，只需一个 Google 账号即可开始。

谁适合学习 App Inventor？

• 中小学生：作为编程启蒙,培养计算思维和逻辑能力。
• 编程初学者：了解应用程序的基本结构和逻辑，为学习其他语言（如 Python, Java）打下基础。
• 教师：用于教学，开展 STEAM 教育。
• 创意工作者：快速制作自己的应用原型或工具。

第二部分：准备工作

在开始之前,你需要准备以下两样东西：

Google 账号

这是登录 App Inventor 官方网站的必要条件。

一台安卓手机（推荐）或安卓模拟器

你有两种方式来运行和测试你的应用：

• 连接真实安卓手机（强烈推荐）

  1. 在手机上启用 “开发者选项” 和 “USB 调试”。
  2. 用 USB 数据线将手机连接到电脑。
  3. 在 App Inventor 编辑器中，点击 "连接" -> "USB",选择你的手机型号即可。

• 使用安卓模拟器

  1. 在电脑上安装一个安卓模拟器，如 BlueStacks、NoxPlayer 或官方的 Android Emulator。
  2. 启动模拟器并确保它正常运行。
  3. 在 App Inventor 编辑器中，点击 "连接" -> "模拟器",选择你安装的模拟器即可。

第三部分：App Inventor 开发环境详解

登录 appinventor.mit.edu 后,你会看到以下三个主要区域：

组件设计器

这是你的“画布”或“设计界面”，你可以在这里从左侧的“组件面板”中拖拽控件到中间的“预览区域”,来设计你的应用界面。

• 组件面板：包含所有可以添加的控件，如按钮、标签、文本框、列表、传感器等。
• 预览区域：你的应用界面会在这里实时显示。
• 属性区域：当选中一个组件时，这里会显示它的所有属性（如文本、颜色、大小等）,你可以在这里直接修改。

逻辑设计器

这是你的“代码编辑器”，所有的程序逻辑都在这里完成,界面分为三部分：

• 抽屉：包含所有可用的“积木块”，按功能分类（如控制、逻辑、列表、传感器等）。
• 工作区：中间的空白区域,你在这里拖拽积木块来编写程序。
• 组件列表：列出了当前项目中所有的组件（包括界面组件和非界面组件）。

临时变量

在逻辑设计器中，你可以创建临时变量来存储数据，比如数字、文本、列表等,这些变量只在当前屏幕的程序中有效。

第四部分：核心概念

组件

构成应用的基本元素,组件分为两类：

• 界面组件：用户能看到和交互的元素，如按钮、文本框、标签等。
• 非界面组件：在后台工作的元素，如计时器、蓝牙、摄像头等。

属性

组件的特征或设置，按钮的 Text（显示的文字）属性、BackgroundColor（背景色）属性。

事件

组件可以“感知”到的事情。

• Button1.Click：用户点击了按钮。
• Clock1.Timer：计时器每隔一段时间触发一次。
• Phone1.AccelerometerChanged：手机被晃动。

块

构成程序逻辑的代码块，事件块是程序的入口，当事件发生时，它内部连接的“执行块”就会被依次执行。

第五部分：经典案例教程（从简到难）

你好，世界！

这是所有编程语言的第一个程序。

目标：点击按钮，在标签上显示 "Hello, App Inventor!"。

步骤：

1. 设计界面：

   • 从 Palette 中拖拽一个 Button（按钮）到 Viewer 中，将其 Text 属性改为 "点击我"。
   • 再拖拽一个 Label（标签）到 Viewer 中，将其 Text 属性清空。

2. 编写逻辑：

   • 切换到 Blocks 编辑器。
   • 在 Button1 的抽屉中找到 when Button1.Click 事件块,将其拖到工作区。
   • 在 Label1 的抽屉中找到 set Label1.Text to 块，并将其拖到 when Button1.Click 事件块内部。
   • 在 Text 抽屉中找到 text ("Hello, App Inventor!") 块，将其嵌入到 set Label1.Text to 块的空白处。

3. 运行测试：

   • 连接你的手机或启动模拟器。
   • 点击工具栏上的 "连接" -> "AI Companion"，用手机浏览器扫描二维码，或直接点击 "New Emulator" 启动模拟器。
   • 在你的设备上点击 "点击我" 按钮,标签上就会显示文字。

简单计算器

目标：输入两个数字,点击按钮后计算它们的和并显示。

步骤：

1. 设计界面：

   • 拖入两个 TextBox（文本框），分别命名为 TextBox1 (数字1) 和 TextBox2 (数字2)。
   • 拖入一个 Button（按钮），命名为 Button1，Text 属性为 "计算"。
   • 拖入一个 Label（标签），命名为 Label1，Text 属性为 "结果："。

2. 编写逻辑：

   • 问题：TextBox 里的内容是文本,不能直接相加。
   • 解决：需要将文本转换为数字，使用 number 块。
   • 在 Button1.Click 事件块内部：
     • 从 Math 抽屉中找到 (加) 块。
     • 从 TextBox1 抽屉中找到 TextBox1.Text 块，并将其放入 块的第一个空白处。
     • 从 Text 抽屉中找到 number 块，将 TextBox1.Text 嵌入其中。
     • 对 TextBox2 做同样的操作，放入 块的第二个空白处。
     • 从 Label1 抽屉中找到 set Label1.Text to 块。
     • 从 Text 抽屉中找到 join (连接) 块，将 Label1 的初始文本 "结果：" 和计算结果连接起来，然后放入 set Label1.Text to 块。

3. 运行测试：

   在两个文本框中输入数字，点击 "计算" 按钮,查看结果。

摇一摇换壁纸

目标：晃动手机,随机更换背景颜色。

步骤：

1. 设计界面：

   • 从 Sensors (传感器) 抽屉中拖拽一个 AccelerometerSensor (加速度传感器) 到 Viewer 中（它不会显示在界面上）。
   • 从 Layout (布局) 投掷中拖拽一个 VerticalArrangement (垂直布局) 到 Viewer 中,作为背景容器。
   • 选中 VerticalArrangement，在 Properties 中将其 BackgroundColor 设置为任意一种颜色。

2. 编写逻辑：

   • 在 AccelerometerSensor1 的抽屉中找到 when AccelerometerSensor1.Shaking 事件块。
   • 从 Control 抽屉中找到 if ( 块，放入 when...Shaking 事件块内部。
   • 从 Logic 抽屉中找到 true 块，放入 if 的条件槽中（因为只要摇动就触发，所以条件永远为真）。
   • 在 if 块的 then 部分：
     • 从 Color 抽屉中找到 random color (随机颜色) 块。
     • 从 VerticalArrangement1 抽屉中找到 set VerticalArrangement1.BackgroundColor to 块。
     • 将 random color 块嵌入其中。

3. 运行测试：

   在手机上晃动,观察背景颜色是否随机变化。

第六部分：学习资源与进阶

官方资源

• 官方文档：App Inventor Documentation - 最权威的参考资料。
• 教程：官方提供了大量分步教程,是学习的最佳路径。

社区与论坛

• MIT App Inventor Forum：forum.appinventor.mit.edu - 官方论坛，可以提问和解答问题,有大量高手和活跃用户。
• 中文社区：搜索 "App Inventor 中文社区" 或 "App Inventor 教程",可以找到很多国内爱好者维护的网站和博客。

进阶方向

当你掌握了基础后,可以尝试以下功能：

• 数据存储：使用 TinyDB 或 TinyWebDB 保存应用数据。
• 多媒体：使用 Sound、VideoPlayer、Camera 组件。
• 网络：使用 Web 组件获取网页信息。
• 绘图：使用 Canvas 组件进行绘图和动画。
• 高级界面：使用 ListView、Spinner 等组件构建更复杂的列表。

App Inventor 是一个极佳的入门工具，它将编程的抽象概念具体化、游戏化，让你在乐趣中学习，不要害怕尝试，大胆地去拖拽积木块,你会发现创造一个属于自己的应用原来如此简单！

祝你学习愉快！