firebase

เล่าประสบการณ์แข่งขัน Hackathon ครั้งแรกให้ชีวิต

เพิ่งผ่านพ้นไปไปกับงาน PWA Online Hackathon งานสำหรับนักพัฒนาสาย Web ที่จะสร้างสรรค์ผลงานในช่วงแค่ระยะเวลาแค่ 48 ชม. โดยเรียกว่าเปิดโอกาสให้นักพัฒนาทั่วไป ไม่ใช่แค่ภายในประเทศไทยแต่รวมถึงนักพัฒนาทั่วโลก โดยงานถูกจัดขึ้นเมื่อวันที่ 23 มิถุนายน 2560 20:00 น. – 25 มิถุนายน 2560 20:00 น.

PWA Online hackathon คืออะไร

PWA Online Hackathon เป็นการแข่งขัน Hackathon ที่ไม่ต้องมาเจอหน้ากันจริงๆ ต่างคนต่างทำอยู่บ้าน สร้าง Web Application เจ๋ง ๆ แล้วส่งมาแข่งกันผ่าน online Web Application ของใครเจ๋ง ก็รับรางวัลมากมายจากเราไปได้เลย

โดยงานนี้ได้ Sponsor  บริษัทใหญ่ ๆ หลายบริษัท

ของรางวัลเรียกได้ว่าจัดเต็มกันเลยที่เดียว

เมื่อได้สมาชิกในทีมครบ ซึ่งก็เหลือเวลาเตรียมตัวก่อนถึงวันแข่งขันจริง ประมาณ 2 สัปดาห์ ในระหว่างนี้ก็คุยกันผ่าน Social เพียงอย่างเดียว โดยสร้างกลุ่ม Line ขึ้นมา เพื่อนในทีมบางคนยังไม่เคยเห็นหน้ากันเลยด้วยซ้ำ จึงจำเป็นต้องให้มาพบหน้ากันสักครั้ง เพราะล้วนแต่ทำงานในบริษัทคนละแห่งกัน ก็เลยถือโอกาสช่วงเย็นหลังเลิกงาน นัดพบปะเจอหน้า

แน่นอนการแข่งขันย่อมมีกฏกติกา มาดูรายละเอียดกันหน่อย

กติกา
  • ทีมที่เข้าแข่งขันต้องมีสมาชิกตั้งแต่ 1 – 5 คน
  • เรามีเวลาให้ 48 ชั่วโมงสำหรับการสร้าง Web Application ห้ามสร้างก่อนเป็นอันขาด
  • ทุกทีม ต้อง push code ทั้งหมด ขึ้น GitHub อย่างสม่ำเสมอ ในช่วงเวลา 48 ชั่วโมง
  • งานของทุกทีมต้อง Host อยู่บน Firebase hosting เท่านั้น
  • เรามีกฏนิดหน่อยสำหรับ Web Application และทางกรรมการขออนุญาตตัดสิทธิสำหรับ Application ที่ทำผิดกฏ
  • ทางทีมผู้จัดงานจะส่งรายละเอียด เรื่องวิธีการส่ง Web application หลังจากที่ได้สมัครแล้ว

ดูรายละเอียดของกติกา ก็ไม่ได้มีอะไรที่มองดูแล้วว่าจะยาก เป็นห่วงเพียงเรื่องเดี่ยวคือ Firebase hosting ซึ่งในทีมก็ยังไม่เคยได้ลองใช้งานกันเลย

ต่อมาเรื่องกฏที่ต้องให้ความใส่ใจเป็นพิเศษ

กฏ
  • เราไม่อนุญาตให้ ทำ Backend หรือ API เองเป็นอันขาด
  • แต่มันจะไม่สนุกเลยถ้าใช้ API ไม่ได้เลย เราจึงยอมให้ใช้ API ที่เป็น Public และ “ฟรี” ได้ (API ที่เป็น Free plan นับเป็น ฟรีเหมือนกัน)
  • Frontend Library ต่าง ๆ ที่เปิดเป็น Public สามารถใช้งานได้ทั้งหมด
  • Web Application จะต้องมี Web App Manifest (สามารถ Add to home screen ได้สมบูรณ์) และ Service worker ติดตั้งอยู่
  • Web Application จะต้องใช้งานได้บางส่วนหากไม่ได้เชื่อมต่อ Internet

