宴客玩 LINE@ 開發的小遊戲抽大獎 - 結婚

小弟在 2018年 也畢業啦，轉眼間就來到了 2020年 了

本來想要在一年內分享的，但實在太懶才拖到現在，哈哈

剛好最近在整理一些資料，順便把這一篇也打一打吧


廢話結束，正文開始

以前參加過幾場喜宴，如果有抽獎的環節，覺得賓客們很沒參與感或驚喜感

於是乎身為肥宅工程師的我何不寫點小程式來玩玩呢

剛好先前有參加過 第一屆 LINE Taiwan TechPulse 大會有了一些啟發

其中有 Session 提到 在台灣擁有 LINE 的比率相當高

當年數據好像 87% 以上還多少的，有點忘了

如果自己開發一個 APP 還要賓客下載有點不切實際

而且也參加 婚禮博覽會，實際用了廠商做的 APP 也覺得沒做的那麼好

所以就開始構思可以來做點什麼


雖然想到滿多東西可以做的，想了半年的 scope 越來越大

但是實際開工卻是在宴客的前三天才開始進行開發

工程師不到 deadline 不開工啊，拖延症又發作起來

但這次的是完全不能 delay 的啊啊啊

所以到前一晚都弄到半夜三四點才睡


一早新娘在化妝了，婚攝來拍照的時候我還修改 (大家不要學R

https://i.imgur.com/bjJXSIC.png


主持人也來了，她也很緊張，因為我有設計功能讓她用

但她也還沒看過實際是怎麼運作的，她整個非常慌張，事後表示腋下都濕啦

第一次遇到這麼高科技的場控，而且直到宴客即將開始都還沒操作過


簡單來說，我寫了一個網頁，可以透過 LINE 來操控，進行場景的切換

然後沒有再撥放影片的時候，預設是照片輪播模式，用網頁滿容易實現的

這樣也不用特別製作影片只有幾分鐘就看膩了

而且我還可以準備一堆照片隨機輪播還能有轉場的效果

重點是不用請專人守在電腦前面，而且看過很多狀況是那個人不會用那一台電腦

在前面弄老半天還要別人幫忙，甚至放到不該放的影片那就糟了

https://i.imgur.com/vo7Jkv8.png

我只要幫主持人加入權限，就可以由她來控制場景的切換


找到唯一一張有拍到影片的畫面 XD

https://i.imgur.com/RPs09JH.png


當我 11點 去架設環境的時候，一投影發現竟然網頁跑版了

macbook 投影就很容易這種狀況 QQ

立即開啟 live coding 模式趕快修好

原本 11點 要和主持人彩排的，只能簡單的口說一下

我可以感受到主持人萬分無奈，還好之後就都滿順利的



簡單介紹一下什麼是 LINE@

各位應該加過 LINE 的 官方帳號

可以透過程式來接收用戶一對一傳送的訊息

或推送訊息給給單一用戶或全體發送訊息

我們在桌上附有 QR Code 或 ID 讓大家方便加入

這張圖剛好被卡掉了 XD

https://i.imgur.com/YUBuge2.png


https://i.imgur.com/GIUuhOY.png


設計的第一個活動是 給新人祝福的話

然後 新娘 會從中挑選 最受她中聽的話

而且有表明不能透漏自己是誰，否則新娘就不會選

所以新娘也不知道每一句話是誰寫的

雖然有些話還是很明顯是誰寫的啦 XD

https://i.imgur.com/ofIkx8N.png


新娘就趁著在準備二進梳妝時一邊看累積的祝賀詞

https://i.imgur.com/lO4j1PR.png

接著進場後就可以公布得獎名單啦

我這邊就輸入對應的 id 進去就會公告得獎者啦

https://i.imgur.com/TllsFAP.png

原本只要送一位，忘了怎麼會變成二位 XD



接下來就是重頭戲的時候，這遊戲是在 LINE TechPulse 玩到的

當時覺得緊張又刺激，所以也就來仿造一樣的遊戲來玩


遊戲規則是： 每為賓客選擇一個正整數，只要是全場最小且唯一者贏得獎項

如果是贈送小禮物那肯定大家興致缺缺，所以我們準備了 iPhone 和 iPad 來送

這樣大家肯定會卯起來玩，而且會動腦筋思考策略，每一桌也可以互相討論

程式這邊當然會擋好不符合規則的數字，一定要通過這個正規表達式才行

^[1-9]+\d*$



先讓大家試玩個幾場熟悉一下，順便驗測系統有無問題

為了增加遊戲刺激感，輸入 0 顯示即時戰況，目前最多人選擇的五個號碼

在時間終止前，每個人都可以任意調整自己的數字

而且經過幾場的磨練，可能選擇的數字會根據前幾場影響

你要先想一般人可能會選什麼樣的數字，然後自己要避開其他人

iPhone 得主回合:
https://i.imgur.com/5aTHjJR.png

iPad 得主回合:
https://i.imgur.com/EsZ4XHj.png

本來一開始構想是要把戰情即時動態更新在投影機上的

如 LINE TechPulse 做個 Bubble Chart 越大顆表示該數字越多人選擇

但時間不允許，只好應急用這種簡單的方式做


當然，帶這活動得我自己來主持了，還好都沒出包

畢竟，程式寫完都只有自己本機測試過，真的是心臟夠大顆

https://i.imgur.com/hujG00S.png


整場有好幾個時段大家都變成低頭族了，是也滿有趣的現象

https://i.imgur.com/ml4NIy4.png

https://i.imgur.com/PCTJc8N.png



跑了這一連串的活動，讓賓客更有參與感，也能讓長輩們接觸這些技術應用

而且 LINE@ 應該也可以做出滿多應用的，像是一些簡單的問題或互動資訊

https://i.imgur.com/eBYgCBt.png



由於這程式是臨時趕工出來的，所以品質就60分會動而已

也不知道 LINE 的 API 是不是也有改了，源碼先不放出來丟人現眼啦

附上當初趕工的紀錄，那幾天幾乎沒什麼睡

一邊準備結婚的東西，下班還要趕程式，大概三四晚弄出所有的東西

還好大家的反應都是滿棒的，也圓滿結束 ^_^

https://i.imgur.com/DYUlJlS.png


提一下我當時使用到的技術
1. ASP .Net MVC + Web API (LINE WebHook)
2. SignalR
3. jQuery
4. 網站架設在 Azure 微軟雲端上


有點沒有打文章了，可能有點跳或詞不達意還請大家見諒

另外要提一下這一篇不是 LINE@ 的業配，只是剛好和小弟的活動使用

感謝各位收看~


PS: 最後大家可以說說各位會怎麼選擇數字呢? 會採用什麼什麼策略嗎?

--