美食與人工智慧，每天不知道吃什麼？用人工智慧為你生成食譜
本文是作者 ML95-GONG， 參加了 「 30天AI訓練營 」首期所寫的學習總結。 作者是MixLab社群成員，同時是MixLab共建者，具有工業設計/互動設計/人工智慧背景。
每一期「 30天AI訓練營 」都會選擇一個主題題材，本期是「 美食 」，以 專案實戰 為主線，貫穿 技術棧、產品設計、商業設計 等內容。
在這裡介紹下本系列課程內容：
【專案實戰】
採用30-50人的小班授課，持續四周，每週一節線為期半天下實戰課程，以專案的形式將理論知識嵌入。幫助各位在為期30天的AI訓練營結束後能掌握基本AI入門知識，並有自己的作品。
【系統知識課程】
20節精華練習內容+不同難度作業+老師持續一個月的答疑改作業服務，期間有助教會輔助各位進行答疑。
以下為成員的第一課總結：
def MixAndData
( Design , Tech , Business ):
作為一名多次嘗試自學程式設計最後都“從入門到放棄”的小白設計師，非常有幸可以參加MixLab的線下課程「 30天AI訓練營 」~ 在這裡也謝謝MixLab辛苦準備課程的各位 @Shadow老師 @助教BZ @阿又 @Jeff:clap:
這裡班門弄斧對第一堂課進行了以下總結：
課程目標及大綱
通過Shadow老師的介紹，我們瞭解到這次訓練營是通過以 產品（專案實戰） 為導向的四次線下課程，讓我們掌握 機器思維+設計思維+商業思維 ，同時 訓練程式設計技能 ，最終掌握成為“ 智慧產品架構師 ”的必備能力。
↑課程目標及課程綱要
確定產品開發主題
經過小遊戲分好組後，我們迅速進入課程：開發“今天吃什麼”為主題的一款智慧產品。 
↑確定產品開發主題的過程
我們小組經過頭腦風暴，發散設計點，最後收斂到 “ 吃飯版拼拼多 ” 的設計概念，希望通過消費者在就餐前可以和其他人一起拼團，享受團購優惠的方式，讓他們吃的更實惠~
對於這款產品想要實現的讓消費者在就餐前進行拼團的功能，十分重要的就是相關資料的獲取。因此，Shadow老師以“美食傑(https://www.meishij.net)”為例，帶領我們進行資料爬取的練習。
HTML標籤與網頁的關係
對網頁資料爬取的前提是要了解HTML標籤與網頁的關係：
通過使用Chrome瀏覽器的開發者工具，瞭解檢視爬取內容的HTML標籤，這裡以菜名為例：
↑“雞蛋羹”菜名對應的html標籤
Chrome擴充套件
這次的資料爬取通過基於Chrome瀏覽器開發的爬蟲擴充套件實現。
↑這次課程要完成的Chrome擴充套件爬蟲
接下來就是寫Chrome擴充套件啦，一個擴充套件檔案一般包含以下內容：
資料夾中的 ：
manifest.json一般用來寫一些配置檔案。
icons資料夾用來存放chrome擴充套件的按鈕圖示等。
chrome擴充套件互動一般是3種js之間的互動 ：
popup.js/background.js/content.js。三者的互動如下圖所示：
↑Chrome擴充套件的3種js之間的互動
！總結 chrome-js之間的通訊都是通過chrome-api的 chrome.tabs.sendMessage，chrome.runtime.sendMessage，chrome.extension.onMessage.addListener() 來進行的。
資料爬取
搞清楚Chrome擴充套件是如何互動以後，就是要撰寫content-scripts中的爬取函式啦~
爬取的規則及關鍵程式碼如下：
↑爬取函式關鍵步驟及程式碼
將爬取函式寫在content.js中就可以在收到background的指令後執行啦~
寫在最後
有些吃力的寫完了這篇總結:joy:，還在摸爬滾打邊搜相關程式碼的文件邊debug的路上~ 這裡超級感謝我的組員@子倩，每一次在我搞不懂想要放棄的時候和我互相打氣互相幫助hhh 同時超級期待後面幾次課程的內容！
最後再次感謝認真準備課程的Mixlab的各位~
return 在實踐中學
近期活動
本週末，MixLab無界社群繼續我們的「 30天AI訓練營 」。
本次地點選擇在 上海宜山路 附近的「 漫書咖 」。
主題：
每天吃什麼？人工智慧為你生成食譜
長按掃碼報名：
關於MIXLAB
MIXLAB 無界社群 是一所面向未來的實驗室，它提倡“ 跨界創新，開放成長 ”的理念。
—— 跨界 開放 互助 學習 思維 創新。
目前社群彙集了 25000+ 跨學科人群，主要來自GoogleBrain、微軟、華為、阿里魯班、騰訊、曠視、三角獸、物靈科技、眾安保險、美團、360等科技人才、設計師及CEO和投資人；
高校分佈MIT、Oxford、Cambridge、CMU、UoM、清華、北大、復旦、上交大、同濟等學生及教師群體；
學科跨越機器學習、自然語言處理、量化交易、物聯網、區塊鏈、前端、後端、產品經理、UI設計、建築設計、服裝設計、珠寶設計、音樂、藝術等。
詳細介紹 點選以下卡片：
mixlab期待您的加入！
讓你具備無限可能……
不 讚賞 下？
不 點下廣告 ？
不 轉發 下？