https://docs.google.com/presentation/d/1l-QDZhFbLiBvt1dFvUvRyTf8vLIa4zIu7B3j7DUGfwE/edit

# 講稿
各位好，我們是第3組 - Zen Booster

我們要介紹的專案是 名片機 - MEISHIcian

MEISHIcian 是什麼呢？MEISHI ，出自日文的名片。而 MEISHIcian 則取至英文的魔法師，magicain的諧音，兩者放在一起則有「名片魔法師」的意思

可以看出這是跟名片相關的專案，至於具體內容這我們稍後介紹

先來介紹我們的團隊，Zen Booster

我是團隊的璟舜 Shun ，而另一外成員則是我的好哥們冠廷 Alex

名片機主要就是由我們兩人開發完成，而上面就是我們兩人所創造的名片，

現在，讓我們進入正題，談談名片機吧

名片機的起源很簡單，如果在座各位有使用過名片，或許可以試著思考以下問題

首先，手邊名片堆積成山，總是找不到想要的人

再來，一段時間未連絡，照著名片打過去卻發現到窗口不是辭職、就是負責人變了

最後，因為使用實體名片，導致有時候名片丟了就突然找不到人了

我們的 Baby，名片機就是為此而生的

名片機共有4個重點，創造、分享、管理、同步

1. 你想做一個可以交換的電子名片？
2. 你想要所有名片的資訊都能即時更新？
3. 你想要僅靠一台手機就能在商務場合交換名片？

口號：太棒了，名片機可以解決您的問題

這裡簡單較紹我們的網頁功能

首先是編輯器，所有名片都是在這裡製作

有了名片，接著是展示它的地方，也就是公開頁

再來，如果你收藏了別人的名片，那麼就需要管理它的管理頁

那如果，別人的職務變動了怎麼辦呢？這時候我們的訊息頁就登場了

而最後的最後，則是名片牆，一個可以讓你一窺其他人名片的地方

那介紹了這麼多，接下來就只接看看我們的Baby，名片機的本體吧

來到精美的首頁，可以看到名片機的介紹，以及下方名片 DEMO

我們按照引導，準備來直接製作一個屬於自己的名片

首先來到了資訊頁面，在這裡，你必須填上個人相關的資料

那我們來簡單填寫一下

按下開始，就可以看到我們引以為傲的編輯器

這個編輯器雖然製作時間不長，但該有的都有

文字方面，不只可以新增文字，剛剛的填入的資料也隨你新增

素材庫這裡，目前只有放簡單幾個圖案

而照片呢，則可以按你喜歡上傳，上限為5張，滿了就得清空

再來，我們看一下提供的模板

有：

火箭隊模板

工程師模板

設計師模板

精緻模板

台灣傳統模板

以及其他直示名片

不僅如此，畢竟是名片，當然可以來到背面做設計

如果做到一半，想讓名片旋轉也沒問題，但這裡會清空各位的心血，還請小心

這裡我們試著使用上一部，哇～還好東西都回來了，如果要還原也沒問題

接著看其他功能

首先是調色盤。這就不多說了。不能換顏色的編輯器，不能稱之為編輯器

再來是圖層，你要上移還是下移都不是問題

如果你想旋轉物件，當然也能旋轉物件

那如果想將某個東西固定住，也不是問題，用拖拉的方式就可以再次選取就可以取消了

刪除紐，老樣子？

接下來是文字專屬功能

字型、大小、對齊、粗體、斜體、底線、甚至是間距通通有，沒有做不到，只有我想不到

再來，我們的素材也可以調整它的外框粗細和顏色

有了這些，編輯器的基礎功能就差不多完成了

如果你認為這樣就差不多了，那麼你就太天真了！

上面只是前菜，接下來就是重點

容我為各位介紹，快捷鍵功能

從上一部、下一步、翻面、刪除、粗體、斜體、底線

甚至你想儲存，簡單 ctrl s 什麼都不需要擔心

那你說快捷鍵都有了，應該差不多了吧？果然還是太天真了！

接下來的功能連首發人員都不知道

首先是複製貼上功能！使用ctrl c ctrl v，想要什麼通通再來一份

再來是群體功能！

想要字型一起改變、想要顏色一起改變？

有了這些，只要再搭配快捷鍵，輕輕鬆鬆就能做出你要的東西來了

那就讓我用簡單的時間做個簡單的個人名片吧

雖然我不是設計師，但這個名片看起來還不錯對吧？

如果你覺得做的挺糟的，太好了，我們隨時歡迎有 sense 的人幫我們增加有質感的名片

接下來會由冠廷講解其他功能

## 頁面總覽
因為名片機的功能很豐富，在demo前先簡單介紹功能有哪些，對於後面的demo有更清楚的認識

