Zopher

Bereaksi aplikasi Twitter asli dengan AWS Amplify dan Expo

Proyek ini mengintegrasikan front-end asli React dengan AWS menguatkan back-end yang memiliki otentikasi pengguna (AWS Cognito) dan graphql API (AWS AppSync) untuk operasi CRUD antara klien dan database (Amazon DynamoDB).

Tinjauan Aplikasi

• Pengguna dapat mendaftar/masuk ke aplikasi.

• Pengguna dapat membuat posting dengan menekan tombol Tambah, menulis di dalam modal, dan menekan Kirim.

• Pengguna dapat menyukai/tidak seperti posting.

• Pengguna dapat menghapus posting mereka sendiri.

• Pengguna dapat memperbarui feed posting dengan:

  • Menekan tombol Reload.
  • Melakukan tarik-ke-refresh.

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/Zopher.git

cd Zopher

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 Layanan API untuk menggunakan GraphQL dan menyimpan data di Amazon Dynammodb.

 amplify add api

Ikuti konfigurasi di bawah ini.

6. Saatnya menggunakan proyek Anda ke AWS.

 amplify push

Setelah beberapa menit operasi otomatis, Amplify CLI akan membuat kumpulan pengguna Amazon Cognito dan kumpulan identitas untuk menyimpan krendensial pengguna dan AWS AppSync GraphQL API untuk memungkinkan operasi CRUD antara klien dan server.

Menjalankan aplikasi

1. Instal dependensi klien.

 yarn

# or

npm install

2. Luncurkan aplikasi React Native di simulator Anda di bawah direktori proyek Anda.

 expo start --ios

# or

expo start --android

Tutorial langkah demi langkah

• Lihatlah proses pengaturan lengkap dalam cerita menengah
• Tautan video untuk demo di sini.