มาดึงข้อมูลจาก Firebase มาใช้กันเถอะ

         


                                        มาดึงข้อมูลจาก Firebase มาใช้กันเถอะ

       สวัสดีครับวันเราจะมาทำการดึงข้อมูล จาก Firebase มาใช้ในโปรเจ็ค xcode ของเรากันนะครับ
โดยในวันนี้ ผมจะดึงข้อมูลของสถานที่ท่องเทียวเเละรูปภาพ

มาทำความเข้าใจกันดีกว่า ว่าการดึงข้อมูลจาก Firebase มาใช้ มีการทำงานอย่างไร

การนำข้อมูลจาก Firebase ช่วยในการจัดการข้อมูลไม่ต้องลากตัวข้อมูลลงไปในตัวโปรแกรม xcode 

งั้นเรามาเริ่มกันดีกว่า..

อันดับเเรกเราต้องสร้างตัวโปรเจ็คขึ้นมาก่อน

จากนั้นเข้าไปสร้างตัวFirebase โดยนำ bundle ID ของตัวโปรเจคเรามาใส่แล้วก็กด ต่อไป

หน้าต่อไปจะให้เราโหลดไฟล์ ให้นำไฟล์ที่โหลดมาไปใส่ไว้ในตัวโปรเจคเรา

หลังจากนั้นให้เราทำการกดไปหน้าต่อไป ในส่วนของหน้านี้ ตัวไฟล์ Firebase จะให้เราทำการ Pod ไฟล์

หบังจากนั้นให้กดไปหน้าถัดไป หน้านี้ให้เรา copy ส่วน FIRAPP.configure()

ไปใส่ในโปรเจคเรา

หลังจากนั้นให้ import Firebase ด้วย

หลังจากนั้นให้สร้างหน้า mian โดยผมจะใช้ Prototype Cell ในการแสดงข้อมูล 

แล้วก็เพิ่มตัว UITabilViewDataSourceกับUITableViewDelegate หลัง class

จากนั้นให้สร้างไฟล์ ขึ้นมาโดยต้องชื่อว่า data

หลังจากสรา้งเสร็จเราจะได้ไฟล์มาให้เราใส่โค้เพื่อดึงข้อมูลจาก Firebase มา

แต่เราจะดึงข้อมูลมาจาก Firebase มาใช้ได้อย่างไรในเมือใน Firebase ไม่มีข้อมูลบเพราะงั้นเราต้องไปหาข้อมูลที่ต้องการมาใส่ใน Firebase ให้เรียบร้อย

หลังจากนั้นให้ไปวาง lable ใน cell 

หลังจากนั้นให้เพิ่มโค้ดเพื่อดึงข้อมูลจาก case มาโชว์

จากนั้นให้สรา้งไฟล์ขึ้นมาอีกหนึ่งตัว แล้วเปลื่ยน subclass ให้เป็น UITabilViewCell

หลังจากได้ไฟล์ มาให้เราทำจากลาก Label ไปลิงค์ในไฟล์ที่เรา สรา้งขึ้นมาเมื่อกี้

ต่อมาเราต้องมาประกาศค่าให้ค่าที่รับมาโชว์ใน Label

 

จากนั้นเราจะมาสรา้งหน้าที่สองกัน โดยหน้าที่สองจะเป็นหน้าที่ไว้ฌชว์ข้อมูลที่ถูกดึงมากจาก Firebase 

(อย่าลืมจัดหน้าด้วยนะจ้ะ)

หลังจากที่เราจัดหน้าเสร็จเราต้องมาเพิ่มโค้ดใน ViewController เพื่อให้เชื่อมไปหน้าถัดไปได้

ต่อไปให้สร้างไฟล์ใหม่ขึ้นมาอีกหนึ่งตัว

โดยตั่งชื่อว่า...

แล้วเราก็เพิ่มโค้ดที่เป็นตัวดึงข้องมูลของ Firebase มาแสดงในหน้าที่สองในหน้า detailViewcontroller

หลังจากนั้นให้เราลากตัวแปรในหน้าที่สองมาประกาศชื่อ

หลังจากที่ประกาศเสร็จแล้วให้เราไปใส่โค้ดที่หน้า Viewcontroller เพื่อโชว์ข้อมูล

หลังจากนั้นลองกดรันดู

เย้ๆ เราจะเห็นว่าข้อมูลบน Firebase ถูกดึงมาแทนที่ Label แล้ว

แต่จากหน้าที่สอง เราจะกลับหน้าแรกยังไงหรอ

งั้นเรามาทำปุ่มกดกลับกันดีกว่า

อันดับแรกเราต้องสรา้ง ปุ่มขึ้นมาแล้วนำไปวางไว้ที่ต้องการ

แล้วก็ลากมาประกาศชื่อโดยเป็นเป็น Action 

แล้วก็ใส่โค้ดการทำงานของปุ่ม

แล้วลองรันดู จะเห็นได้ว่าเวลาเรากดปุ่มมันก็จะกลับไปหน้าแรก

สุดท้ายก็ตกเเต่งตัวโปรเจ็คตามชอบเลยครับ

ก็จะได้ตัวเเอพเล็กๆหนึ่งตัวแล้วเพื่อนๆคนไหนสนใจก็ลองไปทำกันได้นะครับ

วันนี้ผมขอจบแค่นี้ล่ะครับ ขอบคุณครับ

++ถ้าไม่เข้าใจลองกดเข้าไปดู วิดีโอด้านล่างนี้นะครับ++