---
# System prepended metadata

title: '[AWS] 使用 Amplify CLI 建立全端應用程式'
tags: [AWS]

---

# [AWS] 使用 Amplify CLI 建立全端應用程式

###### tags: `AWS`

[TOC]

---
:::warning
Amplify 是給前端用的 CLI 工具
可以建立 RESTful API, Auth 和 GraphQL
:::

## 給前端用的 AWS 工具
- Amplify
建立 API, Auth
適合靜態的前端環境 (例如部落格)
- AppSync
全託管的 WebQL
可以即時更新，彈性自動擴展或減縮
- AWS Device Farm 

---

## Amplify 三階段
### Develop
- 使用 CLI 或 Admin UI 設定後端
- 支援網頁前端三大框架、IOS、Android、Flutter

### Deploy
- 自動部署
![](https://i.imgur.com/ae5jXBY.png)

### Deliver

---

## Amplify CLI 指令
:::warning
$ amplify init
$ amplify push
$ amplify status
$ amplify delete
$ amplify add <category>
:::

## Amplify Client 端工具
`$ npm i aws-amplify`

```jsx
//登入驗證
import { Auth } from 'aws-amplify'

Auth.signIn('myusername', 'mypassword')
Auth.currentAuthenticatedUser()
Auth.signOut()
```

---

## 結合其他服務來使用 Amplify

![](https://i.imgur.com/VAG3LyE.png)

### :star:建立新的 RESTful API
:::info
Lambda
API Gateway
:::
#### 初始化
```
$ amplify add api
# 選擇 REST 選項
```

- 新增 Path : `/todo` (使用 Lambda)
- 選擇語言：NodeJS
- 可以結合 DynamoDB 來部署

#### 撰寫 API 程式
`amplify/backend/function/<FUNCTION_NAME>/src/app.js`

```javascript
app.get('/items', function (req, res) {
 // new code goes here
})
```

#### 部署
部署新的 API (API Gateway)
```
$ amplify push
```

#### 前端互動
```javascript
import { API } from 'aws-amplify'

API.get('/items')
  .then(data => console,log({ data }))
  .catch(err => console.log({ err }))
```

---

### :star:建立登入驗證
:::info
Cognito
:::
`$ amplify add auth`

```jsx
import { Auth } from 'aws-amplify'

Auth.signUp('username', 'password', {
attributes: { email: 'jane@doe.com' }
})

Auth.signIn('myusername', 'mypassword')
Auth.currentAuthenticatedUser()
Auth.signOut()
```

---

### :star:用 GraphQL 建立 API
:::info
AppSync
DynamoDB
:::
#### 初始化
```
$ amplify add api
# 選擇 GraphQL
```

#### 定義 Schema
```graphql
type TODO @model {
id:ID!
name: String
description: String
completed: Boolean
}
```

#### 部署
```
$ amplify push
```

#### 前端互動
部署完成後，就可以在 Client 端進行互動
```javascript
import { API, GraphqlOperation } from 'aws-amplify'
import { listTodos } from './src/graphql/queries'

API.graphql(graphqlOperation(listTodos))
.then(data => console.log(data))
.catch(err => console.log({ err}))
```

---

### :star:新增 Analytics

Pinpoint - 彈性可擴展的行銷通訊服務
- 適用於訊息、行銷活動
- 追蹤使用者行為
- 發送簡訊、電子郵件時 -> 收集點擊、觀看的資訊
```
$ amplify add analytics
$ amplify push
```

Client 端
```javascript
import { Analytics } from ''

Analytics.record({ name: 'albumVisit' })

Analytics.record({
name: 'albumvisit',
attributes: { genre: 'nu-metal', artist: 'RATM' }
})
```

---

## CI/CD
支援：git branch 來切分環境


## 範例：建立 React App
- 官方教程
https://aws.amazon.com/tw/getting-started/hands-on/build-react-app-amplify-graphql/


## Reference
AWS QuickStart - 前端入門系列 React 程式快速上雲 https://hktw-resources.awscloud.com/aws-quickstart-introduction-to-aws-amplify/aws-quickstart-introduction-to-aws-amplify-video