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

1656631210 kak ispolzovat aws amplify i angular dlya sozdaniya oblachnyh prilozhenij

Автор: Надер Дабит

LFxCKjKFsNYnMTtXIt2YLtRIglclpDLQMFXa

AWS Amplify помогает добавлять такие функции, как хранение, GraphQL, аутентификация, аналитика, pub-sub и интернационализация в приложения JavaScript.

Хотя вы можете интегрировать AWS Amplify в любой Недавно добавлен фреймворк JavaScript, компоненты Angular, что облегчает, чем раньше, отладку и работу с облачными службами в программе Angular.

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

Начинаем

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

Чтобы начать, нам нужно установить несколько зависимостей: AWS Amplify и AWS Amplify Angular:

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

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

Если у вас уже есть проект AWS, который вы хотите использовать, вы можете пропустить этот шаг. Если нет, вы узнаете, как мы можем использовать AWS Mobile Hub, чтобы быстро начать работу с такими службами AWS, как Amazon Cognito для проверки подлинности, Amazon Pinpoint для аналитики, AWS AppSync для управляемого GraphQL и Amazon S3 для хранения.

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

npm i -g awsmobile-cli

Далее нам нужно будет настроить AWS Mobile CLI для использования желаемых аккаунтов IAM.

Если вы новичок в AWS и хотите увидеть, как это настроить в первый раз, просмотрите это видео.

awsmobile configure

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

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

awsmobile init

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

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

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

Теперь, когда вы создали свой проект с помощью CLI, вы можете просмотреть его в AWS Mobile hub, посетив и щелкнув название своего проекта.

Работа в Angular

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

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

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

При работе с базовым aws-js-sdkдолжен быть включен пакет «node». виды опция компилятора Убедитесь, что вы редактируете tsconfig.app.json файл в папке исходного файла, например src/tsconfig.app.json.

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

Импорт Amplify

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

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

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

Поставщик услуг не обязателен. Вы можете импортировать основные категории, как правило, т.е. import { Analytics } from 'aws-amplify' или создайте собственного провайдера. Поставщик услуг выполняет определенную работу за вас и дает категории как методы. Поставщик также управляет и передает изменения состояния аутентификации с помощью наблюдаемых, на которые вы можете подписаться в своих компонентах (см. ниже).

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

AmplifyService является поставщиком в приложении Angular и предоставляет основные категории AWS Amplify через внедрение зависимостей.

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

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

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

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

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

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

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 также предоставляет компоненты, которые можно использовать в своих шаблонах просмотра Angular, включая компонент аутентификатора, компонент выбора фотографий и компонент альбома Amazon S3.

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

Компонент Authenticator создает стандартный опыт подписания/регистрации для программы Angular. Чтобы использовать Authenticator, просто добавьте amplify-authenticator директива в вашем просмотре .html:

<amplify-authenticator></amplify-authenticator>

Выбор фотографий

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

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

<amplify-photo-picker 
    (picked)="onImagePicked($event)"
    (loaded)="onImageLoaded($event)">
</amplify-photo-picker>

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

  • (picked) — Излучается, когда выбрано изображение. Событие будет содержать File объект, который можно использовать для скачивания.
  • (loaded) — При воспроизведении и отображении предварительного просмотра изображения.

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

Используйте onImagePicked(event) чтобы скачать свою фотографию на Amazon S3 с помощью категории AWS Amplify Storage:

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 Album отображает список изображений из подключенного сегмента S3.

Для воспроизведения альбома используйте amplify-s3-album компонент в вашем просмотре Angular:

<amplify-s3-album
  path="pics" (selected)="onAlbumImageSelected($event)"
>
</amplify-s3-album>

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

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

Специальные стили

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

Вывод

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

Не стесняйтесь ознакомиться с документацией здесь или хранилищем GitHub здесь.

Меня зовут Надер Дабит. Я защитник разработчиков в AWS Mobile, работающий с такими проектами, как AWS AppSync и AWS Amplify, а также основатель React Native Training.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *