戰略紀錄

蝦皮直播回顧 Chrome Extension Q&A

首先,非常感謝蝦皮的後端資深工程師 Dayo 蒞臨快樂學程式的主題小聚直播活動來和各位觀眾互動,更感謝有熱情的觀眾捧場,讓這次的直播能順利落幕。   現在閱讀此篇的讀者,如果不想錯過一年都不見得有一次的聯合直播活動,趕緊手刀報名 10/29 的最後一場機器學習講座?  精彩內容不容錯過~   Dayo 的有趣 demo: 功能為「價格不合理之提醒」,假若價格折數過低則會跳出 “My supervisor Messenger ID” 警示   第一部分:重點摘要 Overview  基礎架構、manifest.json Content Script  建立在…
iris
October 28, 2020
網頁日記

網頁日記 #5 | Iris 程式小白

前面幾集已差不多把 JS 基本觀念做了一輪概括性的整理,這集我要來和大家示範如何製作最簡易的下拉式選單,也順便驗收&應用所學觀念,那我們就不囉唆~ Let’s get rolling!   首先,製作最基礎的下拉式選單需要的是簡單的 HTML 和 CSS 觀念,甚至如果你只需要滑鼠游標 hover 到按鈕上就能展開選單的功能,那你根本不需要動用到 JS。今天小白?‍♀️ 我會分享不需要用到 JS 和必需要用到 JS 的下拉式選單版本,對 HTML 和 CSS 不熟悉(忘得差不多)的朋友也可以順便溫故知新唷~   …
iris
October 26, 2020
戰略紀錄

網頁爬蟲五個基本觀念

網頁爬蟲是網頁機器人,可以自動化模擬使用者,依照特定的模式與規則,爬取網頁的背後原始碼,就可以解析取得想要的資料,不一定要使用python才能實作,其他像java、C++、javascript,也可以開發,但python的語法比較簡潔,也有比較成熟的框架或套件可以使用,所以大部分通常使用python來開發。 網路的架構主要分用戶端(電腦、手機、平板)和伺服端。比如說,在瀏覽博客來網頁時,通常會點擊網頁來了解書本詳細內容,點擊動作背後會請求網址,這個網址就會回傳博客來伺服器,博客來收到這段網址的時候就會知道這個使用者想要看的書本內容是哪個網頁,它收到後就會開始處理,把網頁的原始碼內容回傳給用戶端,用戶端經過瀏覽器解析來顯示我們看到網頁的樣子。 兩個開發網頁爬蟲重要觀念:請求方法、等待回應 有兩個開發網頁爬蟲需要特別注意的地方,第一是請求方法,第二就是等待回應,用戶端如果要看網頁就是請求一個網址到伺服端,那請求方法分成:get(查詢)、post(新增)、put(修改)、delete(刪除),因為開發網頁爬蟲時是想查詢這個網址的網頁內容是什麼,通常都是使用get(查詢)來跟伺服端溝通。然後就是等待回應,要特別注意的地方是,伺服端不會馬上回應,會等待一些時間,如果等待回應的機制沒有處理好就開始進行爬取,可能在爬取時爬不到任何東西,可能是伺服端還沒處理完,原始碼也還沒到用戶端,所以在爬取時就爬不到任何東西,所以等待回應機制非常重要,通常有三種等待機制:sleep(強制等待)、implicit wait(隱式等待)、explicit wait(顯示等待)。sleep(強制等待)就是強迫網頁爬蟲暫停一定秒數;implicit wait(隱式等待)就是設定最長等待時間,但若伺服端提早處理完成,網頁爬蟲就不會等滿時間,直接往下執行;explicit wait(顯示等待)就是明確指定等待網頁上某個區塊、元件只要網頁原始碼處理完成,就算其他還沒載入完成,但要等的那個區塊已完成就會往下執行。這三個等待機制可以視情況來使用,若三個等待機制能處理適當,會提高爬蟲爬取效率。 三個常見的套件及框架:beautiful soup、selenium、scrapy 伺服端回應給用戶端的網頁原始碼是由許多標籤和標籤所形成的元素構成的,瀏覽器會知道它的擺放位置,是因為網頁是個階層結構。但要爬取的資料不是標籤,這時候就需要套件或框架來協助定位元素和去掉標籤。基本上使用python來開發網頁爬蟲時常見的有三種套件,分別有beautiful soup、selenium、scrapy。 beautiful soup對HTML及、XML的解析非常友善,容易入門,但只適用於靜態類型的網頁。現在有許多社群平台(ex. FB、IG)、電子商務網站,通常會透過滾動捲軸的方式讓網頁載入更多資料,beautiful soup就無法達到。這種情形就需要搭配selenium套件來進行爬取,因為selenium套件被用來設計進行網頁自動化測試,所以可以很實際模擬人類操作瀏覽器的動作,例如:開啟瀏覽器、滾動捲軸、輸入帳密或是點擊查詢按鈕等等,要爬取這樣的網站的話就非常適合搭配selenium套件進行操作,它最大特色是可以搭配javascript,所以才可以自動化滾動捲軸,讓網頁自動化載入更多的網頁內容進行爬取。scrapy框架比較適合大型爬蟲專案,因為他能夠爬取大量資料、具有非同步的功能,速度比較快、有效率,對於初學者來說會需要一段時間來學習。 最常見的網頁爬蟲開發流程 謝謝這週二下班讀書會的講師Mike,以下是他提供的相關學習資源:
amyamy
October 23, 2020
戰略紀錄

