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

Kod App dengan GraphQL, React Native dan AWS AppSync: App

by
Difficulty:IntermediateLength:LongLanguages:

Malay (Melayu) translation by Meyria (you can also view the original English article)

Final product image
What You'll Be Creating

Dalam tutorial ini, saya akan menunjukkan kepada anda cara membuat dan berinteraksi dengan pangkalan data GraphQL menggunakan AWS AppSync dan React Native. Aplikasi ini akan mempunyai fungsi masa nyata & offline, sesuatu yang kami keluar dari kotak dengan AppSync.

Dalam jawatan terdahulu kami menyediakan back-end GraphQL kami dengan perkhidmatan Amazon AppSync. Semak ia jika anda belum lagi. Atau, jika anda ingin pengenalan kepada GraphQL, lihat beberapa jawatan lain kami.

Dalam siaran ini, kami akan membungkusnya dengan berjalan melalui pembina pelanggan React Native. Projek ini agak rumit untuk menunjukkan berjalan kaki anda melalui langkah demi langkah, tetapi saya akan menjelaskan senibina projek dan menunjukkan kepada anda bahagian utama kod sumber.

Tinjauan Struktur Aplikasi dan Struktur Folder

Aplikasi kami akan mempunyai titik masuk utama yang akan terdiri daripada dua pandangan tab. Satu tab akan menyenaraikan bandar-bandar dari pangkalan data GraphQL kami, yang lain akan menjadi borang input untuk menambah bandar baru. Tab The Cities akan menjadi navigator yang akan membolehkan pengguna menavigasi ke bandar-bandar individu.

Kami akan menyimpan komponen utama dalam folder sumber, dan akan mempunyai folder lain dalam direktori src untuk memegang mutasi, pertanyaan, dan langganan GraphQL kami.

Kami juga akan mempunyai folder aset untuk memegang imej kami.

folder structure

Mewujudkan dan Mengkonfigurasi Pelanggan Native React

Untuk rujukan, lihatlah kod akhir untuk aplikasi ini dalam repo GitHub tutorial, tetapi saya akan menggariskan beberapa langkah yang saya ambil untuk membuat aplikasi dari awal.

Pertama, kami mencipta aplikasi React Native yang baru menggunakan ekspo sama ada.

Sekali dalam projek yang baru diwujudkan, kami memasang dependencies kami. Untuk fungsi GraphQL dan AppSync, kami menggunakan kebergantungan berikut:

Kami juga menggunakan kebergantungan berikut untuk reka bentuk UI:

Juga, satu perpustakaan Ikon Vektor telah dipasang, kami menghubungkannya:

Selepas memasang kebergantungan kami, kami memuat turun fail AppSync.js dari konsol AppSync kami. Dalam konsol projek AppSync kami, kami memilih React Native di bahagian bawah, dan mengklik pada butang Muat turun jingga untuk memuat turun fail konfigurasi ini.


Fail konfigurasi ini memegang maklumat klien AppSync yang diperlukan untuk membuat klien baru.

Mengkonfigurasi Penyedia dan Menyimpan

Tahap tertinggi apl adalah di mana kami akan melakukan konfigurasi kami untuk menghidupkan API AppSync dengan pelanggan React Native. Sekiranya anda menggunakan Redux atau React Apollo sebelum ini, semua ini akan menjadi biasa. Jika anda tidak mempunyai, ingatlah bahawa mana-mana kanak-kanak Penyedia, dalam kes kami, ApolloProvider, akan mempunyai akses kepada fungsi yang diberikan.

Kod berikut adalah fail App.js baru kami, yang merupakan komponen utama yang diimport dari entry point index.js kami.

Dalam fail ini, kami menyediakan klien AppSync baru menggunakan gabungan pembina AWSAppSyncClient dari aws-appsync serta konfigurasi dalam fail aws-exports.js kami, yang menyediakan URL API, rantau, jenis pengesahan dan API APIQLQL kunci API pengesahan.

Kami kemudian membungkus pintu masuk utama kami, fail Tabs.js yang akan memegang navigasi tab kami, dalam ApolloProvider dan lulus dalam klien AppSync sebagai alat klien. Kami juga membungkus komponen Tabs dalam komponen Pemulihan yang kami import dari reaksi aws-appsync. Ini akan memastikan bahawa kami telah membaca dari storan async dan telah menghidupkan semula cache kami sebelum membuat UI.

Sekarang aplikasi kami akan dapat menanyakan data dari titik akhir AppSync kami, dan juga untuk melakukan mutasi dan langganan!

