วิธีสร้างแอป Firebase Angular ด้วยการรับรองความถูกต้องและฐานข้อมูลแบบเรียลไทม์

เป็นเวลานานที่ฉันมองหาแอปพลิเคชันเว็บ Portfolio ที่ดีที่สามารถช่วยติดตามผลกำไร / ขาดทุน Cryptocurrency ของฉันได้อย่างง่ายดายจนกระทั่งฉันตัดสินใจที่จะพัฒนาสิ่งนั้นด้วยตัวเองด้วยความช่วยเหลือของFirebase และ Angular ! ใช่มันง่ายมากให้ฉันอธิบายให้คุณฟังว่าทำไม

Firebaseมอบเครื่องมือที่สมบูรณ์แบบสำหรับแอปพลิเคชันที่มีการตรวจสอบผู้ใช้และความต้องการพื้นที่จัดเก็บฐานข้อมูลแบบเรียลไทม์ มีเอกสารประกอบพร้อมตัวอย่างการพัฒนาที่หลากหลายเพื่อช่วยให้ทุกคนเข้าใจวิธีสร้างแอปที่เป็นตัวเอกได้ดีขึ้น

ฉันได้กล่าวถึงการบูตแอปพลิเคชันเชิงมุมโดยใช้ Ignite UI CLI ในบล็อกโพสต์อื่น

บทความนี้มีวัตถุประสงค์เพื่อ:

  • ดำเนินการติดตั้งและตั้งค่า Firebase
  • ตั้งค่า Firebase Authentication
  • ใช้การจัดเก็บและการซิงโครไนซ์ฐานข้อมูลแบบเรียลไทม์
  • เพิ่มบริการข้อมูลที่สังเกตได้
  • แสดงภาพข้อมูลในแอปพลิเคชัน Angular

กำหนดค่าบัญชี Firebase

ฉันต้องการทำตามขั้นตอนที่เราได้ดำเนินการเพื่อตั้งค่าบัญชี Portfolio Firebase โปรเจ็กต์ถูกสร้างขึ้นจากคอนโซล Firebase โดยเลือกเพิ่มโปรเจ็กต์ใหม่ เมื่อส่งแบบฟอร์มสร้างโครงการแล้วคุณจะเห็นภาพรวมโครงการต่อไปนี้

ในส่วนภาพรวมโครงการคุณจะพบเครื่องมือการพัฒนาทั้งหมดที่ใช้สำหรับการตรวจสอบสิทธิ์และการจัดเก็บข้อมูล นอกจากนี้ยังมีการกำหนดค่าที่ใช้ใน Portfolio Web App การกำหนดค่านี้สร้างขึ้นโดยการกดเพิ่ม Firebase ในเว็บแอปของคุณและจะเพิ่มในไฟล์app.module.tsของแอปพลิเคชันในภายหลัง

ลองกลับไปที่แถบด้านซ้ายและเลือกรับรองความถูกต้อง จากที่นี่เราสามารถเข้าถึงวิธีการลงชื่อเข้าใช้ที่เราต้องการในแอป นำทางไปยังเข้าสู่ระบบในแท็บนั้นคุณสามารถดูผู้ให้บริการที่มีการเปิดใช้งานและใช้ในการประยุกต์ใช้ผลงาน - Google, Facebook และอีเมล์ผู้ให้บริการรหัสผ่าน

ผู้ให้บริการลงชื่อเข้าใช้ให้ผู้ใช้ตรวจสอบสิทธิ์กับ Firebase โดยใช้บัญชี Facebook และ Google โดยรวมการเข้าสู่ระบบเข้ากับแอป สำหรับผู้ให้บริการอีเมล / รหัสผ่านจะแสดงกลไกการตรวจสอบสิทธิ์แบบง่ายๆโดยใช้อีเมลและรหัสผ่านเท่านั้น Firebase Authมีกฎการตรวจสอบความถูกต้องในตัวเพื่อยืนยันรายการผู้ใช้ดังนั้นเราจึงไม่จำเป็นต้องกำหนดค่าอะไรเพิ่มเติมที่นี่

