中秋节:手把手教你3小时做一个APP送给恋人
中秋送什么礼物给心爱的Ta
这个问题每年都会令你死很多脑细胞吧?送花、送衣服、送iPhone7?太没创意了吧!卡洛斯老师准备教童鞋们用高冷的IT技术来制造一份温馨有爱的礼物——花3个小时做一个温馨有爱的APP。
做一个APP很简单,只要你懂上网,就够了!剩下的事情交给卡洛斯老师。
帮助单身狗
如果你是一位有暗恋对象的单身狗,我会鼓励你做APP向Ta表白。这个APP是你亲手为Ta做的,专属于Ta的礼物,诚意满满!
也许你还不够优秀,但你可以做到与众不同,可以令Ta对你印象深刻——做一个APP,把你想说的话放进去。
开始制作APP前,我需要特别说明:本教程教大家制作安卓APP,不是苹果iOS APP。请确保你有一台安卓手机用于开发。如果收礼人(你那位心爱的Ta)没有安卓手机,这个礼物恐怕送给Ta也没用,除非你再买一台新安卓手机给Ta。本文教各位使用美国麻省理工学院发布的免费的APP制作平台App Inventor(下文简称AI)来开发。关于AI的介绍,请见我的上一篇教师节教程,本文不再复述。
如果你学习过我的上一篇教师节教程,这次你只需花半小时就可以完成作品。如果你是第一次学习我的教程,大概花3小时可以完成你的作品。
下载和安装样例
在动手开发前,为了供大家先睹为快,我做了一个叫“送给Mandy”的APP样例。大家把样例安装到手机里,看看做好的APP是长什么样的。下载和安装方法如下:
Step 1:在你的安卓手机中安装手机QQ。然后申请入我的App Inventor答疑QQ群(群号见我的简书个人介绍);
Step 2:在群文件中,找到“中秋节专题”的文件夹,点击下载文件夹里面的To_Lover_Mid_Autumn_Day.apk.zip文件,下载完成后QQ自动解压文件,你会看到一个叫To_Lover_Mid_Autumn_Day.apk的APP安装包,点击安装它。如果你的手机会出现下图的APP图标,表示安装成功;
APP的图标是收礼人的头像我简单介绍一下这个APP样例。APP的图标是收礼人的头像;打开APP,会出现欢迎动画,动画结束后会提示用户摇一摇手机,像微信摇一摇那样摇动你的手机,界面切换到一个女孩的屏幕,这个女孩是收礼人的照片;APP会播放轻快的背景音乐;界面的底部是你要对Ta说的表白的话,点击“下一句”按钮可以看下一句话。下面是APP的截图:
开始APP制作
1、导入项目
Step 1:电脑登录你的QQ,跟上节的Step 1一样申请入QQ群(如果已入群,请略过)。在群文件中,打开“中秋节专题”文件夹,把文件夹里面的To_Lover_Mid_Autumn_Day.aia文件下载到你的电脑里,该文件在下面Step 3会用到;
Step 2:在电脑里下载安装Chrome(百度可以搜索到安装文件),不能用Windows自带的IE浏览器,使用Firefox、Salari也OK。安装好后,使用浏览器打开我为大家准备好的中文App Inventor网站,网址请见我的简书个人介绍。如果你第一次使用,请花1分钟注册个新账号。然后使用账号登录AI系统。如果浏览器出现下图的界面,表示登录成功:
如果你曾经使用过AI,登录成功后可能会出现下图的界面:
出现上面两个界面中的任意一个,都是OK的。
Step 3:点击界面顶部菜单“项目”->“导入项目(.aia)”,选择To_Lover_Mid_Autumn_Day.aia文件,点击[确定]按钮。如果出现下图的项目列表界面,并且界面里出现“To_Lover_Mid_Autumn_Day”的工程名称,表示导入成功。
项目列表界面接着,请点击工程名“To_Lover_Mid_Autumn_Day”,进入APP编辑界面(如下图)。如果你曾经使用过AI开发APP,项目导入成功时,也可能会跳过项目列表界面直接出现下图界面:
APP编辑界面各位看官,当你看到界面中间出现了一个呆萌的黄色月亮,本环节“导入项目”就操作完成。我们愉快地进入下一环节。
2、定制你的APP
Step 1:请准备好一张Ta的照片,用来做APP图标。请在上图所示的APP编辑界面的最右边的组件属性区,寻找“图标(无...)”这个属性,按照下面的教学动画演示,替换APP图标:
替换APP图标操作演示Step 2:APP的名字也要修改。我们在“图标”这个属性上方,寻找“AppName”这个属性。把属性的当前值“送给Mandy”,修改为你喜欢的名字;
Step 3:然后,按照下图教学动画,切换到另一个屏幕。该屏幕的名字叫SayToYou;
切换屏幕的操作演示当你看到一个女孩的画面时,你已进入SayToYou屏幕。
Step 4:在SayToYou屏幕中,你会看到一个女孩的照片。这个照片是收礼人的照片,我们要替换它。请点击界面右边的组件列表区,选择列表顶部的SayToYou项(如下图);然后在最右边的组件属性区,找到“背景图片(Ta.jpg...)”属性,参考上面Step 1替换APP图标的方法,把背景图片替换成你心爱的Ta的照片。
组件列表Step 5:在SayToYou屏幕中,设置了一首轻快的爱情背景音乐。你可以考虑把背景音乐替换成Ta喜欢的某一首歌哦。首先,你从网站下载那首歌的mp3,然后点击上图“组件列表”中,最下方的“背景音乐”,接着你会看到最右边的组件属性区域中,出现“源文件(love_background_music...)”属性,把该属性的值替换成你刚下载的那首mp3。替换方法与Step 1相同。
Step 6:点击界面右上角的白色按钮[逻辑设计],屏幕会切换到逻辑设计模式,然后找到下图的积木块。积木块有5句向情人告白的话,请把这5句话改为你的告白语。
5句告白语Step 7:接着我教大家打包项目,生成最终的安卓APP。点击顶部菜单“打包apk”下的二级菜单“打包apk并下载到电脑”。此时,会出现一个进度条,耐心等待进度条运行结束,进度条自动消息,此时不要做任何才做,继续耐心等待。最后Chrome浏览器会提示有一个叫To_Lover_Mid_Autumn_Day.apk的文件下载。这个apk是就是做做好的作品。
如何把APP安装到手机?
在电脑里打开电脑版QQ,安卓手机上也打开手机QQ,把apk文件通过电脑版QQ传送到手机QQ,手机QQ接收到后,点击apk文件进行APP安装。
Step 8:最后一步,在你的安卓手机上运行APP,欣赏和体验你的作品。如果你对刚才替换的图片、背景音乐不满意,可以重复一遍上面Step 1~7的操作,对它们进行调整。
APP做好后怎么发给心爱的Ta?也是用QQ发呗。
如果你完成了以上的14步操作,意味着你经历了一次完整的APP开发过程,并做出了你的作品。
这是一份珍贵的礼物,金钱无法衡量,因为你亲手注入了爱。
本教程如果有疑问,可以进答疑QQ群,我会在群里给大家解答问题。