Revision history and IPFS entry, back to latest
土豆炒青椒
IPFS What is this

Content Hash

小白自学代码做app~野路子也有春天(5)

土豆炒青椒
·
·
简单粗暴的教学终于迎来结束😅……最最最简单粗暴的一期……

接上期第7篇,在电脑上安装Vue并把localhost在本地浏览器跑起来后,本期要做的就是把之前做的网页弄到Vue里面去。

第八篇 学习框架原理

localhost跑起来后,代表环境安装成功。安装环境以后,你可以基于Vue框架去开发你想要的小app了。

8.1 从小demo开始学起

开发之前,你还是需要像学习html+css+JavaScript那样,去学习Vue:https://v3.vuejs.org/guide/introduction.html

在本期教学之前,我们使用的绝大多数教程都来自W3C school。W3C是一个优质免费代码学习平台,为初学者打开了新世界的大门。但是W3C的讲解略粗浅,所以在经历W3C school启蒙之后,你需要去寻找更多的学习平台。

所以本期的学习资料,我们逐渐过渡到看Vue官方文档。

Vue官方文档,和W3C类似,都有案例在线演示。如果你弄明白了html的各种head、h1、div……标签;css的class、id……;JavaScript的object、array、if-else、for循环以后,照着官方文档看下来,你也会弄明白Vue的各种method、data、props、component……

看完之后,你会发现Vue把html+css+JavaScript进行了科学规整,你之前弄懂的if-else条件判断、for循环在这里依然有用,只不过改更先进的方式运作了。

如果你觉得看官方文档太无聊,也可以去YouTube之类的平台搜一些视频教学,声画同步让学习过程变得很生动。

我连API都讲不明白,就不讲Vue了。网上一大堆教程,自己搜吧,都讲得比我清楚……


8.2 用Vue把之前的html页面跑起来

在第三期结束时,我们通过API把https://jsonplaceholder.typicode.com/albums显示在了html网页里,现在你用刚刚学来的Vue,把这玩意弄到第4期结束时的空白Vue项目里,弄完后你可以通过localhost在浏览器看到和之前一样的html……

localhost看到的和之前做好的html是一样的,为什么要废半天劲弄一个一模一样的东西?

你双击.html格式文件,只不过是通过浏览器打开了一个本地文件,和你用word打开一个文档原理一样。

而localhost是你在电脑上模拟了一个服务器环境,这个环境和app发布时的环境是一样的。随着你的代码越做越深入,你会发现有些东西没有环境是做不了的。所以当你向开发app进阶时,你需要一个模拟环境——localhost。

双击html文件打开的只算脚本,本地模拟环境localhost跑起来的才是app(可以准备上架的玩意)。


第9篇 heroku

当你弄明白localhost后,可以考虑把8.2做完的东西发布了。

这里我就偷个懒,发布教程参考小白也能用heroku发布免费app (2)。如果你之前有幸点开这篇文章,看得似懂非懂;现在经过5期教学,应该能明白并且单独操作了吧……

如果还是完全不明白,那只能说明我的5期教学彻底失败……

开辟heroku账号以后,你会发现账号里面有引导你登陆GitHub的按钮,照着点按钮连好就行。

部署完成以后,你可以通过https://XXX.herokuapp.com/看到你的app,并且可以分享链接给别人……

如果你有个性化域名,比如gigonyeye.me,也可以连过去,这样别人就可以通过个性域名访问你的app啦。

虽然你的app现在看起来很简陋,没有什么功能……但是它就是一个和志工爷爷官方网站原理一致的app;只不过志工爷爷的官方网站比你的app有更多的功能……

如果你照着Vue教程,继续添加component,有一天你的app会比肩志工爷爷官方网站的。


第十篇 其他版本的app

你通过heroku发布了第一个极简web版app后,你开始想那手机版app怎么弄呢??原理和web版app几乎一样:

10.1 iOS 版

  • 开发iOS app你需要Xcode,对应做web app的VS code。安装好Xcode后,你会发现界面和之前的VS code有相同之处。
  • 开发过程你需要手机模拟器(Xcode 安好后就有了)不断测试,对应Chrome浏览器,inspector还有localhost。
  • 写代码你需要Swift 或者 Objective-C,对应html+css+JavaScript;Swift和JavaScript一样,也有变量、函数、class、if-else,for 循环……有了JavaScript基础,你应该可以pick得很快……
  • 当然你一样需要框架,SwiftUI和Storyboard,对应Vue。
  • 最后iOS app需要上架apple store,对应heroku。

