Alpha Camp 學期2-3 自學經驗回顧

Ya Chu
6 min readAug 29, 2021

--

學完學期2-3的後端課程,可以自己完整打造簡單的專案。這學期期末令我印象最深刻的,就是期末驗收「爸爸的私房錢」及「短網址產生器」。對於一個小菜雞,我可是帶著眼淚及焦慮慢慢獨自完成這個專案,因為太多功能是要自己去尋找解決的!但進步幅度可想而知。以下來分享令我印象最深刻的部分:

日期的格式

使用時機:「爸爸的私房錢」中,記帳過程需要填入「日期」

遇到的問題: 日期的資料型態AC規定要用Date(原本想要偷偷用String的說 XD),問題來啦,Date型態呈現出來的日期長類似這樣:Sat Jun 09 2007....就不是我要的2007.06.09。在這之前我完全沒遇過這樣的情境,所以當然是一片空白~

如何解決? 我在google上打了很多關鍵字「date format」「how to change date format in javascripts」等等,網路上解決方式琳瑯滿目。

後來有找到一個moment.js的方式,但看了別人的使用方式,自己使用仍不成功。

網路上查找了將近一小時,想說觀摩一下同學都用什麼方式解決。發現同學會另外開一個helpers.js的檔案,裡面設定需要用到的功能函示,再用module.exports的方式輸出使用。感謝同學讓我學習更多工具,以下是他這部分的code:

dateFormat: function (date) {

return date.toJSON().substring(0, 10)}

再把dateFormat帶入{{ this.date}}就可以了。

以下是我找到的toJSON()跟substring(,)的用法,學習到了很多!

一鍵複製

使用時機:「短網址產生器」有個進階功能,按下copy可以直接複製短網址

遇到的問題: 以前學過按下按鍵,可以連接到別的網站等功能,但是要讓他可以copy這個功能要自己尋找~( 一連串的找解決方法的能力)

如何解決?我在google上打了很多關鍵字「copy text」「how to copy in javascripts」等等,有找到以下的資源:

大致上我的理解是要在<button>加上 onclick=”myFunction()”(如下)

<button onclick=”myFunction()”>Copy text</button>

所以要來寫一個myFunction()的函式啦!函式的部分可以參考以上的連結

再嘗試這個方式前,我又有觀摩一位學長的作品,因為非常好理解,所以最後就嘗試這個方式。

<script>

const shortURL = document.querySelector(‘#short-url’)

const copyBtn = document.querySelector(‘#copy-btn’) copyBtn.addEventListener(‘click’, function onCopyBtnclicked(event) { console.log(‘Copy Button is clicked!’) window.getSelection().selectAllChildren(shortURL) document.execCommand(‘copy’) })

</script>

直接把這一段放到index.hbs裡面,我也發現了document.execCommand(‘copy’)這個功能,真是太美好了~以下有很多相關功能可以查詢

回顧與發現

除了以上的技術學習外,在學期2-3及期末專案的大力磨練下,有其他的心得感想:

構思整體專案流程

之前都是跟著教學一步一腳印學習開發過程,一到了放手的時候,總是特別驚悚,就像是腳底下的支撐著的地板突然不見了。隨之而來的是,「我要開始自己來」的想法。我努力回想所有建立專案的流程,以及有哪些檔案需要先完成,經過一段時間摸索,到了第二個專案整體完成速度快很多。

讀懂更多的程式碼

因為要自己找尋解決方法,所以會想盡辦法找資料,並且拜讀學長姐及同儕的作品。在大量讀取程式碼的過程中,無形提高了理解速度及熟悉度。

debug能力增強

真的是小菜雞,什麼不該出現的bug都出現了,但這也是必經之路。當我在debug過程中,同時會把程式碼看過很多遍,自然會增加程式碼的熟悉度。其中一個bug是上傳heroku時發生錯誤,我就把所有程式碼看過一遍,發現很沒效率,就開始排除一些可能性,最後鎖定是雲端設定的部分有問題(所有資料確定都有上傳heroku),發現是符號打錯了!

雖然花很多時間,但這些痛都會變成以後的精神動力!(因為不想再踩一次坑了:P)

git hub、mongodb及heroku更上手

說來慚愧,雖然git hub很常使用,但我還是只對git add跟git commit比較熟悉。後來因為同時要上傳git hub及heroku,所以就把git hub指令更熟悉的摸了一次。之前看mogodb及heroku的設定覺得步驟很多,多看幾次就會知道為什麼會有這些指令。把每個指令意義化就不容易忘記了!

--

--

Ya Chu

I’m the one who follows my heart, pursues my own life, and is willing to share. Learning is everything.