iT邦幫忙

14
Ask Me Anything

結合開放街圖 零成本開發口罩地圖-Kuro,駐站 iT邦幫忙,歡迎一起來 Ask Him Anything

Hi,
我是 Ask Me Anything 活動的小編,請叫我AMA小編。
這次AMA(Ask Me Anything)我們邀請到的來賓是--Kuro(許國政)
https://ithelp.ithome.com.tw/upload/images/20200416/20126141CznRjRNW35.png
▶️活動日期:4月21日(二) 12點~4月23日(四)

在口罩實名制初初上路,民眾以健保卡購買數量相當有限、一周僅兩片的口罩,這時有不少IT人發揮專長,推出口罩地圖提供台灣人查詢,Kuro便是其中之一。
Kuro運用前端技術,結合健保局的資料、OpenStreetMap地圖資訊,迅速推出「口罩供需資訊平台 & 健保特約醫事機構地圖」。
歡迎大家在 4/21(二)中午 12:00~4/23(四) 來到這裡與Kuro聊聊喔!

身為前端工程師,Kuro顧及使用者經驗,在圖資中以灰、紅、綠三種顏色標示每家藥局的口罩存量,避免使用者白跑一趟。
https://ithelp.ithome.com.tw/upload/images/20200416/20126141FZ79qZq6ZD.jpg
綠色表示數量充足

https://ithelp.ithome.com.tw/upload/images/20200416/20126141Z4QavU7V2Y.jpg
灰色表示口罩已經賣完

https://ithelp.ithome.com.tw/upload/images/20200416/201261410JMAWX9cRx.jpg
紅色表示數量不多了

另外對IT邦幫忙而言,Kuro 也是鐵人賽的得獎者,他的作品已經出版成書
https://ithelp.ithome.com.tw/upload/images/20200416/20126141PVgUxiDRvv.png
0 陷阱!0 誤解!8 天重新認識 JavaScript!(iT邦幫忙鐵人賽系列書 - 02)

Kuro現在也是開班授課的老師了,大家對於前端技術、Vue.js、OpenStreetMap的應用,或者口罩地圖的設計、g0v…以及口罩地圖的應用得以如雨後春筍般出現的原因,甚至他的開發經驗、教學故事、出書歷程…等, 4/21(二)中午 12:00~4/23(四) 都歡迎一起來聊聊囉!

後續, AMA小編將陸續邀請鍵盤救國的 IT 人來 iT邦幫忙 AMA 活動擔任來賓回答問題,歡迎大家前往活動頁看看有哪些專家來駐站Ask Me Anything>>

在這邊小編搶先請教 Kuro 幾個問題:
Q:首先 Kuro 請簡單介紹自己,讓iT邦幫忙的朋友認識你。
Kuro: Hi 大家好,我是 Kuro, Vue.js Taiwan (vue.tw) 社群的主辦人、技術推廣者。
雖然因為疫情的關係,暫停實體社群活動,但還是歡迎大家可以多在線上交流。
工作是前端工程師,也在五倍紅寶石兼職開設前端相關的課程。 因為 iThome 鐵人賽的關係,去年出了一本 JavaScript 的技術書籍,感謝大家支持。


Q:請您介紹一下「口罩供需資訊平台 & 健保特約醫事機構地圖」的技術架構,以及你開發的考量點。
Kuro: 一開始是因為看到 Howard 大大率先推出第一版口罩地圖,後來二月初口罩實名制上路後,因 g0v 社群朋友們與唐鳳等人的努力,衛福部對外提供了 API 給民間串接。 身為前端工程師,看到有野生的 API 就好像看到天上掉下來的禮物一樣,當然會想來試試看,於是就有了這版口罩地圖。

開發主要是透過 Vue.js 來進行開發,地圖則是 leaflet + OpenStreetMap, Mapbox 組合而成。 因為是靜態網頁,所以建置好的內容直接丟到 GitHub Page 就搞定了。


