Cara membuat aplikasi Firebase Angular dengan auth dan database real-time

Untuk waktu yang lama, saya mencari aplikasi web Portofolio bagus yang dapat membantu saya melacak untung / rugi Cryptocurrency saya dengan mudah sampai saya memutuskan untuk mengembangkannya sendiri dengan bantuan Firebase dan Angular ! Ya, semudah itu, izinkan saya menjelaskan kepada Anda alasannya.

Firebase memberikan perkakas yang sempurna untuk aplikasi dengan otentikasi pengguna dan kebutuhan penyimpanan database waktu nyata. Ini menyediakan dokumentasi yang kaya dengan berbagai contoh dev untuk membantu siapa pun mendapatkan pemahaman yang lebih baik tentang cara membuat aplikasi bintang.

Saya telah membahas bootstrap aplikasi Angular , menggunakan Ignite UI CLI, di posting blog lain.

Artikel ini bertujuan untuk:

  • Lakukan penginstalan dan penyiapan Firebase.
  • Siapkan Firebase Authentication.
  • Menerapkan penyimpanan dan sinkronisasi basis data waktu nyata.
  • Tambahkan layanan data yang dapat diamati.
  • Visualisasikan data dalam aplikasi Angular.

Konfigurasikan akun Firebase

Saya ingin melalui langkah-langkah yang telah kami lakukan untuk menyiapkan akun Portofolio Firebase. Proyek dibuat dari konsol Firebase dengan memilih Tambahkan proyek baru. Setelah formulir Buat proyek dikirimkan, Anda akan melihat Ikhtisar Proyek berikut.

Di bawah bagian Tinjauan Proyek, Anda dapat menemukan semua alat pengembangan yang digunakan untuk Otentikasi dan penyimpanan Data. Di sini juga terletak konfigurasi yang digunakan dalam Aplikasi Web Portofolio. Konfigurasi ini dibuat dengan menekan Tambahkan Firebase ke aplikasi web Anda , dan kemudian ditambahkan dalam file app.module.ts aplikasi .

Mari kembali ke sidebar di sebelah kiri dan pilih Authentication . Dari sini kami memiliki akses ke metode Masuk yang kami perlukan di aplikasi. Arahkan ke tab Sign-in, di sana Anda dapat melihat penyedia yang diaktifkan dan digunakan dalam aplikasi Portofolio - penyedia Google, Facebook dan Email / Kata sandi .

Penyedia login memungkinkan pengguna mengautentikasi dengan Firebase menggunakan akun Facebook dan Google mereka dengan mengintegrasikan login mereka ke dalam aplikasi. Sedangkan untuk penyedia Email / kata sandi, ini mewakili mekanisme otentikasi sederhana dengan hanya menggunakan email dan kata sandi. Firebase Auth menyediakan aturan validasi bawaan yang memverifikasi entri pengguna, jadi kami tidak perlu mengonfigurasi sesuatu yang tambahan di sini.

Bagian "tersulit" di sini adalah konfigurasi penyedia Facebook karena kami perlu memiliki aplikasi Facebook untuk mengautentikasi login. Kami telah membuat aplikasi FB dari Pengembang Facebook yang memberi kami ID Aplikasi dan Rahasia Aplikasi yang diminta dari Firebase.

Baik API ID dan Secret harus diisi saat mengaktifkan penyedia Facebook. Adapun URI pengalihan Auth (dari jendela penyedia) harus ditempel di bawah Facebook/Facebook Login/Products section/Valid Auth Redirect URIs.

Mari lanjutkan dengan konsol Firebase. Dari halaman tampilan Database, kami telah membuat Database Real-time.

Dalam tampilan ini, kita dapat menemukan informasi tentang item data aplikasi dan menulis / membaca aturan keamanan. Di bawah ini adalah aturan yang digunakan oleh aplikasi Portofolio:

{ "rules": { "items": { "$uid": { ".read": "$uid === auth.uid", ".write": "$uid === auth.uid" } } }}
Konfigurasi Aturan Keamanan ini hanya akan memungkinkan pengguna yang diautentikasi untuk dapat membaca dan menulis di database kami. Jika Anda ingin mempelajari cara menentukan aturan lebih lanjut, saya sangat menyarankan untuk memeriksa bagian Keamanan & Aturan Resmi.

Oke, kita ada dimana? Sekarang kita telah melalui pembuatan akun Portofolio Firebase , mari kita lihat bagaimana proyek pengembangan Firebase dibuat.

Jika kami belum memiliki proyek yang dibuat, saya akan merekomendasikan untuk memulai dengan menginstal CLI firebase, yang menyediakan berbagai alat untuk mengelola dan menerapkan proyek Firebase. TAPI kami telah mem-bootstrap Proyek Angular Portofolio dengan Ignite UI CLI, jadi kami hanya perlu menginstal AngularFire dan Firebase dari npm . Kami membutuhkan kedua paket untuk berkomunikasi dengan Firebase. AngularFire adalah pustaka resmi untuk Firebase dan pengembangan Angular.

npm install firebase @angular/fire --save

Semua modul AngularFire yang digunakan dalam aplikasi ditambahkan di app.module.tsfile:

  • FirestoreModule diperlukan untuk fitur database seperti bekerja dengan koleksi, kueri, dan layanan untuk streaming dan manipulasi data.
  • FireAuthModule adalahdiperlukan untuk fitur otentikasi seperti memantau status otentikasi, penyedia Log-in dan keamanan.
  • FireDatabaseModule memungkinkan kita bekerja dengan database Realtime. Ini sangat efisien untuk aplikasi seluler dan web yang memerlukan status tersinkronisasi di seluruh klien secara Realtime.
