Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Cara Membuat Aplikasi Web Tanpa Server Dengan React dan AWS Amplify

by
Difficulty:IntermediateLength:MediumLanguages:

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:

Selanjutnya, kita akan menginstal dependensi klien AWS Amplify:

Instal dan Konfigurasikan AWS Amplify CLI

Selanjutnya, kita perlu menginstal 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.

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.

Menginisialisasi Proyek Amplifikasi AWS Baru

Untuk menginisialisasi proyek AWS Amplify baru, kita akan menjalankan perintah 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:

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:

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:

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.

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:

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

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:

Sign-in screen for the app

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:

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

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:

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:

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:

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:

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:

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

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

Bekerja dengan gambar

Bekerja dengan gambar ini juga mudah. Berikut adalah contoh:

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.

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:

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.

Jika Anda tidak yakin layanan apa yang telah Anda aktifkan kapan saja, Anda dapat menjalankan perintah 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.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.