งานยากเลยสำหรับกฏบางข้อกับเวลา 48 ชม. ส่งรายละเอียดให้สมาชิกแบ่งงานกันไปคิด ทุกคนตั้งทำถาม “พวกเราจะทำเกี่ยวกับอะไรดี”

1 สัปดาห์ก่อนถึงวันแข่งขัน

นัดรวมตัวกันอีกครั้ง ครั้งนี้เป็นวันที่ต้องนำ Idea ของแต่ละคนมา Share กันแล้วว่าจะทำอะไรดีในช่วงระยะเวลาแข่งขันอันสั้นนี้ ได้ข้อสรุปว่าเราจะใช้ Web Navigator เป็นสิ่งหลัก โดย Interface Navigator นี้จะสามารถเรียก Device ของเครื่อง Client ที่ User ใช้งานอยู่นั้น โดยจะเรียก Feature ของ Hardware ได้หลายอย่างมาก เช่น Microphone , Camera ,Bluetooth ,Notification ,Audio ,Battery ,Geolocation เหล่านี้เป็นต้น จึงเลือกมาใช้เป็น Feature ของ Application ทีมเรา

จึงได้สรุป Feature หลัก ๆ ที่ตั้งใจว่าที่จะให้ Application เราต้องสามารถทำได้

  • Take photos ต้องถ่ายภาพได้
  • เก็บ Location (Latitude,Longitude) ของ User ที่ใช้งานได้
  • Google Map ต้องแสดงตำแหน่งของ User ที่ใช้งานได้บนแผนที่ พร้อมกับแสดงตำแหน่งของ User ที่เรียกใช้งาน App ได้ในบริเวณใกล้เคียง โดยแสดงเป็นตำแหน่ง Mark บน Google Map
  • แสดง Gallery รูปภาพของตัวเองได้
  • สามารถลงชื่อเข้าใช้งาน App ได้ด้วย Google Account , Facebook Account
  • แสดง Gallery รูปภาพของ User ที่ใช้งาน App โดยทำมาแสดงเป็น Feeds ข้อมูล โดยจะทำการกด Like ให้กับรูปนั้น ๆ ได้
  • มีการแจ้งเตือน User ให้กรณีที่มี User อื่นที่ถ่ายภาพในบริเวณใกล้เคียงได้
  • ส่ง Email แจ้งเตือน กรณีลงชื่อเข้าใช้งานในครั้งแรก

เมื่อสรุปขอบเขตของ Application ได้แล้วก็ลงมือ ออกแบบ Prototype หน้าจอก็ได้ออกมาหน้าตาแบบนี้

เนื่องจากเป็นการ Coding ข้ามวันข้ามคืนก็ต้องการสถานที่กบดานกัน ผมเลยเสนอสถาที่นี่เลย บ้านบางเขน ถ้าใครเคยได้ยินจะพอทราบว่าเป็นแหล่งพักผ่อนในแบบคนที่ชอบถ่ายภาพ และก็จะมี Zone ห้องแอร์สำหรับนั่งอ่านหนังสือ คุยงาน ถือว่าเหมาะมากสำหรับนั่งทำงานบรรยากาศเงียบสงบแอร์เย็น เพราะเสียค่าบัตรเข้าใช้บริการ 20 บาท (สามารถนำบัตรไปแลกน้ำเปล่าได้ 1 ขวด) ก็สามารถเข้าใช้บริการห้องอ่านหนังสือได้แล้ว พวกเราเลือกที่จะไปรวมตัวกันที่นี่

วันแข่งขัน