- 名片編輯器
- 最方便的功能，讓你套用模版，稍作修改就可以製作有設計感的名片
- 打造名片前會先輸入職務相關資訊，進入編輯器後可以快速帶入
- 提供像 power point那樣 多元完善的文字方塊功能，字體、大小、顏色、對齊，都難不倒
- redo undo 可以來回操作
- Layer上移下移 讓你調整重疊時圖層順序
- 支援快捷鍵
- 名片公開頁
- 發佈後，就有一個名片專屬的入口網頁
- 呈現名片圖片、職務資訊、個人連結，自行新增放github網址、email等等
- 也可以連結順序調整
- 名片管理
- 分為兩個部分：收藏別人的名片，跟個人名片
- 收藏名片的部份，設計書籤群組的管理，讓你可以分門別類歸檔
- 個人名片部分，可以看到自己已經發佈跟未發布的名片
- 已經發佈的可以顯示QRcode
- 也有為了手機特化，類滿版效果展示名片
- 如果要離職了，要刪除名片了，就會發送訊息給其他收藏者

## 創造名片...
- 璟舜

## 公開頁面

完成名片之後，會自動生成一個公開頁面，可以藉由這個頁面分享你的名片給其他人，
可以自定義標題、新增連結、把個人網站或是社群連結放上去，達到個人入口網站的作用

- 如果是自己的名片，會出現編輯名片
- 如果是已登入的狀態，也是別人的名片，就會出現收藏名片按鈕
- 若未登入的訪客，就只有下載圖片
- 點擊下載名片，就可以兩面的名片圖檔下載下來

接著我們來客製化自己的公開頁面
- 頁面標題
- 職務資訊切換是否公開
- 新增連結
- 依據選取的類型，會帶入預設的icon，當然也可以自己上傳
- 新增兩個連結
- 在電腦版可以拖曳調整順序
- 也可以重新修改連結或是刪除連結

## 個人名片管理

我們有了名片，也有了個人頁面，要如何快速分享名片呢？
別擔心，我們來到名片管理 個人頁面，將剛剛做好的名片分享QRcode 就可以快速讓別人掃描了

現在就來打開手機掃描看看，馬上就可以進行收藏
接著來示範在手機上展示名片的效果，這樣就可以達到類似滿版的效果，直接秀出你的名片

我們也可以使用add to homescreen 功能，加入到主畫面，這樣就有類似app的體驗

## 群組管理

- 新增連結
- 改名
- 調整順序
- 刪除連結

置頂
編輯標籤
標籤篩選

## 名片訊息
來到我們最後一個主打功能：名片同步，也就是訊息系統
以下我們來示範，當今天更改職務資訊後，也會發佈訊息，收藏者就可以接收到訊息了

## 名片牆
最後簡單帶過我們名片牆
所有發佈的名片都在這裡，可以依照類別跟地區篩選，也可以搜尋名字

以上是我們的Demo，接著我們來快速講解我們專題相關的資訊

## 規劃

- 線稿圖: 我們兩個共同使用Figma繪製線稿圖，描繪專案整體的輪廓
- 編輯器: 核心功能編輯器，由Shun深入研究，踩過許許多多的坑才有這麼完整的功能
- 後端: 後端部分和Next的架構由我負責，因為我是前端組，所以能夠站在前端的角度思考API怎麼設計會比較好串接，這次我們前後整合算是十分順利

## 困境

- 其實vercel做得很好，但因為編輯器所使用的套件因素，導致部屬上去有很多意外狀況
- next.js 特別在於，第一次渲染是server side，這個會導致有些browser特有的東西匯出錯
- redux跟next整合也會碰到hydrate的問題，我們使用next-redux-wrapper來把兩者整在一起

前端開發
使用 Tailwind CSS、React 作為基礎進行開發
因應個人名片入口網頁 SEO 需求，使用 Next.js 作為框架開發網站架構，並設計 Server-side Render
Fabric.js 搭配 React 打造順手的編輯器
React-DnD 實現拖曳變更順序
Redux 整合多重複雜 Reducer，Redux Thunk 處理非同步請求
使用 ESLint Airbnb、Prettier 進行程式碼風格與排版管理
後端開發
使用 Node.js + Express.js，以 RESTful 原則設計 API 達 39 支，並拆分 MVC 結構，以 Joi 設計 Request 驗證 Middleware，配合 Error Handler 完善錯誤管理功能

Schema 依照需求情景選擇 Embedded / Reference

JWT 實作會員驗證功能

# 名片機 MEISHIcian | 電子商務名片網站

火箭隊第 10 梯專案作品，製作者：Shun、Alex。
網址：https://meishician.vercel.app/

