# WP final Project

## 已知問題
1. 在沒有買Tag的情況下戳持有標籤會跳出error
2.

## 功能

### 首頁 (/) *
1. 追隨的使用者的最新圖片
* 查詢使用者追隨的帳號(user.liked_user)的最新圖片
2. 最新圖片
* 查詢所有使用者(picture sort by post_date)的最新圖片
3. 最熱門圖片
* picture.liked_count / 已上傳時間(日)
4. 搜尋欄
* 參考搜尋頁面的條件

### 搜尋頁面 (/search) *
1. 正/反向tag (back-end)
3. 按最新/最舊搜尋 (front-end)
5. 按最有人氣搜尋 (總點讚數/發布日期至今為止) (front-end)
6. 按最多人點讚搜尋 (front-end)
7. tag條件排列
9. 展示列表
* 圖片　　 (onclick)
* 圖片名稱 (onclick)
* 作者　　 (onclick)

### 登入 (/login) *
1. 登入後跳轉首頁
* 導向到首頁
2. 導向註冊頁面
* 沒有

### 註冊 (/register) *
1. 註冊後導向首頁

### 圖片展示 (/picture/[pic_id]) *
1. 主要圖片 (picture.url)
2. tag標籤列表 (picture.tags)
3. 點讚功能 (user.liked_picture)
3. 圖片名稱 (picture.name)
4. 創作者 (picture.author)
* 追蹤功能 (user.liked_user)
* 對圖片的文字敘述 (picture.description)
* 創作者其他圖片（最新）
* 對圖片的留言
5. 推薦圖片列表
* 圖片　　 (onclick)
* 圖片名稱 (onclick)
* 作者　　 (onclick)

### 創作者個人資料頁面 (/profile) *
1. 創作者其他網站連結 ex: X, Facebook等
2. 修改名字 (user.name)
3. 修改電子信箱 (user.email)
4. 修改自我介紹 (user.bio)
5. 推薦作品

### 創作者個人作品頁面 (/author/[author_id]) *
1. 創作者名字，自我介紹 (user.name user.bio)
2. 創作者其他網站連結 ex: X, Facebook等 (user.links)
3. 創作者最推薦的作品 (user.recommand_picture)
4. 創作者最新的作品 (user.post_picture sort by post_date)

### 付費頁面 (/donate/[author_id]) *
1. 用指定點數訂閱創作者 (user.coins)
* 參考 https://mui.com/material-ui/getting-started/templates/pricing/ (private_tags, private_tags_cost)

### 點數儲值頁面 (/buy_coin) *
1. 做個假的 (user.coins)
* 參考 https://mui.com/material-ui/getting-started/templates/pricing/

### 私訊訊息面 (/message)
1. 點數 donate 功能
2. 圖片傳送
3. 訊息傳送
4. 連結處理
5. 自動滾動
6. 約稿功能

##

POST /api/search
payload {
    target: "",
    tags: [ {tagname: "", postive: bool}, ]
}

## DB scheme

import { index, text, pgTable, serial, uuid, varchar,integer } from "drizzle-orm/pg-core";

export const usersTable = pgTable(
  "users",
  {
    id: serial("id").primaryKey(),
    displayId: uuid("display_id").defaultRandom().notNull().unique(),
    username: text("username").unique(),
    email: varchar("email", { length: 100 }).notNull(),
    hashedPassword: varchar("hashed_password", { length: 100 }),
    provider: varchar("provider", {
      length: 100,
    }).notNull().default("credentials"),
    
    name: text("name"),
    quote: text("quote"),
    title: text("title"),
    birthday: text("birthday"),
    bio: text("bio"),
    links: text("links"),            // "link0,link1..."
    liked_picture: integer("like_picture").array(),
    liked_user: integer("liked_user").array(),
    post_picture: integer("post_picture").array(),
    private_tags: integer("private_tags").array(),
    private_tags_cost: integer("private_tags_cost").array(),
    owned_private_tag: integer("owned_private_tag").array(),
    coins: integer("coins"),
    
  },
  (table) => ({
    displayIdIndex: index("display_id_index").on(table.displayId),
    emailIndex: index("email_index").on(table.email),
  }),
);

export const pictureTable = pgTable(
  "picture",
  {
    pic_id: serial("pic_id").primaryKey(),
    url: text("url"),
    author: text("author"),
    name: text("name"),
    description: text("description"),
    post_date: text("post_date"),
    liked_count: integer("liked_count"),
    recommand_point: integer("recommand_point"),
    tags: text("tags").array(),
    message: text("message"),
  },
);

export const transactionTable = pgTable(
  "transaction",
  {
      tx_id: serial("tx_id").primaryKey(),
      from_user: text("from_user"),
      to_user: text("to_user"),
      amount: integer("amount"),
      timestamp: text("timestamp")
  }
)

