專案名稱 : Geo Memoir 旅遊經驗分享平台
專案簡介
此作品使用於:此平台提供給旅遊愛好者,分享旅途上所拍攝的照片,以及旅途中的故事,網站提供英、繁、簡三種語言切換
製作動機
為什麼會想製作這個主題:和身邊國內外朋友交流時,很常提到彼此國家推薦的旅遊景點或美食等,因此想藉由這個機會製作一個旅遊經驗分享平台,無論是在國內或是國外旅遊,都可分享在平台上,同時也可針對感興趣的旅遊故事進行留言討論
專案主架構

前端

Ø Bootstrap 排版
1.container/container-fluid
2.grid system
3.flexbox

Ø Bootstrap 元素、物件
1.Navbar 導航欄
2.Carousel 輪播圖


Ø Bootstrap 元素、物件
3.Buttons 按鈕
4.Pagination 分頁



Ø Blueprint
1.路徑的部分使用了Blueprint套件, 在每個url前加上語言前綴, 將當前語言存儲在全局變量g中
2.從用戶端 Accept-Language取偏好語言, 若無該語言則取配置文件中首位


Ø Flask-Babel 翻譯
1.pybabel extract –F babel.cfg –o messages.pot .
(建立/更新翻譯模板)
2.pybabel init –i messages.pot –d app/translations –l lang (建立語系) pybabel update –i messages.pot –d app/translations
(更新翻譯檔案)
3.pybabel compile –d app/translations
(編譯翻譯檔案)

Ø Google Sign-In


Luxon library – Javascript
Ø 處理各地日期、時間


後端

Ø 藉由後端判斷登錄方式, 傳送資料給前端做會員登錄顯示

Ø 除了會員登錄顯示, 同時做會員區選項href的拼接和附值

Ø 分頁
在後端建立custom_paginator方法, 將分頁的判斷數據以及當前頁面資料等返回給前端


Ø 翻譯
1.django-admin makemessages –all django-admin compilemessages
2. 創建截取語言前綴以及翻譯方法, 於views.py中引用, 將需要response按照當前對應的語言做翻譯再行返回


Ø 設置crontab工作排程 > 每小時更新一次天氣訊息

Ø 郵件發送 - Celery




專案心得
本次的網站製作是我的第一個作品, 所以在規劃方面花了一點時間, 製作期間我發現許多前端所需的功能在課程中並未提到, 所以需要額外去做很多功課才能完成。
為了讓網站更好的呈現, 後續我也添加了不同功能並做了修改, 光是首頁的一個小部分就改了無數次, 印象最深刻的還是架網站的部分, 因為需要為購買的域名作設定, nginx以及AWS的部分前後出現了許多問題, 後端數據始終無法出來, 花了非常久的時間才終於將所有問題排除。
透過這一次的經驗, 我知道如何更好的去整合前後端, 也知道如何更快的去排查問題, 在架網站的部分也學習到了很多額外的知識, 能夠好好的運用在下一次的網站製作。
目前我已完成Python第四階段的學習, 後續將持續向第五階段邁進, 並同時增進網站製作的能力。
Comentários