Python初學總整理 第6講:爬蟲應用(下)

前言 哈囉,大家好,我是Teresa~爬蟲小專題的進度是上一集成功將Facebook的貼文載入,這集主軸就在蒐集貼文中有關於成效的資訊了。 其實在Google上搜尋相同的爬蟲目標,在各個網站中有很多程式碼可以參考,但Teresa真的是各種嘗試,卡了很多bug,挫折重重?,還好後來隊友有幫助我修改程式碼,但還是希望總有一天能自己成功完成一個小專題。 上集回顧...... 爬蟲目標 抓取Facebook的貼文,展開貼文中所有留言與分享、表情符號數量,了解貼文的成效 達成方法 一、策略拆解 假設我想要手動取得這些資訊的話,會做出的行為有: 打開 Chrome 瀏覽器 開啟 Facebook 頁面並登入 點擊想分析的 Facebook 社團或粉絲專頁 將該社團或粉絲專頁的貼文載入 將貼文的留言展開 蒐集貼文的資訊(按讚數、分享次數以及留言數) 統整資訊 如何開啟Chrome瀏覽器、登入Facebook頁面、將貼文載入等前四步驟請參見Python初學者筆記EP. 5_爬蟲應用(上) 本集開始!…
Teresa
October 21, 2020
戰略紀錄

機器學習從零開始-簡單認識基礎概念 | Teresa初學者筆記

