AWS Amplify memungkinkan pengembang untuk membuat dan terhubung dengan cepat ke layanan canggih di cloud. Dalam tutorial sebelumnya, anda belajar cara mengatur Amplify dalam proyek React dan bagaimana menggunakan otentikasi, penyimpanan S3, dan hosting. Jika anda membutuhkan pengantar untuk AWS Amplify, pastikan untuk memeriksa tulisan tersebut terlebih dahulu.

Dalam tulisan ini, kita akan melangkah lebih jauh dengan React dan AWS Amplify, mengeksplorasi fitur seperti mengelola data layer GraphQL dan fungsi lambda.

Menambahkan GraphQL API

Mari kita lihat cara menambahkan API GraphQL AWS AppSync ke dalam proyek dan mulai menggunakannya dari dalam proyek kami.

API yang akan kita buat akan menjadi restoran API bagi kita untuk mengikuti restoran yang kita suka atau ingin kunjungi.

Untuk menambahkan GraphQL API ke proyek, kami dapat menggunakan perintah berikut:

amplify add api

Anda akan diminta untuk menjawab beberapa pertanyaan konfigurasi. Pilih opsi berikut:

• service type / jenis layanan: GraphQL
• API name / nama API: TutsGraphQLAPI
• authorization type / Jenis otorisasi: API key
• annotated GraphQL schema / skema GraphQL beranotasi: N
• guided schema creation / panduan pembuatan skema: Y
• What best describes your project? / Apa yang paling menggambarkan proyek anda? Objek tunggal dengan bidang (misalkan. "Todo" dengan ID, nama, deskripsi)
• Do you want to edit the schema now? / Apakah anda ingin mengedit schema sekarang? Y

Bila diminta, perbarui skema berikut, dan kemudian simpan berkas:

// located at amplify-web-app/amplify/backend/api/TutsGraphQLAPI/schema.graphql

type Restaurant @model {
  id: ID!
  name: String!
  description: String
}

Ini hanya menciptakan satu tipe data — Restaurant — dengan kolom id dan nama yang diperlukan serta deskripsi yang opsional.

Selanjutnya, mari dorong pembaruan ke akun kami:

amplify push

Sekarang, API telah dibuat!

Apa yang baru saja terjadi di sini? AWS Amplify menggunakan library GraphQL Transform bawaan untuk membuat API GraphQL secara lengkap, termasuk tambahan skema, resolver, dan data source.

Untuk melihat API AppSync AWS baru setiap saat setelah pembuatannya, anda dapat membuka dasborboard di https://console.aws.amazon.com/appsync dan klik pada API yang baru saja dibuat (pastikan bahwa wilayah (region) anda adalah diatur dengan benar). Dari dalam dasborard AWS AppSync, anda dapat melihat konfigurasi API dan melakukan query dan mutasi di API.

Menjalankan Mutasi GraphQL

Selanjutnya, mari kita berinteraksi dengan API dari Aplikasi React kami.

Hal pertama yang kami ingin lakukan adalah membuat mutasi. Dalam GraphQL, mutasi setara dengan operasi REST PUT, PUSH, dan DELETE. Karena kami belum memiliki data apa pun pada basis data, kami akan membuat mutasi untuk membuat item restoran baru.

Untuk melakukannya, kami akan mengimpor API dan graphqlOperation dari AWS Amplify, mendefinisikan mutasi, dan kemudian mengeksekusi mutasi.

Mari kita lihat contoh aplikasi yang mengimplementasikan suatu mutasi. Pada App.js, pertama-tama kita mengimpor React, CSS aplikasi kami, dan komponen AWS Amplify yang diperlukan.

import React, { Component } from 'react';
import './App.css';

import { withAuthenticator } from 'aws-amplify-react'
import { API, graphqlOperation } from 'aws-amplify'

Selanjutnya, kami mendefinisikan mutasi untuk membuat restoran. Kami menetapkan bahwa mutasi menerima nama dan deskripsi dan diberi nama createRestaurant. Mutasi ini didefinisikan secara otomatis ketika kami membuat skema Restaurant di atas. Perhatikan bahwa mutasi ditentukan dalam GraphQL — bahasa query khusus domain.

const CreateRestaurant = `
  mutation($name: String!, $description: String) {
    createRestaurant(input: {
      name: $name
      description: $description
    }) {
      id name description
    }
  }
`

Sekarang, kami membuat komponen aplikasi kami.

