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

mato

開個(gè)貼子，記錄這件有意思的事情！
1 Y9 q1 p0 ?4 ?( ?$ u5 ^" i
* C- w3 A6 f* }0 i4 b. L% }9 k) p背景：
: M% z/ }, p, j! |9 b) }沖突一：想學(xué)習(xí)，卻找不到好工具
' h# {2 E6 i3 L' w3 Q' S8 n  V- j: d今年春節(jié)遇上了疫情，我宅在家里，處于“失業(yè)”狀態(tài)，作為有志青年，不想每天刷劇、刷抖音，想著裝一下B，提高一下英語水平。
( ?% z2 l: y7 }, o
于是，在朋友圈瘋狂的廣告洗腦下，我下載了幾個(gè)當(dāng)時(shí)很火的App，很認(rèn)真地投入學(xué)習(xí)。
6 A3 Q; B8 H0 g# f* p# e然并卵，使用了一段時(shí)間之后，發(fā)現(xiàn)效果不太理想：首先，這些App記單詞過程太過于復(fù)雜，很多都提供了多種助記的方法，除了常規(guī)的詞根詞綴、聯(lián)想記憶以外，還有圖片記憶、電影情節(jié)記憶、思維導(dǎo)圖記憶等，這樣的好處是當(dāng)時(shí)很容易記住單詞，壞處就是忘得也很容易，大量的助記材料無形中增加了記憶的工作量，增加了記憶的負(fù)擔(dān)，從而偏離了記單詞的初衷；其次，練聽力的功能普遍都是提供新概念英語或者VOA、BBC、TED等聽力材料，對于基礎(chǔ)不好的我，感覺在聽天書；
難道就沒有一款適合我這種菜鳥的App嗎？
" Q0 x' Y+ Q8 m- @5 s+ V一個(gè)大膽的想法出現(xiàn)在我腦海里：自己開發(fā)一個(gè)App。
- ~* L) r  \7 T$ ~
) v1 s3 d5 c4 x! A5 Z$ i7 r沖突二：計(jì)劃自己開發(fā)，卻不是專業(yè)人士
為什么說這個(gè)想法大膽呢？因?yàn)槲译m然是一名搞技術(shù)的工程師，但僅限于機(jī)械行業(yè)的。我所接受的完整編程教育僅是在大學(xué)期間的《C語言程序設(shè)計(jì)》。所以對事情一無所知，嚴(yán)重缺乏相關(guān)知識儲備，除了大膽，我也不知道怎么來形容這個(gè)想法了。
: C. |  A" H6 ~' ~0 D. E: R0 ^但有句古話叫無知者無畏，而且作為理工男，我始終相信任何問題都有辦法解決，只要你能夠把問題描述得足夠清楚。
7 h, r  v4 t8 J0 D+ ?因此這個(gè)想法一出現(xiàn)，我立馬覺得應(yīng)該去試試，結(jié)果怎樣不重要，起碼先行動起來。

