Как использовать AWS Amplify и угловой для создания облачных приложений с включенным JavaScript

Автор оригинала: FreeCodeCamp Community Member.

Надер Дабит

AWS усиливается Помогает вам добавить функциональность, такую как хранение, графирование, аутентификацию, аналитику, паб-саб и интернационализацию на ваши приложения JavaScript.

Пока вы можете интегрировать AWS Amplify в любой JavaScript Framework, угловые компоненты недавно были добавлены, что облегчает, чем перед встать и работать с облачными службами в угловом приложении.

В этом посте мы посмотрим, как встать и работать с AWS Amplify в угловом приложении.

Начиная

Установка зависимостей

Чтобы начать, нам нужно в установке пару зависимостей: AWS усиливается и AWS усиливают угловые:

$ npm install --save aws-amplify
$ npm install --save aws-amplify-angular

Создание нового мобильного проекта AWS

Если у вас уже есть проект AWS, вы хотите использовать, вы можете пропустить этот шаг. Если нет, вы узнаете, как мы можем использовать мобильный концентратор AWS, чтобы быстро встать и работать с услугами AWS, такими как Amazon Cognito для аутентификации, Amazon Canpoint для Analytics, AWS Appsync для управляемого GraphQL и Amazon S3 для хранения.

Следующее, что нам нужно сделать, здесь установка AWS Mobile CLI:

npm i -g awsmobile-cli

Далее нам нужно будет настроить мобильный телефон AWS, чтобы использовать ваши предпочтительные учетные данные IAM.

awsmobile configure

Теперь oraws Mobile CLI готов к работе, и мы можем создать новый проект.

Давайте создадим новый проект, имеющий аналитику, хранилище и аутентификацию включен:

awsmobile init

awsmobile user-signin enable
awsmobile user-files enable
awsmobile push

После создания бэкэнда файл конфигурации копируется на /awsmobilejs/# ent-backe

Просмотр вашего проекта в консоли AWS

Теперь, когда вы создали свой проект из CLI, вы можете просмотреть свой проект в AWS Mobile Hub, посетив https://console.aws.amazon.com/mobilehub/home и нажав на имя вашего проекта.

Работа в угловом углу

Чтобы импортировать файл конфигурации в ваше угловое приложение, вам нужно будет переименовать aws_exports.js к aws_exports.ts Отказ

import Amplify from 'aws-amplify'
import awsmobile from './aws-exports'
Amplify.configure(aws_exports)

При работе с базовым AWS-JS-SDK Пакет «узла» должен быть включен в Типы опция компилятора. Убедитесь, что вы редактируете tsconfig.app.json Файл в папке исходного файла, например SRC/TSConfig.app.json Отказ

"compilerOptions": {
  "types" : ["node"]
}

Импорт усиления

В вашем корневой модуль SRC/App/app.module.ts , вы можете импортировать AWS Amplify Modules следующим образом:

import { AmplifyAngularModule, AmplifyService } from 'aws-amplify-angular'

@NgModule({
  ...
  imports: [
    ...
    AmplifyAngularModule
  ],
  ...
  providers: [
    ...
    AmplifyService
  ]
  ...
})

Использование AWS Amplify Service

AmplifyService – это провайдер в вашем угловом приложении, и он обеспечивает AWS усиливать основные категории через инъекцию зависимости.

Использовать AmplifyService с Инъекция зависимости , введите его в конструктор любого компонента или услуги, где угодно в вашем приложении.

import { AmplifyService } from 'aws-amplify-angular';

...
constructor(
    public navCtrl:NavController,
    public amplifyService: AmplifyService,
    public modalCtrl: ModalController
) {
    this.amplifyService = amplifyService;
}
...

Использование AWS Amplify категории

Вы можете получить доступ и работать напрямую с категориями AWS Amplify через встроенный поставщик услуг:

