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.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post