Print
Category: Technology
Hits: 2582

What is AWS Amplify?
It is an open source JavaScript library provided by Amazon Web Services (AWS) which helps developers to build applications using cloud services on web or mobile platforms

When can we consider Amplify?
When you don't want to build your backend (classical DB design) and other components (service layers) from scratch then Amplify is for you !

Where the model schemas and data stored in Amplify?
All data resources are deployed in your account. When you deploy a change to your data model, Amplify will create or update an AWS AppSync endpoint and Amazon DynamoDB tables to incorporate the new changes.

How Amplify deployment internally managed?
An Amplify deployment is powered by AWS CloudFormation, an infrastructure-as-code service to help you manage, version, and scale your backend

How to setup Amplify CLI in Windows platform?


Step 1: In windows, use "npm install -g @aws-amplify/cli aws-amplify/datastore (if required install it in local project )
           In Max/Linux use "curl -sL https://aws-amplify.github.io/amplify-cli/install | bash && $SHELL"
           Reference: https://docs.amplify.aws/start/getting-started/installation/q/integration/react#option-2-follow-the-instructions


Step 2: For fresh setup

           $ amplify configure

           It asks to login AWS console and then create IAM user to allow access amplify related services

           For already amplify configured project

           $ amplify init

           $ amplify add codegen --apiId <<appID from Amplify admin console>>

           This option is particularly useful for existing projects where Amplify is already configured and you want to automatically generate  GraphQL documents (queries, mutations, and subscriptions) and generate types for your JavaScript, TypeScript, or Flow application

Step 3: Create IAM user with 1) Programmatic Access (with access key ID & secret access key) & 2) Administrator Access policy

Note: Download the IAM credential file/ store the secret access key

Step 4: In react JS application

           4.1) In index.js, add following import and configure statements
                  import Amplify from "aws-amplify";
                  import awsExports from "./aws-exports";
                  Amplify.configure(awsExports);


           4.2) In App.js, add following import
                  import { DataStore } from '@aws-amplify/datastore';
                  import { Post } from './models';
                  import { Authors } from './models';

           4.3) Can use below snippet of JS to save new record

                  await DataStore.save(
                    new Authors({
                                  "first_name": "Raja",
                                  "last_name": "C.M"
                                    })
                     );

 

Show me a complete ReactJS component which creates and display a Amplify model?

import React, { Component } from "react";
import { DataStore } from '@aws-amplify/datastore';
import { Authors } from './models';


class App extends Component {

state = {
authors: []
}

GetAuthor = async () => {
var authors = await DataStore.query(Authors);
this.setState({ authors: authors });
}


AddAuthor = async (name) => {
await DataStore.save(
new Authors({
"first_name": "Prajith",
"last_name": "M.R"
})
);
}

render() {

let AuthorTable =
(
<div>
<table>
<th>
<td> First Name </td> <td> Last Names </td>
</th>
{this.state.authors.map((e, key) => {
return (
<tr>
<td> {e.first_name} </td>
<td> {e.last_name} </td>
</tr>
)
})}
</table>
</div>
)

return (
<div>
<h1> Amplify World ! </h1>
<div id="amplifyHome">
<button onClick={() => this.AddAuthor('raja')}>Add Author</button>
<button onClick={() => this.GetAuthor()}>Get Author</button>
</div>
{AuthorTable}
</div>
)
}
}
export default App;