ประสบการณ์การเข้า hackathon สายเว็บครั้งแรก ที่งาน PWA online hackathon

ส่งงานคนแรกเลยเย้ T^T

สวัสดีค่ะทุกท่าน ขอเกริ่นแบบยาวๆนิดนึง ตอนที่แข่งเถ้าแก่น้อยเมื่อสองปีก่อน เห็นคุณน้องท่านนึงไปงาน hackathon มา เห็นว่าน่าสนุกดี เลยตั้งเป้าร่วมงานแบบนี้ปีละครั้ง ซึ่งปีก่อนเริ่มจาก Bangkok Urban Hack Day ของป้ายุพิน ทำให้เกิดลุงสุขุมขึ้นมา ในปีนี้มีการเปลี่ยนแปลงอะไรหลายอย่างเลย (ถ้าเรียบร้อยดีจะมีเขียนเรื่องนี้ปลายปีนะ) เลยคิดว่า ปีนี้จะมีกิจกรรมอะไรให้ทำบ้างหว่า นอกเหนือจากไปงาน google ignite ซึ่งแทบไม่ได้เกี่ยวกับสาย developer โดยตรงเลย บังเอิญ มีงาน PWA online hackathon ซึ่งเราจะไปนั่งทำที่ไหนก็ได้ ที่มี internet ลง firebase hosting ความน่าสนใจ คือ ทำที่ไหนก็ได้ และเราเองก็ทำเว็บบน firebase อยู่แล้ว เลยอยากมาลองดู

แต่แล้ว ชวนใคร ก็ไม่มีใครมาด้วยเลย งานนี้เลยมาแข่งคนเดียวเลยจ้า T_T ก่อนหน้านี้มีลังเล ไปแข่งดีไหม ทำเว็บอะไรดี มันจะยากไปไหม สุดท้ายก็เออ ลองดูดีกว่า ประกอบกับช่วงนี้มี gap นิดๆด้วยแหละ เลยมาลงแข่ง

ไอเดียตอนแรก ทำเว็บหาสี แปลงค่าสีเป็น rgb hsb แล้วหา secondary color ที่เหมาะสมตาม material design แต่สำหรับเรามันยากไป

ไอเดียต่อมา ทำแอปสุ่มอาหารวันหมี แต่เราสร้างโปรเจกทิ้งไว้ใน firebase บ้างแล้ว เกรงว่าจะผิดกติกา เลยตัดทิ้ง

สุดท้าย ลองทำเว็บ flash card คล้ายๆ primer หรือ google codelab ดีกว่า เพราะเราเองมีโปรเจกที่จะ sharing การสอนภาษาคอมพิวเตอร์อยู่แล้ว ถ้าทำเป็นแอปแอนดรอยด์ คนใช้มันเฉพาะ android ถ้าทำ pwa มันครอบคลุมทุก platform มากกว่า เลยเลือกอันนี้แล้วกัน

ก่อนอื่นศึกษา pwa ก่อน ว่าคืออะไร

การเพิ่ม add to home screen ในหน้า iPad บน iOS10

PWA คือ Progressive web app ที่หน้าตาเหมือน native app
- สามารถรองรับการแสดงผลแบบ responsive ได้
- สามารถ add to home screen พร้อมโลโก้ของเว็บแอปเหมือนแอปในมือถือเลย โดยไป setting ที่ manifest.json
- สามารถแสดงผลแบบ offline โดยเก็บ cache เพื่อดึงมาแสดงผลได้รวดเร็วขึ้น โดยไปสร้าง js มีไฟล์นึง ที่เป็น service worker

จากนั้นลองทำดูก่อน เพื่อหาความเป็นไปได้ จะได้ไม่เงิบตอนแข่ง โดยศึกษาจากในเว็บ google developer เองหรือใน codelab
- official website : https://developers.google.com/web/progressive-web-apps/
-You first progreesive web app : https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
- Adding a Service Worker and Offline into your web app : https://codelabs.developers.google.com/codelabs/offline/#1
- udacity course ครอบคลุมการทำ manifest และ service worker : https://classroom.udacity.com/courses/ud811/lessons/8086102617/concepts/80897065540923

แต่ปัญหา คือ ก่อนหน้านี้งานยุ่งมากๆ เนื้อหาในเว็บเตรียมไม่ทัน คือเรียงเรียบไม่ทัน ตัวเว็บเลยมีแค่นี้ก่อน หลังงานจะเพิ่มต่อไป โลโก้ วาดเอาวันงานเลย ใช้พู่กันผิดด้วย ภาพเลยไม่คมแบบปกติ หนักสุดคือตัวการ์ดเนื้อหา ยังไงดีว่ะ ให้เราพอทำได้ กับ user happy

