【文組的學CODE之路 3 】用Django寫程式第一個專案|要怎麼開始?會遇到什麼問題?

by Kelly Guo
2,023 views
text

我是文組生,出社會好幾年了,一直以來的工作都是在廣告業,比較多是屬於溝通管理團隊的工作性質,因此重來都沒寫過程式,是連HTML、CSS都看不懂的人!

靠著自學的方式,在學習基礎Python、基礎Django後,大約花了三個月(不密集)的時間架設了一個工具食譜網站。記錄一下我的菜鳥學習筆記。

前幾篇文章有介紹過 為什麼我想要寫程式,這邊就不多加贅述。 >>來得及嗎?程式語言學習

我想與其一直查詢「來得及嗎?」相關工程師的經驗分享,也許時間拿來看文章、影片來實地學習,所以就決定來做一個自己的project,因為從零到有,有些功能又是要自己開發的,所以應該是最痛苦但學習效率最快的做法。

我在學習完一個Django的portfolio project後,就把裡面約80%的技能拿來做了自己的網站。當然裡面還有新的功能需要自己摸索開發。

我第一個 Django 網站:My Recipe 食譜網站

開發原因:因為開始學做菜後,IG、YT就開始存了很多食譜跟作法的教學,但因為沒有系統的存檔,所以在做菜的時候有時候還是會找不到靈感,或是又花太多時間找食譜。因此我就想做一個像是自己的icook一樣的食譜網站,還能依據我要的食材搜尋,這樣就能知道冰箱的食材可以做什麼東西了!

功能需求:

  • 首圖照片
  • 新增食譜、並可以上傳照片
  • 搜尋功能:菜名、食材、作者等
  • 原創者名字、參考影片
  • 編輯、刪除已經上傳的食譜
  • 加入會員、登入、登出功能

軟硬體資源:

  • 程式使用:Python, Django , Ajax,  Python外掛(whitenoise, pillow等)
  • 部署資源(免費):AWS S3 Bucket儲存、Heroku部署、PostgreSQL資料庫

參考網站:

  • 全部google解決
  • 搭配相似的線上課程(先學完了)

學習時程:

  • 跟著教學影片製作作品集網站1.5個月
  • 製作自己的網站約花費2 個月
 

好,讓我們開始吧!

課程教學內容包含:

  • Django MVT原理與實作教學
  • Model 表單建立 
  • 前端建立表單、編輯、刪除
  • 叫出資料庫資訊
  • 會員制度
  • 搜尋頁面
  • 分頁方法
  • S3 Bucket使用、postgreSQL串接
  • 如何使用現成的html, css等bootstrap的程式碼

自學的功能:

  • 如何在UI中直接能加入更多欄位新增食材、調味料
  • 如何在一個表單中建議多個model
  • 如何壓縮上傳的圖片
  • 如何加速網站速度
  • 如何加入編輯器讓新稱食譜文字與步驟更有彈性
  • 學習github add , push , merge等功能 、 串接 heroku的方法

遇到的困難:

在一開始幾乎是邊看邊做上個project的基本功能,有些功能是可以複製的,因此前期製作的速度很快,但在遇到專案個別問題時,像是前端只有一個表單要同時建議後台多個資料庫時,應該怎麼做才是最難的部分。

  1. 前端讓user自己新增多的欄位,並且成功讓後台抓取新增欄位的數量,成功存在不同的資料庫
  2. 網站做好了速度卻超級慢,本來在localhost是很快的,但是教學網站也沒有提到這個解決方式
  3. 部署heroku因為不熟介面、github的運作、AWS的串接嘗試了很多方法
  4. 基本上自己開發的功能都是遇到的非常困難的,因為沒有任何一個教學是一模一樣,甚至就算差不多的功能,因為教學時間不同版本不同,差異也會很大

怎麼克服找不到「實際教學」的時候?

其實這個時段都會很痛苦,因為開發有時候是線性的,發生bug或是遇到東西卡關時,因為程式會開啟debug的模式,因此在預覽畫面就會不能運行,跑出似懂非懂的debug內容。大部分看那個畫面都會滿崩潰的,尤其寫的也看不懂的時候。

遇到bug時,我通常還是會運用裡面的關鍵字去google查詢可能是哪裡有問題,大概都需要找10-15個解決方案,才會解決一個問題。

在開發新功能的時候,我會建議到YT去找相似的功能開法影片,因為有UI或是看到畫面的邏輯教學,會比自己看別人的code還容易懂前後的邏輯,雖然缺點就是非常慢,因為要一個一個看別人的project的教學影片,而且神奇的是,有時候差不多功能,教學的內容卻也差很多。

這也就驗證了,每個方法可能都有機會,但要找到適合自己的解決方式。

真的很痛苦的時候,建議可以休息個1-2天,不用逼自己當下要解決問題,我常常是過了兩天後,才想法可以的解決方法,或是會突然感覺到哪個方法比較正確,然後再繼續專研。

單一食譜的畫面

編輯自己上傳的食譜,我故意把照片拉掉會跑比較快

新增食譜的畫面

Ajax的 “+”,看似簡單卻折磨我一個禮拜之久

最後因為網站是使用AWS的free tier,因為害怕流量多過free tier會被收費因此就不分享了!

我的下一步:

學習更深的python功能,會跟CS學程比較有關係,希望下一步能好好地刷leetcode!

你也在學習code嗎?一起加油吧!

0 留言

你可能也會喜歡...

留下你的想法