Q:開發這套系統你大概花費多少時間完成以及成本呢?
Kuro: 差不多一個晚上就寫完了 XD
因為工作的關係,自己就曾經有過開發 google map 地圖應用與 geojson 的資料處理經驗,自從去年 google map 收費策略更新之後,這次就決定改用 leaflet.js 來實作。 對我來說,技術轉換的成本就只有從 google map 轉到 leaflet.js 的差別,後續的就是細節與優化處理。


Q:開發「口罩供需資訊平台 & 健保特約醫事機構地圖」為你帶來什麼樣的成就感或人生體驗呢?
Kuro: 說起來,這個專案一開始只是覺得好玩,也許可以作為技術推廣來實作,所以發佈的當下就只有「啊,做完了,可以睡覺了」的感想,並沒有想太多。

比較意外的是,因為剛好搭上新聞話題,所以在沒有特別推廣的情況下,身邊親友也實際用來作為購買口罩的參考,確實滿足了工程師的成就感。

而做好的口罩地圖,後來也被我改編為 Vue.js 課程教材的一部分,透過 Open Data 結合技術推廣,能夠讓更多人接觸開源領域,關心參與公民防疫,這也是令我感到開心且意外的收穫。

邦友們有什麼問題也歡迎搶先在底下留言, Kuro 將於活動期間 4/21(二)中午 12:00~4/23(四) 盡可能騰出時間回覆大家!


0
AMA小編
站方管理人員 ‧ 2020-04-21 12:01:15

Hi 本期很榮幸邀到 Kuro ,歡迎大家一起來聊聊囉!

3
fuexpert
iT邦新手 5 級 ‧ 2020-04-21 12:05:22

您提到已將口罩地圖改編成教材,請問學起來大概要多久時間?

你好,就我實際帶課的經驗,以 Vue.js 來說,大概三天的時間就可以做出來。 當然跟學生對網頁前端技術夠不夠熟悉也有關係,有基礎的我想應該可以更快。

3
cottise
iT邦新手 5 級 ‧ 2020-04-21 12:14:36

可否說明 Google Map 和 OpenStreetMap 的差異?
口罩地圖選用 OpenStreetMap 有沒有什麼...限制呢?
覺得兩個 Map 應用上應該有差異,除了一個付費一個免費之外

Google Map 提供的 API 比較多元 (當然收費也「多元」),除了地圖基本的圖磚之外,還有提供地理資訊定位 (geolocation)、街景、導航,與周遭 POI 資訊等等。

