link實習日誌 20221230

link10:00 研究爬蟲

到公司一打開電腦游標就不定時自動飄移，用拭鏡布擦拭無線滑鼠底部或是鍵盤上的觸控點和觸控板皆無效，決定暫時拔掉無線滑鼠，結果游標還是會不定時飄移。

導師傳來一個壓縮檔和操作步驟的訊息，檔案內容如下：

1linkget_post/

2link|

3link|– get_post.js

大致看過 get_post.js 的內容之後，依照訊息內容、自己遇到問題後補上的步驟、教學文章的說明，執行導師提供的爬蟲程式。

link10:30 取得 Cookie

1. 在 Chrome 應用程式商店安裝 EditThisCookie 擴充功能
2. 登入 Facebook 後開啟 EditThisCookie 擴充功能
3. 最上方的七個按鈕的第五個是匯出，按下去之後會顯示說明文字 "Cookies copied to clipboard"，就是已複製到剪貼簿
4. 在 get_post 資料夾當中新增 testitself.json，在 VSCode 當中開啟 testitself.json，把 cookie 貼上並儲存
5. 按 Alt + T + N 開啟終端機，預設是 PowerShell，我換成 Command Prompt

link11:00 安裝套件

link安裝爬蟲套件

1. 下指令，安裝 selenium-webdriver

   1linknpm i selenium-webdriver
   
   

2. 要讓 selenium 運作需要用到 driver，依照自己的作業系統和瀏覽器下載對應的 driver
3. 我的筆電的作業系統是 Windows，瀏覽器選用 Chrome，所以要安裝 chromedriver
4. 先確認自己的 Chrome 版本：在 Chrome 當中開啟 關於 Chrome 頁面
5. 下載與我的 Chrome 版本相同的 chrome driver
6. 下載的檔案解壓縮後將 chromedriver.exe 放到 get_post 資料夾當中

link安裝非同步執行套件

1. 下指令，安裝 async

   1linknpm i async
   
   

link11:30 執行程式

下指令，用 Node.js 來執行程式

1link// 規則

2linknode get_post.js 粉絲團名稱 開始日期 結束日期

3link

4link// 範例

5linknode get_post.js stevensocial 2022-04-01 2022-04-30

導師的訊息中提到上述指令中的粉絲團名稱、開始日期、結束日期會用 get_post.js 當中的 args 陣列儲存，之後用於爬蟲。

裝完套件，執行上述指令，沒有反應。仔細檢查 get_post.js 才發現讀取 cookie 的檔名的時候有加入隨機的數字，改成 testitself.js 再執行一次指令。成功開啟瀏覽器並自動運作，收集一篇貼文的資料後移動到下一篇。

我傳訊息給導師，＂剛才執行程式成功了，現在程式正在自動操作瀏覽器＂，導師回覆＂沒錯 👍＂。

導師傳來新訊息，＂現在有新的切版想請你協助，可能先以這為主QQ＂、＂亞瑞特生命靈數網頁，我剛剛有share給你了＂，附上 Figma 設計稿和 GitLab 專案網址。

link12:30 午餐

餐廳：晨間廚房早午餐 信義永吉店

我點了台式炒泡麵 $75，內容物有炒泡麵、醬汁、青蔥、紅蔥頭、魚板、甜不辣、烤雞、煎蛋，還有英式奶茶 $25。

link13:30 回到公司

之前公司裡的音樂都是純音樂，不知為何今天都是流行歌曲。剛好一寫完前面這句話音樂就被關掉了，偏偏當時正在播放 BTS 的 Dynamite，真可惜。

開始研究早上拿到的新任務 - 生命靈數測驗。

打開 Figma 設計稿，是我進公司兩個月以來看過最潮的設計稿。不過還是有一些問題：

link關於設計的問題

全部頁面