และแล้วก็มาถึงวันเริ่มแข่งขัน วันที่ 23 มิถุนายน 2560 20:00 น. ทีมเราลงความเห็นว่าจะผักผ่อนกันก่อนโดยจะไปเริ่ม เช้าวันเสาร์ 09:00 น.

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

โดยเราเลือกใช้ Angularjs และเลือก materializecss.com  นี้เป็นหลักในการ Implement App ในครั้งนี้

ในระหว่างที่แต่ละทีม Coding อยู่แต่ละทีมก็จะสามารถความเลื่อนไหวของทีมอื่น ๆ ได้แบบ Realtime เพราะทีมผู้จัดออกแบบการแสดงผลของคะแนนไว้แล้ว สามารถเข้าดูได้ตลอดเวลา

เกณฑ์การตัดสินมีคะแนนรวมของเครื่องมือที่ชื่อ Lighthouse  ที่จะค่อยวัดประสิทธิภาพแอพเราว่ามีคะแนนรวมเท่าไหร่โดยแบ่งการให้คะแนนออกเป็น 4 ด้าน

  • Progressive Web App
  • Performance
  • Accessibility
  • Best Practices

โดยทุกหัวข้อจะมีคะแนน 100 คะแนน ก็รวม ๆ แล้ว 400 คะแนนเห็นจะได้ซึ่งทีมเราก็ไม่น้อยหน้า ก็ต้องวัดประสิทธภาพด้วยเช่นกัน

ช่วงแรกเรามองคะแนนของให้ความสนใจกับเรื่อง Progressive Web App ซะส่วนใหญ่ และจะกลับมาปรับ Tune Performance ในภายหลังแต่ก็ไม่ทันเวลา แต่มองว่าเครื่องมือนี้ช่วยเราได้ในระดับนึง

เราใช้เวลาได้ไม่เต็มที่นั่งเพราะก็มองการแข่งครั้งนี้เป็นการเก็บประสบการณ์ไปก่อน ต้องขอบคุณทุกคนในทีมที่ช่วยกันได้อย่างเต็มที่

นี่คือตัวอย่างหน้าจอสุดท้ายก่อนหมดเวลา

 

06/27/2017 by แชร์ประสบการณ์ โปรแกรมมิ่ง

สรุปสิ่งที่ได้รับจากงาน Cloud Functions for Firebase and Next Generation of Web

Cloud Functions for Firebase

ถือเป็นครั้งแรกที่บริษัท Tencent จัดงาน Tencent Open House #1 ซึ่งบริษัท Tencent ฟังดูอาจจะไม่คุ้นหูเพราะ Tencent ถือบริษัทที่ถือกำเนิดที่ประเทศจีนเป็นบริษัทยักษ์ใหญ่ทางด้านวงการไอที แบบเดียวกับ Alibaba และ Baidu เลยที่เดียว

Tencent เป็นบริษัทให้บริการด้าน System Integration หรือบริการวางระบบคอมพิวเตอร์และเครือข่ายสำหรับองค์กรเป็นหลักถ้า Product ที่ดัง ๆ ในไทยบ้านเราก็ยกตัวอย่างเช่น sanook.com , Wechat , Joox , ฯลฯ เป็นต้น ข้อมูลเพิ่มเติมเกี่ยวกับบริษัท Tencent

งานถูกจัดขึ้นในช่วงเย็นของวันที่  25 เมษายน 2017 เวลา 18.00-21.00 ที่ บริษัท เทนเซ็นต์ (ประเทศไทย) อาคารเมืองไทย-ภัทร คอมเพล็กซ์ (อาคาร A) ชั้น 16

Agenda ของงาน
18.00 – 18.45 | Register, discussion and networking with free pizza and drinks
18.45 – 19.00 | Opening Notes by Tencent Thailand
19.00 – 19.45 | “Topic : Cloud Functions for Firebase” by K.Tee
19.45 – 20.00 | Break
20.00 – 20.45 | “Topic : Next Generation of Web” by K.Thang
20.45 – 21.15 | Q&A, Networking, Chit-Chat

