美文网首页APP@IT·互联网工具癖
中秋节:手把手教你3小时做一个APP送给恋人

中秋节:手把手教你3小时做一个APP送给恋人

作者: 卡洛斯老师 | 来源:发表于2016-09-05 16:40 被阅读2364次

    中秋送什么礼物给心爱的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群,我会在群里给大家解答问题。

    相关文章

      网友评论

      • 52098de584a2:我也try try
      • Anntony:谢谢分享~
      • 想不出一个昵称:新技能get了,谢谢老师,提前祝您中秋快乐。
        卡洛斯老师:谢谢你
      • e7770b634565:点个赞,火钳刘明
      • 1f5d6715331e:试一下
        卡洛斯老师:@1撩 欢迎试,遇到问题可以找我
      • 324fe82970db:老师辛苦了
      • 955efb2c9d34:谢谢老师了,提前祝你中秋快乐。:+1:🏼
        卡洛斯老师:@GYGIchliebedich 多谢你的祝福和支持,很开心
      • 143d4bd832ad:其实很简单,大家注册一个微信个人订阅号,利用免费第三方模板做个H5界面,直接发给你想发的人就可以了
        卡洛斯老师:@MorrisonSa 做app和做h5有很大的区别。h5时放在别人的服务器上,不是属于你的,而且依赖别人的服务器,一旦服务器把你的h5撤掉,它就没了。而app是完全属于你自己的,可以永久保存,不依赖别人的服务器
      • 673ee3d4c5e3:有点简单
        673ee3d4c5e3: @金康帅 ☺创意还是蛮好的
        金康帅:@哎呦奋斗的小乌龟 确实太过简陋了一点。一天时间绝对能做出酷炫的送上祝福的app

      本文标题:中秋节:手把手教你3小时做一个APP送给恋人

      本文链接:https://www.haomeiwen.com/subject/imurettx.html