Satu-satunya modul umum yang tidak digunakan dalam aplikasi Portofolio adalah AngularFireStorageModule. Anda dapat menggunakan modul ini untuk dengan cepat dan mudah menyimpan dan menyajikan konten buatan pengguna seperti foto dan video serta memantau upload dan metadata yang terkait dengan file.

Sekarang setelah kita mengetahui bagaimana aplikasi dikonfigurasi pada awalnya, kita dapat melihat fitur Firebase lain yang digunakan.

Autentikasi

Kita gunakanAngularFireAuth layananuntuk memantau status otentikasi aplikasi. AngularFireAuth.authmengembalikan firebase.auth.Authinstance yang diinisialisasi , memungkinkan kita untuk memasukkan dan mengeluarkan pengguna. Aplikasi ini mendemonstrasikan kemampuan masuk menggunakan tiga penyedia: Facebook, Google, dan Email.

Instance pengguna Firebase disimpan untuk setiap penyedia yang ditautkan ke pengguna, dan ketika pengguna terdaftar atau login, pengguna tersebut menjadi pengguna saat ini dari instance Auth. Instance ini mempertahankan status pengguna sehingga menyegarkan halaman atau memulai ulang aplikasi tidak kehilangan informasi pengguna.

Kami menggunakan signInWithRedirectmetode untuk penyedia Facebook dan Google, untuk masuk dengan mengarahkan ke halaman masuk. Pembuatan akun berbasis kata sandi digunakan untuk penyedia masuk Email,createUserWithEmailAndPassworddan signInWithEmailAndPasswordadalah metode yang bertanggung jawab untuk pembuatan dan masuk akun pengguna.

Saya merekomendasikan dokumen resmi Firebase untuk informasi lebih rinci tentang otentikasi dan siklus hidup pengguna.

Tindakan Database Real-time

Firebase menawarkan dua solusi database berbasis cloud yang dapat diakses klien, dan kami menggunakan database asli Firebase - Realtime. Lihat perbedaan antara Realtime dan Cloud firestore di halaman dokumentasi resmi.

AngularFireDatabasedan AngularFireListlayanan digunakan di aplikasi Portofolio untuk mengambil, menyimpan, dan menghapus data dengan mudah.

AngularFireDatabasedapat disuntikkan melalui konstruktor komponen atau @Injectable()layanan. Dalam kasus kami, kami menggunakan pendekatan kedua:

Data diambil melalui AngularFireDatabaselayanan, yang mengisi daftar Observable BlockItems.AngularFiremenyediakan metode seperti snapshotChanges()itu mengembalikan data yang dapat diamati sebagai array tersinkronisasi. Ini sangat berguna jika Anda ingin membatasi tindakan acara, seperti ditambahkan , diubah , dihapus , dan dipindahkan . Secara default, ini mendengarkan keempatnya, namun, Anda mungkin hanya tertarik pada salah satu dari acara ini dan Anda dapat menentukan mana yang ingin Anda gunakan. Dalam aplikasi kami, kami berlangganan semuanya.

Menambahkan item baru, memperbarui yang sudah ada, atau menghapusnya dari daftar dicapai dengan menggunakan push(), update()dan remove()metode.

Setiap metode operasi data mengembalikan sebuah promise, meskipun kita tidak perlu menggunakan promise penyelesaian untuk menunjukkan keberhasilan karena database real-time membuat daftar tetap sinkron.

Dapat diamati

Layanan CoinItem

Layanan Cryptocompare API mengelola data asinkron dan memancarkan banyak nilai sekaligus Observables. Kami menggunakan HttpClient get()metode untuk meminta data dari sumber daya dan berlangganan ke sana, untuk mengubahnya menjadi Array yang Dapat DiamatiCoinItemobjek, yang akan digunakan kemudian oleh kami igxGrid, igxListdan igxCardkomponen.

Rx.js memungkinkan kita untuk menyimpan hasil Permintaan HTTP. Kami mengambil data ini pada awalnya, menyimpannya dalam cache dan menggunakan versi yang disimpan dalam cache selama masa pakai aplikasi. Kombinasi dari publishReply(1, 300000)dan refCount()melakukan hal berikut.

publishReply (1, 300000) memberitahu Rx untuk menyimpan nilai terbaru yang dikeluarkan dan tetap valid selama 5 menit. Setelah itu, cache akan menjadi tidak valid. refCount () memberitahu Rx untuk menjaga Observable tetap hidup selama masih ada Subscriber.

Sekarang setelah kita berlangganan daftar Koin, hasilnya akan di-cache, dan kita tidak perlu membuat Permintaan HTTP lain.

Layanan BlockItem

Data Portofolio Crypto Coins dipastikan dengan getItemsList()metode yang mengembalikan BlockItemarray Observableke mana igxGridkomponen tersebut berlangganan. Hanya pengguna terotentikasi yang dapat menggunakan layanan ini karena AngularFireListyang kita manipulasi terkait dengan id pengguna unik.

Visualisasikan datanya

Untuk visualisasi, kami menggunakan Komponen UI dari UI Ignite untuk Angularlibrary. Komponen-komponen ini bertanggung jawab untuk penanganan data sambil memberikan akses ke templat khusus dan pembaruan waktu nyata, dengan API intuitif, dengan menggunakan kode jumlah minimal.

igxGrid.dll

Grid [data]properti mengikat digunakan untuk lulus kembali BlockItemlarik. Setiapmn> 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.