Споры о том, какой JavaScript-фреймворк для фронтенда лучше, всегда сводятся к двум лучшим игрокам на рынке: ReactJS и Angular. Там, где React обеспечивает гибкость с точки зрения организации кода, использования сторонних библиотек по вашему выбору и т. д., Angular предоставляет вам мощность, продуманную организацию и удобные встроенные инструменты, такие как HttpClient, перехватчики HTTP, модульность и многое другое. И из-за всех этих причин и моей любви к организации я предпочитаю Angular. Firebase существует уже несколько лет и, на мой взгляд, является лучшей платформой для создания бессерверных приложений. Он предоставляет вам потрясающие сервисы, такие как социальная аутентификация, база данных в реальном времени, комплект машинного обучения, хранилище файлов, аналитика сбоев и т. д. Сегодня в этом руководстве мы сосредоточимся только на одном из этих сервисов. Хранилище Firebase.
Что мы строим.
Мы создадим приложение Angular со следующими возможностями:
- Аутентификация с помощью Google
- Загрузка файла в хранилище Firebase.
- Отслеживание хода загрузки с помощью индикатора выполнения.
- Представление для просмотра всех загруженных файлов с возможностью загрузки.
Это так просто!
Создание приложения Firebase.
Если вы не живете под камнем последние 20 лет, у вас есть учетная запись Google. Это все, что вам нужно для создания приложения Firebase. Перейдите в консоль Firebase, нажав здесь. После открытия консоли нажмите Добавить проект.
После этого откроется диалоговое окно проекта. Дайте вашему проекту дерзкое имя, примите положения и условия, нажмите «Создать проект» и вуаля! Ваш первый проект Firebase будет создан через несколько минут. После того, как ваш проект будет создан, вы будете перенаправлены на целевую страницу консоли вашего проекта. Нажмите на значок `‹/ ›`, чтобы получить веб-конфигурации вашего проекта.
Откроется диалоговое окно с конфигурацией для вашего проекта Firebase. Нам это понадобится позже в нашем угловом проекте.
Разработка фронтенда.
Шаг 1: Создайте приложение Angular
Вам необходимо установить nodejs и npm в вашей системе, чтобы иметь возможность создать приложение Angular. Посетите эту ссылку для помощи. Затем вам нужно установить Angular CLI (интерфейс командной строки), который является удобным инструментом для создания и управления угловым приложением.
npm install --global @angular/cli
После завершения установки CLI вы можете создать приложение Angular, выполнив следующую команду в терминале.
ng new angular-firebase
После того, как все файлы для проектов созданы, вы должны указать терминалу каталог вашего проекта.
cd angular-firebase
Откройте свой проект в вашем любимом редакторе кода (I LOVE VS CODE), и вы увидите следующую структуру каталогов.
Давайте пройдемся по каждому каталогу один за другим.
- node_modules: здесь установлены все зависимости для вашего проекта.
- e2e: не беспокойтесь об этом. Эта папка содержит файлы для сквозного тестирования продукта.
- src: Здесь хранятся исходные файлы ваших проектов.
- src/app: здесь вы будете работать большую часть времени во время разработки. Эта папка содержит все компоненты и модули вашего проекта.
Теперь давайте приступим к фактической разработке.
Шаг 2. Добавьте Firebase в свое приложение.
создайте папку конфигурации в каталоге src/app и в этой папке создайте файл с именем firebase.ts. Помните, что ts здесь означает Typescript, который является не чем иным, как оболочкой для старого доброго javascript. В этот вновь созданный файл вставьте конфигурацию Firebase, которую вы видели при создании приложения Firebase. Также экспортируйте этот объект конфигурации.
Всегда помните: эта конфигурация является конфиденциальной информацией. Не забудьте добавить этот файл в свой файл .gitignore при отправке на Github.
export const config = { apiKey: "XXXXXXXXXXXXXXXXXXXX6k3MPQjA", authDomain: "XXXXXXXXXXXXXX.firebaseapp.com", databaseURL: "https://XXXXXXXXXXXX.firebaseio.com", projectId: "angular-XXXXXXXXX", storageBucket: "XXXXXXXXXXXX.appspot.com", messagingSenderId: "1XXXXXXXXXX" };
Теперь нам нужно установить firebase в наше приложение. Для этого вебу нужны зависимости, firebase и @angular/fire. Установите их с помощью npm.
npm install --save firebase @angular/fire
Теперь перейдите к файлу app.module.ts, который находится в вашей папке src/app. Эти файлы содержат все компоненты и модули/библиотеки, необходимые для вашего проекта. Вам нужно импортировать три модуля в этот файл. AngularFireModule, AngularFireAuthModule и AngularFireStorageModule. Мы инициализируем AngularFireModule с нашей конфигурацией firebase. Ваш файл app.module.ts должен выглядеть так.
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AngularFireModule } from '@angular/fire' import { AngularFireAuthModule, AngularFireAuth } from '@angular/fire/auth'; import { AngularFireStorageModule, AngularFireStorage } from '@angular/fire/storage'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { LoginComponent } from './login/login.component'; import { config } from './configuration/firebase'; @NgModule({ declarations: [ AppComponent, LoginComponent ], imports: [ BrowserModule, AppRoutingModule, AngularFireModule.initializeApp(config), AngularFireAuthModule, AngularFireStorageModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Настройка завершена, идем дальше. Запустите ваше приложение с помощью команды
ng serve
через несколько секунд сервер разработки будет обслуживать ваше приложение на локальном хосте: 4200. посетите это в браузере, и ваше приложение будет выглядеть так.
Давайте посмотрим, откуда это. откройте app.component.html в папке src/app. Там вы найдете html-код страницы, которую вы видели. Не будь жестоким и удали все это. Ваше приложение обновится, и вы увидите пустую страницу. Добавьте в этот файл следующие строки.
<div id="header"><div id="logo"> Angular Firebase </div><div id="links"><a routerLink='/files' class="link">Files</a><a routerLink='/add' class="link">Add Files</a></div> </div> <router-outlet></router-outlet>
Зайдите в свой браузер только для того, чтобы найти уродливый беспорядок. Давайте украсим это. добавьте следующие стили в файл css app.component.css
#header{ display: flex; justify-content: space-between; align-items: center; padding: 20px; } #header #logo{ font-size: 25px; font-weight: 500; } .link{ color: #000; text-decoration: none; margin-left: 20px; }
На последнем шаге. добавьте следующий файл styles.css, чтобы добавить глобальные стили.
/* You can add global styles to this file, and also import other style files */ @import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700'); *{ padding: 0; margin: 0; font-family: 'Montserrat', sans-serif; } body { background-color: aquamarine; }
Теперь у нас есть нечто похожее на сайт.
Шаг 3: Добавьте страницу входа.
Создайте компонент входа. Откройте новый терминал, указывающий на каталог вашего проекта, и выполните следующую команду.
ng generate component login
Мы покажем этот компонент входа в систему на нашем корневом URL-адресе. Для этого добавьте маршрут в файл app-routing.module.ts
import { LoginComponent } from './login/login.component'; const routes: Routes = [{ path: '', component: LoginComponent }];
Нам нужно добавить прослушиватель аутентификации в наше приложение, которое будет прослушивать изменения в состоянии аутентификации и перенаправлять пользователей на страницу входа, когда они выходят из системы, и /files, когда пользователь входит в систему. Мы добавим этот прослушиватель аутентификации в наш корневой компонент, который объявляется классом AppComponent в файле app.component.ts.
import { AngularFireAuth } from '@angular/fire/auth'; import { Router } from '@angular/router'; export class AppComponent { constructor( // # Inject AngularFireAuth service and Router service private auth: AngularFireAuth, private router: Router ){ this.auth.auth.onAuthStateChanged((user) => { if(user){ // # if user is logged inthis.router.navigate(['/files']); } else { // # if user is not logged inthis.router.navigate(['']); } }) } }
Давайте создадим кнопку входа в наш компонент входа. Эта кнопка вызовет функцию, которая вызовет функцию login() иоткроет всплывающее окно входа в систему Google. Добавьте этот login.component.html
<div id="login-container"><button id="login-button" (click)='login()'>LOGIN WITH GOOGLE</button> </div>
Добавьте несколько стилей в login.component.css.
#login-container{ display: flex; justify-content: center; align-items: center; height: 100vh; } #login-container #login-button{ padding: 10px 30px; font-size: 20px; background: white; border: none; border-radius: 5px; box-shadow: 0px 0px 20px 0px #ccc; cursor: pointer; }
В классе LoginComponent мы внедрим сервис AngularFireAuth. Мы также присоединим к этому классу функцию login(), которая откроет всплывающее окно входа в систему.
import { Component, OnInit } from '@angular/core'; import { AngularFireAuth } from '@angular/fire/auth'; import { auth } from 'firebase/app'; import { Router } from '@angular/router'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit { constructor( private authService: AngularFireAuth, private router: Router ) { } ngOnInit() { } login(){ this.authService.auth.signInWithPopup(new auth.GoogleAuthProvider()).then((user) => { this.router.navigate(['/files']); }); } }
Давайте посмотрим на наш код и попытаемся понять, что происходит.
- Сначала мы внедрили в компонент службу Router и службу AngularFireAuth.
- Затем в функции входа мы используем метод signInWithPopup() объекта AngularFireAuth.auth, который принимает экземпляр поставщика входа в качестве аргумента.
- Этот метод возвращает обещание. При успешном входе мы перенаправляем пользователя на маршрут /files.
Еще один шаг — включить Google в качестве поставщиков аутентификации Firebase. В консоли Firebase перейдите к настройке аутентификации и на вкладке «Метод входа» включите Google в качестве одного из методов. Теперь зайдите в браузер и нажмите кнопку ВОЙТИ В GOOGLE. После успешного входа в систему наше приложение выдаст ошибку, что не может найти маршрут /files. Это потому, что мы еще не настроили его. Мы сделаем это в следующем шаге.
Часть 2 этого руководства будет выпущена в ближайшее время и связана с этой статьей.