Дълго време търсех добро уеб приложение Портфолио, което може да ми помогне лесно да проследя печалбите / загубите си от криптовалута, докато не реша да ги разработя сам с помощта на Firebase и Angular ! Да, толкова е лесно, нека ви обясня защо.

Firebase дава перфектните инструменти за приложения с удостоверяване на потребителя и нужди за съхранение на база данни в реално време. Той предоставя богата документация с разнообразни примери за разработчици, за да помогне на всеки да разбере по-добре как да създава звездни приложения.

Имам обхванати ъглови възбуждане приложение, с помощта на Ignite UI CLI, в друг блог пост.

Тази статия има за цел:

Преминете през инсталацията и настройката на Firebase.
Настройте удостоверяване на Firebase.
Внедряване на съхранение и синхронизация на база данни в реално време.
Добавете услуги за наблюдение на данни.
Визуализирайте данните в ъглово приложение.

Конфигурирайте акаунт във Firebase

Искам да премина през стъпките, които сме предприели, за да настроим акаунта в Portfolio Firebase. Проектите се създават от конзолата на Firebase, като изберете Добавяне на нов проект. След като формулярът за Създаване на проект бъде изпратен, ще видите следния Преглед на проекта.

В раздела Преглед на проекта можете да намерите всички инструменти за разработка, които се използват за удостоверяване и съхранение на данни. Тук се намира и конфигурацията, която се използва в уеб приложението Portfolio. Тази конфигурация се генерира чрез натискане на Add Firebase към вашето уеб приложение и по-късно се добавя във файла app.module.ts на приложението .

Да се върнем към страничната лента вляво и да изберете Удостоверяване . Оттук имаме достъп до методите за вход, които са ни необходими в приложението. Придвижете се до раздела Вход, там можете да видите доставчиците, които са активирани и използвани в приложението Portfolio - Google, Facebook и доставчик на имейл / парола .

Доставчиците на вход позволяват на потребителите да се удостоверяват с Firebase, използвайки техните акаунти във Facebook и Google, като интегрират своите входни данни в приложението. Що се отнася до доставчика на имейл / парола, той представлява прост механизъм за удостоверяване чрез използване само на имейл и парола. Firebase Auth предоставя вградени правила за проверка, потвърждаващи потребителските записи, така че не е необходимо да конфигурираме нещо допълнително тук.

„Най-сложната“ част тук беше конфигурацията на доставчика на Facebook, тъй като трябваше да имаме приложение за Facebook, за да удостоверим данните за вход. Създадохме FB приложение от разработчици на Facebook, което ни предостави идентификатора на приложението и секрета на приложението, поискани от Firebase.

И двата API ID и Secret трябва да бъдат попълнени, когато активирате доставчика на Facebook. Що се отнася до URI за пренасочване на Auth (от прозореца на доставчика), той трябва да бъде поставен под Facebook/Facebook Login/Products section/Valid Auth Redirect URIs.

Нека продължим с конзолата на Firebase. От страницата с изглед на базата данни създадохме база данни в реално време.

В този изглед можем да намерим информация за елементите с данни на приложението и да напишем / прочетем правилата за сигурност. По-долу са правилата, използвани от приложението Portfolio:

{ "rules": { "items": { "$uid": { ".read": "$uid === auth.uid", ".write": "$uid === auth.uid" } } }}

Тази конфигурация на правилото за сигурност ще позволи на само удостоверени потребители да могат да четат и пишат в нашата база данни. Ако искате да научите как да дефинирате по-разширени правила, горещо препоръчвам да разгледате раздела Официална сигурност и правила.

Добре, къде бяхме? След като преминахме през създаването на акаунта в портфейла Firebase , нека видим как е създаден проектът за разработка на Firebase .

Ако вече нямахме създаден проект, бих препоръчал да се започне с инсталиране на firebase CLI, който предоставя разнообразни инструменти за управление и внедряване на проекти на Firebase. НО ние стартирахме портфолиото Angular Project с 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 и 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

Данните за портфолио от крипто монети се осигуряват чрез getItemsList()метод, който връща Наблюдаем BlockItemмасивза които igxGridе абониран компонентът. Само удостоверени потребители могат да използват тази услуга поради това AngularFireList, че манипулираме, е свързано с уникални потребителски идентификатори.

Визуализирайте данните

За визуализацията използваме компоненти на потребителския интерфейс от 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

Contribute a better translation

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.