老爸的私房錢的專案介紹

更新於 發佈於 閱讀時間約 3 分鐘

為何會選擇記帳程式做專案?

網路上有很多各種記帳方式,用Excel方式來記帳是很多人熟悉的作法。但既然我已經學習了JavaScript這個程式語言,就想試看看如何藉由程式語言寫出一個簡易的記帳程式。

技術選擇方面

選擇Node.js是因為他是一個可以讓JavaScript 執行環境;我可以直接在電腦上建立、讀取、修改和刪除檔案,也能和資料庫連通。Node.js的優點在於能及時處理大量數據,基於記帳程式牽扯到大量資料庫的操作,所以我選擇Node.js。

哪部分你相對能掌握?哪裡花了最多時間?

整個專案中最能掌握的部份應該算是建立專案的剛開始。從新增專案資料夾開始、如何設定package.json、安裝 Express、設定主程式 app.js、設定常用腳本、到最後的版本控制設定,這些都是建立專案最基本也最重要的架構。

關於建立種子資料其實是花我最多的時間。因為建立種子資料腳本是專案剛開始最重要的步驟,在完成伺服器和資料庫連線之後,必須依靠指令來執行這個腳本才能看到我們想呈現的資料。當專案進行到後期加入使用者登入、登出的認證系統之後,因為原本的資料結構被大幅度的修改舊有的腳本已經作廢,需要重構種子資料。因為對於非同步處理的觀念和用法還不是很熟,只好上網查找資料也順便觀摩其他人的是如何寫的。

過程中你有對哪個技術有特別深刻的學習?

整個專案過程中對於使用bcrypt的雜湊演算來為密碼做保護的處理流程有深刻的學習。

bcrypt的運作原理是這樣的:

1. 在使用者設定的密碼中,加上一段隨機產生的字串也就是實務上所說的「加鹽」,時期成為一個組合字串。

2. 加鹽後的組合字串透過雜湊演算法,產生一段被處理過的密碼hashed password。

3. 把產生結果的hashed password和中途加入的鹽 salt 分開儲存。當登入者輸入的密碼經過同樣的處理所產出的字串,和資料庫中的hashed password一樣時,應用程式會判別登入成功;反之,不一樣時就會判別登入失敗。

第一次完成全端作品雖然碰上許多大小不一的問題,很慶幸透過不斷上網找資料和觀摩他人的作品,最終問題都能一一解決。未來除了持續學習新的東西,也要好好複習舊的技能讓自己對於做一個專案更加順利。

