Indonesian (Bahasa Indonesia) translation by Ilham Saputra (you can also view the original English article)
AWS Amplify adalah library open source yang memungkinkan pengembang, dan dalam pengembang kasus kami, untuk menambahkan sejumlah fungsi berharga ke aplikasi termasuk analytics, push notification, storage, dan authentication.
Amplify bekerja tidak hanya dengan React Native, tetapi juga dengan Vue, Angular, Ionic, React web dan benar-benar semua framework JavaScript. Dalam tutorial ini, kita akan mendemonstrasikan beberapa fungsi intinya dalam aplikasi React Native.
Hal yang hebat tentang library ini adalah bahwa ia mengaburkan apa yang dulunya merupakan pengaturan dan konfigurasi yang rumit untuk semua fitur ini menjadi modul yang mudah digunakan yang dapat kami tambahkan ke proyek kami dengan menggunakan NPM.
Kami akan mencakup AWS Amplify dalam tiga bagian: authentication, storage, dan analytics.
Instalasi React Native & Persiapan
Jika Anda ingin mengikuti, buat proyek React Native baru menggunakan salah satu Expo (Buat React Native App) atau React Native CLI:
react-native init RNAmplify
atau
create-react-native-app RNAmplify
Selanjutnya, mari kita lanjutkan dan menginstal library aws-amplify menggunakan yarn atau npm:
yarn add aws-amplify
Jika Anda menggunakan Expo, Anda dapat melewati langkah berikutnya (menghubungkan) karena Expo sudah mengirimkan dependensi asli untuk dukungan Amazon Cognito.
Jika Anda tidak menggunakan Expo, kami perlu menautkan library Cognito (Amazon Cognito menangani autentikasi) yang dipasang saat kami menambahkan aws-amplify:
react-native link amazon-cognito-identity-js
AWS Setup
Setelah proyek React Native dibuat dan dikonfigurasikan, kita perlu mengatur layanan Amazon yang akan kita gunakan untuk berinteraksi.
Di dalam direktori proyek baru, kami akan membuat proyek Hub Ponsel baru untuk tutorial ini. Untuk membuat proyek ini, kami akan menggunakan AWSMobile CLI, tetapi bebas untuk menggunakan konsol jika Anda adalah pengguna yang lebih mahir. Saya telah memposting video YouTube dengan gambaran singkat tentang CLI AWSMobile jika Anda ingin mempelajarinya lebih lanjut.
Sekarang mari kita buat proyek Hub Mobile baru di root direktori proyek baru kami:
awsmobile init
Setelah Anda membuat proyek dan memiliki file aws-exports (ini secara otomatis dibuat untuk Anda dengan menjalankan awsmobile init), kita perlu mengkonfigurasi proyek React Native kami dengan proyek AWS kami menggunakan AWS Amplify.
Untuk melakukannya, kita akan masuk ke App.js di bawah impor terakhir dan menambahkan tiga baris kode berikut:
import Amplify, { Auth } from 'aws-amplify'
import config from './aws-exports'
Amplify.configure(config)
Authentication
Otentikasi dengan Amplify dilakukan dengan menggunakan layanan Amazon Cognito. Kami akan menggunakan layanan ini untuk memungkinkan pengguna masuk dan mendaftar ke aplikasi kami!
Menambahkan Authentication Menggunakan CLI AWSMobile
Mari tambahkan info masuk pengguna dan Amazon Cognito ke proyek Hub Ponsel kami. Di direktori root, jalankan perintah berikut:
awsmobile user-signin enable awsmobile push
Sekarang, kami akan menyiapkan user pool Amazon Cognito baru dan siap digunakan. (Jika Anda ingin melihat detail layanan baru ini, buka Konsol AWS, klik pada Cognito, dan pilih nama nama proyek AWSMobile yang Anda buat.)
Selanjutnya, mari mengintegrasikan Autentikasi dengan Amazon Cognito dan AWS Amplify.
Kelas Auth
Mari kita mulai dengan melihat kelas utama yang akan Anda gunakan untuk mendapatkan akses penuh ke layanan Amazon Cognito, kelas Auth.
Kelas Auth memiliki banyak metode yang akan memungkinkan Anda untuk melakukan semuanya mulai dari mendaftar dan masuk ke pengguna untuk mengubah kata sandi dan semua yang ada di antaranya.
Ini juga mudah untuk bekerja dengan otentikasi dua faktor dengan AWS Amplify menggunakan kelas Auth, seperti yang akan kita lihat pada contoh berikut.
Contoh
Mari kita lihat bagaimana Anda bisa mendaftar dan masuk ke pengguna menggunakan Amazon Cognito dan kelas Auth.
Kami dapat menyelesaikan proses pendaftaran dan proses masuk yang padat dengan pekerjaan yang relatif sedikit! Kami akan menggunakan metode signup, confirmSignUp, signIn, dan confirmSignIn dari kelas Auth.
Di App.js, mari buat beberapa metode yang akan menangani pendaftaran pengguna dengan otentikasi dua faktor serta beberapa status untuk menahan input pengguna:
state = {
username: '',
email: '',
phone_number: '',
password: '',
authCode: '',
user: {}
}
onChangeText = (key, value) => {
this.setState({
[key]: value
})
}
signUp() {
const { username, password, email, phone_number } = this.state
Auth.signUp({
username,
password,
attributes: {
phone_number,
email
}
})
.then(() => console.log('user sign up success!!'))
.catch(err => console.log('error signing up user: ', err))
}
confirmSignUp() {
Auth.confirmSignUp(this.state.username, this.state.authCode)
.then(() => console.log('confirm user sign up success!!'))
.catch(err => console.log('error confirming signing up user: ', err))
}
signUp membuat permintaan pendaftaran awal, yang akan mengirim SMS ke pengguna baru untuk mengonfirmasi nomor mereka. confirmSignUp mengambil kode SMS dan nama pengguna dan menegaskan pengguna baru di Amazon Cognito.
Kami juga akan membuat UI untuk input formulir dan tombol, dan mentransfer metode kelas ke elemen UI ini. Perbarui metode render seperti berikut:
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder='Username'
onChangeText={val => this.onChangeText('username', val)}
/>
<TextInput
style={styles.input}
placeholder='Password'
secureTextEntry={true}
onChangeText={val => this.onChangeText('password', val)}
/>
<TextInput
style={styles.input}
placeholder='Email'
onChangeText={val => this.onChangeText('email', val)}
/>
<TextInput
style={styles.input}
placeholder='Phone Number'
onChangeText={val => this.onChangeText('phone_number', val)}
/>
<Button
title='Sign Up'
onPress={this.signUp.bind(this)}
/>
<TextInput
style={styles.input}
placeholder='Confirmation Code'
onChangeText={val => this.onChangeText('authCode', val)}
/>
<Button
title='Confirm Sign Up'
onPress={this.confirmSignUp.bind(this)}
/>
</View>
);
}
Akhirnya, kami akan memperbarui deklarasi styles kami sehingga kami memiliki UI yang lebih bagus:
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
input: {
height: 50,
borderBottomWidth: 2,
borderBottomColor: '#9E9E9E',
margin: 10
}
});
Untuk melihat versi final file ini, klik di sini.
Sekarang, kita harus bisa mendaftar, dapatkan kode konfirmasi yang dikirim ke nomor telepon kami, dan konfirmasi dengan mengetikkan kode konfirmasi.
Jika Anda ingin melihat detail pengguna yang baru dibuat ini, kembali ke Konsol AWS, klik Cognito, pilih nama nama proyek AWSMobile yang Anda buat, dan klik Users and groups di menu General settings di sebelah kiri .
Anda dapat mengambil ini lebih lanjut dengan menerapkan proses masuk dan mengkonfirmasi masuk. Mari kita lihat metode untuk signIn dan confirmSignIn:
signIn() {
Auth.signIn(this.state.username, this.state.password)
.then(user => {
this.setState({ user })
console.log('user sign in success!!')
})
.catch(err => console.log('error signing in user: ', err))
}
confirmSignIn() {
Auth.confirmSignIn(this.state.user, this.state.authCode)
.then(() => console.log('confirm user sign in success!!'))
.catch(err => console.log('error confirming signing in user: ', err))
}
Mengakses Data dan Sesi Pengguna
Setelah pengguna masuk, kami dapat menggunakan Auth untuk mengakses informasi pengguna!
Kita dapat memanggil Auth.currentUserInfo() untuk mendapatkan informasi profil pengguna (nama pengguna, email, dll) atau Auth.currentAuthenticatedUser() untuk mendapatkan idToken, JWT, dan banyak informasi berguna lainnya tentang login pengguna yang saat ini logged-in.
Analytics
AWS Amplify menggunakan Amazon Pinpoint untuk menangani metrik. Ketika Anda membuat proyek Hub Mobile baru menggunakan CLI atau Hub Mobile, Anda secara otomatis mengaktifkan Amazon Pinpoint, dikonfigurasi, dan siap digunakan.
Jika Anda belum terbiasa, Amazon Pinpoint adalah layanan yang tidak hanya memungkinkan pengembang untuk menambahkan Analytics ke aplikasi seluler mereka, tetapi juga memungkinkan mereka mengirim pemberitahuan push, pesan SMS, dan email ke pengguna mereka.
Dengan AWS Amplify, kami dapat mengirim informasi sesi pengguna sebagai metrik ke Amazon Pinpoint dengan beberapa baris kode.
Mari buka dashboard Amazon Pinpoint agar kita dapat melihat kejadian yang akan kita buat. Jika Anda membuka proyek Hub Ponsel di konsol AWS, pilih Analytics di sudut kanan atas, atau langsung masuk ke Amazon Pinpoint dari konsol, dan buka proyek saat ini.
Di bilah navigasi biru gelap di sebelah kiri, ada empat opsi: Analytics, Segments, Campaigns, dan Direct. Pilih Analytics.
Setelah kami mulai membuat acara pengiriman, kami akan dapat melihatnya di tampilan konsol ini.
Sekarang kami siap untuk mulai melacak! Di App.js, hapus semua kode dari contoh terakhir, biarkan kami pada dasarnya hanya metode render yang berisi penampung Tampilan dengan ucapan Teks, tanpa status, tanpa metode kelas, dan hanya style container.
Kami juga impor Analytics dari aws-amplify:
import React, { Component } from 'react';
import {
StyleSheet,
Text,
Button,
View
} from 'react-native';
import Amplify, { Analytics } from 'aws-amplify'
import config from './aws-exports'
Amplify.configure(config)
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text>Analytics</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
});
Pelacakan Events Dasar
Satu metrik umum yang mungkin ingin Anda lacak adalah berapa kali pengguna membuka aplikasi. Mari kita mulai dengan membuat event yang akan melacak ini.
Di React Native, kami memiliki API AppState, yang akan memberi kami status active, background, atau inactive saat ini. Jika keadaan active, itu berarti pengguna telah membuka aplikasi. Jika status background, itu berarti aplikasi berjalan di background dan pengguna berada di layar utama atau di aplikasi lain, sementara tidak aktif berarti pengguna melakukan transisi antara aktif dan foreground, multitasking, atau sedang melakukan panggilan telepon.
Saat aplikasi menjadi aktif, mari kirim event ke analisis kami yang menyatakan bahwa aplikasi telah dibuka.
Untuk melakukannya, kami akan memanggil event berikut:
Analytics.record('App opened!')
Anda dapat melihat API untuk metode ini di dokumen resmi. Metode record membutuhkan tiga argumen: nama (string), atribut (objek, opsional), dan metrik (objek, opsional):
record(name: string, attributes?: EventAttributes, metrics?: EventMetrics): Promise<any>
Mari perbarui kelas untuk menambahkan event listener ketika komponen di-mount, dan hapus ketika komponen dihancurkan. Listener ini akan memanggil _handleAppStateChange setiap kali status aplikasi berubah:
componentDidMount() {
AppState.addEventListener('change', this._handleAppStateChange);
}
componentWillUnmount() {
AppState.removeEventListener('change', this._handleAppStateChange);
}
Sekarang, mari kita buat metode _handleAppStateChange:
_handleAppStateChange(appState) {
if (appState === 'active') {
Analytics.record('App opened!')
}
}
Sekarang, kita dapat memindahkan aplikasi ke background, buka kembali, dan ini harus mengirim acara ke dasbor Analytics kami. Catatan: Untuk melatarbelakangi aplikasi pada simulator iOS atau emulator Android, tekan Command-Shift-H.
Untuk melihat data ini di dasbor, klik Events, dan pilih App opened! dari Events dropdown:
Anda juga mungkin akan memperhatikan bahwa Anda memiliki data lain yang tersedia untuk Anda secara otomatis dari Mobile Hub, termasuk session data, user sign up, dan user sign in. Saya pikir itu cukup keren bahwa semua informasi ini direkam secara otomatis.
Melacak Detail Events
Sekarang mari kita bawa ini ke level berikutnya. Bagaimana jika kita ingin melacak tidak hanya pengguna yang membuka aplikasi, tetapi pengguna mana yang membuka aplikasi dan berapa kali mereka membuka aplikasi?
Kita dapat dengan mudah melakukan ini dengan menambahkan atribut ke metrik kedua!
Mari bertindak seolah-olah kita memiliki pengguna yang masuk, dan melacak event baru yang akan kita sebut 'User detail: App opened'.
Untuk melakukan ini, perbarui event record ke yang berikut:
Analytics.record('User detail - App opened!', { username: 'NaderDabit' })
Kemudian, tutup dan buka aplikasi beberapa kali. Kami sekarang dapat melihat lebih detail tentang acara di dasbor kami.
Untuk melakukannya, lihat ke kanan Event dropdown; ada bagian Attrubutes. Di sini, kita dapat menelusuri atribut untuk acara tersebut. Dalam kasus kami, kami memiliki nama pengguna, jadi kami sekarang dapat memfilter event ini dengan nama pengguna!
Penggunaan Metrik
Item terakhir yang akan kami lacak adalah metrik penggunaan. Ini adalah argumen ketiga untuk dicatat.
Mari tambahkan metrik yang mencatat waktu yang terkumpul bahwa pengguna telah berada di aplikasi. Kita dapat melakukan ini dengan mudah dengan menetapkan nilai waktu di kelas, menambahkannya setiap detik, dan kemudian mengirim informasi ini ke Amazon Pinpoint ketika pengguna membuka aplikasi:
// below class definition
time = 0
componentDidMount() {
this.startTimer()
AppState.addEventListener('change', this._handleAppStateChange);
}
componentWillUnmount() {
AppState.removeEventListener('change', this._handleAppStateChange);
}
_handleAppStateChange(appState) {
if (appState === 'active') {
Analytics.record('User detail - App opened!', { username: 'NaderDabit' }, { timeInApp: this.time })
}
}
startTimer() {
setInterval(() => {
this.time += 1
}, 1000)
}
// render method
Di sini, kami telah membuat nilai time dan mengaturnya ke 0. Kami juga menambahkan metode startTimer baru yang akan menambahkan 1 ke nilai waktu setiap detik. Di componentDidMount, kita memanggil startTimer yang akan menaikkan nilai waktu sebesar 1 setiap detik.
Sekarang kita dapat menambahkan argumen ketiga ke Analytics.record() yang akan mencatat nilai ini sebagai metrik!
Penyimpanan
Mari kita lihat bagaimana kita dapat menggunakan Amplify dengan Amazon S3 untuk menambah penyimpanan ke aplikasi kita.
Untuk menambahkan S3 ke proyek Hub Ponsel Anda, jalankan perintah berikut:
awsmobile user-files enable awsmobile push
Contoh Penggunaan
AWS Amplify memiliki API Penyimpanan yang dapat kita impor seperti yang kita miliki dengan API lainnya:
import { Storage } from 'aws-amplify'
Kami kemudian dapat memanggil metode di Storage seperti get, put, list, dan remove untuk berinteraksi dengan item di bucket kami.
Ketika bucket S3 dibuat, kami secara otomatis akan memiliki gambar default dalam bucket kami di folder publik; milikku disebut example-image.png. Mari kita lihat apakah kita dapat menggunakan AWS Amplify untuk membaca dan melihat gambar ini dari S3.
Seperti yang saya sebutkan di atas, Storage memiliki metode get yang akan kita panggil untuk mengambil item, dan metode untuk mengambil gambar ini akan terlihat seperti ini:
Storage.get('example-image.png')
Untuk mendemonstrasikan fungsi ini di aplikasi React Native kami, mari buat beberapa fungsi yang mengambil gambar ini dari S3 dan menampilkannya kepada pengguna kami.
Kita perlu mengimpor Image dari React Native, serta Storage dari aws-amplify.
import React, { Component } from 'React'
import {
// previous imports
Image
} from 'react-native';
import Amplify, { Storage } from 'aws-amplify'
// rest of code
Sekarang, kita perlu memiliki beberapa keadaan untuk menahan gambar ini, serta metode untuk mengambil gambar dan menyimpannya di state. Mari tambahkan hal-hal berikut ke kelas kami di atas metode render:
state = {
url: ''
}
async getFile() {
let name = 'example-image.png';
let fileUrl = await Storage.get(name);
this.setState({
url: fileUrl
})
}
Terakhir, mari tambahkan beberapa elemen UI untuk mengambil gambar dan merendernya ke UI:
render() {
return (
<View style={styles.container}>
<Text>Storage</Text>
<Button
title="Get Image"
onPress={this.getFile.bind(this)}
/>
{
this.state.url !== '' && (
<Image
source={{ uri: this.state.url }}
style={{ width: 300, height: 300 }}
/>
)
}
</View>
);
}
Sekarang, kita harus bisa mengklik tombol dan melihat gambar dari S3!
Untuk melihat versi final file ini, klik di sini.
Kesimpulan
Secara keseluruhan, AWS Amplify menyediakan cara yang sangat mudah untuk mencapai apa yang dulunya merupakan fungsi kompleks dengan tidak banyak kode, berintegrasi dengan banyak layanan AWS.
Kami tidak mencakup push notification, yang juga baru-baru ini ditambahkan ke AWS Amplify, tetapi ini akan dibahas dalam posting yang akan datang!
AWS Amplify secara aktif dipelihara, jadi jika Anda memiliki permintaan fitur atau ide, jangan ragu untuk berkomentar, kirimkan masalah atau tarik permintaan, atau hanya bintangi atau tonton proyek jika Anda ingin terus mengikuti perkembangan fitur masa depan!
Dan sementara itu, periksa beberapa posting kami yang lain tentang coding React Native apps.
