Cara Membuat Aplikasi Web Tanpa Server Dengan React dan AWS Amplify

Indonesian (Bahasa Indonesia) translation by Febri Ardian Sanjoyo (you can also view the original English article)

AWS Amplify adalah client library, CLI toolchain, dan UI component library yang memungkinkan pengembang untuk membuat dan terhubung dengan cepat ke layanan powerful di cloud. Dalam posting ini, kita akan melihat bagaimana membangun aplikasi web tanpa server lengkap dengan React dan AWS Amplify dengan fitur seperti otentikasi, data layer GraphQL managed, storage, lambda function, dan web hosting.

Amplify memungkinkan fitur seperti dikelola GraphQL (AWS AppSync), penyimpanan (Amazon S3), otentikasi pengguna (Amazon Cognito), fungsi serverless (AWS Lambda), hosting (Amazon CloudFront dan Amazon S3), analitik (Amazon Pinpoint), dan banyak lagi.

Tujuan dari library dan CLI adalah membiarkan pengembang membuat aplikasi web dan seluler yang lengkap tanpa harus khawatir mengelola infrastruktur back-end mereka sendiri, memungkinkan mereka untuk memindahkan lebih jauh ke stack menggunakan keterampilan yang sudah mereka ketahui.

Dalam seri ini, saya akan menunjukkan cara membuat proyek AWS Amplify baru, mengaktifkan fitur cloud menggunakan CLI, menghubungkan aplikasi React, dan mulai berinteraksi dengan layanan cloud. Dalam posting ini, saya akan menunjukkan kepada Anda bagaimana menerapkan otentikasi, penyimpanan, dan hosting. Dalam tutorial berikutnya, kita akan belajar cara membuat dan berinteraksi dengan GraphQL dan Serverless API.

Sementara tutorial ini menggunakan React, Amplify akan bekerja dengan proyek JavaScript dan memiliki komponen kerangka khusus untuk Angular, Vue, React Native, dan Ionic. CLI juga mendukung iOS dan Android asli.

Persiapan

Buat Aplikasi Baru React

Untuk memulai, pertama-tama kita perlu membuat aplikasi React baru menggunakan creat-react-app CLI dan ubah ke direktori baru:

npx create-react-app amplify-web-app

cd amplify-web-app

Selanjutnya, kita akan menginstal dependensi klien AWS Amplify:

yarn add aws-amplify aws-amplify-react

# or

npm install aws-amplify aws-amplify-react

Instal dan Konfigurasikan AWS Amplify CLI

Selanjutnya, kita perlu menginstal AWS Amplify CLI.

npm install -g @aws-amplify/cli

Sekarang setelah AWS Amplify CLI diinstal, kita perlu mengkonfigurasinya untuk dapat membuat sumber daya di akun AWS kita. Kita melakukan ini dengan menjalankan perintah amplify configure dan menyiapkan user AWS baru.

amplify configure

Anda dapat melihat panduan video pendek konfigurasi ini di YouTube.

Sekarang AWS Amplify CLI diinstal dan dikonfigurasi, jalankan perintah amplify dari command line Anda untuk melihat opsi yang tersedia dan pastikan bahwa CLI diinstal dengan benar.

amplify

Menginisialisasi Proyek Amplifikasi AWS Baru

Untuk menginisialisasi proyek AWS Amplify baru, kita akan menjalankan perintah amplify init:

amplify init

Saat diminta, pilih editor teks pilihan Anda dan tetap dengan default untuk semua opsi lain.

Sekarang telah menginisialisasi proyek AWS Amplify baru secara lokal, dan kita sekarang akan melihat direktori amplify dan file .amplifyrc yang dibuat di direktori root proyek React kita. File-file ini menyimpan informasi konfigurasi tentang proyek Amplify kita, dan kita tidak perlu menyentuh itu sama sekali untuk saat ini.

Menerapkan otentikasi

Fitur pertama yang kita aktifkan adalah otentikasi pengguna. Kita dapat mengaktifkan fitur kapan saja dengan menjalankan amplify add. Kategori untuk autentikasi adalah auth, jadi jalankan:

amplify add auth

Ketika ditanya Do you want to use the default authentication and security configuration?, pilih Yes.

Setelah ini dibuat, kita perlu menjalankan amplify push untuk membuat layanan baru dalam rekening kami:

amplify push

Ketika ditanya Are you sure you want to continue?, pilih Yes.

Setelah layanan dibuat, Anda dapat melihat layanan di dasbor setiap saat dengan mengunjungi https://console.aws.amazon.com/cognito/users/ dan mengklik nama layanan Anda.

Kita juga dapat melihat semua layanan yang diaktifkan kapan saja dengan menjalankan amplify status:

amplify status