## 專案特色

- 創造名片：功能齊全的名片編輯器，內建數種樣版，快速上手名片製作
- 分享名片：打造個人名片入口網頁，呈現名片、職務資訊、個人連結，並可將他人名片進行收藏
- 管理名片：名片群組化管理、分門別類，也可以貼上標籤，迅速找尋目標對象
- 同步名片：離職刪除名片或是更改職務資訊，同步發送給名片收藏者，資訊零落差

## 專案規劃

### 前端開發
- 框架選擇 Next.js、切板使用 TailwindCSS
- 個人名片入口有 SEO 需求，設計為 Server-side render
- 使用 Redux 配合 Redux Thunk 因應複雜狀態管理及非同步請求
- 使用 ESLint Airbnb、Prettier 進行程式碼風格與排版管理
- 使用 Fabric.js 操作 canvas 製作編輯器
- 使用 React-DnD 實現拖曳功能，以達成良好的 UX 體驗

### 後端開發
- 使用 Node.js + Express.js
- 以 RESTful 原則設計，並拆分 MVC 結構
- 以 Joi 設計 Request 驗證 Middleware，配合 Error Handler 完善錯誤管理
- Schema 依照需求情景選擇 Embedded / Reference
- 以 JWT 實作會員驗證功能

## Features

### 製作名片

- 在打造名片頁中填寫職務相關資料
- 可調整背景顏色
- 可選擇樣板以快速製作名片
- 可新增一般文字或職務資料，並進行細部調整
- 可新增圖庫物件，並進行細部調整
- 可上傳圖片，上限為 5 張，並可刪除。圖片支援格式： PNG、JPG、JPEG、SVG 。最大容量：2 MB
- 可調整物件圖層
- 可翻轉畫布置背面
- 可調整名片為直式或橫式
- 可調存檔
- 支援群組同時修改
- 部份功能支援快捷鍵
- 【全體】 backspace 或 delete 刪除
- 【全體】 ctrl + z 上一步
- 【全體】 ctrl + y 還原
- 【全體】 ctrl + s 存檔
- 【全體】 ctrl + space 翻轉
- 【物件】 ctrl + c 複製
- 【物件】 ctrl + v 貼上
- 【文字】 ctrl + b 粗體
- 【文字】 ctrl + i 斜體
- 【文字】 ctrl + u 底限

### 編輯個人頁

- 在管理名片頁中點選自己創建的名片可來到個人名片頁
- 點選「編輯名片」修改名片樣式或修改職務資訊
- 點選「修改資訊」可來到編輯模式
- 編輯模式中，可針對公開資訊進行調整
- 編輯模式中，可新增 / 刪除相關外部連結
- 編輯模式中，可調整外部連結順序（暫無支援手機版）

### 收藏名片

- 掃描他人 QR code 或前往名片牆尋找可進入他人名片頁
- 登入狀態下可收藏他人名片
- 可下載他人名片的圖片檔（格式： PNG）

### 管理名片

- 收藏的名片可新增標籤、修改群組、編寫注記、刪除
- 收藏的名片可新增 / 取消至頂
- 可新增 / 刪除群組。刪除群組後，原群組內名片將前往預設區
- 可更改群組名稱
- 可拖曳名片制欲收藏群組 （暫無支援手機板）
- 可拖曳群組進行排列 （暫無支援手機板）
- 可點選標籤尋找名片
- 可輸入關鍵字搜尋名片
- 點選「我的名片」可看到自製名片狀態
- 已發布名片可進行展示、修改、刪除
- 已發布名片可打開 QR code 供他人進行掃描
- 未發布名片可繼續進行編輯

### 更動資訊

- 名片刪除 / 職務更動時，可自訂義傳所要傳送的訊息

### 接收資訊

- 他人名片刪除 / 職務更新時，可皆收到對方所傳送的訊息

## 其他好用的 Package Kit

- uiball/loaders：用於轉場動畫處理
- aos：用於首頁滾動視差處理
- cookies-next：Next.js 中的 Cookie 處理
- date-fns：用於日期資料的處理
- fabric-pure-browser：用來操縱 canvas tag 以製作編輯器
- framer-motion：頁面動畫效果處理
- immer：immutable state 處理
- next-redux-wrapper：Next.js 與 Redux 整合
- qrcode.react：用來生成 網址 QR code
- react-color：用來處理編輯器的調色盤
- react-dnd：用來開發拖拉功能
- react-fast-marquee：首頁滾動名片處理
- react-hook-form：表單處理
- react-icons：畫面 icon 使用
- react-redux：資料狀態管理
- react-toastify：錯誤資訊顯示
- redux-logger：確認 redux 狀態
- tippy：用來顯示工具提示框