唯2的区别是:

  1. 上架apple store需要付费账号,而heroku在5个app以内暂时免费……
  2. 以上的步骤全部都需要在苹果电脑上操作,苹果电脑更不是免费的……


10.2 Android版

做完iOS,你还想做android。似曾相识的路线又来了……

  • 这一次你需要Android studio。你已经折腾过了VS code和Xcode,你还没发现它们长得都很像嘛。
  • 测试过程你也需要手机模拟器,安装Android studio时又已经免费获赠了……
  • 代码你需要换成Java 或者 Kotlin。变量、函数、class、if-else,for 循环……似曾相识的概念又来了……
  • 你还是需要用到框架,让开发更迅速,比如flutter……
  • 做好了还是要上架,不过这次去的是Google Play……


当然了,上架app去apple store或者Google play套餐流程的难度值明显高于heroku……所以我们先从简单点的web版入手……

根据过往经验,自学成才html+css+JavaScript的人不在少数。照着W3C school教程看一个星期,几乎人人都能弄个网页,点个按钮,换个颜色……

但是这一步之后,很多小白就倒下了……倒下原因可能是:

  1. 不能理解localhost概念,也就阻碍了进阶数据库、服务器、后端学习(可以提供API服务的nodeJS、Python、Go……)
  2. 对terminal操作完全无视,间接阻碍进阶框架、环境配置等一系列问题……

因为1和2两个问题无法解决,向程序员哥哥姐姐请教时,又或者网上搜答案时,看到各种部署、配置、根目录、客户端、服务端……对混杂专有名词的解答不知所云……说了半天一直都在鸡同鸭讲……


当然也可能是硬件原因:

Windows太难用,打击学习热情。

程序员哥哥姐姐喜欢抱着一台mac到处跑,不是为了装逼,真的是工作需要(程序员哥哥姐姐可能也会因为Windows配环境而吐血)。

我大学时上一个讲数据库服务器虚拟机的选修课时,就因为坑爹Windows系统配环境太吐血,学得云里雾里。全程都需要老师替你解决Windows系统带来的各种渣事,以至于忽略了学习目的——搞懂啥是服务器虚拟机数据库……

才刚开始接触概念,还没深入弄明白,就已经被Windows系统折腾得精疲力尽,还有多少精力继续呢……

后来换了mac,再回顾当年折腾Windows云里雾里的血泪史,我只想说:早点弄台mac,可以少走好多弯路;而那些弯路绝大多数由坑爹Windows贡献。

程序员当然用mac,就算用Windows也起码要安一个ubuntu,Windows太垃圾……
——某资深靠谱程序员朋友语录

所以简单粗暴的教程进行到尾声时,还有一个代码自学伙伴需要推荐——就是mac电脑。之前我们介绍的伙伴都是免费的,只有这个是付费的。

随着不断深入学习,你会发现windows操作系统将成为你进阶的绊脚石。换个系统,自学之路可以变得很美好。mac会成为你进阶代码道路上的坚实伙伴,并激发你更多学习热情……

话说Linux貌似也是一种专业操作系统,但是我们这不是小白进阶之路嘛。虽然是简单粗暴的进阶之路,但Linux好像也是扯远了点……




总结

简单粗暴的教程接近尾声了……

第一期,我们学习了html+css+JavaScript代码;

第二期,我们学习了通过API获取数据并呈现在网页上;

第三期,我们学习了git管理代码,以及如何用terminal和电脑对话;

第四期,我们学习了如何安装Vue;

第五期,我们学习了localhost模拟环境,还有如何上架app到heroku(主要是之前的文章……);


关于2期教学API,因为过于简单粗暴,相信大家都没看懂。现在附上补充教程https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

关于API网络上教程很多,找出来看看不难理解。如果A教程看不懂可以继续搜B教程……总有一个是自己看得懂的……所以继VS code编辑器,Chrome浏览器,git版本管理,terminal操作以及坚实伙伴mac之后,你会发现自学代码的道路上还有一个离不开的伙伴——Google搜索引擎。

百度除了搜明星八卦比Google专业,其他啥也搜不出来……用百度学代码比用Windows配环境还坑爹……工欲善其事必先利其器,没事别给自己添堵……

CC BY-NC-ND 2.0