ใช้เวลาเดินทางไม่นานเมื่อถึงที่จัดงาน เดินเข้าไปก็จะพบกับอาหารที่ทางผู้จัดงานมีให้กินก่อนเข้าฟังการบรรยาย

ส่วนด้านหน้าเวทีการบรรยาย

เมื่อได้เวลาตาม Agenda ที่วางไว้ท่านแรกคุณตี๋ (จิรวัฒน์ กรัณย์วิทยาการ) Google Developer Expert ด้าน Firebase คนแรกของประเทศไทย โปรไฟล์ไม่ธรรมดาครับคนนี้มาพูดเสนอกับ Product ที่เพิ่งจะเปิดตัวใหม่ของ Firebase ที่ชื่อ Cloud Functions for Firebase

Cloud Functions จะมาช่วยแก้ปัญหาให้ Developer เข้าถึง Event ต่าง ๆ ของ Firebase ได้เป็นการรวมการทำงานของ Firebase กับ Google Cloud เข้าด้วยกัน สิ่งที่ CloudFunctions นี้จะช่วยให้ช่วยให้ผู้ใช้งานทราบและพร้อมกับทำการปรับปรุงข้อมูลบน Database ได้เลยโดยผ่าน Logic การทำงานที่เราได้ทำการเขียนฝั่งไว้ที่ Cloud Functions นั้นแล้ว

โดยแต่ก่อนการที่จะใช้งาน Firebase จะยังไม่สามารถเขียน Functions การทำงานในฝั่งของ Firebase ได้จะเป็นต้องเขียน Function การทำงานในฝั่ง Server ของเราเองและค่อยเรียกใช้ Firebase Database ถ้าอยากจะใช้งานเกี่ยวกับการเก็บข้อมูลสิ่งเหล่านี้จะถูกทำที่ฝั่ง Server เราเอง  แต่เมื่อมี Firebase Cloud Functions มาจะช่วยให้เราสามารถเขียน Functions การทำงานใน Firebase ได้เลย ยกตัวอย่างเช่น

ตัวอย่างการทำงานของ Cloud Functions for Firebase

เมื่อมีการส่ง message เข้ามาให้ฝั่ง Firebase Server และ Cloud Functions จะดักจับ Event Functions ที่เราเขียนไปเพื่อที่จะสั่งให้ไปทำอะไร โดย Function นี้จะทำงานอยู่เบื้องหลังโดยไม่ต้องมาเขียน Function จัดการในฝั่ง Server ของเราเองเลย

อีก 1 ตัวอย่างการทำงาน

เมื่อมีการสั่งอัพโหลดไฟล์เข้ามาที่ Firebase Storage จะทำการ Trigger ไปบอก Cloud Function ให้ทำการ Resize Picture และเก็บใน Firebase Storage โดยเพื่อที่จะใช้ในการ preview Picture บน Mobile จะไม่ต้องทำเป็นต้องแสดงรูปที่มีขนาดใหญ่ โดยตัว Function  Resize Picture จะถูกเขียนฝั่งไว้ที่ Cloud Functions เรียบร้อยแล้วเพียงแค่เราเรียก Service การอัพโหลดรูปจาก Firebase Cloud Functions เท่านั้นเอง

การที่จะเริ่มใช้งาน Firebase Cloud Functions

Cloud Functions for Firebase ณ เวอร์ชั่นตอนนี้ Support ภาษา Javascript ได้ภาษาเดียวเท่านั้นโดยเครื่อง developer จำเป็นต้องติดตั้ง NodeJS และ Firebase CLI ตัวอย่างการเริ่มต้นใช้งาน Cloud Functions Get Start ทุกครั้งที่ developer ได้ทำการสร้าง Functions เสร็จ ทุกครั้งจำเป็นจะต้อง deploy functions เหล่านั้นที่ได้พัฒนาไปที่ Firebase ก่อนทุกครั้งโดยจะเสียเวลาประมาณ 1-3 นาที

จบไปกับการบรรยายเรื่อง Cloud Functions for Firebase