1. 又沒有手機版。文字又被外框化了。
2. 寬度是 1920px，實際寫網頁的時候各種尺寸都需要縮小。
3. 周圍有很多幾何圖形裝飾，雖然很潮但是也許會分散使用者對中間的表單的注意力。

測驗頁面

1. 有一句話好像多了一個字。
2. ＂測驗讀取中＂到底是一開始的網頁載入，還是使用者送出表單後的結果判讀？
3. 理論上填完年月日、按下確認按鈕之後才會出現＂測驗讀取中、進度條、請稍候！＂，那按下確認按鈕前，＂測驗讀取中＂也許應該不顯示。
4. 因為畫面中的物件已經有點多了，我個人會希望＂測驗讀取中＂放在另外的頁面。
5. 想知道為何測驗頁面的色調是深藍色加淺灰色？沒有理由也沒關係。

結果頁面

1. 標題是黃底黑字，說明文字是灰底白字，因為我覺得說明文字比較重要，所以我會希望改成標題是白底黑字，說明文字仍然是灰底白字、其中畫重點的部分黃底黑字。
2. 分享測驗結果按鈕放在左邊、白底黑字，玩其他測驗按鈕放在右邊、黃底黑字。就我所知分享測驗結果對於增加觸及來說比較重要，所以我會希望這兩個按鈕交換位置和樣式。
3. 也許會需要加上再次測驗的按鈕？
4. 想知道為何結果頁面的色調是黃色加黑色？沒有理由也沒關係。

其它

1. 製作這個測驗的理由或目標是？例如增加公司的知名度？

額外的想法

1. 時間充裕的話想加入各種動畫，例如文字可以加上打字動畫、按鈕可以加上 hover 時往左上方移動，表單區塊可以垂直延伸展開、周圍幾何圖形的發揮空間就更多了。雖然我現在能力有限，不過只要去看 GSAP 的文件應該就能增加能力範圍。

link關於前端的問題

結果頁面

1. 具體來說分享測驗結果按鈕按下去之後會出現什麼？例如 Facebook 撰寫新貼文的頁面？
2. 目前還沒看到產生測驗結果的演算法和所有測驗結果的說明文字，何時可以拿到，或者我不需要處理這塊？

其它

1. 這個專案最後要部署到哪裡去？
2. Font Awesome 可以改用最新版嗎？

link14:30 拿到專案

打開 GitLab 專案網址，裡面有很多資源和雜物。

打算問上述的問題，但是導師好像不見了。先把專案拉下來再說。

link15:00 思考

算一算上面寫了十七個問題，只挑需要問的部分拿去問也好像有點太多了。

到底問還是不問？我想做出更好的成果，所以決定要問。

傳訊息或直接對話？問導師或問設計師？再看一次問題後覺得大部分是和介面有關，所以決定先傳訊息問導師，＂想請問做出這份設計稿的設計師是誰？＂導師寫了設計師的名字，並問＂怎麼了？＂，我回覆＂如果可以的話有一些問題想請教他＂，導師回覆＂他現在有點忙 可能要四點多＂。

link15:30 問問題

導師走過來，指向不遠處的某人，說她現在有空可以去問她，沒想到設計師本人自己走過來了。聽他們講才知道這個案子的期限是下周三。把前面的問題一個一個拿來問，因為時間有限，大原則是設計部分維持現狀、不用擔心文案、不用做功能、只要切版就好。不用做玩其它測驗的按鈕、可以用 Font Awesome 的最新版。

link16:00 切版

從現在開始只有三個小時，做多少算多少。

為了一個圖示下載 Font Awesome Free 6.2.1，解壓縮後體積多達 20 MB，產生了一點罪惡感。

link19:00 下班

link本日心得

看到生命靈數測驗的設計稿，讓我回想起大學二年級下學期同時修兩門 PHP 課程，有做過類似的網站。

因為這個生命靈數測驗是公司的專案，所以日後可以放在我個人網站的作品集。雖然下班前只做了電腦版，希望能幫助到之後接手的人。