// Remaining code for relations and other tables remains unchanged

# spec

~~2. **題目範圍**：不限，但必須是與網路應用相關，且必須要包含前端應用 (如網頁、Browser Extension、App)、後端伺服器、以及資料庫。如果此題目為先前作品/專題的延續，而非修這門課時的原創，也請在期末專題報告中提供說明。請注意，我們評分時會以本學期實作的部分為限，必要時，我們也請你們提供在此專題貢獻的證明。~~

~~4. **使用技術**：
- 前端：限使用 React.js 或 React 相關框架 (e.g. NextJS, React Native)、或原生的 JavaScript/TypeScript
- 後端：原則上使用 NextJS and/or Express.js(Node.js), 但如果因為應用需要，也可以採用其他 JavaScript/TypeScript 框架甚至其他語言 (e.g. Python)
- 資料庫：不限，只要能確保後端伺服器關機或是重開之後，資料仍然存在即可
- 第三方套件、框架、程式碼：不限，可以採用任何開源、或非開源的套件、框架、或程式碼，但請務必在期末報告中詳細說明。未揭露者不論是否故意，皆會被視為抄襲，而導致期末與學期成績嚴重扣分。
- 如果做成手機 APP, 至少應要有個網頁版的控制/管理後台，或者是用 React Native 來開發 UI/UX，以符合上述條件。~~