พักเบรคกันสักครู่ ต่อกันด้วยเรื่องที่ถูกใจนักพัฒนาสาย web กันหน่อย

Next Generation of Web

บรรยายโดยคุณตั้ง (วรัทธน์ วงศ์มณีกิจ) Google Developer Expert ด้าน Web Technologies สายโหดด้านเว็บมาอัพเดทแนวทางการพัฒนาเว็บในปัจจุบันและต่อไปในอนาคต

เนื่องจากสายเว็บจะอยู่ไปต่อให้ได้ต้องทำงานให้เสมือนเป็น app บน mobile แอพนึง application ที่พัฒนาสำหรับ mobile platform เพราะด้วยขนาดที่ใหญ่เปลืองพื้นที่จัดเก็บและบางแอพยังไม่คุ้มค่ากับการ Download เพื่อมาติดตั้งเพียงแค่ใช้งานเพียงน้อยนิด จึงทำให้ผู้ใช้งานเลือกที่จะลังเลกับการ Download เพื่อมาติดตั้งใช้งานบนเครื่อง การพัฒนา Website ให้มีหน้าตาคล้ายกับ Mobile App จึงมาช่วยตอบโจทย์เรื่องขนาดของ Application นี้ได้

เรื่องการทำเว็บ Responsive ที่ว่าเป็นเรื่องที่ได้รับความนิยมมากในไทย แต่ผิดกับต่างประเทศที่มองว่าเรื่องการพัฒนาเว็บแบบ Responsive นี้มองว่าไม่จำเป็นที่จะพัฒนาเพื่อในเว็บของเรานั้นเป็น Responsive เลย เพราะด้วยว่าผู้ใช้งานบน Mobile ก็ไม่ได้ยืดขยายเว็บ จึงมองว่าไม่จำเป็น ขนาดยักษ์ใหญ่อย่าง Facebook ยังแยกการพัฒนาเว็บให้ Run ได้เฉพาะ platform เดียวเท่านั้น

https://m.facebook.com/ ที่พัฒนามาเพื่อ run บน mobile เพียงอย่างเดียว

