Introduction

* 1 This time I will talk about the assumption that Node.js is installed, so please install in advance. By the way my environment is here.

※ 2 It is the second dish brewing of other people!

AWS Amplify What is?

• CLI, Framework
• Cognito(Authentication)
• DynamoDB, Firebase(DB)
• CloudFront(CDN)
• S3(Static content)
• AppSync(GraphQL)

Practice

▼ Create new project and launch application

▼ Implementation of login screen

src / app / home / hoge.page.html

- The world is your oyster.

-

If you get lost, the docs will be your guide. / p>

+

+

+

+

+

+

+

+

+

+

Sign In + +

src / app / hoge / hoge.page.ts

export class HomePage {

+ constructor () {} // This time it is unnecessary, but it is a habit

+ postLogin (email, password) {

+ / / I will implement it later

+}

}

By rewriting so far, it becomes as follows.

(The time is too much for the complicated implementation k ... )

Once you stop implementing the application, let's go into amplify!

Introduction of amplify

First of all, we will introduce modules for Angular and Ionic. Installation will be downloaded from npm.

$ npm i - S aws - amplify

$ npm i - S aws - amplify - angular

$ npm i - S ionic - angular

Let's install the CLI next. Since CLI module for amplify is also released to npm here, I think that I would like to use this time (though I think that it is almost all those using amplify).

$ npm i - g @ aws - amplify / cli

# + @ aws-amplify / cli @ 0.1.38

# added 5 packages from 9 contributors, updated 55 packages and moved 1 package in 42.942s

$ amplify -h

█ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ ╗ █ █ █ █ █ █ █ █ █ █ █ █ █ ╗ █ █ █ █ █ ╗

█ ■ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ █ █ █ █ ║ █ ■ █ █ █ □ □ □ □ □ □ □ □ □ □ □ □ □

█ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ╝ █ ■ █ █ ■ █ █ █ █ █ █ ╗ ╚ █ █ █ █ ╔╝ ╔╝

█ ■ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ □ ╝╝ ██║ ██║ █ ╔ ╝ ╝ ╝ ╚ █ █ ╔╝ ╔╝

█ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ██║ ██║ ██║

Staying in a gigantic orifice of a gigantic orifice Bamboo grass

(Hereinafter abbreviated)

The current latest version 0.1.38seems to be.

Once installation is completed, next setting will be around user and environment setting.

$ amplify configure # The AWS management console will open automatically here

Specify the AWS Region

? region: ( Use arrow keys ) ap - southeast - 2 # Because there is no Tokyo region

Specify the username of the new IAM user:

? user name: ( amplify - mxvPk ) amplify - mxvPk # IAM page will open automatically, please create

Enter the access key of the newly created user:

? accessKeyId: ( ) A ********** #

Is actually longer ? secretAccessKey: ( ) C ***************** *** # Actually it is much longer

This would update / create the AWS Profile in your local machine

? Profile Name: ( default ) default # I will use it later

Successfully set up the new user.

It was a bit long, but the setting is completed with this.

Next, we will make initial settings for the project. (I am impressed a bit here)

$ amplify init

Note: It is recommended to run this command from the root of your app directory

Choose your default editor: Visual Studio Code #

Choose what you like ? Choose the type of app that you are building ( Use arrow keys ) javascript # Please select here

Please tell us about your project

? What javascript framework are you using ionic # Of course ionic is one w

? Source Directory Path: src # Please change the directory name if you are changing

? Distribution Directory Path: www

? Build Command: npm run-script build

? Start Command: ionic serve # I'm thankful that this will come out by default!

Using default provider awscloudformation

For more information on AWS Profiles, see:

https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html

Do you want to use an AWS profile? Yes

? Please choose the profile you want to use default # With the profile name you specified earlier.

(... abbreviated)

Your project's initial setup is now complete! Try the following command and see.

$ amplify status

| Category | Resource name | Operation | Provider plugin |

| -------- | ------------- | --------- | --------------- |

Currently I have not launched any applications, so I think that it is like this. Also, when you have completed so far, you should have created the following two automatically.

• .amplifyrc
• amplify /

In addition, if CloudFormationyou look at accessing the AWS management console, I think that one stack has been created. Let's stop the project setting here, let's go to the introduction of cognito next!

▼ Introduction of Cognito

Again we will use amplify-cli. In conclusion, the following processing (creation of cognito user pool) can be done from the AWS management console, but since I have the CLI, I would like to use it as it is.

$ amplify add auth

Using service: Cognito, provided by: awscloudformation

The current configured provider is Amazon Cognito.

Do you want to use the default authentication and security configuration? No, I will set up my own configuration.

Select the authentication / authorization services that you want to use: User Sign-Up, Sign-In, connected with AWS IAM controls ( Please refer to Enables per-user Storage features for images or other content, Analytics, and more )

? name for Your Resource that will be Used to Label This Category in the Project: Cognitoa33e4684 # Please specify any name

? Please Enter a name for . Your Identity Pool Amplifydemoa33e4684_identitypool_a33e4684 # is be the default is better

? Allow unauthenticated logins? ( Provides scoped down permissions that you can control via AWS IAM ) No

Do you want to enable 3rd party authentication providers in your identity pool? No

Please provide a name for your user pool: amplifydemoa33e4684_userpool_a33e4684

? Multifactor authentication ( MFA ) user login options: OFF # 2-step authentication is off

? Email based user registration / forgot password: Enabled ( Requires per-user email entry at registration )

? Please specify an email verification subject: Your verification code #

Please change to your favorite phrase ? Please specify an email verification message: Your verification code is { ####} # Please change to my favorite phrase

? Do you want to override the default password policy for this User Pool? Yes

? Enter The Minimum Password Length For This User Pool: 8 # this time is 8 characters

Select The Password Character Requirements? For Your Userpool: Requires Lowercase, Requires Uppercase, Requires Numbers, Requires Symbols Please refer to the set to # any

? Userpool Users Are With A Standard Created Set . Of Attributes Defined By The OpenID Connect Specification Mark The Required Attributes Below: ( Press To select , To Toggle All, To Invert selection ) # no selection

? Specify The App S Refresh Token Expiration Period ( In Days ) : 30 # Please set any expiration date

? Do You Want To Specify The User Attributes This App Can Read ? And Write Yes # read, write permission

? Specify read attributes: ( Press to select , to toggle all, to invert selection ) Email # This time Email

? Specify write attributes: ( Press to select , to toggle all, to invert selection ) # No selection

Successfully added added cognitoa 33e 4684 locally

This was also long, but the setting is completed with the above! Since setting of cognito resource locally is completed, it is reflected in AWS.

$ amplify push

| Category | Resource name | Operation | Provider plugin |

| -------- | --------------- | --------- | -------------- --- |

| Auth | cognitoa 33e 4684 | Create | awscloudformation |

? Are You Sure You Want To Continue ? Yes # Why continue here? You will be asked

# (Wait a while)

✔ All resources are updated in the cloud

Apparently it seems I was able to push, so let's access the cognito page of the AWS management console. I think that a new user pool has been created. Also, aws-exports.jsI think that a file called src directory has been created.

Introduction of cognito ends here, let's go to the introduction of AppSync which is API next!

▼ Introduction of API Gateway

To the end

reference

• Angular & Ionic
• Amplify Framework
• AWS Amplify
• I tried Amplify in Vue
• Try using AWS Amplify with Angular 7
• When trying to use AWS Amplify with Angular 7 a lot of Can not find name 'Buffer' errors came out