行動：
$ w( g1 d" f* |/ M! Y8 O5 O先把問題描述清楚，我的目標(biāo)是開發(fā)一個(gè)學(xué)英語的App，這款A(yù)pp應(yīng)該功能簡單，不能太過復(fù)雜。把它分解成兩個(gè)問題：
7 P" [: u6 y" t( U9 [+ h1-怎樣開發(fā)一個(gè)App？
* r% T! G$ k3 g  O# ?2-應(yīng)該具備什么功能才能用來學(xué)英語？

) g( D  o/ t+ V- M$ C5 T3 X% [& Y先來思考第一個(gè)問題：怎么開發(fā)一個(gè)App？
8 S- |- U$ o: `& c我把問題進(jìn)行細(xì)分：
- {1 v( _% M) @, O1- 什么是App?
* u5 a6 Y3 g5 M( R/ v) }- E# T2- 需要哪些知識儲備？
3- 如何做？需要什么工具？
. N" F- t" p. }8 \8 [5 n) F4- 有沒有簡單的方法實(shí)現(xiàn)？
經(jīng)過一番搜索、學(xué)習(xí)、請教、記錄和總結(jié)，這些問題漸漸有了答案。

. |% E( Y) T+ M1-what：什么是App？
App是應(yīng)用application的簡稱，我這里說的App是指手機(jī)端的App。
根據(jù)開發(fā)模式，目前的手機(jī)App可分為3種類型：原生、H5、Hybrid。它們有各自的優(yōu)劣勢：
            

類別	概述 7 ~3 z, ?) D2 Q" ^	優(yōu)勢	劣勢
原生應(yīng)用 (Native 0 S2 K4 P$ f- J( ?) Y  f  App)	原生App就是利用Andriod、ios平臺官方的開發(fā)語言、開發(fā)類庫、工具進(jìn)行開發(fā)。比如安卓的java語言，ios的Swift語言。在應(yīng)用性能上和交互體驗(yàn)上應(yīng)該是最好的. 9 |$ C) ]5 K$ ]& ?+ T	1-可以訪問手機(jī)所有功能、可實(shí)現(xiàn)功能最齊全； . v# J. q8 I0 Z2-運(yùn)行速度快、性能高，絕佳的用戶體驗(yàn)； 3-支持大量圖形和動畫。不卡，反應(yīng)快； ' R0 h# |6 H' K  N+ ]8 X1 N* L5 N' ~4-比較快捷的使用設(shè)備端提供的接口，處理速度上有優(yōu)勢；	1-開發(fā)成本高、周期長，Android和ios都需要單獨(dú)的開發(fā)； : C9 |9 v" }# [* l& M2-更新版本需要重新下載安裝包；
H5應(yīng)用 (Web App)	用普通web開發(fā)語言開發(fā)的，通過瀏覽器運(yùn)行。 - h: u8 z+ b( N# f	1-使用web語言，開發(fā)門檻低、周期短； 0 V9 x0 W' e9 q% w5 a2-支持多種瀏覽器，兼容性好； 3-免安裝，使用瀏覽器打開，更新無需用戶參與；	1-對聯(lián)網(wǎng)要求高，離線不能承載太多東西； . d0 ^% {6 m. R0 q2 E6 ~' F% i2-功能有限； 3-運(yùn)行速度慢，頁面不能承載太多東西； 4-圖片和動畫支持性不高； 5-體驗(yàn)感不如原生和混合App； 2 c, Z/ [. L5 E* x# l1 W
混合版應(yīng)用 (Hybrid : q) ], ~6 F" G  k2 l- P/ d  App)	既利用了原生APP開發(fā)技術(shù)還利用了HTML5開發(fā)技術(shù)，是原生和HTML5技術(shù)的混合應(yīng)用�；旌媳壤�不限。目前市面上流行的小程序和快應(yīng)用就是采用Hybrid技術(shù)。 - i/ O/ e, H- }# x( `( v/ i' I+ A' @	1-運(yùn)行速度比Web  App快，可調(diào)用部分設(shè)備端口； . c1 B7 S4 F  C4 l+ y. J2-開發(fā)周期比原生App短； 3-可以跨平臺，Android和ios不需要單獨(dú)的開發(fā)； & X/ I7 g. \6 `; q4-免安裝，打開就能用，更新無需用戶參與； 4 t0 h) S7 q! [, i	1-功能接口受限于原生App的支持程度； , o9 J2 I+ v5 p( I2-體驗(yàn)感優(yōu)于Web App，但差于原生App； ; A2 g; D. W& b7 c# E

        

( T9 ?3 L& h4 n8 K7 z. v2-why：需要哪些知識儲備？
$ C! L' F0 D: j; K- @App開發(fā)的流程大概分為幾個(gè)階段：需求分析-->架構(gòu)設(shè)計(jì)-->后端開發(fā)-->前端開發(fā)-->測試。每個(gè)階段都需要相應(yīng)的知識。


需求分析：
需求分析也稱為軟件需求分析，是開發(fā)人員經(jīng)過深入細(xì)致的調(diào)研和分析，準(zhǔn)確理解用戶和項(xiàng)目的功能、性能、可靠性等具體要求，將用戶非形式的需求表述轉(zhuǎn)化為完整的需求定義，從而確定系統(tǒng)必須做什么的過程。這是軟件工程專業(yè)的相關(guān)知識。
- _1 d! Y2 ?2 z& T# ~


架構(gòu)設(shè)計(jì)：
* y1 K6 U* H/ r! ]2 O, Y8 g需要架構(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ì)過程的早期階段，它把需求分析和設(shè)計(jì)流程連接在一起。需要對開發(fā)技術(shù)（包括前端和后端）有深入的了解。



后端開發(fā)：
4 V+ `6 Q1 @: k# A7 z% v后端是指服務(wù)器相關(guān)的統(tǒng)稱，包含服務(wù)器、數(shù)據(jù)庫。
4 c% T, _! u& @7 i服務(wù)器搭建與開發(fā)，常用語言和工具：Nginx、Java、Shell、Python、PHP、node.js等；
  U- y2 Y! c  i5 H4 X7 I0 i數(shù)據(jù)庫開發(fā)，常用知識：關(guān)系型數(shù)據(jù)庫mySQL，非關(guān)系型數(shù)據(jù)庫MongoDB；
& _# @1 w& P# M3 d

/ ~0 o* z; _0 X6 T" v( b7 k! w: N" K
4 M- m& v. S% Q% M# P8 L前端開發(fā)：
前端是手機(jī)端的開發(fā)，包括UI界面、響應(yīng)邏輯、數(shù)據(jù)的請求。
/ Z: t) A3 ]5 X# H( j3 T前端三大基礎(chǔ)技術(shù)：HTML5、CSS、JavaScript；
5 v9 G8 Z7 V$ I; O. t. J流行的前端框架：Angular、vue.js、React；
原生App開發(fā)語言：Swift(iOS平臺)；Java(Android平臺)；

. Z4 U$ Q4 n; l4 {

- H. [8 ]% W# p1 v( y
# |6 o  w5 j# I# R" L測試：
4 i% J: \4 c+ A; L  [3 b  W包括功能測試、性能測試、壓力測試等。

' b* V3 c6 B+ e( }% W5 ]
5 s. l5 P0 ]; \
3-how：怎么做？需要用到什么工具？
* Z* C+ H$ d1 h看書、看視頻教程、看開發(fā)文檔、模仿實(shí)踐；
基本上各種語言都有各自的開發(fā)工具(IDE)，學(xué)到哪個(gè)就用哪個(gè)。

( l. \# K! Q; C7 W4-how good：有沒有簡單的方法實(shí)現(xiàn)？
$ ^1 p/ X$ a& D1 _- _8 W7 a! a隨著了解的越深入，越發(fā)現(xiàn)這個(gè)事情沒有想象中那么簡單。這是一個(gè)系統(tǒng)工程，涉及太多的知識，需要不同崗位的人配合，就好比開發(fā)一臺設(shè)備，需要機(jī)械工程師、電氣工程師、工藝工程師、采購工程師等一起合作才能完成。
1 E# ], f7 s' x3 d) z難道一個(gè)人就真的不可能完成？我開始動搖，直到后來看到了“全棧開發(fā)”這個(gè)名詞，眼前一亮，信心立馬恢復(fù)。全棧開發(fā)是指一個(gè)人搞掂前端和后端。隨著技術(shù)的發(fā)展，市面上有很多現(xiàn)成的框架，借助這些框架來實(shí)現(xiàn)一個(gè)小項(xiàng)目這個(gè)可能還是有的。

- _' V! R% t* O- z0 ]1 s4 j* ~那么接下來就是確定開發(fā)的模式：
* W0 }/ B3 W: [8 V% j首先排除開發(fā)原生應(yīng)用，難度實(shí)在太大，不符合我的情況。只能在H5和Hybrid之間選擇，H5是門檻最低的，但我預(yù)計(jì)后期會用到手機(jī)攝像頭和話筒這些硬件，這些是H5的劣勢。那么目前看來Hybrid是最合適的選擇，而且此時(shí)微信小程序開始火起來，各種開發(fā)教程和案例都豐富起來。于是，我最終確定做微信小程序。后來，微信小程序推出了云開發(fā)，媽呀，我感動得快要哭了，騰訊真的太照顧我了，這樣又幫我解決了后端開發(fā)的問題。
關(guān)于開發(fā)的問題，確定開發(fā)模式后，剩下的就是惡補(bǔ)微信小程序的相關(guān)知識。
% ?0 v* R5 Z' o* }# w$ i2 G6 h! [
" H0 `" W. Z2 I8 g* N( A第二個(gè)問題是APP應(yīng)該具備什么功能才能用來學(xué)英語？后面繼續(xù)記錄。。。。

5 y6 i" }. o# J* ]2 U/ a) {" j

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

樓主牛批，期待更新

科技的瘋狂

等更新

無錫旭峰門業(yè)

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

江蘇阿虎wyh

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

m2006410

good  用心

嘻哈屠龍

給樓主點(diǎn)贊！

軍師大大

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

mato

確定開發(fā)微信小程序后，那后面所有的工作就以這個(gè)展開。
* Q7 S$ d9 s5 f3 I: t5 A( v
我把這事分成三個(gè)步驟：
1-先學(xué)習(xí)前端三大基礎(chǔ)知識：HTML5、CSS、JavaScript，了解vue.js；
2-學(xué)習(xí)小程序的開發(fā)教材及案例：官方的開發(fā)文檔和教程、優(yōu)秀大咖的課程；
3-以實(shí)際需求為驅(qū)動，開始寫程序，邊寫邊學(xué)；
# \/ s) n% s+ r
8 Z0 S( V4 T+ C+ E6 E
+ ]& r, @  l' J8 L, j, V8 j學(xué)習(xí)過程中找了很多學(xué)習(xí)資料，經(jīng)過學(xué)習(xí)和篩選，我認(rèn)為最有用的有以下幾個(gè)，如果各位社友感興趣可以去了解：
0 a% }! Y/ r1 N6 d4 B1-菜鳥教程：
5 J& N: t0 z5 ?# j( U' t* n5 U% D5 j此網(wǎng)站有詳細(xì)的教程資料，包括前端三大技術(shù)、服務(wù)器、數(shù)據(jù)庫等，非常詳細(xì)。
4 \- ]+ o4 O, ]4 D' t, S
% `4 L! q' Y, F* a
1 q2 W4 X4 W" e7 m# J' L5 ^2-官方文檔：
# H' k0 b6 f& @3 n  M小程序的官方開發(fā)文檔，可以先粗略閱讀一遍，在寫代碼時(shí)再查找具體的組件或者API。


2 M# K  }2 U' h9 }( x0 W# e8 L3-官方視頻教程：
% b6 p( |$ u3 p* H分類三個(gè)階段，包括小程序開發(fā)、小程序云開發(fā)、小程序項(xiàng)目，可以反復(fù)觀看。


4-CSDN：
一個(gè)程序員的社區(qū)，只要遇到疑問，90%可以在這個(gè)地方找到答案。
# |: |) ], l" V. A  p+ {. k
5 U7 Q3 o; }' t3 y
5-B站：
一個(gè)包羅萬有的社區(qū)，有大量的視頻教程，包括HTML5、CSS、JavaScript、小程序開發(fā)。
2 @0 w  Q0 q  a' `8 e
5 B0 G! I# F) g+ A備注：由于我沒有權(quán)限發(fā)表包含URL地址的信息，所以無法貼上鏈接。以上的資料都可以百度找到。如果實(shí)在找不到，有興趣的可以私信我。
( ^5 |3 p7 t: I, k, ]- f學(xué)習(xí)過程中，也走過一些彎路：
1- APICloud，一個(gè)低代碼開發(fā)平臺，需要購買他的資源，私房錢不多，放棄；
3 y5 n( l: {3 H4 r8 `2- DCloud，一個(gè)可以一次開發(fā)，多端覆蓋的開發(fā)框架，就自己一個(gè)人使用，就一個(gè)平臺，不需要多端覆蓋，放棄；

$ Z" v3 x) x1 J
; j  f) n/ N! }

mato

機(jī)械自動化學(xué)者 發(fā)表于 2021-1-6 08:05
, b% _$ S" V- E1 J0 ]# n: i樓主牛批，期待更新

# F9 v# ~+ L* u; D1 |( P謝謝！不牛批，本人普通技術(shù)一枚，就是興趣廣一點(diǎn)，有一點(diǎn)點(diǎn)動手能力。