บทที่ 20 – สร้างแอพแชทด้วย FireBase

คุณสมบัติของแอพ

ในบทนี้ จะสอนสร้างแอพแชท โดยใช้คอมโพเนนต์ FirebaseDB ผู้ใช้สามารถส่งข้อความหากันได้ โดยใส่ชื่อ และข้อความ เสร็จแล้วคลิ้กปุ่ม Send ข้อความก็จะถูกส่งไปที่เซิร์ฟเวอร์ของ FireBase แล้วส่งต่อไปยังผู้ใช้คนอื่นที่ใช้แอพนี้ นอกจากนี้ ยังมีปุ่ม Clear สำหรับลบข้อความที่แชทกันด้วย

คอมโพเนนต์ที่กล่าวถึง

  • FirebaseDB เป็นคอมโพเนนต์ที่เชื่อมต่อกับเว็บไซต์ FireBase ซึ่งใช้บริการเก็บข้อมูลไว้บนคลาวด์ และอ่านข้อมูลกลับมา จุดที่แตกต่างจากบริการจัดเก็บข้อมูลทั่วไป ก็คือ เมื่อข้อมูลที่จัดเก็บมีการเปลี่ยนแปลง จะมีการอัพเดตให้รู้ได้ทันที โดยจะเกิดอีเวนต์ dataChanged ขึ้น เราจึงสามารถใช้อีเวนต์นี้ เพื่ออัพเดตข้อมูลใหม่ที่เปลี่ยนแปลงได้ในทันทีที่ออนไลน์
  • Textbox ในบทนี้ ใช้เพื่อแสดงข้อความหลายๆ บรรทัด แต่ไม่จำเป็นต้องมีการแก้ไขข้อความใน Textbox ดังนั้น จึงต้องลบเครื่องหมายถูกหน้าช่อง Enabled ด้วย
  • Notifier ในบทนี้ ใช้ ShowMessageDialog เพื่อแสดงข้อความ error จาก FirebaseDB

Properties ที่สำคัญ

สำหรับ properties สำคัญของ FirebaseDB ได้แก่
  • FirebaseToken เป็นรหัส token ที่ใช้ในการตรวจสอบและอนุญาตให้แอพของเราติดต่อกับ FireBase ได้
  • FirebaseURL เป็น URL ของ Firebase ที่ใช้กับ project นี้
  • ProjectBucket หากต้องการแชร์ข้อมูลระหว่างแอพนี้ กับแอพอื่นๆ ก็จะต้องใช้ชื่อ ProjectBucket เหมือนกันด้วย
  • Persist หากคลิ้กถูกหน้าช่องนี้ ข้อมูลใน Firebase จะยังคงเก็บไว้อยู่ในขณะที่แอพของเรา off-line และเมื่อกลับมา on-line ก็จะเริ่มซิงค์ข้อมูลมาที่แอพ
  • Use Default โดยปกติ ช่องนี้จะมีเครื่องหมายถูกอยู่ ซึ่งเป็นการกำหนดให้ใช้แอ็กเคานต์ของ App Inventor (หรือ Thunkable) ในการใช้งาน FirebaseDB หากคุณต้องการใช้ FirebaseDB ด้วยแอ็กเคานต์ของคุณเอง ก็ให้ลบเครื่องหมายถูกหน้าช่องนี้ออก แล้วสร้าง project ใหม่ใน Firebase จากนั้น นำ FirebaseURL มาใส่ในช่อง

บล็อกที่สำคัญ

  • FirebaseDB StoreValue เป็นบล็อกสำหรับส่งข้อมูลไปเก็บใน Firebase โดยจะต้องระบุ tag และข้อมูลที่จะบันทึก
  • DataChanged เป็นอีเวนต์ที่เกิดขึ้นเมื่อข้อมูลใน Firebase มีการเปลี่ยนแปลง โดยในอีเวนต์นี้ จะให้ข้อมูล 2 อย่างมาด้วย คือ
    • tag ชื่อ tag ที่มีข้อความเปลี่ยนแปลง
    • value ข้อมูลที่มีการเปลี่ยนแปลง
  • FirebaseError เป็นอีเวนต์ที่เกิดขึ้นเมื่อมี error เกิดขึ้นกับ FirebaseDB โดยมีอีเวนต์จะมีตัวแปร message เก็บข้อความแจ้ง error ไว้

Comments

Post a Comment

Popular posts from this blog

บทที่ 4 - เรียนรู้เกี่ยวกับ User Interface