ส่วนที่ "ยากที่สุด" ที่นี่คือการกำหนดค่าผู้ให้บริการ Facebook เนื่องจากเราจำเป็นต้องมีแอปพลิเคชัน Facebookเพื่อตรวจสอบการเข้าสู่ระบบ เราได้สร้างแอป FB จากผู้พัฒนา Facebook ซึ่งให้ ID แอปและความลับของแอปที่ขอจาก Firebase

ควรกรอกทั้งAPI IDและSecretเมื่อเปิดใช้งานผู้ให้บริการ Facebook สำหรับการตรวจสอบสิทธิ์การเปลี่ยนเส้นทาง URI (จากหน้าต่างผู้ให้บริการ) Facebook/Facebook Login/Products section/Valid Auth Redirect URIsก็ควรจะวางภายใต้

มาดำเนินการต่อกับคอนโซล Firebase จากหน้ามุมมองฐานข้อมูลเราได้สร้างฐานข้อมูลแบบเรียลไทม์

ในมุมมองนี้เราสามารถค้นหาข้อมูลเกี่ยวกับรายการข้อมูลแอปพลิเคชันและเขียน / อ่านกฎความปลอดภัย ด้านล่างนี้เป็นกฎที่แอปพลิเคชัน Portfolio ใช้:

{ "rules": { "items": { "$uid": { ".read": "$uid === auth.uid", ".write": "$uid === auth.uid" } } }}
การกำหนดค่ากฎความปลอดภัยนี้จะอนุญาตให้เฉพาะผู้ใช้ที่ได้รับการรับรองความถูกต้องเท่านั้นที่สามารถอ่านและเขียนในฐานข้อมูลของเราได้ หากคุณต้องการเรียนรู้วิธีกำหนดกฎขั้นสูงเพิ่มเติมขอแนะนำอย่างยิ่งให้ตรวจสอบส่วนความปลอดภัยและกฎอย่างเป็นทางการ

ตกลงเราอยู่ที่ไหน ตอนนี้เราได้ดำเนินการสร้างบัญชีPortfolio Firebaseแล้วมาดูกันว่าโครงการพัฒนา Firebaseถูกสร้างขึ้นอย่างไร

หากเรายังไม่ได้สร้างโครงการฉันขอแนะนำให้เริ่มต้นด้วยการติดตั้ง firebase CLI ซึ่งมีเครื่องมือมากมายสำหรับจัดการและปรับใช้โครงการ Firebase แต่เราได้ bootstrapped โครงการเชิงมุมกับผลงาน Ignite UI CLI ดังนั้นเราเพียงแค่ต้องการที่จะติดตั้งAngularFireและFirebaseจากNPM เราต้องการทั้งสองแพ็กเกจเพื่อสื่อสารกับ Firebase AngularFireเป็นไลบรารีอย่างเป็นทางการสำหรับการพัฒนา Firebase และ Angular

npm install firebase @angular/fire --save

โมดูล AngularFire ทั้งหมดที่ใช้ในแอปพลิเคชันจะถูกเพิ่มในapp.module.tsไฟล์:

  • จำเป็นต้องใช้FirestoreModuleสำหรับคุณสมบัติฐานข้อมูลเช่นการทำงานกับคอลเล็กชันแบบสอบถามและบริการสำหรับการสตรีมข้อมูลและการจัดการ
  • FireAuthModuleคือจำเป็นสำหรับคุณสมบัติการพิสูจน์ตัวตนเช่นการตรวจสอบสถานะการพิสูจน์ตัวตนผู้ให้บริการล็อกอินและความปลอดภัย
  • FireDatabaseModuleช่วยให้เราสามารถทำงานกับฐานข้อมูลแบบเรียลไทม์ มันมีประสิทธิภาพมากสำหรับแอพมือถือและเว็บที่ต้องการสถานะการซิงค์ระหว่างไคลเอนต์แบบเรียลไทม์
โมดูลทั่วไปเดียวที่ไม่ได้ใช้ในแอป Portfolio คือAngularFireStorageModule คุณสามารถใช้โมดูลนี้เพื่อจัดเก็บและให้บริการเนื้อหาที่ผู้ใช้สร้างขึ้นเช่นภาพถ่ายและวิดีโอได้อย่างรวดเร็วและง่ายดายตลอดจนตรวจสอบการอัปโหลดและข้อมูลเมตาที่เกี่ยวข้องกับไฟล์