Anda juga akan melihat file baru yang dibuat — aws-exportss.js — di dalam folder root dari aplikasi React. Anda tidak perlu mengedit file ini karena ditangani oleh CLI, tetapi kita akan menggunakannya dalam langkah berikutnya untuk mengonfigurasi proyek lokal.

Menambahkan otentikasi ke App react

Sekarang setelah kita memiliki layanan otentikasi yang dibuat, kita dapat mulai menggunakannya di aplikasi React kita!

Hal pertama yang perlu kita lakukan adalah mengkonfigurasi aplikasi React untuk mengetahui tentang proyek Amplify kita. Cara kita melakukannya adalah dengan memanggil Amplify.configure di akar proyek — bagi kita, itu adalah src/index.js.

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

Sekarang, proyek kita sudah siap, dan kita dapat mengimplementasikan otentikasi.

Menggunakan Komponen High-Order `withAuthenticator`

Kita akan melihat beberapa cara untuk menerapkan otentikasi user, tetapi untuk memulai, kita akan mulai dengan menggunakan withAuthenticator higher-order component dari aws-amplify-react library. Komponen ini men-scaffolds seluruh aliran otentikasi hanya dalam beberapa baris kode dan merupakan cara yang bagus untuk bangun dan berjalan dengan perpustakaan.

Di App.js, impor withAuthenticator HOC di bagian atas file:

import { withAuthenticator } from 'aws-amplify-react'

Dan, di bagian bawah, perbarui statement export untuk membungkus komponen App dengan withAuthenticator.

export default withAuthenticator(App)

Untuk mempelajari lebih lanjut, baca tentang komponen React Amplify yang tersedia untuk otentikasi dalam dokumentasi resmi.

Menguji Authentication Flow

Sekarang, kita dapat menjalankan aplikasi dan harus melihat sign-in-screen:

Klik Creat account untuk mendaftar lalu masuk ke aplikasi. Setelah kita masuk, sesi akan disimpan, sehingga kita dapat menyegarkan laman dan kita akan tetap masuk.

Opsi Sign-Out

Kita juga dapat membuat tombol keluar dengan menambahkan argumen kedua ke HOC:

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

Perhatikan bahwa kita juga dapat menggunakan Auth class secara langsung untuk mengeluarkan pengguna:

// 1. import the class
import { Auth } from 'aws-amplify'

// Sign the user out
await Auth.signOut()

Perhatikan bahwa ketika memanggil Auth.signOut secara langsung, kita masih harus me-rerender komponen dengan cara tertentu untuk mengembalikan pengguna ke halaman masuk. Anda dapat melihat contoh ini dalam issue thread on the project's GitHub repo.

Menggunakan `Auth` Class

Kita juga dapat menggunakan Auth class untuk mengelola pengguna secara manual. Auth memiliki lebih dari 30 metode yang tersedia termasuk signup, signIn, confirmSignUp, confirmSignIn, forgotPassword, dan resendSignUp.

Mari kita lihat bagaimana Anda dapat menerapkan sign-up pengguna menggunakan metode signUp class:

// 1. Create initial state to hold user inputs
state = {username: '', password: '', email: '', phone_number: '', authCode: ''}

// 2. onChange handler for user input changes
onChange = e => {
  this.setState({ [e.target.name]: e.target.value })
}

// 3. Function to call Auth.signUp
signUp = async () => {
  const { username, password, email, phone_number } = this.state
  await Auth.signUp({
    username, password, attributes: { phone_number, email}
  })
  console.log('successfully signed up')
}

// 4. Function to call Auth.signUp
confirmSignUp = async () => {
  const { username, authCode } = this.state
  await Auth.confirmSignUp(username, authCode)
  console.log('successfully confirmed signed up')
}

// 5. In render method, create inputs with attributes to update state
<input onChange={this.onChange} name='username' />

// 6. Create buttons to call signUp and confirmSignUp methods
<button onClick={this.signUp}>Sign Up</button>

Ini adalah blueprint untuk bagaimana Anda dapat mendaftar pengguna dengan class Auth secara manual.

Implementasi manual membutuhkan waktu lebih lama untuk menulis tetapi memberi Anda kontrol penuh atas tidak hanya UI tetapi juga fungsi sebenarnya yang ingin Anda terapkan.

Anda dapat mempelajari lebih lanjut tentang Otentikasi dengan AWS Amplify dalam dokumentasi project.

Penyimpanan dengan Amazon S3

Amazon S3 adalah layanan populer untuk menyimpan media seperti gambar dan video, serta untuk layanan back-end seperti hosting aplikasi, backup, dan pengiriman perangkat lunak.

AWS memperkuat CLI memungkinkan kita untuk membuat, mengkonfigurasi, memperbarui, dan menghapus S3 ember. Dalam bagian ini, kita akan melihat bagaimana untuk membuat S3 bucket serta bagaimana untuk meng-upload dan download gambar dan file ke ember.

