Plush

Mewah

Plush adalah aplikasi seluler tumpukan penuh untuk berbagi gambar. Ini menggunakan Expo dan React Native untuk ujung depan, AWS memperkuat sebagai layanan back-end, dan layanan API dibangun dengan GraphQL.

Demo

Video demo fungsionalitas aplikasi di sini.

Ringkasan

Setelah mendaftar/masuk, pengguna dapat melakukan yang berikut:

• Berikan akses ke perpustakaan perangkat seluler mereka dengan menekan ikon kamera di header.
• Unggah gambar ke feed.
• Suka dan tidak seperti gambar (dari pengguna lain dan mereka sendiri).
• Segarkan umpan dengan tarik-ke-refresh atau dengan menekan tombol Reload di header.
• Bendera konten yang tidak pantas dengan menekan ikon opsi di footer kartu gambar.
• Hapus gambar mereka sendiri dari umpan. Juga tersedia di ikon Opsi.

Aliran Aplikasi

• Pengguna diautentikasi menggunakan alur otentikasi di luar kotak AWS.

• Pengguna yang dialihkan ke satu -satunya layar aplikasi: umpan.

• Saat pengguna mengunggah gambar:

  • Permintaan put dengan RNS3 akan menyimpan file dalam ember AWS-S3.
  • Mutasi Apollo GraphQL akan menyimpan catatan di tabel gambar DynamoDB.

• Ketika pengguna menandai konten yang tidak pantas:

  • Mutasi GraphQL klien AppSync akan menyimpan catatan dalam tabel bendera DynamoDB.
  • Front-end akan menyembunyikan gambar itu dari umpan pengguna.

• Saat pengguna menyukai/tidak menyukai gambar:

  • Mutasi GraphQL klien AppSync akan membuat instance yang sama dalam tabel seperti DynamoDB.
  • Mutasi GraphQL klien AppSync akan menghancurkan instance seperti itu dari tabel seperti DynamoDB.

• Saat pengguna menghapus gambar:

  • Permintaan Hapus dengan API Penyimpanan Amplify akan menghapus file terkait dari ember AWS-S3.
  • Mutasi Apollo GraphQL akan menghancurkan catatan dari tabel gambar DynamoDB.
  • Umpan disegarkan untuk menampilkan gambar saat ini.

• Saat pengguna menyegarkan umpan:

  • Permintaan GraphQL klien AppSync akan meminta semua gambar saat ini yang disimpan di tabel gambar DynamoDB.

Prasyarat

Untuk menjalankan aplikasi ini di mesin lokal Anda, Anda memerlukan alat berikut:

• 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 back-end

1. Klone repo ini ke mesin lokal Anda.

 git clone https://github.com/yhenni1989/plush

cd plush

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

4. Ikuti instruksi yang sama seperti di bawah ini.

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

 amplify add auth

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

6. 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.

7. Tambahkan GraphQL API ke proyek Anda.

 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

• Skema untuk proyek ini, yang terletak di src/graphql/schema.graphql, terlihat seperti ini:

 type Picture @model {
  id : ID !
  pictureOwnerId : String !
  pictureOwnerUsername : String !
  visibility : Visibility
  file : S3Object
  likes : [ Like ] @connection ( name : " PictureLikes " )
  flags : [ Flag ] @connection ( name : " PictureFlags " )
}

type Like @model {
  id : ID !
  likeOwnerId : String !
  likeOwnerUsername : String !
  picture : Picture @connection ( name : " PictureLikes " )
}

type Flag @model {
  id : ID !
  flagOwnerId : String !
  flagOwnerUsername : String !
  picture : Picture @connection ( name : " PictureFlags " )
}

type S3Object {
  bucket : String !
  region : String !
  key : String !
  uri : String !
}

enum Visibility {
  public
  private
}

• Gambar, seperti, dan flag adalah semua tabel DynamoDB yang digunakan untuk menyimpan data dari input pengguna.

8. Saatnya menggunakan proyek Anda ke cloud ?.

 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 gambar pengguna dan AWS AppSync GraphQL API yang menggunakan Amazon DynamoDB untuk menyimpan metadata tentang gambar (yaitu nama ember, suka, bendera, pemilik, tanggal pembuatan ... dll).

Menjalankan aplikasi

1. Instal dependensi klien.

 yarn

# or

npm install

2. Anda akan membutuhkan kredensial AWS IAM Anda untuk mengakses ember S3 Anda.

• 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. Sekarang Anda siap untuk meluncurkan dan menguji aplikasi.

 expo start --ios

# or

expo start --android

4. 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.

5. Tambahkan dan tampilkan gambar.

• Jika aplikasi berjalan dengan sukses, Anda harus dapat menekan ikon kamera, izinkan akses ke pustaka 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.

• Anda dapat menyukai/tidak seperti dan menandai gambar pengguna lainnya, dan menghapus gambar Anda sendiri.

Ingin berkontribusi?

• Jika Anda menyukai proyek ini, bantu saya tumbuh dan perbaiki dengan mengirimkan permintaan tarik?