留言
avatar-img
留言分享你的想法!
avatar-img
奧莉薇走在成為後端工程師之路上
22會員
164內容數
全端網頁開發專業知識分享
2025/04/26
※ 場景: 即時聊天應用: 設計一個支持多房間功能的即時聊天平台,像 WhatsApp、LINE或Facebook Messenger,提供文字、語音、視訊聊天功能,方便管理群組聊天。 功能亮點:加入特別功能,例如可加入多房間功能、使用者名單、表情符號支持、文件分享或訊息已讀未讀狀態。 展示
2025/04/26
※ 場景: 即時聊天應用: 設計一個支持多房間功能的即時聊天平台,像 WhatsApp、LINE或Facebook Messenger,提供文字、語音、視訊聊天功能,方便管理群組聊天。 功能亮點:加入特別功能,例如可加入多房間功能、使用者名單、表情符號支持、文件分享或訊息已讀未讀狀態。 展示
2025/04/26
※ 先建立基本的express後端服務: 1.建立新資料夾:Socket mkdir socket 2.進入資料夾:Socket cd ​bsocket 3. 安裝 Experss 到專案中 npm init -y //初始化專案,建立 package.json 檔 npm insta
Thumbnail
2025/04/26
※ 先建立基本的express後端服務: 1.建立新資料夾:Socket mkdir socket 2.進入資料夾:Socket cd ​bsocket 3. 安裝 Experss 到專案中 npm init -y //初始化專案,建立 package.json 檔 npm insta
Thumbnail
2025/04/10
※ 什麼是 Socket.io:一個基於傳統 WebSocket API 之上的框架。 ※ Socket.io常用功能: Custom Events:在 Socket.io 中,開發者可以創建自己的事件來處理特定的功能或需求。 Rooms:分組的功能。每個連接的用戶(或稱為 socket)可
Thumbnail
2025/04/10
※ 什麼是 Socket.io:一個基於傳統 WebSocket API 之上的框架。 ※ Socket.io常用功能: Custom Events:在 Socket.io 中,開發者可以創建自己的事件來處理特定的功能或需求。 Rooms:分組的功能。每個連接的用戶(或稱為 socket)可
Thumbnail
看更多
你可能也想看
Thumbnail
常常被朋友問「哪裡買的?」嗎?透過蝦皮分潤計畫,把日常購物的分享多加一個步驟,就能轉換成現金回饋。門檻低、申請簡單,特別適合學生與上班族,讓零碎時間也能創造小確幸。
Thumbnail
常常被朋友問「哪裡買的?」嗎?透過蝦皮分潤計畫,把日常購物的分享多加一個步驟,就能轉換成現金回饋。門檻低、申請簡單,特別適合學生與上班族,讓零碎時間也能創造小確幸。
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
專案產生大量又瑣碎的作業做處理,眼下要從iReport的設定檔(jrxml)擷取每一項套印參數出來,提供給別人做Excel公式的資料表進行作業。
Thumbnail
專案產生大量又瑣碎的作業做處理,眼下要從iReport的設定檔(jrxml)擷取每一項套印參數出來,提供給別人做Excel公式的資料表進行作業。
Thumbnail
一、泛用型的電子公文系統是為了解決底下幾種痛點: 痛點一:為了不同公文流程就要開發不同程式針對不同的公文流程常常因為資料格式的不一致,就要設計好幾種Table,哪怕只是差異一點點的欄位都必須重新設計好幾種不同的流程做因應,一般中小型的公司並沒有辦法有太多的軟體人員做開發...
Thumbnail
一、泛用型的電子公文系統是為了解決底下幾種痛點: 痛點一:為了不同公文流程就要開發不同程式針對不同的公文流程常常因為資料格式的不一致,就要設計好幾種Table,哪怕只是差異一點點的欄位都必須重新設計好幾種不同的流程做因應,一般中小型的公司並沒有辦法有太多的軟體人員做開發...
Thumbnail
JavaScript 的關鍵價值 JavaScript 是一種強大且廣泛使用的編程語言,具有許多價值和應用。以下整理 JavaScript 的關鍵價值: 客戶端網頁開發、跨平台開發: JavaScript 是種瀏覽器的語言,可實現動態網頁效果,並通過操作 HTML 和 CSS,使網頁互動性提昇,提供
Thumbnail
JavaScript 的關鍵價值 JavaScript 是一種強大且廣泛使用的編程語言,具有許多價值和應用。以下整理 JavaScript 的關鍵價值: 客戶端網頁開發、跨平台開發: JavaScript 是種瀏覽器的語言,可實現動態網頁效果,並通過操作 HTML 和 CSS,使網頁互動性提昇,提供
Thumbnail
其實要為專案建立操作介面的方式很多,除了網頁之外,還能另外寫個專門的手機 APP 連線,或是乾脆升級算法,讓我們能隨口喊一聲「嘿OO!」就搞定,不過⋯
Thumbnail
其實要為專案建立操作介面的方式很多,除了網頁之外,還能另外寫個專門的手機 APP 連線,或是乾脆升級算法,讓我們能隨口喊一聲「嘿OO!」就搞定,不過⋯
Thumbnail
打包網頁 在部署網站之前,我們要先來打包我們的網頁前端專案 為什麼要打包呢?什麼是打包呢?這有點像是編譯,如果你寫過 C 應該講到這裡就理解為什麼要這樣做了 在網頁開發中網頁內容最原始就是直接用 html 下去寫,但一個成熟的開發者會善用框架來開發,不論是用 vue 或 react,樣式的部分也會從
Thumbnail
打包網頁 在部署網站之前,我們要先來打包我們的網頁前端專案 為什麼要打包呢?什麼是打包呢?這有點像是編譯,如果你寫過 C 應該講到這裡就理解為什麼要這樣做了 在網頁開發中網頁內容最原始就是直接用 html 下去寫,但一個成熟的開發者會善用框架來開發,不論是用 vue 或 react,樣式的部分也會從
Thumbnail
話說我這個小懶鬼當初沒有搞懂專題分頁是什麼,所以 Tag 亂下,搞得我的專題分頁看起來很不明確。再加上最近在臉書分享的 Notion 貼文又開始有人在按讚(神奇的演算法),為了感謝大家的這一年來的支持,想要在年末的時候教大家一些我常用的小技巧!
Thumbnail
話說我這個小懶鬼當初沒有搞懂專題分頁是什麼,所以 Tag 亂下,搞得我的專題分頁看起來很不明確。再加上最近在臉書分享的 Notion 貼文又開始有人在按讚(神奇的演算法),為了感謝大家的這一年來的支持,想要在年末的時候教大家一些我常用的小技巧!
Thumbnail
HackMD 是一個協作共筆文件彈性很高的工具,但也因為彈性高,更需要學習系統性的管理方式。 當瞭解 HackMD 的編寫邏輯,就能依照協作文件的性質,來進行不同的管理方式。
Thumbnail
HackMD 是一個協作共筆文件彈性很高的工具,但也因為彈性高,更需要學習系統性的管理方式。 當瞭解 HackMD 的編寫邏輯,就能依照協作文件的性質,來進行不同的管理方式。
Thumbnail
世界上有最好的程式語言嗎?答案絕對是否定的,每種語言都有適合的使用時機,而也有不少程式語言是隨著時代變遷而消失的。請放下自己要學到最好語言的心態,多看多學,自然會找到適合你的語言。這篇文章會用客觀的角度跟你分享最多人使用的程式語言。
Thumbnail
世界上有最好的程式語言嗎?答案絕對是否定的,每種語言都有適合的使用時機,而也有不少程式語言是隨著時代變遷而消失的。請放下自己要學到最好語言的心態,多看多學,自然會找到適合你的語言。這篇文章會用客觀的角度跟你分享最多人使用的程式語言。
Thumbnail
JavaScript 能做許多事,尤其透過瀏覽器的 API 或套件,我們得以悠游於巨量資料中,將資料轉換為與使用者溝通的介面,以下就來分享 15 個實用的 Vanilla JS 程式碼...
Thumbnail
JavaScript 能做許多事,尤其透過瀏覽器的 API 或套件,我們得以悠游於巨量資料中,將資料轉換為與使用者溝通的介面,以下就來分享 15 個實用的 Vanilla JS 程式碼...
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News