import { Component } from '@angular/core';
import { AmplifyService }  from 'aws-amplify-angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  
  constructor( public amplify:AmplifyService ) {
      
      this.amplifyService = amplify;

      /** now you can access category APIs:
       * this.amplifyService.auth();          // AWS Amplify Auth
       * this.amplifyService.analytics();     // AWS Amplify Analytics
       * this.amplifyService.storage();       // AWS Amplify Storage
       * this.amplifyService.api();           // AWS Amplify API
       * this.amplifyService.cache();         // AWS Amplify Cache
       * this.amplifyService.pubsub();        // AWS Amplify PubSub
     **/
  }
  
}

Пример использования: Подписаться на изменения состояния аутентификации

Импортируйте AmplifyService в свой компонент и прослушать изменения состояния AUTH:

import { AmplifyService }  from 'aws-amplify-angular';

  // ...
constructor( public amplifyService: AmplifyService ) {

    this.amplifyService = amplifyService;

    this.amplifyService.authStateChange$
        .subscribe(authState => {
        this.signedIn = authState.state === 'signedIn';
        if (!authState.user) {
            this.user = null;
        } else {
            this.user = authState.user;
            this.greeting = "Hello " + this.user.username;
        }
        });

}

Просмотр компонентов

AWS Amplify также предоставляет компоненты, которые вы можете использовать в своих шаблонах угловых моментов, включая компонент аутентификатора, компонент Photo Picker и компонент альбома Amazon S3.

Аутентификатор

Компонент Authenticator создает опыт регистрации/регистрации/регистрации для вашего углового приложения. Чтобы использовать аутентификатор, просто добавьте Усиление-аутентификатор Директива в вашем представлении .html:

Pictom Picker.

Компонент Picke Picker представляет собой элемент управления загрузкой файлов, который позволит выбрать локальное изображение и загрузить его на Amazon S3. После того, как изображение выбрано, предварительный просмотр кодированного кодированного изображения Base64 будет отображаться автоматически.

Чтобы сделать сборник фото в угловом представлении, используйте Усиление - Photo-picker компонент:

Компонент выделяет два события:

(выбрано) – испускается, когда изображение выбрано. Событие будет содержать Файл объект, который можно использовать для загрузки.
(загружен) – испускается, когда предварительный просмотр изображений был отображен и отображен.

Загрузка изображения

Использовать OnIMagePicked (событие) Чтобы загрузить фотографию на Amazon S3, используя AWS Amplify Категория хранения:

onImagePicked( file ) {

    let key = `pics/${file.name}`;
    
    this.amplify.storage().put( key, file, {
      'level': 'private',
      'contentType': file.type
    })
    .then (result => console.log('uploaded: ', result))
    .catch(err => console.log('upload error: ', err));
  
}

S3 альбом

Компонент Amazon S3 Azmum отображает список изображений из подключенного ведра S3.

Чтобы сделать альбом, используйте Усилитель-S3-альбом Компонент в вашем угловом представлении:

(выбрано) Событие может быть использовано для получения URL-адреса нажатого изображения в списке:

onAlbumImageSelected( event ) {
      window.open( event, '_blank' );
}

Таможенные стили

Вы можете использовать пользовательский стиль для компонентов AWS Amplify. Просто импортируйте свой пользовательский styles.csss Это переопределяет стили по умолчанию, которые можно найти в /node_modules/aws-amplify-angular/theme.css Отказ

Вывод

AWS Amplify – это открытый источник и активно разрабатывается, и мы будем любить любые отзывы и/или проблемы от клиентов или пользователей, чтобы помочь нам в нашей будущей дорожной карте.

Не стесняйтесь проверить документы здесь или репо GitHub здесь Отказ

Меня зовут Надер Дабит Отказ Я защитчик разработчика в AWS Mobile Работа с проектами, такими как AWS Appsync и AWS усиливается и основатель РЕАКТИВНОЕ ОБУЧЕНИЕ ОБУЧЕНИЯ Отказ