ตอนนี้เรารู้แล้วว่าแอปได้รับการกำหนดค่าอย่างไรในตอนแรกเราสามารถดูคุณลักษณะอื่น ๆ ของFirebaseที่ใช้งานได้

การรับรองความถูกต้อง

เราใช้AngularFireAuth บริการเพื่อตรวจสอบสถานะการตรวจสอบสิทธิ์แอป AngularFireAuth.authส่งคืนfirebase.auth.Authอินสแตนซ์เริ่มต้นทำให้เราสามารถล็อกผู้ใช้เข้าและออก แอปแสดงความสามารถในการลงชื่อเข้าใช้โดยใช้ผู้ให้บริการสามราย ได้แก่ Facebook, Google และอีเมล

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

เราใช้signInWithRedirectวิธีการสำหรับทั้งผู้ให้บริการ Facebook และ Google เพื่อลงชื่อเข้าใช้โดยเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ การสร้างบัญชีโดยใช้รหัสผ่านใช้สำหรับผู้ให้บริการลงชื่อเข้าใช้อีเมลcreateUserWithEmailAndPasswordและ signInWithEmailAndPasswordเป็นวิธีการที่รับผิดชอบในการสร้างบัญชีผู้ใช้และการลงชื่อเข้าใช้

ขอแนะนำเอกสาร Firebase อย่างเป็นทางการสำหรับข้อมูลเพิ่มเติมเกี่ยวกับการตรวจสอบสิทธิ์และวงจรชีวิตของผู้ใช้

การดำเนินการกับฐานข้อมูลแบบเรียลไทม์

Firebase นำเสนอโซลูชันฐานข้อมูลบนคลาวด์สองแบบที่ไคลเอนต์เข้าถึงได้และเรากำลังใช้ฐานข้อมูลดั้งเดิมของ Firebase - เรียลไทม์ ตรวจสอบความแตกต่างระหว่างRealtimeและCloud firestoreในหน้าเอกสารอย่างเป็นทางการ

AngularFireDatabaseและ AngularFireListมีการใช้บริการในแอป Portfolio เพื่อดึงบันทึกและลบข้อมูลได้อย่างง่ายดาย

AngularFireDatabaseสามารถฉีดผ่านตัวสร้างของส่วนประกอบหรือ @Injectable()บริการ. ในกรณีของเราเราใช้แนวทางที่สอง:

ข้อมูลถูกดึงผ่านไฟล์ AngularFireDatabaseBlockItemsบริการที่จะเติมรายการสังเกตของAngularFireให้วิธีการเช่นsnapshotChanges()ที่ส่งคืนข้อมูลที่สังเกตได้เป็นอาร์เรย์ที่ซิงโครไนซ์ มันจะมีประโยชน์มากหากคุณต้องการที่จะ จำกัด การกระทำเหตุการณ์เช่นเพิ่ม , เปลี่ยน , ลบออกและย้าย โดยค่าเริ่มต้นจะรับฟังทั้งสี่อย่างอย่างไรก็ตามคุณอาจสนใจเพียงหนึ่งในเหตุการณ์เหล่านี้และคุณสามารถระบุได้ว่าคุณต้องการใช้เหตุการณ์ใด ในแอปพลิเคชันของเราเราสมัครสมาชิกทั้งหมด

เพิ่มรายการใหม่อัปเดตที่มีอยู่หรือลบออกจากรายการจะทำได้โดยการใช้push(), update()และremove()วิธีการ

วิธีการดำเนินการข้อมูลแต่ละวิธีจะส่งคืนคำสัญญาแม้ว่าเราจะไม่จำเป็นต้องใช้คำสัญญาที่สมบูรณ์เพื่อบ่งชี้ความสำเร็จเนื่องจากฐานข้อมูลแบบเรียลไทม์จะทำให้รายการซิงค์

Observables

บริการ CoinItem

บริการ Cryptocompare API จัดการข้อมูล async และส่งออกหลายค่าพร้อมObservablesกันด้วย. เราใช้HttpClient get()วิธีการขอข้อมูลจากทรัพยากรและสมัครสมาชิกเพื่อเปลี่ยนเป็น Observable Array ของCoinItemวัตถุซึ่งจะถูกนำมาใช้ในภายหลังโดยเราigxGrid, igxListและigxCardส่วนประกอบ

