純自嗨：從零開始寫一個(gè)小程序

mato

開個(gè)貼子，記錄這件有意思的事情！

背景：
沖突一：想學(xué)習(xí)，卻找不到好工具
今年春節(jié)遇上了疫情，我宅在家里，處于“失業(yè)”狀態(tài)，作為有志青年，不想每天刷劇、刷抖音，想著裝一下B，提高一下英語(yǔ)水平。

于是，在朋友圈瘋狂的廣告洗腦下，我下載了幾個(gè)當(dāng)時(shí)很火的App，很認(rèn)真地投入學(xué)習(xí)。
4 z( B* j9 X; n9 @* T/ Q然并卵，使用了一段時(shí)間之后，發(fā)現(xiàn)效果不太理想：首先，這些App記單詞過(guò)程太過(guò)于復(fù)雜，很多都提供了多種助記的方法，除了常規(guī)的詞根詞綴、聯(lián)想記憶以外，還有圖片記憶、電影情節(jié)記憶、思維導(dǎo)圖記憶等，這樣的好處是當(dāng)時(shí)很容易記住單詞，壞處就是忘得也很容易，大量的助記材料無(wú)形中增加了記憶的工作量，增加了記憶的負(fù)擔(dān)，從而偏離了記單詞的初衷；其次，練聽力的功能普遍都是提供新概念英語(yǔ)或者VOA、BBC、TED等聽力材料，對(duì)于基礎(chǔ)不好的我，感覺在聽天書；
難道就沒(méi)有一款適合我這種菜鳥的App嗎？
! J6 d5 B5 b( h% K6 Z$ `一個(gè)大膽的想法出現(xiàn)在我腦海里：自己開發(fā)一個(gè)App。

沖突二：計(jì)劃自己開發(fā)，卻不是專業(yè)人士
) J3 [! h; ^1 V6 h- J為什么說(shuō)這個(gè)想法大膽呢？因?yàn)槲译m然是一名搞技術(shù)的工程師，但僅限于機(jī)械行業(yè)的。我所接受的完整編程教育僅是在大學(xué)期間的《C語(yǔ)言程序設(shè)計(jì)》。所以對(duì)事情一無(wú)所知，嚴(yán)重缺乏相關(guān)知識(shí)儲(chǔ)備，除了大膽，我也不知道怎么來(lái)形容這個(gè)想法了。
但有句古話叫無(wú)知者無(wú)畏，而且作為理工男，我始終相信任何問(wèn)題都有辦法解決，只要你能夠把問(wèn)題描述得足夠清楚。
2 t4 d3 I$ {0 z' s: ]/ w# z因此這個(gè)想法一出現(xiàn)，我立馬覺得應(yīng)該去試試，結(jié)果怎樣不重要，起碼先行動(dòng)起來(lái)。

行動(dòng)：
% d  e: O: G# ?# p+ N先把問(wèn)題描述清楚，我的目標(biāo)是開發(fā)一個(gè)學(xué)英語(yǔ)的App，這款A(yù)pp應(yīng)該功能簡(jiǎn)單，不能太過(guò)復(fù)雜。把它分解成兩個(gè)問(wèn)題：
1-怎樣開發(fā)一個(gè)App？
7 `& A  f9 W1 Q$ n2-應(yīng)該具備什么功能才能用來(lái)學(xué)英語(yǔ)？
# q9 P) _+ `: N. p8 D# ]3 _
先來(lái)思考第一個(gè)問(wèn)題：怎么開發(fā)一個(gè)App？
我把問(wèn)題進(jìn)行細(xì)分：
! j6 {$ h3 W& x1 y1- 什么是App?
2- 需要哪些知識(shí)儲(chǔ)備？
3- 如何做？需要什么工具？
7 Y$ m5 |, S- }2 c! @& M( S4- 有沒(méi)有簡(jiǎn)單的方法實(shí)現(xiàn)？
經(jīng)過(guò)一番搜索、學(xué)習(xí)、請(qǐng)教、記錄和總結(jié)，這些問(wèn)題漸漸有了答案。

) f3 x  k2 Q0 F1-what：什么是App？
App是應(yīng)用application的簡(jiǎn)稱，我這里說(shuō)的App是指手機(jī)端的App。
. c: S, B4 W+ A根據(jù)開發(fā)模式，目前的手機(jī)App可分為3種類型：原生、H5、Hybrid。它們有各自的優(yōu)劣勢(shì)：
            

類別 & \( ^2 v' ^) A	概述	優(yōu)勢(shì) $ x' D- s, v( H. u* s	劣勢(shì) - v, R5 K3 a( @# u6 E  F
原生應(yīng)用 (Native 6 N8 O2 P/ U) V4 u/ ~, t  App)	原生App就是利用Andriod、ios平臺(tái)官方的開發(fā)語(yǔ)言、開發(fā)類庫(kù)、工具進(jìn)行開發(fā)。比如安卓的java語(yǔ)言，ios的Swift語(yǔ)言。在應(yīng)用性能上和交互體驗(yàn)上應(yīng)該是最好的. 2 L1 q9 q5 q- s9 A' f8 v7 [	1-可以訪問(wèn)手機(jī)所有功能、可實(shí)現(xiàn)功能最齊全； 2-運(yùn)行速度快、性能高，絕佳的用戶體驗(yàn)； 3-支持大量圖形和動(dòng)畫。不卡，反應(yīng)快； & M3 h& K4 e' Q, F9 K7 k4-比較快捷的使用設(shè)備端提供的接口，處理速度上有優(yōu)勢(shì)；	1-開發(fā)成本高、周期長(zhǎng)，Android和ios都需要單獨(dú)的開發(fā)； 2-更新版本需要重新下載安裝包；
H5應(yīng)用 (Web App)	用普通web開發(fā)語(yǔ)言開發(fā)的，通過(guò)瀏覽器運(yùn)行。	1-使用web語(yǔ)言，開發(fā)門檻低、周期短； 4 Q5 a4 [$ u% B: ^( r- c2-支持多種瀏覽器，兼容性好； 3-免安裝，使用瀏覽器打開，更新無(wú)需用戶參與；	1-對(duì)聯(lián)網(wǎng)要求高，離線不能承載太多東西； 2-功能有限； " c  R* _* y$ K& m3-運(yùn)行速度慢，頁(yè)面不能承載太多東西； & `4 H7 [; A7 Z1 m4-圖片和動(dòng)畫支持性不高； , q& h* f/ i/ e5-體驗(yàn)感不如原生和混合App；
混合版應(yīng)用 (Hybrid : C9 s, g: N3 S6 B  App)	既利用了原生APP開發(fā)技術(shù)還利用了HTML5開發(fā)技術(shù)，是原生和HTML5技術(shù)的混合應(yīng)用?；旌媳壤幌?。目前市面上流行的小程序和快應(yīng)用就是采用Hybrid技術(shù)。	1-運(yùn)行速度比Web  App快，可調(diào)用部分設(shè)備端口； ( Q& g  c1 a4 e4 ]2-開發(fā)周期比原生App短； 3-可以跨平臺(tái)，Android和ios不需要單獨(dú)的開發(fā)； 4-免安裝，打開就能用，更新無(wú)需用戶參與； & Q) u, t8 q: s$ B. V	1-功能接口受限于原生App的支持程度； 2-體驗(yàn)感優(yōu)于Web App，但差于原生App； 5 R- B( ]6 R7 u/ z8 Y2 j

        

2-why：需要哪些知識(shí)儲(chǔ)備？
App開發(fā)的流程大概分為幾個(gè)階段：需求分析-->架構(gòu)設(shè)計(jì)-->后端開發(fā)-->前端開發(fā)-->測(cè)試。每個(gè)階段都需要相應(yīng)的知識(shí)。


需求分析：
5 z1 o- T$ K' t4 e需求分析也稱為軟件需求分析，是開發(fā)人員經(jīng)過(guò)深入細(xì)致的調(diào)研和分析，準(zhǔn)確理解用戶和項(xiàng)目的功能、性能、可靠性等具體要求，將用戶非形式的需求表述轉(zhuǎn)化為完整的需求定義，從而確定系統(tǒng)必須做什么的過(guò)程。這是軟件工程專業(yè)的相關(guān)知識(shí)。
! K4 j) |6 b2 d. R+ G! Q1 r
% |- \0 v0 Y+ T

架構(gòu)設(shè)計(jì)：
1 X( e8 \6 i6 ^( d( r; \需要架構(gòu)設(shè)計(jì)是將客戶的需求轉(zhuǎn)換為規(guī)范的開發(fā)計(jì)劃及文本，并制定這個(gè)項(xiàng)目的總體架構(gòu)，指導(dǎo)整個(gè)開發(fā)團(tuán)隊(duì)完成這個(gè)計(jì)劃。架構(gòu)設(shè)計(jì)是軟件設(shè)計(jì)過(guò)程的早期階段，它把需求分析和設(shè)計(jì)流程連接在一起。需要對(duì)開發(fā)技術(shù)（包括前端和后端）有深入的了解。
7 ?' N* u4 L, V
- K  U: b! {, w+ z
3 f# K. Y' [1 f
后端開發(fā)：
后端是指服務(wù)器相關(guān)的統(tǒng)稱，包含服務(wù)器、數(shù)據(jù)庫(kù)。
/ W- @) @6 {# z4 {服務(wù)器搭建與開發(fā)，常用語(yǔ)言和工具：Nginx、Java、Shell、Python、PHP、node.js等；
7 E2 |4 I# _/ G: A+ v8 L數(shù)據(jù)庫(kù)開發(fā)，常用知識(shí)：關(guān)系型數(shù)據(jù)庫(kù)mySQL，非關(guān)系型數(shù)據(jù)庫(kù)MongoDB；


* a: l2 e; S) `( ]
前端開發(fā)：
% c3 N6 n: T! t! ?3 ]# G前端是手機(jī)端的開發(fā)，包括UI界面、響應(yīng)邏輯、數(shù)據(jù)的請(qǐng)求。
7 n% [; G1 d* a' j0 @前端三大基礎(chǔ)技術(shù)：HTML5、CSS、JavaScript；
& N8 c. h" m5 K流行的前端框架：Angular、vue.js、React；
原生App開發(fā)語(yǔ)言：Swift(iOS平臺(tái))；Java(Android平臺(tái))；


  j+ w3 {' B6 V

測(cè)試：
包括功能測(cè)試、性能測(cè)試、壓力測(cè)試等。
" n' i( x6 u( _7 L1 }( L$ l% ~+ w7 S
3 D4 S* n/ o4 X+ Q  x
" P( y1 Y0 I" F* C0 B3 k5 {
3-how：怎么做？需要用到什么工具？
9 ?2 i, j( k! Y( u看書、看視頻教程、看開發(fā)文檔、模仿實(shí)踐；
基本上各種語(yǔ)言都有各自的開發(fā)工具(IDE)，學(xué)到哪個(gè)就用哪個(gè)。
$ D, c6 ~3 m6 e" M9 T. a' A
4-how good：有沒(méi)有簡(jiǎn)單的方法實(shí)現(xiàn)？
隨著了解的越深入，越發(fā)現(xiàn)這個(gè)事情沒(méi)有想象中那么簡(jiǎn)單。這是一個(gè)系統(tǒng)工程，涉及太多的知識(shí)，需要不同崗位的人配合，就好比開發(fā)一臺(tái)設(shè)備，需要機(jī)械工程師、電氣工程師、工藝工程師、采購(gòu)工程師等一起合作才能完成。
難道一個(gè)人就真的不可能完成？我開始動(dòng)搖，直到后來(lái)看到了“全棧開發(fā)”這個(gè)名詞，眼前一亮，信心立馬恢復(fù)。全棧開發(fā)是指一個(gè)人搞掂前端和后端。隨著技術(shù)的發(fā)展，市面上有很多現(xiàn)成的框架，借助這些框架來(lái)實(shí)現(xiàn)一個(gè)小項(xiàng)目這個(gè)可能還是有的。

那么接下來(lái)就是確定開發(fā)的模式：
# x0 ?4 \: z" I4 A首先排除開發(fā)原生應(yīng)用，難度實(shí)在太大，不符合我的情況。只能在H5和Hybrid之間選擇，H5是門檻最低的，但我預(yù)計(jì)后期會(huì)用到手機(jī)攝像頭和話筒這些硬件，這些是H5的劣勢(shì)。那么目前看來(lái)Hybrid是最合適的選擇，而且此時(shí)微信小程序開始火起來(lái)，各種開發(fā)教程和案例都豐富起來(lái)。于是，我最終確定做微信小程序。后來(lái)，微信小程序推出了云開發(fā)，媽呀，我感動(dòng)得快要哭了，騰訊真的太照顧我了，這樣又幫我解決了后端開發(fā)的問(wèn)題。
關(guān)于開發(fā)的問(wèn)題，確定開發(fā)模式后，剩下的就是惡補(bǔ)微信小程序的相關(guān)知識(shí)。
3 N. W+ `: C; X3 j# W! F. ^
  Z( l* t; c$ a第二個(gè)問(wèn)題是APP應(yīng)該具備什么功能才能用來(lái)學(xué)英語(yǔ)？后面繼續(xù)記錄。。。。

0 r0 V+ {, o8 i: d- p8 @

機(jī)械自動(dòng)化學(xué)者

樓主牛批，期待更新

科技的瘋狂

等更新

無(wú)錫旭峰門業(yè)

牛批，點(diǎn)個(gè)贊

江蘇阿虎wyh

此事意義重大！給樓主點(diǎn)贊！

m2006410

good  用心

嘻哈屠龍

給樓主點(diǎn)贊！

軍師大大

想法不錯(cuò)，可以看看比鄰國(guó)APP，可以學(xué)習(xí)很多語(yǔ)種

mato

確定開發(fā)微信小程序后，那后面所有的工作就以這個(gè)展開。

我把這事分成三個(gè)步驟：
! \( j& ~$ v7 M9 Z" h' G5 z1-先學(xué)習(xí)前端三大基礎(chǔ)知識(shí)：HTML5、CSS、JavaScript，了解vue.js；
+ q% Q! e' @3 V1 P/ f, g6 ]$ r2-學(xué)習(xí)小程序的開發(fā)教材及案例：官方的開發(fā)文檔和教程、優(yōu)秀大咖的課程；
3-以實(shí)際需求為驅(qū)動(dòng)，開始寫程序，邊寫邊學(xué)；


% j' _" b. g, H2 E+ `學(xué)習(xí)過(guò)程中找了很多學(xué)習(xí)資料，經(jīng)過(guò)學(xué)習(xí)和篩選，我認(rèn)為最有用的有以下幾個(gè)，如果各位社友感興趣可以去了解：
1-菜鳥教程：
此網(wǎng)站有詳細(xì)的教程資料，包括前端三大技術(shù)、服務(wù)器、數(shù)據(jù)庫(kù)等，非常詳細(xì)。
6 Z2 `1 l4 X. H# n
- n1 x6 P* J5 s: }8 K
7 _) T9 q( R( I0 K7 u2-官方文檔：
小程序的官方開發(fā)文檔，可以先粗略閱讀一遍，在寫代碼時(shí)再查找具體的組件或者API。
, M) t6 h& R6 u9 Z' U1 g: I

3-官方視頻教程：
分類三個(gè)階段，包括小程序開發(fā)、小程序云開發(fā)、小程序項(xiàng)目，可以反復(fù)觀看。
8 R6 I8 `7 X7 u1 \; g3 f
! K; j4 S% E7 e" ]4 h
4-CSDN：
一個(gè)程序員的社區(qū)，只要遇到疑問(wèn)，90%可以在這個(gè)地方找到答案。
7 ~; M# n( v" h; s2 E, v% c, w% e& }- B

5-B站：
+ d! p# y  @; J3 `- u" H一個(gè)包羅萬(wàn)有的社區(qū)，有大量的視頻教程，包括HTML5、CSS、JavaScript、小程序開發(fā)。

0 g5 f; a  B9 S1 _1 I# J' F備注：由于我沒(méi)有權(quán)限發(fā)表包含URL地址的信息，所以無(wú)法貼上鏈接。以上的資料都可以百度找到。如果實(shí)在找不到，有興趣的可以私信我。
學(xué)習(xí)過(guò)程中，也走過(guò)一些彎路：
4 p$ {0 W' y5 A& |& ~9 U. |1- APICloud，一個(gè)低代碼開發(fā)平臺(tái)，需要購(gòu)買他的資源，私房錢不多，放棄；
2- DCloud，一個(gè)可以一次開發(fā)，多端覆蓋的開發(fā)框架，就自己一個(gè)人使用，就一個(gè)平臺(tái)，不需要多端覆蓋，放棄；
1 G6 G5 ~* o# {& q( G- _
# o3 Q/ C- ]8 S
/ h& i0 q$ @, Q: d7 i

mato

機(jī)械自動(dòng)化學(xué)者 發(fā)表于 2021-1-6 08:05
樓主牛批，期待更新

1 P2 R6 L: R9 F. A謝謝！不牛批，本人普通技術(shù)一枚，就是興趣廣一點(diǎn)，有一點(diǎn)點(diǎn)動(dòng)手能力。