Navigasi

Titik masuk utama aplikasi adalah navigasi tab, yang dilaksanakan dalam fail Tabs.js dengan Navigasi React.

Apa yang telah kami lakukan di sini ialah membuat dan mengeksport TabNavigator dengan dua tab. Ini adalah:

  1. Cities - Komponen ini menyenaraikan bandar-bandar kita, dan ia adalah komponen pelayaran dalam dan dari dirinya sendiri. Komponen ini adalah pelayar kerana kami mahu dapat menavigasi ke setiap bandar dan melihat lokasi di dalam bandar.
  2. AddCity - Komponen ini adalah satu bentuk untuk kami dapat menambah bandar-bandar baru.

Komponen yang boleh diguna semula

Aplikasi ini hanya mempunyai satu komponen yang boleh digunakan semula, TextInput yang disesuaikan. Oleh kerana kita akan menggandakan gaya dan fungsi ini berulang kali, kami memutuskan untuk menjadikannya komponennya sendiri. Komponen input dilaksanakan dalam Input.js.

Senarai Bandar dan Navigasi Kota

Pandangan utama aplikasi adalah senarai bandar-bandar yang akan kami ambil dari GraphQL. Kami mahu dapat menavigasi dari setiap bandar tersenarai untuk melihat terperinci tentang bandar tersebut di mana kami boleh menambah lokasi.

Untuk melakukan ini, kami menjadikan Cities.js itu StackNavigator sendiri, dan City.js komponen yang kami jalani ketika memilih bandar. Apabila mengklik pada bandar di Cities, kami melancarkan namanya dan id sebagai alat peraga ke City.

Cities.js

Dalam komponen ini, kami mengambil menggunakan pertanyaan listCities, dan kami juga melanggan NewCitySubscription, supaya apabila sebuah NewCitySubscription, walaupun dari pelanggan lain, kami akan mengendalikan langganan itu dan mengemas kini pelbagai bandar kami. Pertanyaan listCities membuat pelbagai bandar-bandar yang terdapat di dalam komponen kami sebagai this.props.cities.

Citi.js

Dalam komponen ini, kami diluluskan sebagai alat peraga dari navigasi (tersedia sebagai props.navigation.state.params.city). Kami menggunakan nilai id bandar untuk mendapatkan senarai lokasi untuk bandar yang dipilih menggunakan pertanyaan senaraiLokasi. Kami melanggan lokasi baru dengan cara yang sama bahawa kami melanggan bandar baru di Cities.js, menggunakan langganan NewLocationSubscription. Kami juga menyediakan fungsi kemas kini optimistikResponse & fungsi update sebuah bandar baru yang ditambahkan. Respons optimistik

Menambah Bandar

Akhir sekali, kita perlu melaksanakan dengan fungsi untuk menambahkan bandar-bandar baru ke API GraphQL kami dalam fail AddCity.js. Untuk melakukan ini, kami telah menaikkan mutasi bersama dengan satu bentuk yang akan memanggil createCity, lulus nilai input borang.

AddCity mempunyai fungsi onAdd yang kami tentukan dalam komposisi GraphQL kami, yang bukan hanya menulis bandar baru untuk pangkalan data GraphQL kami, tetapi juga melaksanakan UI yang optimistik menggunakan gabungan optimisitcResponse dan update.

Mutasi, Pertanyaan, dan Langganan

Mutasi, pertanyaan, dan langganan adalah fungsi teras untuk mengintegrasikan API APIQL kami. Dalam apl kami, fungsi ini dilaksanakan di fail Cities.js, City.js, dan AddCity.js menggunakan klien AppSync.

Lihatlah dengan lebih dekat bagaimana mutasi, pertanyaan, dan langganan dilaksanakan dalam kod kami.

Pertanyaan

Mula-mula, mari kita lihat bagaimana untuk membuat dan mengeksport pertanyaan GraphQL yang boleh berinteraksi dengan listCities uery di Skema AppSync kami. Kod ini terkandung dalam fail src/queries/LIstCities.js.

Seterusnya, kami mengimport pertanyaan ini dalam fail Cities.js, bersama-sama dengan beberapa pembantu dari react-apollo, dan mengikat komponen yang kami ingin akses kepada data ini menggunakan compose dan graphql dari react-apollo.

Sekarang kita mempunyai akses kepada pelbagai bandar dari pelayan GraphQL kami sebagai alat penggerak. Kita boleh menggunakan this.props.cities untuk memetakan pelbagai bandar yang datang dari GraphQL.

