[Web工程師轉職] 如何設置開發環境
由於之前在開發環境上撞了很大的壁, 那時就一直想著有時間的話, 要來整理一下這個問題……
為什麼這需要拿出來討論呢?
假設：今天想學3D, 就必須得在電腦裡安裝Maya or 3ds Max才能開始。
假設：今天想學電腦繪圖, 就必須得在電腦裡安裝Photoshop or CSP。
同理：想學寫程式, 就必須得在電腦裡把該程式語言給安裝上去。
但是!!
安裝程式語言, 可就比安裝PS要複雜許多了……
我買了一本頗受好評的PHP書籍, 但他是2010年前的舊書：
深入淺出 PHP 與 MySQL
我邊撞壁邊Google才發現, IT領域其實不推薦買舊書。因為IT領域技術更新的速度實在太快了, 舊書裡面的東西可能老早就被淘汰。雖然這本書內容真的不錯, 但因為開發環境的問題, 讓我在第一章節就差點過不去。
相信嘗試過自學寫程式的人, 應該都有碰過這個問題。
我該如何運行我寫好的script？
今天我可能用HTML寫了一個簡單的表單, 並且希望用後端語言的PHP去抓HTML表單上使用者輸入的資料, 用這些資料去做一些事情。
這種情況, 電腦裡就必須安裝兩樣東西, 才能達成這個目的。
一個是, Web Server。
另一個是, 該程式語言的……引擎? (我不知道這有沒有術語)
我們必須透過Chrome等瀏覽器, 去讀取並且Render你的HTML表單, 使用者填寫完表單之後, 會按下Submit提交表單。這時我們會透過程式, 讓Submit被按下的同時去執行我寫好的後端script, 以調用表單上的資料。
這整個過程, 我們都是透過瀏覽器去完成。但是, 一般瀏覽器只有內建HTML/CSS以及JavaScript的引擎。所以這三種以外, 瀏覽器都是看不懂的。
所以非JS的語言都需要另外安裝, 然後透過Web Server來管理, 讓我們的瀏覽器可以正確的調用我們安裝好的其他語言。
如同我們要畫畫, 會在本機端安裝PS一樣, 這是大多人最直覺會想到的方法。但其實, 網路上也有許多線上的開發環境可以使用。所以總結一下可行的方法有下面三種：
1. 在自己的本機端上架站
2. 在線上購買 or 尋找免費的架站(網頁)空間
3. 直接使用線上免費的開發環境
論DIY難度應該是 1 ≥ 2 > 3
找線上的提供商不一定方便, 每個空間提供的使用方法都不太一樣, 還得學習怎麼使用他。而且不見得有安裝你想學習的語言。台灣好像已經沒有甚麼線上空間提供商了, 我有用過的也只有Hinet跟大學空間。所以想要好用的基本都得嗑英文。
論操作難度應該是 2 >1 ≥ 3
2最麻煩是因為, 你寫完script還得上傳它才能run。一直重複這個動作是會瘋掉的。1的話只要編輯完存檔, 切回Chrome按F5刷新就可以測試了, 但這僅限於要測的東西是HTML + 後端script。想測兩者搭配, 2跟3其實差不多。如果單純只想測script, 3最方便。
結合以上兩點, 可以看出 3 是最好的方式。
所以先來講講3......
直接使用線上免費的開發環境
這是我最晚知道的方式, 我花了很多力氣才把1研究好, 之後我才知道3。所以我很嘔, 很不開心啊!! 浪費了我寶貴的青春年華 (淚
我現在知道的線上開發環境有……
HTML/CSS/JS： CodePen, JSBin
後端語言：Repl.it
直接去Google關鍵字, 甚麼Online Coding之類的, 有非常多。
我想這個就不需解釋太多, 就跟Goolge的線上文件那些一樣, 已經幫你打包成一個線上應用程式了, 直接用它就好。
但這些線上開發環境只是讓你學習或快速測試用的, 如果想讓做好的網站上線, 就得使用另外兩個方法。
在線上購買 or 尋找免費的架站(網頁)空間
這個我沒有深入研究, 但還是想稍微提一下, 架站方面的東西Google一搜會發現出現很多創業啦, 經營Blog啦……種種, 跟學coding沒啥關係的玩意。我們的目的只是要找一個方法來run我們的script, 所以別在這陷的太深。
如上文提到的, 我只有在很久以前, 學生時代時用過Hinet跟大學的空間, 帳號密碼之類的早忘光了。然而, 相信現代人最常使用的免費雲端硬碟應該是Google Drive。Google Drive似乎在好幾年前曾經開放過外連, 所以可以充當網頁空間。但Google將這服務關閉了。於是……
就出現了第三方外掛XD
詳細可以參考這篇文章：
Google Drive雲端硬碟變成HTML網頁空間，並且還可綁定網域名稱
鑒於資安考量, 建議要利用Google充當免費Web Server的話, 最好是新建一個專用帳號來使用。
在自己的本機端上架站
這個雖然前置作業很麻煩, 但身為Web工程師, 我想這勢必有一天得碰。自己架站似乎主要有兩種方法, 一種是原始人法, 一種是利用架站懶人包。
先講簡單的, 架站懶人包。似乎常見的有這三個：
XAMPP, MAMP 與 AMPPS
其中, AMPPS已淘汰。但自學買書的時候還是常會看到它。
這些是市面上流行的懶人包, 它幫你把網頁開發最常見的東西一次打包好, 一鍵安裝到位。
以XAMPP為例, 提供Apache (Web Server), PHP (後端語言), MySQL (資料庫)……等, 也有設計GUI可供使用。Google可以找到很多相關教學文章。基本上是安裝好, 設定好www資料夾, 把資料放進去就可以run了。
再來講原始人架站法：
顧名思義, 就是老實的分別去安裝。下面我只稍微分享一下我安裝過的部分。
首先Web Server。好像是市面上就兩種, 都是免費的：
● Apache (開源)
● IIS (微軟的)
Apache似乎完敗IIS, 所以一般都會推薦裝Apache。不過我這邊是裝XAMPP了, 所以沒特別研究怎麼裝Apache。
IIS是我最先嘗試安裝的。因為看到它是微軟的, 想說應該最懶人。不過不推薦使用, Goolge網路文章可以發現, IIS已經非常式微, 而且教學文章還每個都講得不大一樣, 很容易造成混亂。只是要學習coding的話, 就別陷太深了。稍微了解一下就好。
Windows出廠就自帶IIS了, 但需要去開啟這項服務。Win10系統下：
點[開始]旁邊的搜尋, 控制台 > 程式集 > [程式與功能]底下的[開啟或關閉Windows功能]。
裡面可以看到 Internet Information Services > Web管理工具。
把IIS相關的打開就可以了。
接著一樣在[開始]旁邊的搜尋輸入IIS, 就能快速找到它。
最後講講怎麼把PHP安裝到IIS上。
PHP.net (官網)
去裡面找Download, 可以看到Windows是被單獨分出來的。
點進去之後可以看到.zip之類的壓縮檔。重點來了, 下載完後完全不知道怎麼用。裡面有個install文件, 一方面是全英文很難受, 另一方面我相信沒有點IT底子的人是看不懂的。
然後我在PHP官網的Documentation中, 找到相關情報。
在裡面有一個欄目是 Installation on Windows systems, 點進去之後有一個連結寫著 PHP Install Tools。這裡面寫著……
If you want to setup PHP and are using IIS, the easiest way is to use » Microsoft’s Web Platform Installer (WebPI).
» XAMPP, WampServer and BitNami will setup PHP applications for use with Apache on Windows.
也就是說, 如果是用Apache, 別累了。去裝XAMPP之類的吧。
如果是IIS, 建議使用微軟的 Web Platform Installer(WebPI)。
這個WebPI是啥呢? 最開始看到我還真沒反應過來。後來Google才發現, 這是一個類似Windows Update的應用。透過這個應用可以在Windows上很方便的安裝各種Web開發所需要的工具。在裡面就可以找到 PHP, 直接安裝即可。
雖然這個WebPI很方便, 但是我真的不覺得非資訊本科生, 有能力靠自己走到這。這安裝難易度跟PS甚麼的, 根本不是一個級別。
我分享的目的只是想讓大家知道, 它有多難搞……
所以愛惜自己, 請使用懶人包, 或是線上開發環境。
這樣搞了一次之後, 我深刻理解為啥很多人自學, 還沒開始寫到程式就放棄了。這真的太難搞啦!! (翻桌