โดยคุณตั้ง มอง 7 สิ่งนี้ที่จำเป็นสำหรับการพัฒนาเว็บในอนาคตไว้ดังนี้

  • More Look Like App : การที่จะพัฒนาเว็บให้เรียนแบบ mobile application นั้นได้เว็บเราจพเป็นต้องรองรับการทำงานแบบ PWA (Progressive Wep App)
  • More Speeds : ในปัจจุบันเรื่อง Speeds สำหรับผู้ใช้งานคือว่าสำคัญมากเมื่อ 2015 โดยเฉลี่ย 53% สำหรับ User จะไม่รอ Website ที่โหลดหน้าแรกยาวนานเกินกว่า 3 วินาที และต่อไปในปี 2016 เปอร์เซ็นการที่ User จะไม่รอ Website ที่โหลดนาน ๆ ก็จะเพิ่มสูงขึ้นเรื่อย ๆ
  • More User Engagement : การที่เว็บจะทำงานให้คล้ายกับ Mobile App ได้แบบเนียนมาก ๆ เรื่องที่แอพทำได้ Notification ก็ควรที่จะทำได้ซึ่งในปัจจุบัน Browser บางตัวสามารถทำงานได้แล้ว
  • More Hardware Access : เว็บเองสามารถเรียกใช้งาน Hardware บน Device ได้แล้ว เช่น Microphone , Camera ,Bluetooth เป็นต้น ยิ่งเข้าไกล้ mobile app เข้าไปทุกที
  • More Connectivity independent : สิ่งหนึ่งที่แอพ บน Mobile บางแอพทำงานได้ในสถานะที่ไม่มี internet ที่ฝั่งเว็บยังไม่สามารถทำได้ในอดีตซึ่งมองว่าเรื่องนี้เป็นสิ่งที่ต้องได้รับการแก้ไข ปัจจุบันสิ่งนี้ได้รับการแก้ไขแล้วด้วย Services Worker ทำให้ Website ทำงานได้แบบสถานะ Offline Browser จ้าวดัง ๆ ในตอนนี้ก็ Support เรื่องนี้เรียบร้อยแล้ว
  • More Secure : เพราะว่าเรื่องความปลอดภัยในปัจจุบันกำลังให้ความสำคัญเป็นอันดับต้น ๆ การที่ User จะมั่นใจได้ว่า Website ที่เข้าใช้งานนั้นมีความปลอดภัยในระดับนึง ซึ่งการทำ Https ให้กับ Website จึงเป็นสิ่งที่ทำให้ User มั่นใจในระดับนึงได้ว่าเว็บไซตที่กำลังเข้านั้นมีความปลอดภัย Top 100 Website ในไทย มีเว็บที่เป็น Https เพียง 40 Website แต่ที่น่าตกใจมีเพียงไม่ถึง 10 % เป็น Https แบบสมบูรณ์ 100 %
  • More Easier : ความง่ายในการใช้งานถือเป็นส่วนสำคัญที่ทำให้ Website จะต้องตระหนักถึงการพัฒนาเว็บไซต์ให้ง่ายต่อการใช้งาน Google มองเห็นเรื่องการทำระบบ Login เป็นเรื่องที่ทำบ่อยจึงกำเนิด Feature Auto Login ให้สำหรับการจำข้อมูลการ Login ของ User กับ Website นั้น ๆ และการใช้งานบน Device อื่นนอกเหนือจากที่เคย Login ไว้ในการเข้าใช้งาน Website เดียวกันจะแจ้งการ Login เคยเข้าใช้งาน Website นี้จาก User นี้จะให้ทำการ Login ด้วย User นี้เลยหรือไม่ เรื่องนี้ก็เลยทำให้การใช้งาน Website ดูง่ายขึ้นไปอีก

 

04/26/2017 by แชร์ประสบการณ์ โปรแกรมมิ่ง

Firebase คืออะไร ขั้นตอนการเริ่มใช้งาน พร้อมโค๊ดตัวอย่างแบบง่าย ๆ

Firebase เป็น Project ถูกออกแบบมาให้เป็น API และ Cloud Storage สำหรับพัฒนา Realtime Application  รองรับหลาย Platform เบื้องต้นล่าสุดก็มีให้ใช้พัฒนาด้วยกัน 3 Platform คือ IOS App, Android App, Web App

firebase1

โดยตัวอย่างโค๊ดการเรียกใช้งานที่จะมานำเสนอในวันนี้พัฒนาร่วมกับ Web Application ซึ่งก็ต้องเขียนด้วย Javascript นั้นเอง