這次的口罩地圖 OpenStreetMap 其實只用到圖磚的部分,其他的功能需要倚賴 Leaflet ( https://leafletjs.com ) 或其他 JS Library (如 truf.js 等) 來實作。

另外就是,雖然 OpenStreet Map 是開放資料,但也有其授權限制。
使用前可以參考這裡: https://www.openstreetmap.org/copyright/zh-TW

0
小財神
站方管理人員 ‧ 2020-04-21 12:18:02

小財神一定要亂入一下 XD
請問 Kuro 如何準備 iT邦幫忙鐵人賽的呢?
Modern Web 組好競爭,得獎真的很不容易耶~
/images/emoticon/emoticon32.gif

準備 iT邦幫忙鐵人賽,我覺得在第一天之前,先把大綱定出來很重要。
有了主軸,後面就是每天一篇把那天預定的主題整理出來。

比起每天臨時生一篇,這樣也比較不會慌張,所以想參賽的朋友現在可以開始想主題了。

不知道要寫什麼的話, Vue 3.0 目前已經 beta 是個不錯的選擇 XDDD

小財神 站方管理人員 ‧ 2020-04-21 12:32:11 檢舉

感謝~
大大的開釋一定要放在心上,
工程師們,是時候開始準備鐵人賽了

Vue 3.0 是個不錯的選擇唷 ^^

2
wolfwang
iT邦新手 3 級 ‧ 2020-04-21 12:25:45

可能是個不容易回答的大問題,也可能常常被問,不過還是想知道,比起 React 和 Angular 這幾個同質性的框架, Kuro 大大覺得 Vue.js 更好的地方在哪裡?

我覺得所謂「更好」對每個人來說沒有絕對。
選擇工具就跟找男/女朋友一樣,有時候只是適合或不適合。

通常選擇工具會有幾個考量點。

專案是你自己做還是團隊做?
新框架的學習成本?
這個開發工具夠不夠穩定?
專案的規模大小?
這個框架的周邊工具鍊適合符合需求?
相關社群是否活躍?出問題能否找到人問?

說白了就是這個專案承擔風險的能力有多高,決定了選擇的自由度。
如果自己做好玩的當然就是挑自己喜歡的來用就好。

我們決定用 Vue.js 大約是從 2015/2016 年前後決定轉換。
那個時候大多數的同仁都還在 ng1 ,在考慮 ng1 的未來性以及比較了當下的幾個框架後,我們覺得 Vue.js 是比較符合當時的需求。

當然未來有任何變動,我們也是會考慮其他工具。 前端就是不斷地擁抱變化的領域 XD

AMA小編 站方管理人員 ‧ 2020-04-21 12:43:11 檢舉

那麼 Kuro 你是不是同時擁抱(略懂或專精)多個框架,隨時可以切換?

都是略懂略懂 (你們看 vue composition api 跟 react hook 有 87% 像,學了 vue 3 馬上可以快速轉移 484 超划算 der)

0
chiso
iT邦新手 4 級 ‧ 2020-04-21 12:29:18

想問大大如果提供的服務希望同時分享附近哪裡有寵物醫院,這個適合 OpenStreetMap 嗎?

有需求就會有人做 (或者可以自己做) XD
如果有適合的寵物醫院公開資料,做一個當然不是問題。

2
AMA小編
站方管理人員 ‧ 2020-04-21 12:39:22

小財神害羞(其實是肚子太餓去吃飯了),請小編代問

您鐵人賽的得獎作品與實際出版成書的內容量差多少?
大約籌備多少時間才能成功出書?
出版社是不是會一直催一直催一直催

其實書中內容跟鐵人賽大約有 87% 左右是一樣的 (欸)

因為 JavaScript 範圍很大,篇幅有限的情況下,花比較多時間是在於內容的取捨,這個該不該寫,那個要不要刪。 出書跟寫網路文章最大的不同點是在,書印出來就印出來了,網路文章如果有錯或是想補充的部分還能隨時改。

再來就是梗圖的版權問題需要注意。 (所以要看梗圖只能在網路上看了)

出版社倒是不會一直催一直催一直催,他們只有一直催一直催而已。 (大誤)

4
goodplayfun
iT邦新手 5 級 ‧ 2020-04-21 12:52:00

想問大大,不同的前端社群會不會有橫向交流機會或者聯合舉辦活動?

看更多先前的回應...收起先前的回應...

滿常有的,從 2016 年開始到去年為止,每年都有社群廣邀 大亂鬥 共同分享,像是 JSDC 2019 ( https://2019.jsdc.tw/agenda.html ) 、 2018 企業前端框架趨勢論壇 ( https://www.udemy.com/course/ent-frontend-2018 ) 等等。

今年因為疫情的關係,不知道還有沒有。
如果可以換成線上也歡迎,我是滿期待的 XD

wow
期待線上

AMA小編 站方管理人員 ‧ 2020-04-21 13:05:48 檢舉

小編也分享一下
iThome 的 Modern Web 活動也很讚唷!

去年的 Modern Web 有邀請 Vue.js 核心團隊的成員來分享喔

0
lulubear
iT邦新手 5 級 ‧ 2020-04-21 12:55:45

大大會不會再出書

還在觀望中,如果有適合的主題我不排斥喔

1
upload120113
iT邦新手 5 級 ‧ 2020-04-21 13:01:59

本來也想問出書,上面有人問了
那請問會不會開Vue的課?

Vue 的課程上個月底剛結束,下次的時間還在規劃中喔

有興趣可以關注五倍紅寶石官網的課程資訊: https://5xruby.tw/talks/vue-js/

appear iT邦新手 5 級 ‧ 2020-04-22 15:54:48 檢舉

感覺因為疫情的關係,實體課程難實現
不知道有沒有機會推線上?

是不是改成線上也有在研議中,你可以把意見反映到五倍紅寶石喔。

0
iplicab20120
iT邦新手 5 級 ‧ 2020-04-21 14:20:53

前端是不是Vue的職缺比較多呢?(相較於Angular)

剛剛我試著到 104 去查詢,結果如下:

Vue / 935
React / 1003
Angular / 680

開出的職缺多,代表用的人多,競爭者也多。

同場加映 jQuery / 2646

給您參考。

2
bascom
iT邦新手 5 級 ‧ 2020-04-21 14:41:42

敢問大大愛用的vue開發工具及原因

主要原因我想前面有談過了,當時我們決定用 Vue.js 多數的同仁都還在 ng1 開發,在考慮 ng1 的未來性以及比較了當下的幾個框架後,不管是 MVVM ,還是 Vue-file component 的特性,我們覺得轉換到 Vue.js 是比較符合我們的需求。

至於開發工具的話,前端我們是以 VS Code 為主,這裡可以跟大家分享幾個好用的 plugin:

[Vue 相關]

Vetur
https://marketplace.visualstudio.com/items?itemName=octref.vetur
開發 Vue 必裝,整合各種 vue 常用的功能

Vue 2 Snippets
https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets
自動完成的 Snippets

Vue Peek
https://marketplace.visualstudio.com/items?itemName=dariofuzinato.vue-peek
可以從某個 vue 編輯畫面快速切換至相關的另一個 conponent 的 vue 檔


[前端開發綜合]

ESLint
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
可在 config 裡面設定是否在存擋時自動修正 ESLint 錯誤

GitLens
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
找戰犯神器 在編輯時就可以看到上次的 git commit 紀錄

Auto Rename Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
修改 HTML Tag 的時候,自動更新對應的 tag

Auto Close Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
自動關閉 HTML tag

Beautify
https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify
讓你的 HTML 自動排版,可以搭配 vetur 自動排版 .vue 內的 template 區塊

Prettier - Code formatter
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
跟上面一樣,用來做 code format 的

JavaScript (ES6) code snippets
https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
快速生成 ES6 的程式碼片段

Path Autocomplete
https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete
自動補完目錄路徑

Material Icon Theme
https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
讓你的 VSCode 變漂亮 XD

bascom iT邦新手 5 級 ‧ 2020-04-21 14:55:54 檢舉

哇賽~大大你是不是經常被問這個問題,所以打好一份隨時拿出來用啊!

0
cottise
iT邦新手 5 級 ‧ 2020-04-21 15:07:13

大大,你的工作會不會被要求順便design?/images/emoticon/emoticon02.gif

不會喔,我們公司有專職的視覺設計。

0
st9866101
iT邦新手 4 級 ‧ 2020-04-21 15:19:16

原來是您做的

雖然說資策會的面試沒上

但Kuro 超級厲害

感謝支持,在公開資訊的路上大家多交流。 /images/emoticon/emoticon41.gif

st9866101 iT邦新手 4 級 ‧ 2020-04-21 15:51:06 檢舉

等大大出Vue.js的書

0
appear
iT邦新手 5 級 ‧ 2020-04-22 09:25:44

努力爬上來,跟大大說一聲感謝
/images/emoticon/emoticon41.gif

感謝支持,大家一起努力 /images/emoticon/emoticon12.gif

我要留言

立即登入留言