教师节:手把手教你一天内做出高逼格的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的制作方法,并在简书这里连载,敬请期待。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容