前言 嗨~我是Teresa,會有這篇筆記的產出是因為 10/29 會有一場蝦皮直播的線上小聚,主題是機器學習,這是 Teresa在正式開始學習Python前不斷重複聽到的應用領域之一,雖然印象很深,但對於這個熱門詞彙可以說是非常陌生,因此在聽蝦皮專家的分享前,想先對機器學習等相關知識架構先做一點基本功課。 活動資訊:https://pse.is/vk4jv 常見三大詞彙之間的關係 圖片來源:技術論壇 機器學習一詞常和人工智慧、深度學習一同出現甚至是混為一談,那三者之間的關係是什麼呢? 如果用一句話來解釋我想會是:「藉由深度學習等演算法技術可以建構出機器學習的手段以達到人工智慧的目的。」 什麼是機器學習Machine Learning? 機器學習通常可以這樣定義:「透過從過往的資料和經驗中學習並找到其運行規則,最後達到人工智慧的方法。」 白話來說機器學習是一種達到人工智慧的手段。透過程式讓電腦能夠從大量資料中學習到一個模式並讓它能對未接收過的資料做預判。 機器學習的根據? 從定義來看,機器學習需要很多過往的資料和經驗,大量資料也就是現在很熱門的話題之一:大數據。 很多時候光靠人力是看不出數據之間有什麼關聯性,數據中可能包含各種現象、事實與數字,但這些事實與數字是不需要提前被整理好的。而這些數據如果被輕易放掉是很可惜的,因此必須將數據轉為資料。 資料是能夠被「客觀」運算的最小單位,可用來作推論與計算。將資料有系統、有邏輯的整理過後就成為資訊,而資訊最後會被轉化成知識。這樣的過程可以被簡單分為五個階段:擷取資料、分析資料、洞察資訊、理解資訊、做決策(知識)。 大數據有4V的特性: 大量Volume:數據量越大,經過轉換所得出的模式越有根據,就如同做實驗時,樣本數越大,在相同的信賴區間下,可信度越高。 快速Variety:數據量大,且蒐集的資訊不斷的被更新,如果處理資料的速度不夠快,所得出的知識也會是過時的。 多樣Velocity:資料的種類是多樣的,可能包含基本資料、數據格式等等。 真實Veracity:不論你所用的技術多先進、過程做得再嚴謹,如果一開始的數據本身就不可信,那做出來的機器學習與得到的人工智慧都是空談,因此資料的真實(確)性是至關重要的。 從大數據演進到人工智慧,可以套用到狀況覺察理論 該理論的五大階段是:察覺→理解→預測→決策→行動(執行)…
Teresa
October 20, 2020
333系列

333系列|CS50 出名的硬?

學程式的朋友們應該多多少少都有聽過哈佛的 CS50 這門通識課(aka 在哈佛無人不曉、可謂陰曹地府的重課),今天我們就來破解關於 CS50 的 3 個迷思 Here we go!   CS50 教 50 種程式語言嗎? CS 代表 Computer Science 這我能理解,不過 50 究竟代表什麼呢?難道是教會你 50 種程式語言嗎? …
iris
October 14, 2020
戰略紀錄

JS 成長日誌|新手必知的五個 JS 知識點

今天我要來和新手朋友分享學習半年 JS  的成果分享,但我不打算談較個人的學習經驗(挫折、心路歷程等等),所以這就表示~ 此篇知識含量偏豐? 大家可以期待一下看完後精彩的 takeaway 嘍 ?   ? 開始閱讀前警示:本文中不會聊到太多過於冷僻或深入的內容,主要著重在有趣或是重要的應用。我也會盡可能找出新手的盲點(讓我自己學習起來較艱辛的部分),如果沒有剛好對上你的需求你可以考慮看看我的其他篇 JS 文章~?   ? Action! ? ?‍♀️:JS 除了拿來做網頁互動之外,還有哪些新手知道後會嗨的點呢?讓我們一起看下去?   新手不可不知的五個 JS 知識點   Null…
iris
October 13, 2020
戰略紀錄

Python初學總整理 第5講:爬蟲應用(上)

