Login  |  繁體中文
感謝您對「自由軟體鑄造場」的支持與愛護,十多年來「自由軟體鑄造場」受中央研究院支持,並在資訊科學研究所以及資訊科技創新研究中心執行,現已完成階段性的任務。 原網站預計持續維運至 2021年底,網站內容基本上不會再更動。本網站由 Denny Huang 備份封存。
也紀念我們永遠的朋友 李士傑先生(Shih-Chieh Ilya Li)。
FOSS Projects YA!hook - Yahoo Open Hack Day 2012 參賽經驗分享

YA!hook - Yahoo Open Hack Day 2012 參賽經驗分享

睽違近 3 年的 Yahoo Open Hack Day,今年又再度開戰,今年一看訊息公布後,二話不說就立刻點了報名。這次直接揪同實驗室的同學、學弟參賽,除了比較熟習彼此開發模式,溝通成本也比較少。

在比賽前一天晚上,其實根本就沒有睡,在狀態很糟的情況下完成了報到手續,面對接下來 24 小時馬拉松式的作戰。

01
▲ 圖1 會場內的自由發揮塗鴉牆 (https://www.flickr.com/photos/myhsu/8113050151/in/photostream),採用台灣創用 CC BY-ND 2.0 授權。

在第一天早上,如同往年, Yahoo! 內部有精采的技術議程分享,今年主打的是 Mojito,這是 NodeJS MVC Framework,開發者可以用 Javascript 流暢的打造網站服務,除了前後端程式語言一致,也有減少溝通成本等好處。也有遠道從美國來的工程師分享歷年 Open Hack Day 獲獎作品的特色,與評分的重點,讓我們能專注在這些點上開發程式。

我們開發專案叫 Ya!hook,是一個 Google Chrome extension,可以讓原本 Facebook 空乏的打卡頁面搖身一變,變得豐富實用。

一開始的想法是,在 Facebook 的打卡頁面上,對使用者有用的資訊寥寥無幾,我們就想結合 Yahoo! 生活+ 的資訊,自動在畫面上,補足哪些該出現的資料。像是鼎泰豐,就會秀出 Yahoo! 生活+ 上的店家資訊、食評、圖片、附近店家、同類型店家。另外我們也使用了台北市政府的停車資訊,直接把最近的停車場拉出來。 比較特別的是,如果打卡頁面是電影院的話,就直接拉了 Yahoo! 電影的時刻表,我自己覺得超級實用。

另外,我們也想在 Facebook 的活動頁面上,幫使用者加上活動當天天氣資訊,這塊的功能其實撰寫很快,把打卡頁面處理的架構,稍做修改就行了。

而專案中有使用到的 Yahoo! 的 API 或服務,分別是 Yahoo! Maps API, Yahoo! Weather API, Yahoo! 生活+ API (但其實有很多是我們想要但是 API 沒有提供到,我們就直接爬網站) 與 Yahoo! 電影的資料。

在程式的前端直接使用了 jQuery 解決,但後端程式我們不想碰觸流量、安全上面的議題,就直接選了 Google App Engine 為開發平台,用我們隊友都共同熟悉的 Python 來撰寫。

這次的比賽也嘗試了新的挑戰,是 Git 版本控制系統直接實戰 ,我自己對 Git 其實不太純熟,只簡單知道 push 與 pull 這類的基本指令,但這個比賽十分看重分工、協調、版本控管的細節,最後甚至都希望是直接在 repo 上看到 commit 的原始碼。幸好!我們這組的神手學弟,對 Git 指令簡直如數家珍,一首包辦 commit 與 merge branch 的教學工作,實戰磨練讓我是進步神速阿。02
▲ 圖2 Ya!hook 擴充套件開場特效 (https://www.flickr.com/photos/bryanyuan2/8105870191/in/photostream),採用台灣創用 CC BY-NC-SA 2.0 授權。

在我們約完成八成程式,發現這樣是沒辦法在短短 2 分鐘內,吸引到評審的目光,於是我們就想開始來些炫技了,過程中我們是了幾種開場特效,最後選定用類似拼圖的效果,把 Ya! 跟 hook 分別組合起來。

03
▲ 圖3 滿滿的零食,寫程式的一半不怕會餓到 (https://www.flickr.com/photos/myhsu/8113058083/in/photostream),採用台灣創用 CC BY-ND 2.0 授權。

比賽過程中,無限供應的零食、飲料,是我對 Yahoo! 這家公司的第一印象,在工程師的福利真的沒話說。另外一點,留宿過夜的經驗真的很讚,明明是凌晨三、四點,當完正想倒頭就睡的時候,看到根本沒有參賽者有任何睡意,天啊,大家根本就拼了!在毫無意識的狀態下,撐到了早上,工作人員立刻緊接早操活動,也讓頭腦清醒了一點。

04
▲ 圖4 緊張的最後 DEMO 評選,參賽隊伍發表依序排成一列 (https://www.flickr.com/photos/myhsu/8113076706/in/photostream),採用台灣創用 CC BY-ND 2.0 授權。

05
▲ 圖5 台下坐滿評審與發表隊伍 (https://www.flickr.com/photos/myhsu/8113046499/in/photostream),採用台灣創用 CC BY-ND 2.0 授權。

最後的 DEMO 評審過程,大概是最難忘的參賽經驗了,評審找了創投界、學界、產業界的大咖人物,作為評審。工作人員嚴格執行了 2 分鐘的切畫面規範,後面倒數的計時讓人十分不安,提醒效果十足。參賽隊伍的報告者一次 6 位準備,依序切換畫面、計時。

觀摩別人的發表過程,也吸收經驗彌補自己的不足。讓我印象尤其深刻的「台灣中央政府預算-全民稽核系統」與「Search Bingo」根本就是神作,這些前端效果做得出神入化。

06
▲ 圖6 DEMO 發表時間,大家全神貫注在發表者的簡報上 (https://www.flickr.com/photos/myhsu/8113052915/in/photostream),採用台灣創用 CC BY-ND 2.0 授權。

在最後,我們期待頂多勾上佳作就萬幸了,連得獎要說什麼都沒有準備好,在主持人宣布我們這組拿到台灣創意工場,「最佳投資價值獎」與「第二名」時,當下根本嚇傻了,我還打了暗號給認識的工作人員說「該怎麼辦」,整個連氣勢都沒了。

參與這類型的比賽,真的是難得經驗,一方面認識各地聚集的高手外,把自己的想法實作出來,跟同一領域的朋友一起分享,絕對是對工程師是很大的吸引力,這次參賽的作品可以參考 Yahoo hacktrackr

如果您對我們的專案有興趣,歡迎大家 fork 來玩玩看!

  1. 作者簡介:https://tw.linkedin.com/in/bryanyuan2
  2. Yahoo hacktrackr: https://hacks.developer.yahoo.com/hack/yahoo-open-hack-taiwan-2012/yahook-039/event_5/hack_383
  3. Ya!hook Chrome Extension: https://tinyurl.com/8p7hmsa
  4. Github: https://github.com/bryanyuan2/YahooOpenHack2012



OSSF Newsletter : 第 207 期 MyPaint-今天來畫圖吧!

Category: FOSS Projects