# codeSphere ### 資源整合部落格 - 宋維翔 - 賴詠文 --- ## 設計想法 - 考試寫過購物網站了，所以試試部落格 - 單獨部落格有點單調，所以想完成一個資源整合部落格(有多一些功能) - 包含:部落格/小論壇/爬蟲eeclass產生個人行事曆/youtube下載影片至本地端/註冊和登出登入系統 - 一個大學生的codding交流和提供各種方便小程序的平台。 --- ## 使用技術 - 前端:html/css/javascipt - 後端:python的flask - 資料庫:sqlite --- ### 最初開發規劃 <img src="https://hackmd.io/_uploads/HJRPOLxSA.png" width="500px"> --- # 實作成果 --- ## 頁面介紹 --- - entrancePage:terminal-like的最初的登入頁面 - 輸入"new":跳轉到registerPage以註冊帳號 - 輸入"guest":以訪客身分進入網站 - 輸入已註冊的帳號密碼:以user身分登入網站  --- - registerPage:註冊頁面 - 密碼需同時存在大小寫/特殊符號/數字，否則terminal會顯示invalid - 註冊成功後會跳傳回entrancePage以登入  --- - profilePage:使用者的資料顯示 - 可以些改user的個人資料(包含 自我介紹/名字/性別/個人網站連結) - 顯示所有發表過的文章 - 顯示活躍度(按讚數/留言數/貼文數)  --- - homePage: - 有navigate bar可以導覽至個頁面  --- - postPage:顯示資料庫裡的特定貼文 - 包含標題/內文/留言/按讚數/創建時間 - user可以即時在貼文下留言和按讚 ---  --- - createPage:建立貼文 - 支援markdown  --- - displayPage:顯示所有在資料庫的貼文 - 附有search bar， - 點擊想看的post即會direct到該postPage  --- - eeclasslogin:一個方便外掛工具 - 輸入eeclass帳密(這個密碼不會存資料庫) - 使用爬蟲將使用者的所有作業抓下來並產生calendar(見下一頁)  --- - calendar: - 使用者的所有科目和作業顯示在行事曆上 - 有filter可以過濾(左邊的check box)  --- - yt:一個方便外掛工具 - 提供youtube連結和下載的本地端路徑即可完成下載  --- - forumPage:論壇留言板  --- - forumPage:新增留言的頁面  --- ## 資料庫 - 資料表：  --- ### 有很多張table，這裡列兩張作範例 --- - 用戶登入系統 - 儲存資料：用戶id、用戶名稱、密碼、電子郵件、出生日、身分別...  --- - 文章發布系統 - 儲存資料：文章id、發文者id、文章標題、內容、是否公開(visible)，是否已刪除(deleted)、發布時間、刪除時間、更新時間  --- # demo --- # demo video <iframe width="840" height="472.5" src="https://www.youtube.com/embed/b5BxhIv42BQ?si=MzCRvoF2dggUnEMb" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> --- # 心得與討論 --- ## 遇到困難 - 第一次碰網頁的前後端 - 先寫前端，但後來發現我的前端架構沒有為之後串後端和資料庫做預想，使得在接後端和資料庫的過程要修改不少 - 爬蟲一直被擋 - 串接時，由於coding風格、傳送資料方式不同、甚至重複的變數名稱，較花時間修改 --- ## 目標與期望 - 目標: 1.將頁面美化 2.優化資料庫的查詢 3.搭配上框架 4.安全性方面有待加強 - 期望結果: 1.增加越來越多好用的小程序給使用者(ex:eeclass爬蟲) 2.開源，讓大家一起發展這個網頁 --- ## 心得 - chatgpt4 is worth buying