前言 自從上集學完函數和迴圈之後,覺得光只有學習,都可以理解好像沒有什麼問題,但如果要應用的話,就會不知道從何開始,因此Teresa開始想要嘗試寫個小作品看看,因此之後 Python初學者學習筆記會朝著實作的方向前進,當成自我練習還有紀錄。 爬蟲介紹 提到 Python,最經典且絕對不能漏掉的應用莫過於爬蟲了,那什麼是爬蟲呢? ---它是一種可以「自動」抓取網頁資訊的程式 現在資訊的變動快速,當在 Google等瀏覽器上搜尋任一關鍵字,搜尋到的結果都成千上萬筆,但人一天所擁有的時間終歸只有24小時,想要處理一件事的時候,很難將前置資料調查得盡善盡美,且當相同的動作必須重複上百遍、上千遍的時候,必定會又累又無趣。這時候如果有「自動化」程式的幫助,處理事情的效率便會提高。對於爬蟲的應用可以到這個網站看看。 爬蟲目標 抓取 Facebook的貼文,展開貼文中所有留言、分享數以及表情符號數量,了解貼文的成效 達成方法 一、步驟拆解 Teresa曾聽會寫程式的人說過:「程式只是工具,想要開始寫程式要先知道如何解決問題,如果不知道問題的解法,是沒辦法將解法化為程式的。」 如果我今天經營Facebook社團或粉絲專頁,我會想要了解每篇發出去的貼文成效如何,除了一些後台可得到的資訊外,貼文的互動率是最可以反應出成效的方式了。而在Facebook上貼文與互動率有關的指標不外乎就是:按讚數、分享次數以及留言數。後續的貼文分析,包含是不是因為主題較吸引人或是文案寫得較好等影響該篇貼文的互動率的評估指標,就不在此深究。 因此,假設我想要手動取得這些資訊的話,會做出的行為有: 打開 Chrome 瀏覽器 開啟 Facebook 頁面並登入 點擊想分析的 Facebook…
Teresa
October 13, 2020
網頁日記

網頁日記 # 4|Iris 程式小白

上集聊完 DOM 基本概念和 JS 如何與 DOM 互動之後 Ex: innerHTML() , createElement() , appendChild() 等等 這集要來和大家介紹新手朋友看到就頭痛的「Callback function 回呼函式」,大家準備好了嗎?   看過第一、二集學習日記的朋友們應該都清楚:凡是在 JS 中所見即「物件」。所以,當我說函式 (function) 也是物件時,你應該覺得跟呼吸一樣自然? 但是,你有想過函式也能如同數值一般,作爲參數 (argument)…
iris
October 10, 2020
333系列

333系列|前端必備技能 ?

距離我?‍♀️ 學習 JS 也有一段時間,不過心裡總是有一些不安全感和憂慮 這是我今天聽完前輩分享的心得,希望能幫助到面臨類似問題的朋友們   前端職場必備技能 前端變幻莫測  我該如何克服焦慮? 其實很多時候我都會覺得前端究竟有完沒完,技術似乎怎麼學都學不完也學不透、付出的努力和收穫不成正比... 最後陷入自我懷疑?‍♀️ (甚至有想換跑道的念頭),但每次回過神冷靜下來,還是決定堅持初衷繼續往前端邁進。不過,這樣的負面情緒的堆疊確實影響到我的學習狀況,尤其是每每一個新技術誕生,我就會 FOMO 恐懼發作立即感到焦慮深怕錯過什麼,回想幾個月前看到新技術眼睛發亮?  在仔細回想和思考前輩的話後,我利用一張 A4 白紙回顧了踏入前端這段日子我所累積的知識,譬如 HTML 網頁架構和標籤寫法、CSS 畫面編排和位置、Javascript 語法邏輯等等(回顧的過程需脫離當前專案和學習上的思緒,retrospect 前些日子所學,在紀錄時盡量組織化、簡單化複雜技術僅留核心)。回顧後驚覺,我所具備的技能不比想像少,但同時也察覺到我的技能漏洞,讓我知道需要強化和補足的地方,也使我免於無謂的焦慮和技能恐慌。針對這題還有一點我必須提及:身為新手(非資深)的我們不要急著想去征服知識、擁有對一個新技術全面的了解,這背後原因絕對不是因為你實力不堅強抑或能力不足,而是時間精力不允許。反而,練習如何用短時間掌握新技術的核心觀念才是我們應該培養的真能力。   想保有競爭力  …
iris
October 7, 2020