ออกตัวก่อนว่าเราเป็น Android Developer นะ ไม่ใช่ Web Developer นะ แต่พอมีประสบการณ์เขียนเว็บมาบ้าง อย่างเว็บพอร์ตของตัวเองใช้ bootstrap ก็ตัดแปะเอา พอทำ html กับ css ได้ แต่ js ไม่ค่อยได้ งานนี้กะมาสนุกๆ ขอให้ได้เสื้อกับสติ๊กเกอร์ก็พอ อิอิ

เนื่องจากเราไม่อยากเขียนใหม่ทั้งหมด เลยใช้ตัวช่วย จะใช้ bootstrap กลัวว่าจะหน้าตาไม่เหมือน native app ลองใช้ polymer ก็งงๆ เลยมาใช้ materialize แทน เพราะสร้าง card ได้ สามารถปรับแต่งหน้าตาได้

มาถึงเวลาแข่งกันแล้วหล่ะ

การเปิดตัว shortcut เพื่อเข้าหน้าแอป

หน้าตาของ owlvegrammo อย่างคร่าวๆ ทำ nav bar เพื่อแสดงเมนูบนจอมือถือหรือแท็บเล็ท
โดยหน้าแรกเป็นการ์ดรวม และพาไปยังหน้าอื่นๆ ในรูปแบบการ์ดเช่นกัน แต่ไหงไปหน้าเว็บแทนละนี่

เริ่มทำหน้าแรก ที่แสดงหัวข้อเนื้อหาทั้งหมด รูปจาก pixabay มีหัวข้อเรื่อง คำบรรยาย และปุ่ม

หน้าที่สองที่เสร็จ หน้า about

หน้าต่อๆมา ใส่เนื้อหาที่วางไว้ ตอนแรกจะทำให้คล้ายๆ codelab ทำตัวเลื่อนก็ไม่ค่อยสวย เลยทำไปทีละหน้าอย่างถึกๆ 😑 จริงๆอาจจะมีวิธีที่ดีกว่านี้แหละ

ด้านล่างคือหลังจาก add to home screen ที่หน้า Android เหมือนแอปเลย แต่ถ้าเปิดหน้าเว็บหลายๆหน้า เหมือนเปิด activity บนหน้าแอปเลย ต้องกดย้อนกลับไปเรื่อยๆจนออกเลยทีเดียว

ทำไปสักพักเราคิดว่าเราพอหล่ะ จะทำ push notification ก็ยังไม่จำเป็นเท่าไหร่นัก ตัวเนื้อหาเขียนต่อก็ไม่ทันเลยส่งเลยแล้วกัน เอาเวลาไปทำอย่างอื่นดีกว่า คือ หนีไปนอนนั่นเอง 😪

ตอนจะ submit มีปัญหา กรอกชื่อแอปไม่ได้ บอกให้ทีมงานแก้ให้ จริงๆเราอยากอ่านเบื้องหลังการทำเว็บของงานนี้อยู่เช่นกัน 😊

ได้อะไรจากงานนี้บ้าง?
เราไม่ได้หวังของรางวัลที่ 1 2 3 แต่หวังเสื้อกับสติ๊กเกอร์ 😅

สามารถ prove บางอย่างได้ เช่น
- คิดว่าการทำเว็บ pwa ช่วยลดต้นทุนการทำ 3 platform เหมาะสำหรับของที่ไม่ซับซ้อนมาก
- เหมาะกับการโปรโมตบางอย่างในช่วงสั้นๆ แล้วทิ้งขว้างไป...
- คิดว่าทำอะไรเจ๋งๆได้ไม่ยากนัก ☺

ก่อนอื่นขอบคุณผู้จัดงานที่จัดงาน PWA online hackathon ที่จัดงานนี้ขึ้นมาให้พวกเราได้ร่วมสนุกกัน ทั้งแก้ปัญหาเฉพาะหน้าได้อย่างรวดเร็วที่สุดเท่าที่จะทำได้ และขอบคุณตัวเองที่มาร่วมสนุกกันกับงานนี้ ถึงคะแนน lighthouse จะกลางๆ ค่อนไปข้างน้อย เว็บแอปก็ไม่ได้มีอะไรที่เทพมากมาย ทำออกมาให้พอใช้ได้จริงๆ

ปล. ถ้าได้ของแล้ว จะอัพเดตด้านล่างนะคะ