文科少女學程式

其實學期2-3的課程已經在上個禮拜就結束了
但因為有幾份作業有點卡關，所以有延誤到整體的時間
到了這週才總算把所有東西全部完成！

以我最愛的重訓來比喻我每週的心情的話，大概是以下這樣XD
如果有在重訓的人，應該可以體會我有多煎熬~

第一週 easy peasy的暖身，動作練習
第二週 前面空槓練習一組，直接正式蹲35kg五組
第三週 恢復空槓蹲三組
第四週 直接正式蹲50kg五組

這次直接來分享
為什麼讓我第四週感覺像在蹲50kg深蹲的其中一份作業吧！
「短網址產生器」

和考題的初次見面
老實說我第一眼看到這個考題時，我整個傻眼了！
因為我就是那種平常很愛用短網址產生器的人，
但我只會用，不會做啊！
愣了幾秒後，我開始思考這個東西的邏輯是什麼！
就這樣斷斷續續想了兩天！！！
沒錯！是兩天！　
但結論是「沒想法」
腦子真的呈現空白狀態...

而且在這兩天我還經歷了下面這個過程...
雖然這份不是作業，是考題，所以無法觀摩其他同學的作業。
前幾天好像也還沒有人繳交...
不過小聰明的我就想到用關鍵字加github查詢，
果然被我查到了一兩位學長繳交的作業！
開心的我，想說打開來看，我就秒知道是什麼轉換邏輯了。
結果看了之後，換來的結果是我看不懂...

不管三七二十一直接寫下去
由於有分作業有批改限制的時間，所以我就先放下這個考題，
先處理其他的份作業和考題了。
就這樣拖到了禮拜四才總算正式開始...
如果還要搞懂學長寫的內容的話，我覺得太花時間了。
所以最後決定
直接先以自己想得到的內容寫下去吧！

按照慣例地做好前面安裝express、mongoose這些前置流程，
再把前端版面設定好。
我先從最簡單的部分開始做，就是把長網址改成縮成5個亂數的的短網址的部分。
這部分我參考前幾週產生密碼的那個內容下去修改成我要的5個亂數。
到這裡為止都不難，也順利可以產出我要的連結形式。
不過問題又來了！我還是沒有想通為什麼短連結可以被判定要連到哪？
我現在不就只有改外部的名字嗎？

其實現在回想起來，還是不知道當時的自己到底哪裡出了問題XD
就真的無法思考出要從哪確認這個短網址等於哪個原網址。
也許是我把背後的世界觀想得太龐大，我想成在茫茫網路中，
我要怎麼去改人家已經設定好的網址。

突然間地茅塞頓開
在思考到底短網址要怎麼確認是哪個原網址的過程中，
我還是有不斷地去觀摩之前學長寫的內容，
但不懂就真的還是不懂。
不過就在週四當天晚上，我突然想通了一些東西。
我想到我都已經把短網址和原網址存在mongodb上了
那就在裡面確認不就可以了嗎？
當天已經想到太晚就去休息了，
隔天早上馬上用我想的方式實作，
過程不算太順利，主要是卡在我還是不熟悉
find()、map()這些方法。
我用我原先想的方式去做，但是總是做不出我要的結果，
中間又不斷地去查詢理解這些陣列相關的操作方式，
不斷地console.log，直到最後才一步步做出我要的結果。
(真的console.log好多次...)

雖然這一天已經禮拜五了，
但是因為我想的方法真的成功可以轉到我要的原網址，
我就天真地以為後面的事情都可以這麼順利，
(我甚至還發臉書動態記錄這成功的一刻...)
禮拜五晚上就先處理其他份作業地收尾部分，
心想禮拜六應該就可以順利完成。
(因為我在嘗試方式是否可行地時候，
寫的程式碼參數取名都隨便取，
也想要加強整個流程地練習，
就又另外開了一份從頭寫起。)

無限鬼打牆的開始
禮拜六我滿心期待可以花三個小時完成所有重寫的過程，
結果卻莫名地在最後一刻卡關...
途中我有改了前端版面，也有改了一些參數名稱，
每改一個部分，基本上都還會在測試一次是否有改壞，
但是我卻忘記最重要的一部分，就是網址還能不能連到原網址。
就這樣到了最後一刻，我才發現我把我寫的東西搞壞了...
而且完全不知道是哪個步驟後才產生問題...

反覆地檢查都還是一樣的狀況，也開始思考是否有其他解法，
但還是一樣沒有解決問題，可是又覺得一定可以靠自己排除這些問題，
所以遲遲沒有到lighthouse詢問助教。
重複console.log檢查後，歸納出這幾個問題點。
1. 用findOne找的資料一直出現未定義
2. 使用短網址，後面params會接著長網址
於是就開始從這兩個問題點下去分析到底哪裡出錯。

這個鬼打牆的狀況，一直持續著。
想不透到底哪裡出問題的我突然想到用之前舊的版本再試試看是否正常，
得到的結果是舊版本沒有出現問題，
於是我就開始對照我新版寫的程式碼跟舊版有沒有不一樣，
但我發現短網址轉原網址的部分並沒有不一樣，
只是改了部分參數名稱，不至於會壞掉...

我甚至又重寫了一次(不過很多重複的地方我就直接複製貼上調整了)
重寫的這一天已經到了禮拜天...
可是即使重寫，歸納出的那兩個問題點還是沒有排除...

重見光明
禮拜天的晚上雖然已經抽絲剝繭，
也上網查資料，又重新去觀摩學長作業，
但還是沒有找出解決問題的方式...
眼看再這樣下去不行，最後還是上lighthouse提問了。
不過也還是一邊想辦法解決手上的問題，
我又打開舊的那份來測試功能，
最後發現我居然不能手動輸入www.開頭的網址，
才發現原來input欄位的類型我設定成URL了~
為了怕有些人不知道要輸入https
我就把input改成text type
這就是我重現光明的一刻!!!!!!!!!!!!!
因為這麼一改，舊的版本也出現一樣的狀況了。
那一刻我才明白，因為沒有加https，
才導致網址無法正常連過去，
所以我就開始著手修改這部分，把所有沒有輸入https的網址，
都加上https。
就這樣所有短網址都可以正常轉到長網址了！！
不過調整完也已經禮拜一了...

最後插曲
在本機上功能有正常呈現所有功能，
但到heroku上，卻又無法正常轉到原網址。
不過這個部分有跟助教求救，所以很快就排除問題。

總結
這份考題其實不會很難，但是因為自己基本常識的不足，
而造成大卡關，我想應該只有我遇到這麼瞎的問題吧XD
平常用www開頭的網址太習慣了，
都忽略掉其實瀏覽器上會自動幫我們加上https的部分。
不過這次的大卡關也讓我從錯誤中得到了不少經驗，
也為了解決問題查到了不少資料，從嘗試中學到不少東西。
雖然也花了很多時間和腦力，但還是很值得的 :)