4. **期末專題目錄命名以及 GitHub 放置規定**：為了讓助教可以順利的 clone 到你們的期末專題 (Note: 助教會把你的 code clone 到 local, 並在 local 環境進行測試)，請在你們組長的 GitHub 的 **wp1121** repo 底下，建立一個 “**final**” 的目錄，將你們的期末專題 push 至此。至於 final 底下你們想要怎麼安排、命名目錄，甚至想要獨立建立一個符合你們專題的目錄名稱，都 OK. 但請盡量 follow 一般 or 上課示範的 convention, 以利老師與助教閱讀你們的程式碼。
- 由於你們的 wp1121 repo 為 private, **如果你們想要把期末專題 open source**, 建議另外開一個 public 的 repo, 並自行維護兩者的關係。
- 一個作法是先建立此專題的 public repo, 然後主要在此 repo 開發，待有一個穩定的版本的時候 (可以打個版號)，將他 clone 下來，然後複製、上傳到 wp1121/final 裡面，以確保此 final 目錄隨時有可執行/demo 的版本。俟最後 deadline 前，請記得 push 一份 for final project 的最終穩定版。**請注意：助教會在 deadline 到了就把 code clone 下來，之後的修改將不計入期末專題的評分之中。**
- 雖然沒有硬性規定，但**請不要在 deadline 之前將你的 wp1121 變成 public.**
- 為了可以共同協作，請將同組其他成員加入此 wp1121 repo 之 collaborators.
5. **雲端部署**：本課程規定一定要將你們的網路服務部署到雲端，如果需要帳密登入你的服務，請在期末報告中提供一組帳密，或者是提供註冊的服務，以利助教以及老師使用你們的服務和評分。不過請注意自己服務的網路安全性，如果因故被駭，請自行負責。如果有流量或者是開啟時間之限制，請在 [README.md](http://readme.md/) 中說明，並且告知網管聯絡方式，以利助教或老師提出登入需求。

~~6. **題目發想與交流**: 先前同學們 ideations 的收集[在此](https://www.notion.so/e2e35d7de6c94d828c4883ff7357103f?pvs=21)，歡迎同學們自行參考並尋找志同道合的組員。如果需要授課老師的協助，請儘早告知。~~

~~8. **組隊期限**: 期末專題的評分將會採計組員互評的分數，所以遇到雷隊友、或者是處不來的組員，勢必會影響期末專題的進行。所以，請謹慎選擇題目與組員，當然，也請扮演好組員的角色。請在 11/29(三) 9pm 前至 [此表格](https://docs.google.com/forms/d/e/1FAIpQLScN3GTndf0smmeKrGAB_S0f0u9VgEtuqxU7CdmbH14IMzbamA/viewform) 填寫你們最後的分組資訊。一但超過期限，則不可再要求換組/併組/拆組，而未填寫資訊者，期末專題將以 0 分計算。~~

10. **期末專題 deadline**: **12/30(六) 9pm**, 除了專題的程式碼需要 push 到 GitHub 之外，請在此 deadline 之前完成以下 (9 ~ 13) 事項，逾時未完成者則算遲交。

9. **期末 demo 影片 (以組為單位)**：
- 由於預期組數將超過 70 組，我們不可能舉行 demo day，因此，我們將 demo 改為 **請大家自行錄製 demo 影片上傳**
- 影片長度不得超過 6 分鐘，請在專題 deadline 前，上傳至雲端空間 (preferrably a video hosting service)，如 NTU G Suite, Youtube, Vimeo, FB 等
- 影片內容至少應包含：
- 簡單自介 (組別、組員姓名、題目名稱)
- 三句話內介紹你們的題目在做什麼
- Project Demo
- 程式碼架構/使用技術介紹
- Optional 內容：動機/心得、投影片 or 其他輔助說明
- 影片拍攝製作技巧、有沒有露臉、畫質 (只要不要真的太差)… 等，不在評分範圍，大家不需要在這方面軍備競賽

10. **FB 社團貼文分享 (以組為單位)**：為了促進修課同學分享，發揮開源的精神，請於專題 deadline (i.e. 12/30(六) 9pm) 之前至 FB 社團貼文公告作品，內容應包含 (建議按照此順序)：
- PO 文的第一行請統一加上 **[121-1] Web Programming Final** 作為標題
- 專題題目名稱 // 前面請加上組別: **(Group xx) Your Title**
- Demo 影片連結
- 描述這個服務在做什麼
- Deployed 連結 (如有自己有安全性的疑慮，則可以不用在 FB 社團公告此項)
- (如果有給 deployed 連結) 使用/操作方式 (含伺服器端以及使用者端)
- (Optional, 如果你有另外建立一個開源的 repo) Github link (請不要給成你的 private wp1111 repo <= 別人看不到)
- 其他說明
- 使用與參考之框架/模組/原始碼
- 使用之第三方套件、框架、程式碼
- 專題製作心得

11. **期末專題繳交資訊收集 (以組為單位，12/15 後開放填寫)**：為了方便我們收集你們的專題的各項資訊，以利評分以及後續的分享，請在期末專題 deadline (i.e. 12/30(六) 9pm) 前至此 [Google Form](https://hackmd.io/o6YpWVxrRwq1SmolfMdP6g?view) 填寫專題相關資訊，包含:
- 組別
- 組長中文姓名
- 題目名稱
- Deployed service 網址
- Github Repo 網址
- Demo 影片網址
- FB 社團貼文網址
- (Optionoal) 其他想提醒老師與助教評分之事項

12. **期末專題報告 (以組為單位)**：請在 wp1121/final 目錄放上 [README.md](http://readme.md/), 作為期末報告，除了上述公告在 FB 社團的內容之外，也請加上：
- **如何在 localhost 安裝與測試之詳細步驟**
- 請務必詳述，包含：基本的 yarn/npm 指令，後端如果使用其他語言所需要之安裝環境說明，資料庫串接與資料匯入方式，登入之帳密 (if needed)… 等。
- **助教/老師會完全按照此步驟執行安裝**， 請不要期待助教/老師需要自己看懂你的系統架構/script 猜測安裝之指令。
- 如果助教/老師會按照此步驟安裝遇到任何的問題，導致無法 compile/執行，可歸因於同學之疏失者，一律按照底下之扣分標準給予 penalty。
- 至於測試，**我們會按照你們提供的功能說明來測試**，如有一些特別需要注意或是展示的地方，請說明清楚，或是提供測資。
- 每位組員之負責項目 (請詳述)
- 如果有找外掛，請務必特別註明 (i.e. 不要只寫名字，我們無法直接從名字判斷是否有修課)，並說明原因(為什麼要找外掛)，且明確描述自己以及外掛的貢獻。必要時，我們會做 reference check.
- 如果此專題是之前作品/專題的延伸，請務必在此說明清楚 (本學期的貢獻)
- (Optional) 對於此課程的建議

## Reference
助教的notion clone(學習auth)
林文博的hw4(學習api call)
葉咸礽的hw1(express server)
葉咸礽的hw4(傳訊息)
chatgpt3.5
chatgpt4.0
## 使用的套件
Next/Auth
Mui
Pusher
MongoDB
express
Postgresql
drizzle-orm

## install

在本次作業中 我們使用兩個server來run 所以安裝步驟會稍微複雜一點
STEP0 進入放有我們程式的資料夾
STEP1 參照.env.example 設定好環境
STEP2 在資料夾內進行yarn
STEP3 在資料夾內進行yarn migrate
STEP4 多開一個terminal
STEP5 用多開的terminal進入 express_server資料夾 npm i
STEP6 在多開的termial輸入 node index.js 開啟server
STEP7 在原本的terminal 中輸入yarn dev 開啟server

## .env.example如下

POSTGRES_URL=
MONGO_URL=
PUSHER_ID=
NEXT_PUBLIC_PUSHER_KEY=
PUSHER_SECRET=
NEXT_PUBLIC_PUSHER_CLUSTER=

AUTH_GOOGLE_ID=
AUTH_GOOGLE_SECRET=

AUTH_SECRET=
AUTH_GITHUB_ID=
AUTH_GITHUB_SECRET=

NEXT_PUBLIC_BASE_URL=http://localhost:3000/
PICTURE_SERVER_URL=http://localhost:8000/

### .env 所需操作

1. POSTGRES_URL的設置方式請參照課堂上的twitter-clone的部份做
2. MONGO_URL 的設置方式可以參考課堂上教的MONGO_URL設定
3. PUSHER以及AUTH_SECRET及AUTH_GITHUB的部份請參考課堂上教的notion-clone
4. AUTH_GOOGLE的部份請參考下列兩隻影片的設定方式
https://www.youtube.com/watch?v=A53T9_V8aFk
https://www.youtube.com/watch?v=Wi3CEhPEEuw

## deploy的流量限制以及開啟時間限制
1. 請上傳的圖片不要超過10 MB
2. 請不要上傳過多的圖片 以及創立太多的帳號 我們選擇使用的是免費的mongodb以及neon 所以運算資源不太足夠
3. deploy 網頁很慢請耐心等待 理由同上
4. 我們負責處理圖片的express server是架在葉咸礽的宿舍電腦上 所以可能會受到宿舍網路等不可抗力因素影響.

~~PO 文的第一行請統一加上 [121-1] Web Programming Final 作為標題~~
~~專題題目名稱 // 前面請加上組別: (Group xx) Your Title~~
~~Demo 影片連結~~
~~描述這個服務在做什麼~~
~~Deployed 連結 (如有自己有安全性的疑慮，則可以不用在 FB 社團公告此項)~~
~~(如果有給 deployed 連結) 使用/操作方式 (含伺服器端以及使用者端)~~
~~(Optional, 如果你有另外建立一個開源的 repo) Github link (請不要給成你的 private wp1111 repo <= 別人看不到)~~

其他說明
使用與參考之框架 / 模組 / 原始碼
使用之第三方套件、框架、程式碼
專題製作心得

## FB貼文
[121-1] Web Programming Final:
(Group 11)

Demo Link: https://youtu.be/aDFNKgxI32M
Deploy Link: https://wp-final-project.vercel.app/

這個網站是以「標籤」為中心的圖文網站，為了服務創作者及藝文愛好者而誕生。
使用者可以上傳圖片及文字、進行點數交易，利用點數購買的特殊標籤，達成訂閱或購買圖片的操作。在search的部份，我們有提供正向標籤以及反向標籤來進行查詢。同時，我們也提供了便利的點數交易手段、轉帳及聊天室等功能。

網站使用注意事項:
1. 請不要上傳超過10MB的圖片
2. 請上傳jpeg或png的圖片

組長：B10902052 葉咸礽
心得：這次 Final Project 我嘗試整合整個學期學到的各種工具，這讓我對這些網頁工具有了更進一步的認識。並由於必須大量查看 Mui 文檔，也稍稍提升了閱讀前端程式碼的能力。這個 Final Project 對我來說不只是爆肝而已，最後專題完成的成就感，讓我似乎能夠感受到寫程式的樂趣了。
順帶一題，樓下這個人 response data 大小寫打錯，害我吃不到資料

組員：B10902115 林文博
心得： 在這次的final project中我負責大部分除了messenge以外的後端操作, 以及一點小部份的前端修改, 還有前半部份的next/auth處理. 透過這次的作業, 我更加的熟悉了drizzle-orm的使用方式, 以其他的資料處理技巧, 然而,因為一開始的策略錯誤以及時間安排上的失誤, 讓我的這次作業做的有點趕, 做到有點壓力,不過這也算是一種難得的體驗. 總體而言 透過這次作業我對於原本不熟悉的後端及database的操作更加的熟悉了 同時也增進了長時間大量寫程式的經驗. 題外話,樓上這個人positive拼成postive害我後端接不到東西 然後還把disabled都放著不做.

Reference:
參考hw4及notion clone來處理auth及某些溝通 並與chatgpt溝通完成部份程式

使用工具：

* Next.js + Typescript : 作為我們程式的主要架構
* Material-UI : 用以增進前端操作美觀
* Next/Auth : 登入及在網頁中的使用者身份確認
* Pusher : 負責訊息系統的實時溝通
* MongoDB : 訊息系統 DataBase
* Postgresql : 其他所有 DataBase
* express + node.js ： 圖床 Server
* neon : 用來做除了訊息系統以外的資料庫
* drizzle-orm ： 用來幫助 Query 資料庫