Say, Hi กันซะหน่อยก่อนจะเริ่มเรียนรู้การสร้างแอปพลิเคชันที่เชื่อมต่อกับ Firebase ค่ะ หลายๆ บทความที่ผ่านมาน่าจะพอช่วยให้ทุกคนเริ่มสร้างแอปพลิเคชันง่ายๆ ของตัวเองแบบ Offline (ไม่ต่อเน็ตก็มีแอปใช้) ได้แล้วใช่หรือเปล่าเอ่ยยย ??? เอาเป็นว่าใช่เนอะ อิอิ
คราวนี้เราคงพร้อมกับการสร้างแอปพลิเคชันที่จำเป็นต้องเชื่อมต่อไปยัง Server กันแล้ว ซึ่งในที่นี้เราจะใช้ Firebase (คำถามคือ Firebase คืออะไร ??? --- เอาไว้มีโอกาสจะมาแนะนำให้รู้จักกับ Firebase ให้มากขึ้นนะคะ)
 |
| ภาพตัวอย่างแอปพลิเคชัน |
โดย Case Study ที่จะใช้คือ เราจะสร้างแอปพลิเคชันสำหรับสมัครสมาชิก ซึ่ง Firebase ที่จะใช้มี 2 อย่างนะคะ คือ
1. Authentication ใช้สำหรับยืนยันตัวตน
2. Database ใช้สำหรับเก็บข้อมูลสมาชิก
เมื่อพร้อมแล้ว เรามาสร้างแอปพลิเคชันกันค่ะ หน้าตาของหน้า Register หลักๆ ที่ใช้ในงานนี้จะประกอบด้วย UITextField 3 อันสำหรับกรอก Name, Email และ Password และมี UIButton สำหรับปุ่ม Register ค่ะ
จากนี้เราจะต้องจัดการกับ Firebase ซะหน่อย ...
เมื่อ Login เข้า Firebase ผ่าน https://firebase.google.com แล้ว ให้เข้าสู่หน้า Console ของ Firebase เพื่อเราจะสร้างโปรเจคใหม่
 |
| สร้างโปรเจคใน Filebase |
จากนั้นจะได้หน้าต่างสำหรับกำหนดชื่อโปรเจค (อยากตั้งอะไรก็ได้นะคะ)
 |
| กำหนดชื่อให้โปรเจค |
เมื่อกำหนดชื่อของโปรเจคแล้วให้กำหนด Country/Region ของเราเลือกเป็น Thailand ค่ะ
เสร็จแล้วหลังจากที่กด Create Project เราจะได้หน้า Console เพื่อเลือกว่าเราต้องการสร้างแอปพลิเคชันของอะไร
 |
| เลือกว่าจะสร้างแอปสำหรับใคร |
เราเลือก iOS อยู่แล้วล่ะ อิอิ
คราวนี้จะมีการกำหนด Firebase ให้แอปของเรา 4 ขั้นตอนค่ะ พร้อมแล้วไปเริ่มเลยเนอะ!!!
ขั้นที่ 1. Enter app details สิ่งที่เราต้องระบุมี 2 อย่างก่อนค่ะ คือ
- iOS bundle ID อันนี้เอาจาก Xcode ตอนที่สร้างโปรเจคได้เลย
- App nickname อันนี้ตั้งอะไรก็ได้
ส่วน App Store ID อันนี้ยังไม่ต้องกรอกค่ะ เพราะเรายังไม่รู้น่ะจนกว่าจะเอาขึ้น App Store น่ะค่ะ
จากนั้นกด ADD APP เพื่อไปขั้นถัดไป
 |
| ขั้นที่ 1 |
ขั้นที่ 2 Copy config file จริงๆ จะ Auto download ให้เราเลยแหล่ะ
 |
| ขั้นที่ 2 |
ขั้นที่ 3 Install pod คราวนี้เป็นการทำตามขั้นตอนที่ทาง Firebase บอกค่ะ เริ่มจากเปิด Terminal แล้วสร้าง pod file ในโปรเจค Xcode กันก่อน ด้วยคำสั่ง pod init จากนั้นเปิดไฟล์ที่ได้และใส่ Firebase ที่เราต้องการใช้งานลงไป (เป็นการ add library น่ะ) เสร็จแล้วก็สั่ง install จากทาง Terminal ค่ะ
 |