Rx.js ช่วยให้เราสามารถแคชผลลัพธ์ของคำขอ HTTP เราดึงข้อมูลนี้ในขั้นต้นแคชและใช้เวอร์ชันแคชตลอดอายุการใช้งานของแอปพลิเคชัน การรวมpublishReply(1, 300000)และrefCount()ทำสิ่งต่อไปนี้

ประกาศตอบกลับ (1, 300000)บอกให้ Rx แคชค่าที่ปล่อยออกมาล่าสุดและใช้งานได้นาน 5 นาที หลังจากนั้นจะทำให้แคชเป็นโมฆะ refCount ()บอกให้ Rx รักษา Observable ให้คงอยู่ตราบเท่าที่ยังมี Subscribers อยู่

หลังจากที่เราสมัครรับรายการ Coins ผลลัพธ์จะถูกแคชและเราไม่จำเป็นต้องทำการร้องขอ HTTP อีก

บริการ BlockItem

ข้อมูล Portfolio Crypto Coins ได้รับการรับรองโดยgetItemsList()วิธีการที่ส่งคืนBlockItemอาร์เรย์ที่สังเกตได้ซึ่งigxGridเป็นสมาชิกของคอมโพเนนต์ เฉพาะผู้ใช้ที่ได้รับการรับรองความถูกต้องเท่านั้นที่สามารถใช้บริการนี้ได้เนื่องจากสิ่งAngularFireListที่เราจัดการนั้นเชื่อมโยงกับรหัสผู้ใช้ที่ไม่ซ้ำกัน

แสดงภาพข้อมูล

สำหรับการแสดงภาพเราใช้ส่วนประกอบ UI จาก Ignite UI สำหรับ Angularlibrary ส่วนประกอบเหล่านี้มีหน้าที่จัดการข้อมูลในขณะที่ให้การเข้าถึงเทมเพลตที่กำหนดเองและการอัปเดตแบบเรียลไทม์ด้วย API ที่ใช้งานง่ายโดยใช้รหัสจำนวนน้อยที่สุด

igxGrid

การ[data]ผูกคุณสมบัติกริดใช้เพื่อส่งผ่านBlockItemอาร์เรย์ที่ส่งคืน แต่ละmn> represents a field of the object and it is used to define features like editing and sorting. The columns are templatable, and with the help of Angular pipes, we can declare display-value transformations in them easily. We use a decimal pipe to change the minimum number of integer digits before the decimal point.

The component provides straightforward event handlers and API for CRUD operations. Handlers like updateRow and deleteRow are implementing additional logic like AngularFireList manipulation and coin item restore logic with the igxSnackbar.

igxCard

Cards are used to provide general information of Crypto coins using CSS Flexbox layout. These Card components can be filtered with the igxFilter directive, which can be used to filter different data sources. igxFilter can be applied as a pipe or as a directive.

igxFinancialChart

The Chart offers multiple ways in which the data can be visualized and interpreted, once it is returned by the service. There are several display modes for price and volume, and in our case we use chartType=”candle”.

The financial chart component analyzes and selects data columns automatically:

- Date/Time column to use for x-axis

- Open, High, Low, Close, Volume columns or the first 5 numeric columns for y-axis

Theming

IgniteUI for Angular bases its component designs on the Material Design Principles and with just a few lines of code, we can easily change the colors, sizes, typography, and overall look and feel of our components.

Now that we’ve provided all base definitions needed for the igx-theme, and have configured the igx-dark-theme mixin, we need to only apply .light-theme and .dark-theme CSS classes somewhere at DOM element root level and toggle it on button click.

Result

Original text


Wrapping up

Everything is possible with the right tooling. We have created a Portfolio Web application using the full power of the Angular Framework, Firebase Authentication services, and Cloud Database store/synchronization.

You can find the GitHub repository and the actual portfolio application here.

Feel free to share in the comments below any questions that you have, suggestions as to what can be improved or changed in the app, or any problems that you’ve encountered while configuring your Firebase account or application.