人人都能开发APP(一)——App Inventor:Android App模型快速搭建

u=3321497414,2718395612&fm=21&gp

App Inventor最早是Google Lab开发的一个android在线编程项目。该项目通过高度封装大幅简化了Android编程操作,只需要简单的拖拽就能快速实现Android App的创建。2012年该项目交付给麻省理工学院,作为一个非营利在线编程教育项目运行,更名为MIT App Inventor 

有兴趣学习Android编程的同学,都应该接触过Eclipse或Android Stuido。相比上述两款开发编辑器,App Inventor不需要安装SDK和配置环境变量,一切都是在线完成,我们只需要专注于用户界面和业务逻辑即可。任何编程语言都是从“Hello World”开始的,下面我们通过创建一个完整的“Hello World”项目来熟悉App Inventor开发流程。

1.进入在线开发环境

点击下面的网址:http://appinventor.mit.edu/explore/,进入MIT App Inventor官方主页,上面有App Inventor的最新资讯、操作视频以及实例demo。点击右上方的“create apps”按钮,即可进入开发环境。开发环境的直接打开网址是:http://ai2.appinventor.mit.edu/,可以收藏后直接由此进入开发环境。

1

2.注册账号

在线开发需要注册Google账号,不会翻墙的同学可以使用目前国内的App Inventor服务器:http://app.gzjkw.net/login/,这个不需要翻墙注册。另外一个解决办法是下载App Inventor离线版,这个后面再详细说明。

3.创建项目

成功登陆账号后,App Inventor会显示欢迎界面,关掉后在右上角菜单栏选择Projects–Start  new project,在弹出的创建项目对话框中输入工程的名字——“Helloworld”,点击确认后进入项目主界面。

2

4.认识主界面

项目主界面是App Inventor项目操作的主要工作区域,从左至右分为四个部分:

(1)Palette:组件面板

  • 查看组件功能

组件面板包括了按钮、文本框、语音识别器、传感器(重力感应等)、数据库、绘图板及社交分享等所有能在App Inventor中使用的组件。在每个组件后面都有个问号标记,点击该标记即可显示该组件的用途和说明。

  • 可视组件与非可视组件

要想使用某个组件直接拖动该组件到视图面板(Viewer)即可。组件根据能否直接显示分为两类:可视组件与非可视组件。可视组件主要包括我们能在屏幕上直接看到的部件,比如按钮、文本框、复选框等;非可视组件主要是我们无法在屏幕上直接看到但实际上存在的,比如重力感应器、数据库等。

  •  组件排版

在我们进行拖动操作后,可视组件会直接显示在视图面板的手机屏幕模型上,非可视组件则会显示在屏幕模型下方。如需要对可视组件进行排版,可以在布局组件栏(Layout)中选择想要的布局,直接拖动到屏幕模型中。我们可以拖动一个按钮到视图面板中,并命名为“Button”;然后再拖动一个对话框到视图面板中,命名为“Notifier1”。

(2)Viewer 视图面板

App Inventor采用可视化布局,所见即所得。在视图面板的主要部分是屏幕模型,系统已经默认建好了screen1的屏幕界面,所有添加的没有隐藏的组件都会显示在屏幕模型中,如果想显示隐藏了的组件,选中屏幕模型上面的“Display hidden components in Viewer”复选框即可。

(3)Components 组件列表面板

该面板会显示所有用户已经添加的组件,并根据逻辑关系排列。最上层是系统自带的screen1组件,下层依次是用户添加的组件。组件的删除、重命名都可以在该面板中操作。同时,也可以自定义添加图片、音频等素材到该面板下方的素材库中。

(4)Properties 组件属性面板

组件的所有属性:名称、颜色、宽/高度、交互方式、文本、显示状态等都在这里设置,修改后即可在视图面板中显示效果。

5.程序逻辑设计

程序逻辑设计是App Inventor项目的亮点,通过搭积木的方式,不需要懂编程语言就能完成程序的业务逻辑。点击主界面的右上角“Blocks”(逻辑设计)按钮,进入程序逻辑设计页面。

 

(1)在页面左侧的模块面板中,含有程序预置的逻辑块以及我们选择的组件。我们点击“Button”组件,中间的工作面板会弹出一系列逻辑块。我们选择“when Button click  do”模块,拖动到工作面板。

3.1

(2)点击模块面板的“Notifier1”组件,在弹出的逻辑块中选择“call Notifier1 showAlert notice”,将该逻辑块与(1)中的“when”逻辑块拼合在一起。

3.2

(3)点击模块面板的“built-in”下面的“text”组件,在弹出的逻辑块中选择第一个空白逻辑块,拖动到(2)中的“call Notifier1 showAlert notice”模块,并与之拼合。

3.3

(4)点击(3)中的空白逻辑块,在引号中输入“Hello world!k-code.com”即完成逻辑设计工作。

4

5

这个逻辑块的功能是:当用户点击“Button”这个按钮时,会弹出一个消息提示框,显示的内容是“Hello world!k-code.com”。

6.打包运行

完成界面设计和逻辑设计后,程序就可以打包成apk文件在手机或模拟器上运行了。下载打包后的apk文件有两种方式:扫描二维码或者下载到本地电脑。由于扫描二维码的方式需要翻墙,我们可以下载到本地后再传到手机或直接在模拟器上运行。

回到主界面,点击Build菜单下面的“App(save .apk to my computer)”即可。大约一分钟左右(与程序包大小、电脑的配置和网络速度有关)即可下载到本地电脑上。如电脑上装有Android模拟器可直接双击运行,没有模拟器可传到手机上后运行,点击按钮,即可看到“Hello world!k-code.com”的信息提示框。到这里,恭喜你已经用App Inventor完成了第一个App开发!

1042502952  1042502955

7.下载离线版本

离线版本是由编程爱好者老巫婆开发的,下载地址:App Inventor离线版。有时由于网络问题,可能下载不太好用,大家也可以登陆同样是由老巫婆开发的在线版:App Inventor 本土版

8.更多教程

爱好者们用App Inventor开发出了很多实用的软件和华丽的游戏,具体可以参见App Inventor官网或各种论坛。比较推荐的教程和实例可以看老巫婆的书籍,在这里推荐两本本比较适合入门的教程:App Inventor开发集锦App Inventor编程实例及指南;这本比较适合作为大作业练手用:App Inventor开发探底:俄罗斯方块开发笔记

大家也可以根据自己的兴趣爱好,动手做一些项目。在我学习的过程中,感觉只有亲自动手去做才能有所收获。

9.关于语言版本

现在已经有简体中文版,在主界面语言栏中可以自由切换为中文版。为了适应其他软件的开发环境以及阅读各种英文相关资料,还是推荐使用英文版。

10.App Inventor的缺点

高度封装化意味着高度不自由,用App Inventor来开发各种应用软件或游戏都会有很大的限制,很多功能也实现不了。我觉得更适合用来快速做一个模型或培养兴趣,真正开发起来还是得用Eclipse或者Android Studio。

欢迎大家交流~

 

 

 


欢迎关注微信公众号:熊文涛的学习笔记

发表评论

电子邮件地址不会被公开。 必填项已用*标注