| ขั้นที่ 3 |
เรียบร้อยแล้วก็ Continue ค่ะ แต่ว่าขั้นที่ 4 นี่ต้องไปทำที่ Xcode แล้วค่ะ
การเปิดตัวงาน Xcode ขึ้นมาเขียนคำสั่งเราจะเปิดจากไฟล์ workspace แทนการเปิดจาก xcodeproj ค่ะ
คราวนี้เราจะไปแก้คำสั่งในไฟล์ AppDelegate.swift ด้วยสิ่งที่ Firebase ให้มาค่ะ
 |
| ขั้นที่ 4 |
ตรงนี้มีให้เลือกด้วยว่า เราใช้ภาษาอะไรในการเขียนแอป ดีเนอะ
เมื่อ Copy หรือเอาไปพิมพ์ตามแล้วก็ FINISH ได้เลยจ้าาา
หมายเหตุ ดูเหมือนจะต้องสร้างเป็น init func ในไฟล์ AppDelegate นะ
ติดตั้งเรียบร้อย มาดูกันค่ะ เราจะใช้อะไรใน Firebase บ้าง ... ตาม Case นี้เราใช้ Authentication กับ Database ตามที่บอกข้างต้นค่ะ เริ่มจาก Authentication นะคะ
ในการยืนยันตัวตนภายของผู้ใช้แอปเรานั้น เราสามารถกำหนดได้ว่าแอปเราจะยืนยันตัวตนจากอะไรเช่นจาก Email , Goolge , Facebook หรืออื่นๆ ตามที่ Firebase มีให้
 |
| เลือกกำหนด Authentication |
เราเลือกใช้ Email ก่อนนะคะ กำหนดให้เป็น Enable แล้ว Save
ส่วนของ Database เราไม่ต้องกำหนดอะไรค่ะ ไปใช้งานได้เลย แต่ก่อนจะกลับไปยุ่งกับ Xcode ที่ pod file ที่เราได้สร้างขึ้นมาตอนต้น เราจำเป็นต้องไปเพิ่มคำสั่ง 2 อย่างเพื่อ add Auth กับ Database เข้าไป (Project เราจะได้รู้จัก library ของ Firebase น่ะ)
เสร็จแล้วที่ Terminal ก็ใช้คำสั่ง pod install อีกทีนะคะ (เขียนในไฟล์เฉยๆ มันไม่รู้จักนะ)
ตอนนี้ Firebase เรียบร้อยละค่ะ ต่อไปก็ไปต่อกันที่ Xcode อย่างแรกเลยค่ะ เราควรไปกำหนด Keychain Sharing เป็น ON ค่ะ
 |
| กำหนด Keychain Sharing |
ที่นี้ก็ Coding กันค่ะ ที่หน้า Register ของเราให้ใส่ import Firebase และ FirebaseAuth แล้วประกาศ
จากการทำงานของแอปพลิเคชัน เมื่อผู้ใช้งานสมัครสมาชิกด้วย Email กรอกข้อมูลแล้วกดปุ่ม Register ข้อมูลจะส่งจากแอปไปที่ Firebase เพื่อเก็บลงส่วนของ Authentication ซึ่งมี Email กับ Password ในขณะที่ Name และ Email จะถูกเก็บลง Database ดังนั้นคำสั่งที่จะใช้เราจะเขียนใน Action ของปุ่มคือ
*** จากคำสั่งจะมี class member ที่ถูกสร้างขึ้นมาสำหรับใช้งานต่างๆ ซึ่งสิ่งที่ class member มีคือ
เพียงเท่านี้เมื่อเราลอง Run Simulator ดู แล้วกรอกข้อมูลต่างๆ ก็จะได้ข้อมูลไปเก็บที่ Firebase แล้วค่ะ
บทความหน้าจะเป็นการ Login แล้วดึงข้อมูลจาก Database มาแสดงกันละกันค่ะ 😊😊😊
รายละเอียดใน Clip อาจแตกต่างจากรายละเอียดใน Blog นะคะ แต่ก็ใช้ได้เหมือนกันค่ะ
Comments
Post a Comment