教师节:手把手教你一天内做出高逼格的APP送老师
一天就能做出APP
教师节来了,你和同学们准备什么礼物送给老师呢?鲜花、贺卡?太土了!
不如你亲手做一个安卓APP给老师吧!专门为老师做一个独一无二的APP,可能是今年教师节最有逼格的事情!当老师的手机上放着你所做的APP,Ta一定会经常想到你的。
什么?你不是读计算机的,不会做APP?
其实,做一个APP很简单,只要你懂上网,就够了!剩下的事情交给卡洛斯老师!我会教你使用美国麻省理工研发的编程软件App Inventor,在一天内开发出自己的APP。
先自我介绍一下,我是卡洛斯.陈,从2001年开始做软件开发,到现在已经有10多个年头了,曾经在两家中国上市公司(唯品会vip.com、神州数码)和一家美国上市企业Teradata担任软件工程师和技术经理的岗位。我现在是美国麻省理工所发布的手机编程软件“MIT App Inventor”的布道者。
我正在努力普及掌握互联网技术,让非计算机课班出身的人学习技术,用技术来点亮生活!
如果你不是读计算机的,请不用担心,只要你会上网,然后按照本文的教程一步步地操作就能成功。
我懂你,所以我知道怎样帮助你
你知道吗?其实卡洛斯老师也不是计算机专业出身的,读的学校也不是全国名校。
我本科在浙江理工大学读机械、在广东外语外贸大学读工商管理在职研究生。2000年在大学自学了一年的计算机编程,当时中国互联网很火,我就开始帮人做网站赚钱。2004年毕业找的第一份工作不是做机械,是做软件开发的。从那时起,我就在互联网行业的技术岗位上混了那么十多年,还混到了技术经理的岗位。哈哈,所以我是一个有故事的人。由于我的经历故事并不是本文的主题,所以就此打住,也许我会在未来发表的新文章里讲讲我的故事吧。
最后,我非常有信心地告诉大家,不是计算机专业的人也能做出自己的APP。我懂你,所以我知道怎么样帮助你。
好,我们正式进入主题:跟着我一步步做出你们的第一个APP。
什么是MIT App Inventor?
进入实操前,我要先介绍一下MIT App Inventor这款安卓编程工具,接下来我们要跟它打交道:
App Inventor(下文简称AI)原是Google实验室(Google Lab)的一个子计划,由一群Google工程师和勇于挑战的Google使用者共同参与设计完成。Google App Inventor是一个完全在线开发的Android编程环境,抛弃复杂的程式代码而使用积木式的堆叠法来完成您的Android程式。除此之外它也正式支持乐高NXT机器人,对于Android初学者或是机器人开发者来说是一大福音。(AI还是挺强大的!)
AI 2012年1月1日移交给美国麻省理工学院(MIT)行动学习中心,并已于3月4日公布使用。现在AI是由麻省理工发布和维护的一款免费的Android APP编程工具。
AI目前只支持开发安卓APP,不能开发苹果的iOS APP。期待将来麻省理工的教授们研发出可以在AI中开发iOS APP
毫无疑问,AI是一匹出自豪门,血统纯正的良驹。下来,我们来一起学习如何驾驭它。
小试牛刀
1、在AI平台注册新帐号
AI平台是不支持IE浏览器的,它支持Chrome、Safari、Firefox三种浏览器,其中Chrome是首选。所以这里我们统一约定使用Chrome。
请你在电脑里面下载最新版的Chrome。如果不知道怎么安装Chrome,请百度,或加入QQ答疑群(群号可以在我的个人简介中找到,申请入群的暗号是“简书”)。
安装并打开Chrome,输入AI平台的网址(网址在我的个人简介中找)。
Step 1:输入网址后,会看到欢迎语,点击欢迎语下方的“进入 App Inventor2”超链接;
Step 2:进入第二个页面后,点击页面下方的“申请新账号/重设密码”超链接;
Step 3:输入你的邮箱地址,点击[Next]按钮;
Step 4:输入密码,点击[设置密码]按钮;
Step 5:当你看到下图界面时,表示你已经成功注册帐号,并正式进入AI的主操作界面了。
注册成功后,正式进入AI项目列表界面2、创建新项目
Step 1:点击上图左上角的[新建项目],出现弹出框,在项目名称中输入一个英文名称,比如HappyTeachersDay(注意,名称由是英文、数字、下划线组成,不能有中文、空格、逗号、单引号等字符)。点击[确定]按钮;
Step 2:现在,你会看到你刚才创建的项目已经出现在项目列表中,你刚才输入的项目名称以黑色粗体风格的字体显示,请点击这个黑色粗体的项目名称;
Step 3:当你看到下图界面时,表示你成功创建了新项目。
APP编辑界面3、定制个性化的APP
由于本次的APP主题是教师节,为老师做一个APP。我们可以把APP的icon图标改成老师的真人头像,这样非常能够体现这个APP就是老师专属的。所以接下来,我们更改APP的图标。
Step 1:请用手机拍一张老师的照片,并用美图类的软件/APP把照片里的老师头像剪切出来,最后生成一张长宽为180像素x180像素的图片,这个图片就是我们的APP图标。接着,请在上图所示的APP编辑界面的右边,寻找“图标(无...)”这个属性,按照下面的教学动画操作一遍:
修改APP图标动画演示Step 2:然后,APP的名字也要修改。我们在“图标(无...)”这个属性上方,寻找“AppName”这个属性。把属性的当前值HappyTeachersDay,修改为“致xx老师”。如果不喜欢“致xx老师”,可以自行修改。
Step 3:最后一步就是,生成你的第一个安卓APP了。点击顶部菜单“打包apk”下的二级菜单“打包apk并显示二维码”。此时,会出现一个进度条,耐心等待进度条运行结束,最后屏幕会弹出一个下载APP的二维码,如下图:
下载APP的二维码请在你的安卓手机上,安装360手机助手,打开360手机助手,点击首页顶部搜索栏右边的扫码图标,开启扫码功能,然后对着屏幕的二维码进行扫码。扫码成功会显示下载APP。下载并安装好APP后,你会看到刚才开发的APP就出现在手机上了!APP的图标是你设置的图标,APP的名字也是你设置的名字,这个APP完全是由你自己开发的。看到它,一阵喜悦涌上心头!
你开发的第一个APP
你开发的第一个APP恭喜你!你已经完成了一个APP开发的基本流程。我设计小试牛刀训练的目的有两个,一是让你体验APP开发的完整的流程;二是每一个练习都是能够有成果出来,当你展示自己成果的时候,不仅给你带来喜悦,更会使你增强信心,这样你就不会半途而废了。
如果上面的练习你有疑问,可以加我的答疑QQ群,群号上文已经说过。
学习也可以像吃快餐一样快速
小试牛刀是为你准备的热身运动,接下来我们要懂真格了哦!
我在本文的开头就向大家承诺,保证你可以在一天内开发出APP送给老师。所以,我准备了一份快餐式的教学方法。我们马上开始吧!
Step 1:点击顶部菜单“项目”->“我的项目”,屏幕显示项目列表页面;
Step 2:你创建的HappyTeachersDay项目的前面有一个勾选框,选中勾选框,点击上方的[删除项目]按钮,删除项目;
Step 3:进入答疑QQ群,在群文件里下载HappyTeachersDay.aia和HappyTeachersDay.apk两个文件。HappyTeachersDay.aia是卡洛斯老师已经做好的项目文件,HappyTeachersDay.apk是通过aia项目打包而成的APP。APP里一个有意思的功能是,手机摇一摇后,会出来学生的照片以及学生的节日祝福留言,不断摇就能够看到所有学生的轮换照片和祝福语。你可以通过360手机助手安装apk到你的安卓手机中,体验一下我开发的这个APP。
Step 4:点击顶部菜单“项目”->“导入项目(.aia)”,选择你刚才下载的aia文件,点击[确定]按钮,此时,你的项目列表会出现HappyTeachersDay这个项目,这表示你成功导入了我的项目;
Step 5:点击项目名称,进屏幕出现下图,就表示进入了APP编辑界面:
APP编辑界面Step 6:参考上面小试牛刀的方法,对上面项目的图标、AppName进行修改。图标修改成老师的头像,AppName改为“致XX老师”;
Step 7:接着,请在上图所示的APP编辑界面的右边,寻找“标题”这个属性,把“xx年2班祝陈老师教师节快乐”这段文字修改成你喜欢的文字;
Step 8:请你拍6幅同学们的照片,照片的格式要求是jpg格式,然后把照片的名字分别修改为s1.jpg、s2.jpg、s3.jpg、s4.jpg、s5.jpg、s6.jpg。这6幅照片待用。
Step 9:在上图的APP编辑界面的右下角有一个素材的区域,里面列出了本项目用到的声音和图片文件,其中就有s1.jpg、s2.jpg......等6个文件,我们现在把它删除,然后上传Step8的6幅待用图片。具体操作可见下面动画:
替换照片的教学动画Step 10:完成6幅照片的替换后,点击APP编辑界面右上角的白色按钮[逻辑设计],屏幕会切换到逻辑设计模式,然后找到下图的积木块。积木块有6句学生向老师准备的节日祝福语,你可以把这6句话改为你的祝福语。
逻辑设计模式下的祝福语积木块Step 11:最后一步就是,对项目进行打包,生成最终的安卓APP。点击顶部菜单“打包apk”下的二级菜单“打包apk并下载到电脑”。此时,会出现一个进度条,耐心等待进度条运行结束,最后Chrome浏览器会提示有一个叫HappyTeachersDay.apk的文件下载。这个apk就是我们最终生成的APP安装包。你可以在电脑里安装360手机助手,用USB线连接手机,把apk安装到你的手机。
到这里,你已经经历了一次完整的APP开发过程,并为教师节做出了一款APP送给你的老师。
经过了上面的11步教学,我们感受到App Inventor这个工具的强大。你是不是有很强烈的愿望希望深入去学习AI?你是不是觉得我上面教的快餐式方法太过简单,不能弄懂AI的精粹?
确实,上面的快餐式学习方法是我已经把整个APP项目做好,大家只需在我的项目基础上做少量修改。这样做的优点是快速见效,1天就可以做出APP送给老师。但缺点是学到的APP制作知识比较少。所以,我打算通过录制教学视频,详细的介绍HappyTeachersDay.apk的制作方法,并在简书这里连载,敬请期待。