Споры о том, какой JavaScript-фреймворк для фронтенда лучше, всегда сводятся к двум лучшим игрокам на рынке: ReactJS и Angular. Там, где React обеспечивает гибкость с точки зрения организации кода, использования сторонних библиотек по вашему выбору и т. д., Angular предоставляет вам мощность, продуманную организацию и удобные встроенные инструменты, такие как HttpClient, перехватчики HTTP, модульность и многое другое. И из-за всех этих причин и моей любви к организации я предпочитаю Angular. Firebase существует уже несколько лет и, на мой взгляд, является лучшей платформой для создания бессерверных приложений. Он предоставляет вам потрясающие сервисы, такие как социальная аутентификация, база данных в реальном времени, комплект машинного обучения, хранилище файлов, аналитика сбоев и т. д. Сегодня в этом руководстве мы сосредоточимся только на одном из этих сервисов. Хранилище Firebase.

Что мы строим.

Мы создадим приложение Angular со следующими возможностями:

  1. Аутентификация с помощью Google
  2. Загрузка файла в хранилище Firebase.
  3. Отслеживание хода загрузки с помощью индикатора выполнения.
  4. Представление для просмотра всех загруженных файлов с возможностью загрузки.

Это так просто!

Создание приложения 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']);
    });
  }
}

Давайте посмотрим на наш код и попытаемся понять, что происходит.

  1. Сначала мы внедрили в компонент службу Router и службу AngularFireAuth.
  2. Затем в функции входа мы используем метод signInWithPopup() объекта AngularFireAuth.auth, который принимает экземпляр поставщика входа в качестве аргумента.
  3. Этот метод возвращает обещание. При успешном входе мы перенаправляем пользователя на маршрут /files.

Еще один шаг — включить Google в качестве поставщиков аутентификации Firebase. В консоли Firebase перейдите к настройке аутентификации и на вкладке «Метод входа» включите Google в качестве одного из методов. Теперь зайдите в браузер и нажмите кнопку ВОЙТИ В GOOGLE. После успешного входа в систему наше приложение выдаст ошибку, что не может найти маршрут /files. Это потому, что мы еще не настроили его. Мы сделаем это в следующем шаге.

Часть 2 этого руководства будет выпущена в ближайшее время и связана с этой статьей.