iT邦幫忙

2022 iThome 鐵人賽

DAY 7
0

Day-7 專案演練 MyNote

這次要做的專案,簡單來講是個加強版的 to-do list,除了基本的增刪修改基本功能,還會表格排序,輸出報表(?),可以的話,還想附加一個管理櫃子那些層有放東西,分別放了什麼,跟冰箱裡面是否有放東西的儀錶板XD(修但幾類)

緣起

要做自己的 side project,總是沒靈感怎麼辦?後來我發現這是個假議題,我不是因為沒靈感做不了 side project,而是因為一整天工作氣力用盡,才做不了 side project,而我又是怎麼驗證這件事情的呢?就是直接去接案,而且要接那種好玩的案子。

一個月過去了,案子結掉,我坐在桌前沉思 : 下班後好累,我需要更多的推力才能做事。

參加了鐵人賽,這不就是個做 side project 的好機會嗎!?

以前就很常靠北使用者開需求都不講清楚,一直改一直重做,真的好討厭。現在我讓自己做 side project 都不知道自己要做什麼,情何以堪XD

想要做什麼

利用自己最近想嘗試的 UI 套件 : chakra UI,與我的新朋友 : tailwindCSS,在加上一點最近在工作上製作過的功能,在應用一點近來,總之不管做什麼,加點表格跟表單就對了,難度立刻上去(欸

突然從開發者,在今天化身成需求一堆的使用者,之後的每一天都要填坑,所以開心也只有今天了XDD以待辦清單、番茄鐘、儀表板等元素為原型,然後想要管理一些瑣碎的事情,各式各樣的要素都想試試。

總之,需求開開一時爽,開發就送火葬場(??。

「總之,MyNote 會幫我記得一些事」,一句話,簡單的定位了這個專案的走向。

暫時就幫這個專案的名稱取叫 MyNote(還真隨意,快笑死),也許做到一半會想改個名稱,畫個 logo,這部分我就保留自己可以一時興起的空間。

User Story

User Story 是用來描述誰需要甚麼,為甚麼需要,是一個製作產品的思考工具。

誰來使用 MyNote 呢,就是筆者我自己,那麼我想要解決什麼問題,嘗試用 User Story 來了解看看吧。

沒有標準答案,所以我就按造自己的感覺寫,當作練習,句子呈現大概是 :我想要-做甚麼-為什麼做

  • 我想要做 side project,但是沒有足夠的動機,製作 MyNote 搭配鐵人賽,能夠讓我同時體驗作為使用者與作為開發者的不同之處之外,還能寫作產出
  • 我需要記得的事情太多,MyNote 的擁有待辦清單的特性可以解決我的問題。
  • 我不喜歡用腦袋記得櫃子裏面放什麼,冰箱裏面放甚麼,所以我想要一個儀表板,我希望 MyNote 可以幫我管理這些
  • 我討厭無聊,所以製作表單輸入跟表格排序,複習在工作上實踐過的功能
  • 我想嘗試沒用過的 UI 套件,所以我會使用 charkra UI 打造頁面,因為不想要寫那麼多 CSS,也享有一個中規中矩的畫面可以用

Function Map

說到 Function Map,這個東西曾經讓我感到不知所措,試著製作過卻發現,自己覺得難做,別人來也看不懂這什麼東西。

後來才發現,我太在乎形式了,我需要的是: 就我要開發的專案,寫恰到好處的 Function Map,要畫圖、列清單、做PPT,怎樣都可以的。所以今天我要用我習慣的方式來寫這個 Function Map :也就是當作有標註全部功能的 site map 來寫。

  • Menu :Dashboard、Todos
  • DashboardPage
    • 櫃子 :編輯放置物品狀態、編輯放置物品內容、新增放置物品、編輯放置物品
    • 冰箱 :編輯放置物品狀態、顯示放置物品狀態、
  • TodoPage :新增待辦、編輯待辦、編輯待辦狀態、刪除待辦、表格排序待辦、表格顯示待辦、分頁(正在思考要不要做)
  • HomePage :顯示 todos 的快速操作(其他部分還在思考)

設計稿

找來了 chakra UI 的設計系統 figma 檔之後,我嘗試用裡面的元件,從 0 開始在一張新 figma 檔案裡面製作設計稿,花了一個小時多,做完一頁,我的心得是,這種事情還是交給專業的來吧...前端工程師幹這個真的事倍功半啊...放上一張截圖紀念一下。

其實從以前在工作上與設計師合作,都是拿到設計稿之後忍不住讚嘆 :設計師真的好厲害啊!

然後當我自己實際進去畫了一張,現在看到設計師都會想要下跪了吧(老闆看到問說你為什麼要跪著切版(等一下

結語

描述好自己想做的事情,是個滿值得投資時間鍛鍊的技能。

分工上來說 User Story、Function Map 通常是 PM 在做,設計稿是設計在做,雞同鴨講的時候,才懂 PM 有多重要Q_Q

花了點時間在開幹前寫了 User Story、Function Map,甚至還做了設計稿,雖然只幹了一頁...(這個不熟的人來用,真的超花時間,感恩設計師讚嘆設計師),做了看似對開發進度沒有幫助的事,反而在同理不同角色上學到很多。


上一篇
Day-6 我流 react 開發環境
下一篇
Day-8 專案演練-建立新專案
系列文
新手前端與真實世界的開發 feat.React 與他的夥伴30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言