react native appsync s3

Bereaksi AppSync S3 asli

Aplikasi ini memungkinkan pengguna untuk melakukan hal berikut:

• Daftar/masuk ke platform.
• Akses Perpustakaan Perangkat Menggunakan Expo.
• Unggah gambar ke AWS S3.
• Simpan catatan gambar di Amazon DynamoDB.
• Tampilkan gambar di platform.

Prasyarat

• Expo Cli

  • npm install -g expo-cli

• Akun AWS

• Node JS dengan NPM

• AWS memperkuat CLI

  • npm install -g @aws-amplify/cli
  • amplify configure (tautan untuk video langkah demi langkah).

Mengkonfigurasi proyek

1. Klone repo ini ke mesin lokal Anda.

 git clone https://github.com/yhenni1989/react-native-appsync-s3.git

cd react-native-appsync-s3

2. Tambahkan AWS Amplify Dependency ke Proyek Anda.

 yarn add aws-amplify aws-amplify-react-native

# or

npm install aws-amplify aws-amplify-react-native

3. Inisialisasi proyek AWS Amplify.

 amplify init

Ikuti instruksi yang sama seperti di bawah ini.

4. Konfigurasikan kumpulan pengguna Amazon Cognito untuk menyimpan kredensial pengguna.

 amplify add auth

# When prompt, choose: Yes, use the default configuration.

5. Tambahkan ember Amazon S3 untuk menyimpan gambar.

 amplify add storage

# Choose: Content (Images, audio, video, etc.)
# Give access to only authenticated users.
# Give users read/write acces.

6. Tambahkan AWS API API AWS untuk menggunakan GraphQL dan menyimpan data di DynammoDB.

 amplify add api

# Choose GraphQL as the API service. 
# Choose an authorization type for the API: Amazon Cognito User Pool
# Do you have an annotated GraphQL schema? Yes
# Provide your schema file path: src/graphQL/schema.graphql

7. Menyebarkan proyek Anda ke AWS.

 amplify push

 Do you want to generate code for your newly created GraphQL API: No.

AWS Amplify CLI akan membuat kumpulan pengguna Amazon Cognito dan kumpulan identitas, ember Amazon S3 untuk menyimpan setiap foto pengguna dan AWS AppSync GraphQL API yang menggunakan Amazon DynamoDB untuk menyimpan data.

Menjalankan aplikasi

1. Instal dependensi klien.

 yarn

# or

npm install

2. Anda akan membutuhkan kredensial AWS IAM Anda sebelum menjalankan aplikasi.

• Salin Akses dan Kunci Rahasia Anda di file src/myKeys.js dari proyek Anda.

 const keys = {
 accessKey : 'blablabla' ,
 secretKey : 'blablabla' ,
}
export default keys ;

• Simpan perubahan.

3. Luncurkan aplikasi React Native di simulator Anda dari terminal di bawah direktori proyek Anda.

 expo start --ios

# or

expo start --android

3. Buat pengguna baru.

• Aplikasi ini menggunakan komponen orde lebih tinggi WithAuthenticator (HOC) dari AWS Amplify untuk melakukan aliran otentikasi: Mendaftar, Konfirmasi Daftar dan Masuk Pengguna.

4. Tambahkan dan tampilkan gambar.

• Jika aplikasi berjalan dengan sukses, Anda harus dapat menekan tombol Tambah, Izinkan Akses ke Perpustakaan Perangkat, dan pilih gambar dari perangkat Anda. Ini akan mengunggah gambar ke S3 kemudian melakukan panggilan graphql untuk memasukkan catatan ke DynamoDB.

• Anda kemudian dapat menekan tombol Refresh untuk menampilkan gambar di layar.

Menyumbang

• Proyek ini membutuhkan banyak peningkatan. Bantu saya tumbuh dan memperbaikinya?