Untuk mengaktifkan Storage, kita dapat menjalankan perintah berikut:

amplify add storage

Selanjutnya, Anda akan diminta untuk memberikan beberapa detail konfigurasi. Pilih layanan Konten (Images, audio, video, dll.). Selanjutnya, berikan nama sumber daya khusus proyek (digunakan secara internal dalam proyek) dan nama bucket (lokasi S3 tempat data Anda akan disimpan). Terakhir, akses harus dibatasi untuk Auth user saja, dan pengguna yang diautentikasi harus diberikan akses read/write.

Sekarang penyimpanan telah ditambahkan ke konfigurasi kita, dan kita menjalankan amplify push untuk membuat sumber daya baru di akun kita:

amplify push

Ini akan membuat dan mengkonfigurasi bucket Amazon S3 yang dapat kita mulai gunakan untuk menyimpan item.

Contoh menggunakan penyimpanan S3

Jika kita ingin menguji ini, kita dapat menyimpan beberapa teks dalam file seperti ini:

import { Storage } from 'aws-amplify'

// create function to work with Storage
addToStorage = () => {
  Storage.put('javascript/MyReactComponent.js', `
    import React from 'react'
    const App = () => (
      <p>Hello World</p>
    )
    export default App
  `)
    .then (result => {
      console.log('result: ', result)
    })
    .catch(err => console.log('error: ', err));
}

// add click handler
<button onClick={this.addToStorage}>Add To Storage</button>

Ini akan membuat folder bernama javascript di bucket S3 kita dan menyimpan file bernama MyReactComponent.js di sana dengan kode yang kita cantumkan dalam argumen kedua Storage.put.

Jika kita ingin membaca semuanya dari folder ini, kita dapat menggunakan Storage.list:

readFromStorage = () => {
  Storage.list('javascript/')
    .then(data => console.log('data from S3: ', data))
    .catch(err => console.log('error'))
}

Jika kita hanya ingin membaca file tunggal, kita dapat menggunakan Storage.get:

readFromStorage = () => {
  Storage.get('javascript/MyReactComponent.js')
    .then(data => console.log('data from S3: ', data))
    .catch(err => console.log('error'))
}

Jika kita ingin menarik semuanya, kita bisa menggunakan Storage.list:

readFromStorage = () => {
  Storage.list('')
    .then(data => console.log('data from S3: ', data))
    .catch(err => console.log('error'))
}

Bekerja dengan gambar

Bekerja dengan gambar ini juga mudah. Berikut adalah contoh:

class S3ImageUpload extends React.Component {
  onChange(e) {
      const file = e.target.files[0];
      Storage.put('example.png', file, {
          contentType: 'image/png'
      })
      .then (result => console.log(result))
      .catch(err => console.log(err));
  }

  render() {
      return (
          <input
              type="file" accept='image/png'
              onChange={(e) => this.onChange(e)}
          />
      )
  }
}

Dalam kode di atas, kita menautkan input file unggahan ke handler event onChange. Ketika pengguna memasok file, Storage.put dipanggil untuk mengunggah file ke S3 dengan jenis MIME image/png.

Hosting

Untuk menerapkan dan menghosting aplikasi Anda di AWS, kita dapat menggunakan kategori hosting.

amplify add hosting

Sekali lagi, Anda akan diminta untuk menyediakan beberapa opsi konfigurasi:

Untuk jenis environment, pilih DEV (S3 only with HTTP).
Pilih nama bucket unik global tempat proyek Anda akan dihosting.
Berikan nama index dan URL error untuk situs web — biasanya index.html.

Sekarang, semuanya sudah siap, dan kita dapat mempublikasikan aplikasi:

amplify publish

Menghapus Layanan

Jika suatu saat Anda ingin menghapus layanan dari proyek Anda dan akun Anda, Anda dapat melakukan ini dengan menjalankan perintah amplify remove dan kemudian pushing.

amplify remove auth
amplify push

Jika Anda tidak yakin layanan apa yang telah Anda aktifkan kapan saja, Anda dapat menjalankan perintah amplify status:

amplify status

amplify status akan memberi Anda daftar sumber daya yang saat ini diaktifkan di aplikasi Anda.

Kesimpulan

AWS Amplify memungkinkan pengembang untuk membangun aplikasi full-stack, aplikasi cloud-enabled lebih mudah dari sebelumnya, memungkinkan pengembang untuk beralih cepat, langsung dari lingkungan front-end mereka.

Ini adalah bagian dari seri dua bagian. Dalam tutorial berikutnya, kita akan belajar cara membuat dan berinteraksi dengan GraphQL dan Serverless API. Jadi nantikanlah.