[分享] 用平板寫code是一種什麼樣的體驗?
開始之前
我猜你大概有以下疑問
- 為什麼電腦用的好好的要跑去平板開發？
- 體驗起來方便嗎？
- 這是免費的嗎？
別著急這些問題通通可以在以下文章得到解答 =）
目錄
- 本篇文章適合誰？
- 前言
- 流程介紹
- 流程實作
- 使用技術＆專有名詞介紹
p.s 以下用到的專有名詞其實不算少，但我盡量少用專有名詞了XD
如果你有看到不知道的專有名詞可以先往下滑到使用技術與專有名詞的地方有看不懂的也可以留言喔～
本篇文章適合誰？
- Prototype 快速開發者 ： 如果你很喜歡開發prototype，常常在咖啡喝到一半，馬桶蹲到一半靈光乍現，並且迫不及待想要把你的想法實踐出來，這篇文章就是沙漠中的綠洲，讓妳可以站著開發、躺著開發、趴著開發
- 陷入平板與筆電的重量地獄：我是一個平板筆記控，喜歡把做一堆手寫筆記在平板上，因此經常遇到需要同時扛著筆電與平板外出工作的情況，帶筆電出門工作通常都會伴隨著重的要命的變壓器跟線，搞得每次出門辦公都有一種行軍的感覺。
- 學生＆程式新手 ： 如果你是學生，或者想學習寫程式，陷入不曉得電腦要買哪一台電腦的困境，這篇文章也可以給你一個不一樣的選擇，不管是處理課堂上的作業，或者一些興趣上的額外開發，本篇文章提供的方法絕對夠你用一陣子甚至可以用到你成為工程師（雲端），從此不需要被賣電腦的店員強迫推銷，除非你想要說服你爸媽寫程式要買比較好的電腦~~（但其實是想要開光追玩遊戲）。~~
整套流程下來除非用量特別大不然都是免費的，好工具不用嗎？
前言
大概在半年多前，陪伴我多年的學習平板壽終正寢了，而我平時在用的MacbookPro也開始出現過熱的現象，正當我還在思考先買新Macbook還是新平板的時候，強者我同事剛好分享了他平常的開發流程，他有一整個專案是利用上下班通勤時間並且在手機上開發的，當時我的表情大概就跟下面的貓貓一樣震驚
於是我開始有了大膽的想法，如果我可以解決環境+版本控制+部署，把開發環境遷移到雲端，那我就不需要過度考慮電腦效能問題，下一台開發設備甚至可以是平板，而這篇文章就是這個大膽想法的實踐過程。
BTW我使用的是SAMSUNG的Tab S8 加鍵盤滑鼠組，由於我沒有用過其他平板開發，所以不保證其他裝置也有同樣的體驗，但既然平板可以做到這些，比較低價的文書筆電應該沒道理不行吧！?
流程介紹
雖然本篇文章使用的技術很多，但其實核心觀念很簡單，你可以輕易的替換成你喜歡的工具，我會先簡單的介紹我的開發流程，後面step-by-step的教你快速上手，OK廢話不多說讓我們進入正題吧！
要在平板上重現整個開發流程，需要把整個過程拆成三個部分
- 開發環境
- 版本控制
- 部署環境 (自動部屬)
開發環境
一般我們指的開發環境是編輯程式碼與執行程式碼的地方，通常會提到OS（作業系統）與IDE（程式編輯器）、SDK（開發套件），常見的作業系統選擇有Windows、MacOS、Linux (Ubuntu)，程式編輯器比較常見的選擇有Visual Studio Code、jetbrains、pycharm
而所謂的線上IDE說白一點就是
一個線上編輯器運行在一台遠在天邊的電腦，並且幫你安裝好你需要的工具（ex : python, nodejs…)
因此有了線上IDE你就不需要管瑣碎的環境問題，只需要專心寫code就好，直接節省好幾年的壽命XD
而網路上已經有一大堆現成的選擇，你可以針對需求選擇喜歡的平台，以下是網路大大統整出來的IDE們，挑挑看選選看喔^^~
如果你覺得選擇太多不想思考，我個人最推薦的是Replit，擁有非常人性化的介面，支援非常多種的程式語言，也支援各種跨平台應用，你可以在手機APP上也可以在網頁上開發，介面本身的功能也非常多，也支援直接github連動。
p.s. 免費版跟付費版最大的差別在於速度與效能，如果你對付費版有疑慮可以先玩玩看免費版
版本控制
程式版本控制用於追蹤和管理軟體開發過程中的程式碼變更。它可以讓開發人員對程式碼進行修改、撤回更改、查找歷史版本，並允許多個開發人員進行協作開發，確保程式碼的完整性和一致性。常用的版本控制系統包括Git、SVN等等。
但這裡我只推薦Github，原因我們之後還會提到，為的是要用他平台內建的Github Action，跟GCP Cloud Run的自動部署
部署環境
這個部分大概只有後端工程師需要，通常我們開發完一個服務的時候，需要把程式碼放到一台電腦上，並確保程式碼24小時不間斷的執行，這中間有非常多的技術細節要兼顧，比方說網路狀況、硬體設備、網址與網域、維持設備運作的水電…etc，可以說在雲端技術出來之前運營一個服務的成本非常高，對於小型或個人開發者而言幾乎不可能負擔。
常見的雲端環境有Azure(微軟)、GCP (Google)、AWS (亞馬遜)，各有各的優缺點大家可以自行斟酌，不過我比較推薦GCP，因為UX跟文件做得很好， ＂幾乎＂不需要額外的第三方教學就能快速上手，管理服務的方式也很直覺，不太會有忘記關閉功能而被扣錢的情況，並且有提供台幣約9000元的試用額度，非常建議大家可以玩玩看
可能有些人會疑問為什麼不直接部署在replit上就好了，原因有以下
- 如果你用的是免費版，無法一直開啟instance(運行你程式的虛擬環境)
- replit上的伺服器，地點只能部署在美國跟印度，因此怎麼選都很慢
- 使用GCP可以更容易地整合開發其他服務
流程實作
開發流程大綱 (Cloud Run without Github Action）
- 開一個replit專案 (Replit)
- 新增一個專案到github(Github)
- 把專案同步到github (Replit)
- 開一個GCP Cloud Run 讓他同步github (GCP)
詳細流程
Step1 首先你要先辦一個帳號
Step2 然後創建一個專案 (範例使用的是Express模板）
Step3 測試專案是否能正常運行
Step4 新增一個專案到github
檢查是否創建成功
Step5 創建一個Dockerfile
FROM node:17-alpine
# 在容器中建立一個 app 目錄來存放 Node.js 應用程式的程式碼
WORKDIR /app
# 安裝 Node.js 應用程式所需的套件
COPY package*.json ./
RUN npm install
# 把程式碼複製到容器中的 app 目錄
COPY . .
EXPOSE 8080
# 設定 Node.js 應用程式啟動時的指令
CMD [ "npm", "start" ]Step6 更改server.js
const express = require('express')
const app = express()
const port = parseInt(process.env.PORT) || 8080; //改這裡
const path = require('path');
...Step7 同步更新到github上
Step8 部署到GCP Cloud Run
新增一個服務
設定Cloud Build & Cloud Run 服務名稱
選擇你剛剛創建的git repo
這邊是設定針對main branch以及dockerfile進行初始化設定 (不理解也沒關係，反正照做就好了XD)
這邊有二個重點
- 最大會開幾台電腦 ：預設是100，但畢竟我們是測試，所以就開小量吧
- 是否允許外部連結使用你的服務
按下create，GCP就會開始自動部署了，往後每一次只要你push到github上的main branch， GCP都會自動幫你更新一次
在複習一次全部的流程
Step1 首先你要先辦一個Replit帳號、Github帳號、GCP帳號
Step2 然後創建一個專案 (範例使用的是Express模板）
Step3 測試專案是否能正常運行
Step4 新增一個專案到github
Step5 創建一個Dockerfile
Step6 更改server.js
Step7 同步更新到github上
Step8 部署到GCP Cloud Run
Git 專案連結
Replit專案連結
使用技術＆專有名詞介紹
- Replit : 超好用的線上IDE
- Github : GitHub 就是一個專為軟體開發者們所建立的平台，提供了許多工具去幫助他們管理程式碼，並且能夠與其他開發者們作協作及交流。
- main branch : 主要的分支，一個專案可以共存很多不同的分之作為
- GCP : GCP 提供了完整的雲端服務，能夠協助使用者建構、部署其應用程式等等，是一個可擴展、可彈性的雲端運算平台
- Cloud Run : Cloud Run 是一個全受管的容器執行服務，可以讓你在某些地方（例如：旅館、機場、咖啡店或家中）使用自己的雲端端點去執行容器化的應用程式，可以在數秒內承諾啟動容器與擴展採用者數量，並根據使用負載付款
- Dockerfile : Dockerfile 是一個用於定義 Docker 映像檔的腳本文件。使用 Dockerfile 可以自動化地建立 Docker 映像檔，提高部署應用程式與創建環境的效率。如果你跟我一樣對Dockerfile不太熟，別忘了你還有ChatGPT，這篇文章的dockerfile就是他寫的
心得
總的來說，雖然用電腦開發還是比較快，但是平板已經可以成為日常開發的選項，在完成這篇文章前我已經有大半的開發轉移到雲端，包括連這篇文章都是用平板寫的，我相信未來應該還會更多這樣的情境，轉移到雲端不僅意味著可以釋放書包中的重量，也意味著電腦跟手機的界線越來越模糊，也許在不久的將來你不再需要考慮要買手機還是買電腦，因為手機就等於電腦。