เริ่มกันเลย

    1. เริ่มต้นก็ต้องไปสร้าง Project บน Firebase Console กันก่อน เข้าลิ้งนี้ console.firebase ได้เลยfirebase2
    2. คลิกเลือกที่ปุ่ม CREATE NEW PROJECT จะมีหน้าจอเด้งมาให้กรอก Project Name และเลือก Country/Region  เราก็เลือกตามใจ จากนั้นกดปุ่ม CREATE PROJECTfirebase3
    3. หลังจาก CREATE PROJECT แล้ว ก็จะได้หน้า console ของ Project ที่เราสร้างไปfirebase4
    4. ให้เลือกเมนู Database จากนั้นไปที่ Tab RULES เพื่อเข้าจัดการ users authorized ของการเข้าถึงของมูล เบื้องต้นเราจะอนุญาตให้คนที่เรียกเข้าถึงข้อมูลได้หมดทั้ง Read และ Write ข้อมูลได้ โดยแก้ไขโค๊ดตามนี้แล้ว กดปุ่ม PUBLIC เพื่อบันทึกการเปลี่ยนแปลง 
      //แก้ไขจาก 
{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

//เป็น

{
  "rules": {
    ".read": true,
    ".write": true
  }
}
    5. กลับมาที่ Tab Data เพื่อลองสร้างข้อมูลกัน โดยคลิกที่เครื่องหมาย + firebase6
    6. เพิ่มข้อมูลตามนี้ จากนั้นกดปุ่ม ADD ก็จะได้ข้อมูลที่เราเพิ่มไปfirebase7
    7. ต่อไปจะมาเขียนโค๊ดกันกดไปที่เมนู Home Overview ของ Project ที่เราสร้าง และ คลิกเลือกที่ Add Firebase To Your web appfirebase8
    8. ระบบแสดงหน้าจอ firebase9
    9. ให้ Copy Code นี้ จากนั้นให้สร้างไฟล์ index.html ขึ้นมาเพิ่มโค๊ดนี้เข้าไปในไฟล์ index.html ลองเรา โดยโค๊ดที่ Firebase นี้จะใช้พัฒนาร่วมกับ Angular1 
      <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Firebase คืออะไร เริ่มใช้งาน Firebase เบื้องต้น</title>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
        <script src="https://www.gstatic.com/firebasejs/3.4.0/firebase.js"></script>
        <script>
            // Initialize Firebase
            var firebaseRef = {};

            angular.module('firebaseApp', []).service('firebaseService', function() {
                // สร้าง Function เพื่อ init Firebase เข้ากับ app เรา
                this.initFirebase = function() {
                    var config = {
                        apiKey: "{ใส่ api key ของคุณ}",
                        authDomain: "{ใส่ authDomain ของคุณ}",
                        databaseURL: "{ใส่ databaseUrl ของคุณ}",
                        storageBucket: "{ใส่ storageBucket ของคุณ}",
                        messagingSenderId: "{ใส่ messageingSenderId ของคุณ}"
                    };
                    firebase.initializeApp(config);
                    firebaseRef = firebase.database().ref("blogs");
                }
                // สร้าง Function เพื่อเก็บ event ของ Firebase
                this.eventFirebase = function() {
                    firebaseRef.on('value', function(data) {
                        var elementOL = angular.element(document.getElementById('blogs'));
                        console.log(data.val());
                        const datas = data.val();
                        elementOL.empty();
                        angular.forEach(datas, function(post, index) {
                            console.log(' title ::==' + post.title + ' content ::==' + post.content);
                            elementOL.append('<li> Title ::== ' + post.title + ' Content ::==' + post.content + '</li>');
                        })
                    })
                }
                this.push = function(title, content) {}
            }).controller('firebaseCtrl', function(firebaseService) {
                // เรียกใช้งาน firebaseService ที่เราสร้างไว้
                firebaseService.initFirebase();
                firebaseService.eventFirebase();
            })
        </script>
    </head>
    <body ng-app="firebaseApp">
        <div ng-controller="firebaseCtrl">
            <fieldset>
                <legend>Poolsawat 's Blogs</legend>
                <ol id="blogs">
                    <li></li>
                </ol>
            </fieldset>
        </div>
    </body>
</html>
    10. ผลการทำงานของโปรแกรมfirebase10
    11. ลองทดสอบการทำงานว่าข้อมูลอัพเดท Realtime แบบที่เขาอวยจริงๆ ไหม ผมก็ทดสอบเปิด Browser 2 Tab โดย Tab แรกจะเปิดหน้า Database เพื่อเตรียมเพิ่มข้อมูล อีก Tab ผมเปิดหน้า App ของเราเพื่อรอดูผลที่เปลี่ยนแปลงfirebase14
    12. ผลการทดสอบ ข้อมูลถูกเพิ่มเข้ามาที่หน้า app ของเราโดยที่เราไม่ได้ refresh page เลย เยี่ยมไปเลยใช่ไหมครับfirebase15




  • อธิบาย Function events ที่ Firebase Provide มาให้สำหรับ Retrieve Data เพิ่มเติมเข้าไปที่นี่ Events Retrieve Datafirebase11
  • events Function สำหรับ Save Data เพิ่มเติมเข้าไปที่นี่ Events Save Datafirebase12

นี่คือตัวอย่างง่าย ๆ สำหรับบทความนี้ก็ขอฝากไว้เท่านี้นะครับ

 

09/27/2016 by โปรแกรมมิ่ง

ตัวอย่างโค๊ดเรียก Google Maps API กับ AngularJS 1 เพื่อใส่ Marker Location แบบง่าย ๆ

ช่วงนี้เริ่มศึกษา Google Maps API เพื่อที่จะมาใช้กับ Project ของตัวเองเข้าไปดู Tutorial การเรียกใช้งาน

ก็เลยงานลองลงมือเขียนการดึง Map แบบง่ายแล้วมันใช้งานได้ดี ก็เลยอยากที่จะมาแบ่งปันโค๊ดง่ายๆนี้กับเพื่อน ๆ

มาเริ่มกันเลย

ขั้นแรก จำเป็นต้องมี Account Gmail กันก่อน หลังจากนั้นเข้าไปสร้าง API_KEY ของ Map

เข้าไปที่ credentials console เพื่อเข้าไปสร้าง API_KEY

key-console

กด Create Credentials เลือก API Key

key-console-1

ระบบจะสร้าง KEY มาให้ 1 ชุด

key-console-2

เสร็จสิ้นการสร้าง API_KEY




ต่อไปเขียนโค๊ดกัน

<!DOCTYPE html>
<html ng-app="mapApp">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
        <title>Google Map</title>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=YOUR_API_KEY"></script>
        <style media="screen">
            #map {
                width: 100%;
                height: 500px;
            }

        </style>
    </head>
    <body>
        <div class="container" ng-controller="mapController">
            <div class="" id="map"></div>
        </div>

        <script type="text/javascript">
            var app = angular.module('mapApp', []);
            app.controller('mapController', function($scope) {
                console.log('Google Maps API version: ' + google.maps.version);
                // สร้าง Location 2 ชุด
                var locations = [
                    {
                        title: 'BKK',
                        lat: 13.742053062720384,
                        lng: 100.5084228515625
                    }, {
                        title: 'Rayong',
                        lat: 12.860004340637044,
                        lng: 101.38870239257812
                    }
                ]
                // ผูก element กับ MAP zoom ระดับ 6 เลขน้อย จะมองระยะกว้าง เลขมาก จะละเอียด center ให้ focus ที่ Bangkok
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 6,
                    center: locations[0],
                    disableDefaultUI: true
                });
                // Loop วาด Marker บนแผนที่
                angular.forEach(locations, function(location, index) {
                    console.log('location ::==' + location.title);
                    // สร้าง marker
                    var marker = new google.maps.Marker({position: location, map: map, title: location.title});
                    // สร้าง popup content ใส่ content เป็น location title
                    var infowindow = new google.maps.InfoWindow({content: location.title});
                    // สร้าง event ให้ จุด marker
                    marker.addListener('click', function(event) {
                        console.log(event);
                        // เปิด popup เมื่อ click marker
                        infowindow.open(map,marker);
                    });
                });

                // ใส่ event click ให้ MAP ทั้ง MAP
                map.addListener('click', function(event) {
                    console.log('latitude ::==' + event.latLng.lat());
                    console.log('longtitude ::==' + event.latLng.lng());
                    // alert Latitude and Longitude
                    alert('Latitude ::=='+event.latLng.lat()+' \nLongitude ::=='+event.latLng.lng());
                });
            });
        </script>
    </body>
</html>

หลังจาก Run ทดสอบ

map-code-1

map-code-2

map-code-3

เหล่านี้เป็นตัวอย่างง่าย ๆ แต่ก็สามารถเอาไปต่อยอดทำ Project ได้ไม่มาก็น้อย บทความนี้ฝากไว้เท่านี้ครับ

09/11/2016 by โปรแกรมมิ่ง

คลังเก็บเรื่องราวต่าง ๆ

วงแหวนเว็บ

วงแหวนเว็บ