[淺談] 想要架設網站、軟體開發、開發App,會需要用到哪些技術呢?

有時候我們常常會對於日常生活中的不便有很多想法,想要開發軟體、網頁、或甚至是App來解決一些問題,這時候你可能就會開始尋找「開發人員」或「外包廠商」。

但是對談當中,當對方說出一些技術上的專有名詞,萬一沒聽過的話可能又會需要一番解釋,從上帝如何創造電腦與網際網路這件事開始講起…

在這邊先整理了一些大概一般人會有的網站建置、軟體開發、App開發的技術整理給大家有點初步概念XD


架設網站

主機網域那先就不說了,是另一個故事了…今天我們偏重在「程式設計」需要哪些技術。

首先要知道網頁技術程式部分會需要:前端、後端、資料庫

 

前端

最基本最基本的需求:html、css、javascript

可是!這些你早就知道拉~ 通常大家會談論的是 javascript 框架

 

什麼是 javascript 框架?

javascript 框架就是你可以依照框架的規範,更快速(是超快速)、更簡單的開發出複雜的網頁應用程式,或者是說單頁應用程式 (SPA)。

現在常聽到的 javascript框架:VueReactAngular

(後來崛起的 flutter 也可以開發網頁,但是他太新了,我不熟XD)

 

再來我們來談談畫面。有些公司因為成本或是各種因素,不一定會有設計師來從頭開始設計畫面,因此就有了 ui 框架

 

什麼是 ui 框架?

javascript 框架也是有所謂的畫面套版,把你常用的那些按鈕、標題、彈窗、icon…等設計成一套符合大部分人常用的外觀與動作,讓你不用從頭開始去針對每顆按鈕、標題寫 css 和 javascript 動作,這種東西就叫做 ui 框架。

有些 ui 框架是必須建立在 javascript 框架的基礎上,例如:

  1. Element ui 是 vue 的 ui 框架。
  2. ant design 有出 vue 和 react 兩種 javascript 框架的 ui 框架。
  3. material ui 是 react 的 ui 框架。

好像越講越複雜?XDDD

假設我現在建立了一個 react 專案,我就可以在專案裡面使用 material ui 的元件,我的按鈕、標題、彈窗那些都可以直接變成 material ui 幫我設計的樣式,而我不用特地去針對這些元件設計 css 和 javascript 動作。

 

那我要怎麼選 ui 框架呢?

其實這個就是假設有兩件牛仔外套,顏色不一樣,口袋位置不一樣,一件是鈕扣、一件是拉鍊。

主要是選你喜歡的「外觀」和「操作方式」( 就是你常聽到的 ui 和 ux )

 

以下是我常用的一些 ui 框架:

  1. vue2、vue3 : element ui
  2. vue2 : vuetify
  3. vue2、react : ant design
  4. react : material ui

 

後端

後端我比較不熟,但是可以大致上講一下,後端就是跟資料庫溝通拿資料後,把資料用 api 或是 websockt 的方式傳給前端,讓前端可以顯示動態資料。

所以後端不只要會後端語言,還需要懂SQL語言,並且需要知道許多網路知識 bla bla bla…

後端技術我知道的有:

  1. go – 老爸是google
  2. c#
  3. java
  4. php
  5. python
  6. node.js – 對你沒看錯,就是 javascript
  7. ruby 

簡單帶過,先不自曝其短了XDD

 


 

App開發

app開發使用的技術上會分為Native, Hybrid, Web App, Cross…幾種,但是太複雜然後有些技術根本超難用好不好!

我通常不這樣分,我只會取兩種 Native(原生)、Cross(跨平台)。

因為現在大家對 app 要求這麼高,你看這麼多網銀優惠差不多,但市佔率完全就是看 app 好不好用,真的真心建議各位不要用 web app啊~~~~

 

Native(原生)

至於為什麼會分這麼多種方式開發呢?主要是因為手機目前有兩大平台:ios、android。

兩個平台都有各自可以用來「專門」開發該平台 app 的語言,

  1. ios — swift
  2. android — java。

原生技術是可以把 app 做得最流暢、最高度客製的技術(廢話,啊他就原生咩~)

但是這對某些公司來說不會選擇原生,因為在技術開發上是兩倍成本,要請兩個工程師,一個ios一個android。

就算有一個工程師他會兩種語言,他也是需要兩倍的時間去製作出兩個平台的 app。

 

Cross(跨平台)

只要一次開發,可以打包成兩個平台的 app,也就是說你只要花一次的時間寫 code,打包的時候就可以產出兩個 app,一個for ios一個for android。

大多數只是想快速開發,但是又有成本考量的公司會選擇跨平台技術,因為這樣原本要花兩倍時間或是請兩個工程師的成本,現在就是找一個會使用跨平台技術的工程師一次搞定。

當然跨平台是有缺點的,就是他”有可能”只能完成大約 90% 的 app 功能,或許會有一些跨平台技術尚未支持的地方(大約10%),你仍然會需要用到原生語言去寫,但是其實那一小部分,上網 google 通常都能解決,因為你又不是要開發那種 uber 啊~GoShare 啊~那種超屌的 app嘛 XDD

 

跨平台技術我常用的有以下兩種:(順便幫大家標出他們幕後老爸是誰~

  1. React Native – facebook
  2. Flutter – google

如果你的公司原本就有前端工程師,那你可以鼓勵他順便學一下 RN ( 我們這圈子叫 React Native 都叫 RN,很潮吧~學起來!)

因為 react native 顧名思義就是用 react 去開發 app,也就是說你一樣用 javascript 這個前端技術就可以開發 app 了!

 


 

前端與後端的溝通

我們常常聽到的 call api,其時就是後端把從資料庫 data base 撈到的資料包成 web api 給前端呼叫,但是前端與後端溝通不是只有 call api 這一種選項。

  1. Restful api
  2. GraphQL
  3. websocket

 

我們特別來談談 websocket。

其實 api 是有限制的,就是你必須發出請求,後端才會回傳東西給你。

但是如果我們想要實作「通知」這種情境,就是我根本不知道前端該在什麼時候發出請求,這時可以使用 websocket 技術,由後端主動通知前端。

也會有些人用一分鐘打一次 api 的方式 (輪詢) 來取得現在即時的狀態然後發送通知,但這樣就變成你沒有要通知的那些時間,api 都是多打的。

websocket 需要前後端一起合作,後端開出 websocket 端口,然後指定 channel ;前端去訂閱那個 channel ,收到資料後做出畫面顯示。

 


這篇就先講到這邊拉,希望大家都能針對自己想開發的產品找到適合的技術或人才 ^_^

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。