class App extends Component {
  //create initial state
  state = {name: '', description: ''}
 
  //update state when user types into inputs
  onChange = e => {
    this.setState({ [e.target.name]: e.target.value })
  }
 
  //define function to execute mutation
  //render the component
}

Selanjutnya, masih dalam komponen App, kami mendefinisikan fungsi untuk melakukan mutasi. Ini mengeksekusi mutasi dengan memanggil API.graphql, meneruskan mutasi dan data.

  //define function to execute mutation
  createRestaurant = async() => {
    if (this.state.name === '' || this.state.description === '') return
    try {
      const restaurant = { name: this.state.name, description: this.state.description }
      await API.graphql(graphqlOperation(CreateRestaurant, restaurant))
      this.setState({ name: '', description: '' })
      console.log('restaurant successfully created!')
    } catch (err) {
      console.log('error creating restaurant...')
    }
  }

Kemudian kami membuat komponen, menghubungkan perubahan handler dan fungsi mutasi kami.

  //render the component
  render() {
    return (
      <div className="App">
        <input value={this.state.name} onChange={this.onChange} name='name' />
        <input value={this.state.description} onChange={this.onChange} name='description' />
        <button onClick={this.createRestaurant}>Create Restaurant</button>
      </div>
    )
  }

Terakhir, kami ekspor komponen App, dengan otentikasi.

export default withAuthenticator(App, { includeGreetings: true });

Anda harus dapat menjalankan kode ini dan mulai membuat item restoran baru pada API.

Untuk melihat source data yang aktual untuk melihat apakah data berada di sana, buka AWS AppSync dasboard, pilih API anda, klik Data Source dimenu sebelah kiri, lalu klik Resource Name. Ini akan membuka tabel Amazon DynamoDB. Di tabel, anda dapat melihat data pada tab Items.

Menjalankan query GraphQL

Selanjutnya, mari kita lihat cara menanyakan data dari API. Kami akan menerapkan ini dalam tiga langkah:

1. Menentukan query
2. Menjalankan query ketika app dimuat
3. Simpan hasil dari query pada state dan render di UI

Pertama, mari kita mendefinisikan query dalam komponen baru. Sekali lagi, kami menggunakan bahasa GraphQL untuk menentukan query. Kami menggunakan permintaan listRestaurants yang secara otomatis ditentukan ketika kami melakukan proses push skema Restaurants. Potongan kode di bawah ini menetapkan bahwa kami mengharapkan daftar item, masing-masing dengan id, nama, dan deskripsi.

const ListRestaurants = `
  query {
    listRestaurants {
      items {
        id name description
      }
    }
  }

Selanjutnya, kita perlu menambahkan beberapa state awal tambahan untuk menahan array dari restoran yang dikembalikan dari server.

state = { name: '', description: '', restaurants: [] }

Kita juga perlu menambahkan event lifecycle componentDidMount untuk melakukan query data dari server GraphQL. Metode async ini akan memperbarui status komponen ketika daftar restoran dikembalikan dari server.

async componentDidMount() {
  try {
    const restaurants = await API.graphql(graphqlOperation(ListRestaurants))
    console.log('restaurants: ', restaurants)
    this.setState({ restaurants: restaurants.data.listRestaurants.items })
  } catch (err) {
    console.log('error fetching data: ', err)
  }
}

Terakhir, kita akan membuat komponen yang memetakan array dari restaurants dari state komponen menjadi HTML.

{
  this.state.restaurants.map((r, i) => (
    <div key={i}>
      <p>{r.name}</p>
      <p>{r.description}</p>
    </div>
  ))
}

Sekarang, ketika kita menjalankan aplikasi, kita akan melihat bahwa data dari API sedang ditampilkan dalam daftar di layar. Namun, aplikasi tidak akan menampilkan perubahan apa pun saat data diperbarui — misalnya, saat anda menambahkan restoran baru.

Jadi untuk permulaan, mari kita perbarui method createRestaurant untuk memberikan optimistic response terhadap UI. Saat ini, ketika kami membuat item baru, basis data akan diperbarui, tetapi UI belum tahu tentang item baru. Untuk memperbaikinya, kami akan memperbarui array dalam method createRestaurant dengan menambahkan item baru ke array:

createRestaurant = async() => {
  if (this.state.name === '' || this.state.description === '') return
  try {
    const restaurant = { name: this.state.name, description: this.state.description }
    const restaurants = [...this.state.restaurants, restaurant]
    this.setState({ name: '', description: '', restaurants })
    await API.graphql(graphqlOperation(CreateRestaurant, restaurant))
    console.log('restaurant successfully created!')
  } catch (err) {
    console.log('error creating restaurant...')
  }
}

Real-Time Data Subscription

Selanjutnya, kami ingin bekerja dengan data secara real-time. Di GraphQL, subscription memungkinkan anda untuk mendengarkan data secara real time. Ketika data baru tersedia, subscription dijalankan, dan data baru diwariskan melalui subscription. Terserah kepada kami di sisi klien untuk menangani data baru ini.

Di aplikasi, kami akan melakukan subscription ke array dari restoran, dan kami akan membuat subscription onCreateRestaurant yang akan diaktifkan setiap kali restoran baru dibuat. Selanjutnya, kami akan mengambil item baru dari subscription, memperbarui array yang ada, dan memanggil setState untuk merender kembali UI dengan data yang baru.

Sama seperti untuk mutasi dan pertanyaan, kita mulai dengan mendefinisikan subscription dalam bahasa khusus domain GraphQL.

// define the subscription
const OnCreateRestaurant = `
  subscription {
    onCreateRestaurant {
      id name description
    }
  }
