iT邦幫忙

2025 iThome 鐵人賽

DAY 22
0
Build on AWS

從零到雲端:AWS 開發之路系列 第 22

Day22 專案開箱 ─ 規劃我的「照片日記」網站

  • 分享至 

  • xImage
  •  

走到 AWS 挑戰的最後一週,我想要挑戰一個「看得見、摸得著」的小專案,而不是只有一堆後端 API 或者管理介面的操作。

我想了一下,平常我們生活中最常做的紀錄方式就是「拍照 + 打卡 + 寫下一些文字感想」。如果能在 AWS 上完成一個「照片日記網站」,讓我每天上傳一張「代表今天」照片,寫一小段文字,然後能夠回顧過去的紀錄,那不就是一個結合了前端、後端、資料庫的完整小專案嗎?

不過這個專案的限制是時間有點不夠,原本預計想加上登入功能,畢竟日記是一人一本,怎麼可能大家一起共用啦!若是最後登入功能來不及,我會以自己demo功能的方式一個一個截圖給大家看!/images/emoticon/emoticon17.gif

目前規劃這個專案的核心:

  • 上傳照片(存到雲端 S3)
  • 撰寫日記(存到資料庫 DynamoDB)
  • 前端能顯示日記列表(照片 + 文字)
  • 可以刪除或修改日記
  • 最後整個網站能透過 CloudFront/Cloudflare 對外公開

功能規劃

  • 新增日記:上傳照片 + 寫文字 → 存到雲端
  • 瀏覽日記:可以依日期顯示過去上傳的日記(照片 + 文字)
  • 修改日記:萬一打錯字或上錯照片,可以編輯
  • 刪除日記:刪掉不想留下的紀錄
  • 搜尋功能:依日期或關鍵字找日記(如果有時間)

系統架構設計

  • 前端網站:放在 S3,主要是 HTML/CSS/JS,透過 CloudFront 加速
  • API Gateway:提供 REST API,例如 /create, /list, /delete
  • Lambda:後端邏輯,處理上傳、刪除、查詢,無需自己架伺服器
  • S3:照片實體存放位置,回傳 URL
  • DynamoDB:存放文字內容 + 照片 URL + 日期

DynamoDB 資料表設計

https://ithelp.ithome.com.tw/upload/images/20251003/20169251WGVeBPWdaG.png

API 規劃

  1. POST /diary:建立新日記(上傳照片 + 文字)
  2. GET /diary:取得所有日記(排序)
  3. PUT /diary/{id}:修改某篇日記
  4. DELETE /diary/{id}:刪除某篇日記

前端畫面構想

前端我會分成兩個主要頁面:

  1. 新增日記頁面:上傳照片 + 輸入文字 + 送出
  2. 日記列表頁面:瀏覽所有日記(照片縮圖 + 文字),每一篇日記可以「修改」或「刪除」
    (時間許可的話新增查詢功能)

那麼我們就馬不停蹄,明天就來建立S3的部分吧!


上一篇
Day21 本週回顧與心得文章 week3
系列文
從零到雲端:AWS 開發之路22
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言