สวัสดีครับ ก็จบไปแล้วสำหรับกิจกรรม Nerd vs Nurse photo vote ที่งานแต่งพี่ช้างนะครับ ก็คิดไว้ว่าทีม nurse จะชนะ แต่กลับกลายเป็นว่า nerd ชนะแบบค่อนข้างห่างเลยครับ แปลกใจจริงๆ ฮ่าๆ พอหลังจากจบงานก็เลยอยากมาแชร์ประสบการณ์การทำเว็บตัวนี้ขึ้นมาครับ ต้องบอกตามตรงว่าหลายๆเรื่องผมก็ไม่ถนัดเลยครับ (ปกติเป็นเมกเกอร์สาย Internet of things) แต่ก็เพราะต้องการอยากเรียนรู้สิ่งใหม่ๆบ้างก็เลยเข้ามาทำตรงนี้ครับ
เรื่องของเรื่องคือต้องการอยากจะทำอะไรไปเซอร์ไพรซ์งานแต่งของพี่ช้างครับ ก็มานั่งคิดว่าจะทำอะไรดี iot ดีใหม ก็คิดๆ คืออยากให้ทุกคนสามารถร่วมสนุกกับกิจกรรมเราได้แบบง่ายๆ ไม่ต้องล้ำมาก แต่ก็อยากจะให้มันสนุกมากกว่า ก็ได้ไอเดียอยากทำ photo booth ขึ้นมาเป็นรากฐานก่อนกลายเป็นกิจกรรม Nerd vs Nurse photo vote
เอาหละสำหรับเทคโนโลยีที่ผมเลือกใช้นะครับผมตัดสินใจภายในสิบวิว่า อยากเล่น firebase ว่ะ
ไหนๆก็จะเริ่มเรียนรู้เรื่องการทำเว็บแล้วก็ใช้ตัวนี้ละกัน ใช้ง่ายได้มารตฐาน แต่ถึงจะตัดสินใจได้ไวอย่างไร ก็ต้องตรวจสอบความเป็นไปได้ด้วยมีเพื่อนคนนึงเค้าเชี่ยวชาญการใช้งาน firebase เป็นที่ปรึกษาก็ปรึกษาเรื่องที่ทำได้ทำไม่ได้ออกมาแล้วสรุปว่า โอเคทำได้ ลุยกันเลย !
สิ่งแรกที่เราต้องทำก่อนเลยคือการเช่า server ผมเลือกเป็น vultr เพราะง่ายและถูกดีเลือกเป็นตัว 5$ ด้วยใช้งานได้สบายๆเลยหละตั้งเป็น ubuntu 16.04 ลง nginx อะไรเรียบร้อย สิ่งที่ผมเพิ่งทำเป็นครั้งแรกคือการสร้าง user ftp ให้กับ server ตัวเอง ก็ได้บทความจาก digitalocean นี่หละเป็นคนไกด์เรื่อง server หลายๆอย่าง
ถัดมาคือการเขียนเว็บ ผมเลือกใช้เป็น angularjs ครับ ผมเลือกใช้เวอร์ชัน 1 เหตุผลเหรอครับ เพราะผมถนัดไปแล้วหนะสิ 2 , 3 , 4 นี่เคยคิดจะไปแตะอยู่นะครับ แต่ TS ดูยากๆยังไงไม่รู้ก็เลยไม่พยามเรียนรู้ คราวนี้ผมก็เทส lib ก่อนเลยว่าสามารถใช้ lib ตัวไหนทำได้บ้าง หลักๆก็มีแค่ การทำ crop รูป การซ้อนรูปแล้วส่งเข้า firebase โอ้วว ช่างเรียบง่าย แต่กว่าผมจะใช้การ crop รูปแล้วซ้อนรูปให้ตรงได้นี่ใช้เวลานานพอควรเลย (ลองผิดลองถูก)
เอาหละพอทำตรงนี้ได้แล้ว ก็สวัสดี Firebase ก่อนหน้านี้ผมเคยอ่านผ่านๆแล้วว่ามันคืออะไรยังไง แต่ก็ไม่เคยเขียนเป็นชิ้นเป็นอันสักที คราวนี้เอาใหม่ ตั้งใจเรียนไปด้วยเขียนไปด้วย ต้องขอขอบคุณวีดีโอ youtube จาก channel Kong Ruksiam ค่อนข้างอธิบายเคลียเลยครับข้อเสียอย่างเดียวคือพูดช้าครับ แต่ผมก็แค่เร่ง youtube เป็น 1.5 ก็โอเคแล้วครับแนะนำครับเค้ามีสอนเรื่องเทคโนโลยีเว็บหลากหลายความรู้เลยครับ ตอนที่เชื่อมต่อ firebase realtime database แล้วเอารูป ขึ้นได้นี่น้ำตาแทบไหลเลยครับ คือ firebase มันทำออกมาให้ใช้ง่ายมากๆครับ ไม่คิดว่า แค่ก้อปๆแปะๆ อ้าว ส่งขึ้นละ ดีจัง
พอทำได้สักพัก เออแหะ มันเป็นไปได้นะ มันเวิร์คระดับนึงแล้วนะ ก็เลยเอาไปคุยกับพี่ช้างตรงๆเลย พี่ช้างบอก โอ้ว ทำสิๆ แล้วเดี๊ยวพี่ช่วยด้านดีไซต์เว็บกับรูปให้ ก็เลยได้วางโครงหลักของเว็บไซต์ วางแผนว่า flow ของคนใช้งานจะเป็นแบบไหน แบบไหนง่ายกับคนใช้ใส่รูปที่ได้จากดีไซเนอร์พี่ช้างทำให้ (ยกเครดิตเรื่อง ux ui ให้ทีมพี่ช้างเลยครับ)
เมื่อวางโครงสร้างเว็บไซต์เสร็จ เราก็มีความอยากให้มันดูน่าเชื่อถือก็เลยใส่ https เข้าไปด้วย ก็เลยได้ทดลองเล่นทดลองใช้ cloudflare ตัวนี้ใช้ครั้งแรกงงเป็นไก่ตาแตกเลย พอใช้เป็นเท่านั้นใช้ง่ายมากเลย เราเลือกใช้แบบ flexible ที่ไม่ต้องทำอะไรยุ่งยาก แต่ก็ไม่ได้ปลอดภัยเท่าแบบที่สูงกว่าแต่ก็เพียงพอแล้วสำหรับโปรเจคนี้
เอาหละสิ่งสุดท้ายที่เราใส่เข้าไปคือ Google analytics นั่นเอง คือไปอ่านเจอในบทความของพี่หนูเนยเลยได้รู้ว่าการไม่ใส่ google analytics ถือเป็นบาป วิธีการลงนั้นไม่ยากเลย แค่ก้อปสคิปที่ gen ออกมาไปใส่ไว้ใน header ของเว็บก็เป็นอันเสร็จเรียบร้อย แต่รู้หรือไม่ว่าประสิทธิภาพของมันดีเยี่ยม เราสามารถรู้ได้เลยว่าเว็บของเรานั้นเข้าโดยอุปกรณ์อะไรบ้าง มือถือ คอม แทบเล็ต มีอัตรส่วนเท่าไหร่ เข้ามาดูเพจอะไรบ้าง ช่วงไหนบ้าง เข้ามาดูนานใหม อย่างไร บอกหมดเลย นับถือ google เลยจริงๆ
เมื่อเตรียมทุกอย่างพร้อมแล้ว ก็เตรียมทดสอบหน้างาน ก็มีปัญหาเรื่อง Resulutions นิดหน่อยเพราะหน้างานไม่แน่ใจว่าใช้โปรเจคเตอร์แบบไหนจึงต้องสแตนบายไว้ตลอด (ไปในงานแต่งยังต้องเตรียมโน้ตบุคไปแก้หน้างาน) ผลตอบรับดีมาก น้ำตาจะไหล มีผู้สนใจเยอะมากๆ และเข้าร่วมอวยพรกับเราร่วมร้อยคำอวยพร และไม่มีปัญหาเซิฟล่มเลย เย้ ….
สุดท้ายเรื่องที่เรากังวลว่าเอะ ถ้ามีคนใช้เยอะอัพโหลดรูปขึ้นไปเยอะเนี้ยสุดท้ายเราจะเสียเงินให้กับ firebase เท่าไหร่ ผมเลือกการจ่ายเงินให้ firebase แบบ จ่ายเท่าที่ใช้ สรุปยอดคือ 0.00$ ว้าว ฟรีนั่นเอง google ใจป๋าจริงๆ
นี่ก็เป็นเรื่องราวคร่าวๆในการพัฒนา web นี้นะครับ ได้ความรู้และประสบการณ์ไปมากโขเลย สุดท้ายนี้ก็ขอขอบคุณเจ้าภาพครับที่ให้โอกาสเว็บเล็กๆได้เป็นส่วนหนึ่งของกิจกรรมในครั้งนี้ครับ