Image
นี่เป็นบทเรียนสำคัญอีกบทหนึ่ง เพราะคุณจะได้เรียนรู้การใช้งาน User Interface แบบต่างๆ ซึ่ง User Interface นั้น ถือเป็นคอมโพเนนต์พื้นฐานที่ทุกแอพพลิเคชั่นต้องมี เพื่อให้ผู้ใช้งานแอพ สามารถสั่งงานแอพ และแสดงผลให้ผู้ใช้ดูได้ เนื่องจากเนื้อหาของบทที่ 4 ค่อนข้างยาว จึงได้ตัดแบ่งออกเป็น 5 ตอนด้วยกัน ตอนที่ 1 ในตอนนี้ คุณจะได้เห็นตัวอย่างของแอพสำหรับป้อนข้อมูลบุคคล ซึ่งมีการใช้ User Interface แบบต่างๆ เพื่อให้คุณสามารถเลือกใช้ User Interface ได้เหมาะสม คอมโพเนนต์ที่กล่าวถึง User Interface ที่กล่าวถึงในบทนี้ ได้แก่ Spinner เป็นปุ่มที่เมื่อคลิ้กแล้วจะมีรายการตัวเลือกต่างๆ ให้ผู้ใช้เลือก Textbox เป็นช่องสำหรับใส่ข้อความ ซึ่งสามารถกำหนดลักษณะพิเศษได้ เช่น ใส่ได้เฉพาะตัวเลข ใส่ข้อความได้หลายบรรทัด โดยกด Enter เพื่อขึ้นบรรทัดใหม่ได้ DatePicker สำหรับใช้กำหนดวัน เดือน ปี คศ. Checkbox เป็นช่องสำหรับทำเครื่องหมายถูก ListPicker เป็นปุ่มที่เมื่อคลิ้กแล้ว ก็จะมีรายการตัวเลือกต่างๆ ให้ผู้ใช้เลือก ซึ่งในบทนี้ จะอธิบายข้อแตกต่างระหว่าง Spinner และ ListPicker ด้วย Button คือปุ่...
Read more

บทที่ 16 - สร้างแอพนับจำนวนก้าว (Pedometer)

Image
คุณสมบัติของแอพ ในบทนี้ จะสอนใช้คอมโพเนนต์ Pedometer มาสร้างแอพนับจำนวนก้าวเดิน, ระยะทาง (เมตร), ระยะเวลาตั้งแต่เริ่มเดิน โดยมีปุ่ม Start, Stop, Pause และ Resume สำหรับควบคุมการทำงานของแอพ มีปุ่ม Settings เพื่อกำหนดระยะทางต่อก้าว ( Stride Length ) และที่พิเศษ คือ แอพนี้มีการบันทึกข้อมูลเก็บไว้ในแอพด้วย ดังนั้น แม้ปิดแอพไปแล้ว เมื่อเปิดแอพขึ้นมาใหม่ ข้อมูลเดิมที่บันทึกไว้ ก็จะปรากฎขึ้นมา หากเราต้องการเริ่มใหม่ ก็สามารถรีเซตได้ คอมโพเนนต์ที่กล่าวถึง Pedometer เป็นเซ็นเซอร์สำหรับนับจำนวนก้าวเดิน ระยะทาง และระยะเวลาที่ก้าวเดิน Clock ในบทนี้ ใช้เป็นทั้งนาฬิกาที่บอกเวลา และวันที่ปัจจุบัน และใช้เป็นนาฬิกาจับเวลา หรือ timer ด้วย ซึ่งหมายความว่า เราสามารถตั้งคาบเวลาไว้ใน property TimeInterval เมื่อเวลาผ่านไปจนครบคาบเวลาที่กำหนด ก็จะเกิดอีเวนต์ Timer ขึ้น Properties ที่สำคัญ คอมโพเนนต์ Pedometer มี properties ที่ต้องกำหนดในหน้า Designer ดังนี้ StopDetectionTimeout ใช้กำหนดระยะเวลา (หน่วยเป็น millisecond) หากผู้ใช้อยู่นิ่งเกินกว่าเวลาที่กำหนดนี้ ก็จะถือว่า หยุดเคลื่อนที...
Read more

บทที่ 3 - เริ่มใช้ App Inventor สร้างแอพแรก

Image
บทที่ 3 นี้ ถือเป็นบทเรียนสำคัญมากสำหรับผู้เริ่มต้น เพราะจะได้เรียนขั้นตอนการพัฒนาแอพพลิเคชั่นด้วย App Inventor ตั้งแต่ต้น จนได้เป็นไฟล์ APK หรือ Android application package ที่สามารถนำไปติดตั้งบนอุปกรณ์แอนดรอยด์ได้เลย (คุณสามารถนำความรู้นี้ ไปปรับใช้กับเว็บไซต์ Thunkable ได้ด้วยเช่นกัน) โดยคุณจะได้เรียนรู้ ขั้นตอนในการพัฒนาแอพพลิเคชั่น และวิธีการใช้คำสั่งต่างๆ ดังนี้ เข้าไปที่เว็บไซต์ MIT App Inventor หรือเว็บไซต์ Thunkable ล็อกอินด้วยแอ็กเคานต์ Google เริ่มสร้าง project ใหม่ และเรียนรู้การตั้งชื่อ project เรียนรู้คำสั่งสำคัญในเมนูต่างๆ รู้จักกับหน้า Designer สำหรับการออกแบบหน้าจอแอพ องค์ประกอบต่างๆ และทดลองออกแบบหน้าตาแอพ เรียนรู้คอมโพเนนต์ในกลุ่มต่างๆ ว่าใช้ทำอะไร ทดลองนำคอมโพเนนต์มาใส่ในหน้าจอแอพ กำหนด properties ต่างๆ ของคอมโพเนนต์ที่นำมาใช้ อัพโหลด ไฟล์มีเดีย เช่น ไฟล์ภาพสำหรับปุ่ม กำหนด properties ของ screen1 รู้จักกับหน้า Block Editor สำหรับการเขียน code ควบคุมการทำงานของแอพ รู้จักกับบล็อกประเภทต่างๆ เช่น บล็อกประเภท event, action ทดลองเขียน code...
Read more