Mutasi

Untuk mencipta mutasi, pertama kita perlu membuat mutasi GraphQL asas dan mengeksportnya. Kami melakukan ini dalam fail src/mutations/CreateCity.js.

Baru kita boleh mengimport mutasi ini (bersama-sama dengan pembantu Apollo) dalam fail AddCity.js dan menggunakannya dalam satu komponen:

Sekarang, kami mempunyai akses kepada alat yang dipanggil onAdd, yang kami lulus objek yang ingin kami hantar kepada mutasi!

Langganan

Langganan membolehkan kami melanggan perubahan data dan memaklumkannya dalam permohonan kami dalam masa nyata. Sekiranya kami menukar pangkalan data kami dengan menambah atau mengeluarkan bandar, kami ingin aplikasi kami dikemas kini dalam masa nyata.

Mula-mula kita perlu membuat mutasi dan mengeksportnya supaya kita dapat mengaksesnya di dalam klien. Kami simpan ini dalam fail src/subscriptionsNewCitySubscriptions.js.

Sekarang kita boleh mengimport dan melampirkan langganan di Cities.js. Kami sudah melihat cara untuk mendapatkan bandar-bandar dari API kami. Sekarang mari kita kemas kini fungsi ini untuk melanggan perubahan baru dan kemas kini pelbagai bandar apabila bandar baru ditambah.

Kami menambah prop baru yang dipanggil subscribeToNewCities, yang kami panggil dalam componentDidMount. Dalam langganan, kami menyerahkan dokumen (definisi langganan) dan updateQuery untuk menerangkan apa yang kami mahu berlaku semasa kemas kini ini.

Kami merosakkan createCity (mengandungi mutasi) dari prop yang disalurkan ke fungsi updateQuery, dan mengembalikan semua nilai yang ada bersama dengan senarai listCity yang dikemas kini mengandungi bandar-bandar terdahulu bersama-sama dengan data bandar baru yang diperoleh dari createCity.

UI yang optimis

Bagaimana jika kami tidak mahu menunggu langganan untuk memulangkan data terkini dari API kami untuk mengemas kini UI kami?

Sekiranya pengguna mencipta bandar baru, kami mahu menambahkannya secara serentak ke bandar dan membuatnya dalam aplikasi kami sebelum menerima pengesahan daripada perkhidmatan belakang.

Kita boleh melakukannya dengan mudah menggunakan beberapa teknik dan fungsi.

Mari kemas kini AddCityMutation kami kepada yang berikut (anda boleh melihat kod ini dalam fail sumber AddCity.js):

Di sini, kami telah menambahkan dua sifat baru kepada objek argumen fungsi mutasi:

  1. optimistikResponse mentakrifkan respons baru yang anda ingin ada dalam fungsi kemas kini
  2. Update mengambil dua hujah, proksi (yang membolehkan anda membaca dari cache) dan data yang ingin anda gunakan untuk membuat kemas kini. Kami membaca cache semasa (proxy.readQuery), menambah item baru kami kepada pelbagai item, kemudian tulis kembali ke cache, yang mengemas kini UI kami.

Kesimpulannya

GraphQL menjadi lebih utama. Kebanyakan kerumitan sekitar GraphQL ada kaitan dengan menguruskan backend dan lapisan API. Walau bagaimanapun, alat seperti AppSync abstrak menjauhkan kerumitan ini, membebaskan pemaju daripada menghabiskan sebahagian besar masa mereka untuk mengkonfigurasi dan mengurus pelayan.

Saya menantikan lebih banyak inovasi dalam ruang ini, dan tidak sabar untuk melihat apa lagi yang akan kita lihat pada 2018!

Jika anda berminat menggunakan AppSync bersama dengan kerangka tanpa pelayan, lihat pengenalan hebat ini untuk menggunakan kedua-dua mereka bersama-sama.

Sekiranya anda ingin mengetahui lebih lanjut tentang AWS AppSync, saya akan mencadangkan melihat di laman web AppSync, dan dokumentasi untuk membina klien GraphQL.

Sekiranya anda ingin menyumbang kepada projek ini, anda boleh menyambung ke repo GitHub kami. Sekiranya anda mempunyai sebarang idea, jangan ragu untuk menghantar PR kepada kami, atau gunakan aplikasi ini sebagai permulaan untuk projek Graphical Native Reaction anda yang seterusnya!

Dan dalam masa yang sama, semak beberapa tutorial React Native yang lain di sini di Envato Tuts+!

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.