`

Subscription akan dibuat dalam method lifecycle componentDidMount baik sebelum atau sesudah permintaan GraphQL yang sudah kami siapkan:

async componentDidMount() {
  try {
    const restaurants = await API.graphql(graphqlOperation(ListRestaurants))
    console.log('restaurants: ', restaurants)
    this.setState({ restaurants: restaurants.data.listRestaurants.items })
  } catch (err) {
    console.log('error fetching data: ', err)
  }
  API.graphql(graphqlOperation(OnCreateRestaurant))
    .subscribe({
      next: eventData => {
        const data = eventData.value.data.onCreateRestaurant
        console.log('data: ', data)
        const restaurants = [
          ...this.state.restaurants.filter(r => r.name !== data.name && r.description !== data.description),
          data
        ]
        this.setState({ restaurants })
      }
    })
  }

Sekarang, jika anda membuka dua jendela browser, anda harus dapat membuat mutasi dalam satu layar dan melihat pembaruan terjadi disemua layar lainnya.

Jika Anda melihat method .filter yang kami gunakan dalam membuat array restoran baru dalam subscription, anda dapat melihat kami memeriksa untuk melihat apakah ada duplikat yang berisi nama dan deskripsi yang sama. Mungkin cara yang lebih baik untuk melakukan ini dalam tahap production adalah dengan membuat ID klien unik yang juga disimpan dalam basis data dan filter berdasarkan identifier tersebut.

Menciptakan sebuah REST API dengan AWS Lambda

GraphQL adalah teknologi canggih yang luar biasa, tetapi terkadang proyek kami mengharuskan kami membuat API REST secara tradisional. Dengan AWS Lambda dan Amplify, juga dapat dengan mudah untuk membuat REST API tanpa server menggunakan CLI.

Ketika kita menciptakan GraphQL API, kami menggunakan perintah amplify create api. Perintah ini memberikan kita pilihan untuk membuat GraphQL API atau sebuah REST API. REST API dapat dikonfigurasi untuk menggunakan fungsi Express serverless secara mandiri atau fungsi JavaScript tanpa server yang sudah dikonfigurasi sebelumnya untuk bekerja dengan operasi CRUD Amazon DynamoDB.

Pilihan yang akan kita gunakan untuk API ini adalah fungsi Express tanpa server (serverless).

Mari lanjutkan dan tambahkan fitur baru:

amplify add api

Seperti biasa, ini akan meminta anda untuk mengisi beberapa rincian konfigurasi. Menyediakan pilihan berikut:

• Tipe service: REST
• Masukkan nama resource yang akan digunakan dalam proyek: misalnya. amplifyrestapi
• masukkan path untuk REST endpoint: misalnya. /people
• Lambda source: Create a new Lambda function
• Nama fungsi AWS Lambda: amplifyrestapifunction
  
• fungsi template: Serverless express function (Integration with Amazon API Gateway)
• mengedit fungsi lokal lambda sekarang? Y

Sekarang, anda akan dapat mengedit fungsi lambda secara lokal. Dalam file, kami akan mengganti method app.get ('/ people') yang ada dengan method berikut:

// amplify-web-app/amplify/backend/function/amplifyrestapi/src/app.js

app.get('/people', function(req, res) {
  const people = [
    { name: "Nader" }, { name: "Amanda" }, { name: "Chris" }, { name: "" }
  ]
  res.json({
    success: true,
    people
  })
});

Ini hanya mengembalikan daftar nama yang konstan untuk keperluan demo. Simpan file ini, dan lanjutkan dengan jawaban berikut:

• batasi akses API? Yes
• Siapa yang harus memiliki akses? Hanya pengguna yang dikonfirmasikan / Authenticated users only
  
• Jenis akses apa yang anda inginkan untuk pengguna yang terotentikasi? read
  
• menambahkan path lain? N
  

Ini telah membuat fungsi Lambda baru secara lokal yang akan dapat kami perbarui dan melakukan proses push ke akun kami sesuai kebutuhan. Kode untuk fungsi lambda ini terletak pada amplify/backend/function/amplifyrestapi/src.

Sekarang, mari lakukan push pembaruan ke akun kami:

amplify push

Melakukan Query API REST dari Klien

Sekarang, fungsi Lambda kami sudah aktif dan berjalan, dan kami dapat mulai berinteraksi dengannya!

Pertama, mari lakukan quesy data dari API baru dan tunjukkan pada UI kami. Untuk melakukannya, kami akan menggunakan class API dari Amplify, memanggil API.get. Pada bagian sebelumnya, kami menggunakan API.graphql untuk membuat permintaan ke API GraphQL kami, tetapi ada banyak method yang tersedia di kelas API. Anda dapat mempelajari lebih lanjut tentang class API melalui dokumentasi resmi.

import { API } from 'aws-amplify'

// 1. in the initial state, create an empty array of people
state = { people: [] }

// 2. in componentDidMount, we will fetch this data using the API class
try {
  const peopleData = await API.get('amplifyrestapi', '/people')
  this.setState({ people: peopleData.people })
} catch (err) {
  console.log('error fetching from Lambda API')
}

// 3. render the people data to the UI in the render method
{
  this.state.people.map((person, index) => (
    <p key={index}>{person.name}</p>
  ))
}

Sekarang, kita harus dapat menjalankan aplikasi, mengambil data people / orang dari API kami, dan merendernya ke layar.

Memperbarui Fungsi Lambda melalui CLI

Selain membuat fungsi Lambda baru, kami juga dapat memperbarui fungsi Lambda kami melalui CLI.

Mari kita ubah fungsi untuk pemanggil API dan mengambil data sebagai ganti konstanta hardcoding. Untuk melakukannya, kami akan menggunakan library axios untuk membuat permintaan HTTP, dan kami akan mengambil data dari Star Wars API.

Untuk menggunakan axios, kita perlu mengarahkan ke amplify/backend/function/amplifyrestapi/src dan menginstalnya di sana. Axios dipasang pada folder proyek fungsi Lambda, bukan folder aplikasi utama, karena akan berjalan di sisi server fungsi Lambda.

yarn add axios

# or

npm install axios

Setelah axios diinstal, kami akan memperbarui fungsi Lambda untuk mengambil data dari Star Wars API:

var axios = require('axios')

app.get('/people', function(req, res) {
  axios.get('https://swapi.co/api/people/')
    .then(response => {
      res.json({
        success: true,
        people: response.data.results
      })
    })
    .catch(error => {
      res.json({
        success: false,
        error
      })
    })
});

Sekarang, simpan file dan jalankan amplify push dari folder proyek utama untuk memperbarui fungsi Lambda anda di cloud:

amplify push

Sekarang, API kami telah diperbarui dan siap digunakan!

Saat kami me-refresh aplikasi, sekarang kami harus melihat data yang dikembalikan dari Star Wars API.

Kesimpulan

Dalam seri ini, anda belajar bagaimana memulai dengan AWS Amplify dan menambahkannya ke proyek React anda, serta cara menambahkan otentikasi, penyimpanan, hosting, dan GraphQL atau REST API — semua tanpa harus melakukan kode secara manual atau menyediakan server. Itulah kekuatan yang besar untuk pengembang aplikasi!

Semoga postingan ini menginspirasi anda untuk membuat aplikasi web tanpa server sendiri menggunakan teknologi tanpa server dan AWS Amplify! Beri tahu kami pendapat anda pada komentar di bawah.