Довгий час я шукав хороший веб-додаток Portfolio, який допоможе мені легко відстежувати свої прибутки / збитки в криптовалюті, поки я не вирішу розробити такий самостійно за допомогою Firebase та Angular ! Так, це так просто, дозвольте пояснити вам, чому.

Firebase надає ідеальні інструменти для додатків з автентифікацією користувачів та потребами зберігання даних у реальному часі. Він надає багату документацію з різноманітними прикладами розробників, щоб допомогти кожному краще зрозуміти, як створювати зоряні програми.

Я висвітлив завантаження програми Angular , використовуючи інтерфейс інтерфейсу користувача Ignite UI, в іншому дописі в блозі.

Ця стаття має на меті:

• Пройдіть інсталяцію та налаштування Firebase.
• Налаштуйте автентифікацію Firebase.
• Впровадити зберігання та синхронізацію бази даних у режимі реального часу.
• Додайте послуги спостережуваних даних.
• Візуалізуйте дані в програмі Angular.

Налаштуйте обліковий запис Firebase

Я хочу пройти кроки, які ми зробили для налаштування облікового запису Portfolio Firebase. Проекти створюються з консолі Firebase, вибравши Додати новий проект. Після подання форми створення проекту ви побачите наступний огляд проекту.

У розділі Огляд проекту ви можете знайти всі засоби розробки, які використовуються для автентифікації та зберігання даних. Тут також знаходиться конфігурація, яка використовується у веб-програмі Portfolio Web. Ця конфігурація створюється натисканням кнопки Додати Firebase до веб-програми , а потім вона додається у файл app.module.ts програми .

Повернімось до бічної панелі ліворуч і виберіть Автентифікацію . Звідси ми маємо доступ до методів входу, які нам потрібні в додатку. Перейдіть на вкладку Вхід, там ви побачите постачальників, які ввімкнені та використовуються у програмі Portfolio - Google, Facebook та постачальник електронної пошти / пароля .

Постачальники входу дозволяють користувачам автентифікуватися у Firebase за допомогою своїх облікових записів Facebook та Google, інтегруючи свої логіни в додаток. Що стосується постачальника послуг електронної пошти / пароля, він представляє простий механізм автентифікації, використовуючи лише електронну пошту та пароль. Firebase Auth забезпечує вбудовані правила перевірки, що перевіряють записи користувачів, тому нам не потрібно налаштовувати щось додаткове тут.

Найбільш хитрою частиною тут була конфігурація постачальника послуг Facebook, оскільки для автентифікації логіну нам потрібно було мати програму Facebook . Ми створили додаток FB від розробників Facebook, який надав нам ідентифікатор програми та секрет додатків, які запитував Firebase.

Обидва ID API і Секретної повинні бути заповнені при включенні постачальника 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. АЛЕ ми бутстрапірованная Кутова портфель проектів з Ignite UI CLI, так що ми просто потрібно встановити AngularFire і Firebase від НПМ . Для спілкування з 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 та Email.

Екземпляр користувача Firebase зберігається для кожного постачальника, зв’язаного з користувачем, і коли користувач реєструється або входить, цей користувач стає поточним користувачем екземпляра Auth. Екземпляр зберігає стан користувача, щоб оновлення сторінки або перезапуск програми не втратили інформацію про користувача.

Ми використовуємо signInWithRedirectметод як для провайдерів Facebook, так і для Google, щоб увійти, перенаправивши на сторінку входу. Створення облікового запису на основі пароля використовується для постачальника послуг входу в електронну пошту,createUserWithEmailAndPasswordі signInWithEmailAndPassword- це методи, відповідальні за створення облікового запису користувача та вхід у систему.

Я рекомендую офіційні документи Firebase для отримання більш детальної інформації щодо автентифікації та життєвого циклу користувача.

Дії з базами даних у режимі реального часу

Firebase пропонує два хмарних рішення, доступні для клієнтів, бази даних, і ми використовуємо оригінальну базу даних Firebase - у реальному часі. Перевірте різницю між Realtime та Cloud Firestore на офіційній сторінці документації.

AngularFireDatabaseі AngularFireListслужби використовуються в програмі Portfolio для легкого отримання, збереження та видалення даних.

AngularFireDatabaseможе вводитися через конструктор компонента або @Injectable()обслуговування. У нашому випадку ми використовуємо другий підхід:

Дані отримуються через AngularFireDatabaseпослуга, яка заповнює спостережуваний список BlockItems.AngularFireнадає такі методи, як snapshotChanges()повертає Observable даних у вигляді синхронізованого масиву. Дуже зручно, якщо ви хочете обмежити дії події, такі як додані , змінені , видалені та переміщені . За замовчуванням він прослуховує всі чотири, проте вас може зацікавити лише одна з цих подій, і ви можете вказати, яку з них ви хочете використовувати. У нашій заявці ми підписані на всі.

Додавання нового елемента, оновлення існуючого, або видалити його зі списку досягається за рахунок використання push(), update()і remove()методи.

Кожен метод операції з даними повертає обіцянку, хоча нам не потрібно використовувати обіцянку завершення, щоб вказати на успіх, оскільки база даних у реальному часі синхронізує список.

Спостережувані

Сервіс CoinItem

Служба API Cryptocompare керує асинхронними даними та одночасно випускає кілька значень Observables. Ми використовуємо HttpClient get()метод для запиту даних у ресурсу та підписки на них, щоб перетворити їх на Observable Array ofCoinItemоб'єкти, які будуть використовуватися в подальшому наших igxGrid, igxListі igxCardкомпонентах.

Rx.js дозволяє кешувати результат запиту HTTP. Ми отримуємо ці дані спочатку, кешуємо та використовуємо кешовану версію протягом життя програми. Поєднання publishReply(1, 300000)та refCount()робить наступне.

pubReply (1, 300000) повідомляє Rx кешувати останнє випущене значення та залишатись чинним протягом 5 хвилин. Через цей час кеш-пам’ять буде недійсною. refCount () каже Rx зберігати спостережуваний живим до тих пір, поки є підписники .

Тепер після того, як ми підпишемося на список монет, результат буде кешовано, і нам не потрібно буде робити ще один HTTP-запит.

Послуга BlockItem

Дані портфоліо Crypto Coins забезпечуються getItemsList()методом, який повертає спостережуваний BlockItemмасивна яку підписаний igxGridкомпонент. Лише автентифіковані користувачі можуть користуватися цією службою через те, AngularFireListщо ми маніпулюємо, пов’язане з унікальними ідентифікаторами користувачів.

Візуалізуйте дані

Для візуалізації ми використовуємо компоненти інтерфейсу користувача з інтерфейсу Ignite для 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

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.