Koding Aplikasi Dengan GraphQL, React Native, dan AWS AppSync: Back-End

Indonesian (Bahasa Indonesia) translation by Hasannudin Amin (you can also view the original English article)

Final product image — What You'll Be Creating

Dalam tutorial ini, saya akan menunjukkan cara membuat dan berinteraksi dengan database GraphQL menggunakan AWS AppSync dan React Native. Aplikasi ini akan memiliki fungsi real-time dan offline, sesuatu yang kita dapatkan dari kotak dengan AppSync. Dalam posting ini kita akan mulai dengan mengatur back-end dengan AppSync.

Hal yang hebat tentang AppSync adalah ia menggunakan GraphQL — standar terbuka dan paradigma baru yang kuat untuk web dan ponsel back-end. Jika Anda ingin mempelajari lebih lanjut tentang GraphQL, bagaimana hal itu berbeda dari REST API, dan bagaimana hal itu dapat menjadikan pekerjaan Anda sebagai pengembang aplikasi lebih mudah, periksa beberapa konten GraphQL kami di sini di Envato Tuts +.

Apa itu GraphQL?
Pelajari prinsip-prinsip API GraphQL, bagaimana membandingkannya dengan REST, dan bagaimana merancang skema, mengimplementasikan kueri, menerapkan mutasi, dan banyak lagi.

Gigi Sayfan
18 Agustus 2017

JavaScript
Kursus Baru: Membangun API Dengan GraphQL
GraphQL dirancang untuk bekerja dengan data yang diwakili oleh grafik, dan memiliki sintaks query yang kuat untuk melintasi, mengambil, dan mem-mutasi data. Pelajari cara ...

Andrew Blackman
12 Feb 2018

GraphQL

Dalam posting ini, kita akan membangun aplikasi perjalanan yang disebut Cities. Pernahkah Anda menonton acara di saluran makanan favorit Anda dan melihat truk makanan yang mengagumkan, atau berbicara dengan seorang teman yang baru saja kembali dari perjalanan dan benar-benar bersemangat tentang Owl Bar yang ia kunjungi? Tidak perlu khawatir lagi, kami akan membangun aplikasi untuk Anda untuk tetap dengan semua tempat keren yang ingin Anda kunjungi, serta kota-kota di mana mereka berada.

Aplikasi ini akan mendemonstrasikan dan mengimplementasikan semua fungsi yang Anda perlukan untuk membangun aplikasi React Native dan GraphQL yang asli dan lengkap.

Lihat contoh proyek GitHub repo untuk melihat aplikasi yang sudah selesai dan untuk mengikutinya.

Tentang Teknologi

AppSync menawarkan cara mudah untuk bangun dan berjalan dengan server GraphQL waktu-nyata dan skalabel tanpa harus membuat dan mengelola semuanya sendiri.

Dalam konsol AppSync, kami akan melakukan segalanya mulai dari membuat skema GraphQL kami hingga menyediakan database dan resolver kami. Konsol ini juga memiliki Graphiql yang diatur sehingga kami dapat menguji dan menanyakan basis data kami tanpa pengaturan tambahan.

Kami akan menerapkan konfigurasi ini pada klien kami, yang akan memberi kami cara yang mulus untuk berinteraksi dengan endpoint GraphQL kami!

AppSync akan memungkinkan Anda untuk menggunakan salah satu dari tiga jenis resolver di luar kotak: DynamoDB, Elasticsearch, atau AWS Lambda. Kami akan menggunakan DynamoDB dalam tutorial ini.

Mulai

Hal pertama yang perlu kita lakukan adalah membuat aplikasi AppSync baru dan menambahkan Skema dasar kami.

Untuk memulai dengan AppSync, buka AWS Console dan pilih AWS AppSync dalam menu tarik-turun Services.

Setelah berada di dalam dasbor AppSync, kita perlu mengklik tombol Buat API:

Sekarang, kita akan memiliki opsi untuk memberi nama pada aplikasi (saya sebut mine TravelApp), dan memilih jenis skema (custom atau sample). Kami akan memilih opsi skema custom, lalu klik Create.

Layar selanjutnya akan menjadi dashboard untuk aplikasi baru. Kami akan segera melihat beberapa informasi yang berguna, termasuk URL untuk aplikasi kami serta mode otorisasi. Di sisi kiri, Anda akan melihat beberapa tautan: Schema, Queries, DataSources, dan Settings.

Lihatlah pilihan di sini sebelum Anda melanjutkan ke langkah berikutnya.

Membuat Skema dan Penyediaan Sumber Data

Hal berikutnya yang akan kita lakukan adalah membuat skema yang ingin kita gunakan untuk aplikasi kita. Sekali lagi, skema akan memiliki tipe City dan Location untuk memulai.

Dari editor, klik pada tab Skema, dan buat skema dasar berikut dengan dua jenis dan satu kueri dan klik Simpan:

type City {
  id: ID!
  name: String!
  country: String!
  locations: [Location]
}

type Location {
  id: ID!
  cityId: ID!
  name: String!
  info: String
}

type Query {
  fetchCity(id: ID!): City
}

schema {
  query: Query
}

Lampirkan Skema ke Basis Data

Sekarang setelah skema dasar dibuat, kita perlu melampirkan skema ini ke database!

AppSync membuat ini sangat mudah. Klik tombol Create Resources di sebelah kanan layar. Kami akan membutuhkan dua tabel basis data: satu untuk menampung kota-kota kami, dan satu lagi untuk menahan lokasi kami.

Pilih City, terima semua standar, dan klik Create. Anda akan melihat bahwa ini secara otomatis akan menambahkan beberapa pertanyaan yang berguna, mutasi, dan langganan ke skema kami!

Lanjutkan dan lakukan hal yang sama untuk sumber daya Location. Kami sekarang telah berhasil membuat dua tabel database yang sesuai dengan skema kami, dan juga beberapa kueri dasar, mutasi, langganan, dan resolver yang akan memetakan skema ke tabel tersebut (kita akan menjelajahi resolver di bagian berikutnya).

Sekarang mari kita lihat apa yang telah dibuat. Di menu sebelah kiri, klik Data Sources.

Anda sekarang harus melihat dua sumber data yang baru kita buat!

Jalankan Beberapa Pertanyaan Uji

Sekarang setelah kami memiliki Mutasi dan Langganan baru yang dibuat dalam Skema kami, mari tambahkan mereka ke definisi Skema kami.

Untuk melakukannya, gulir ke bagian bawah Skema dan perbarui definisi skema ke yang berikut:

schema {
  query: Query
  mutation: Mutation
  subscription: Subscription
}

Selanjutnya, kita bisa menguji semuanya dengan membuat mutasi dan kemudian query. Pada tab Kueri, buat mutasi berikut:

mutation createCity {
  createCity(
    input: {
      id: "00001"
      name: "Seattle"
      country: "USA"
    }
  ) {
      id
  }
}

Ini akan menambahkan catatan untuk Seattle ke meja kota, dengan ID 00001.

Kemudian, buat kueri untuk mengambil data itu:

query getCity {
  getCity(id: "00001") {
    id
    name
    country
  }
}

Ketika Anda mengklik tombol putar oranye, Anda dapat memilih untuk melakukan mutasi createCity atau kueri getCity. Jalankan keduanya dan Anda akan melihat data kota Seattle diambil dan ditampilkan di sisi kanan layar.

Jika Anda ingin melihat bagaimana data ini direpresentasikan dalam basis data, Anda dapat menjelajahi tabel kota DynamoDB yang ditautkan dari tab Data Sources.

Memecahkan Template Pemetaan

Anda mungkin bertanya-tanya bagaimana query memetakan ke database dengan mulus. Jawabannya adalah resolvers!

Jika Anda melihat sisi kanan tab Schema dashboard AppSync, Anda akan melihat bagian berjudul Data Types. Ini mencantumkan semua tipe data dalam Skema kami. Di sebelah kanan setiap bidang, kita melihat judul yang diberi judul Resolver.

Resolvers pada dasarnya adalah antarmuka antara skema dan database yang kita gunakan saat ini. Kita dapat menggunakan resolver untuk semuanya, mulai dari pengambilan dasar item hingga tindakan kompleks seperti kontrol akses berbutir halus.

Resolvers ditulis dalam DSL yang disebut Velocity Templating Language (VTL). AppSync akan secara otomatis menyediakan resolver dasar pada penciptaan sumber data, tetapi mereka sangat dapat dikonfigurasi. Pada titik ini, kita tidak perlu banyak mengubah resolver kita, tetapi mari kita lihat tiga tipe utama resolver yang mungkin perlu Anda kerjakan di dunia nyata. Ini terhubung ke operasi dasar berikut:

Mendapatkan satu item dari idnya
Mendapatkan daftar barang
Menempatkan item ke dalam database

Mendapatkan Item dengan ID

Di tab Data Types, di samping definisi skema, temukan getCity di bawah Query, dan klik CityTable.

Ini akan membawa Anda ke layar konfigurasi resolver. Dari layar ini, Anda akan melihat bahwa ada tiga bagian utama untuk resolver:

Nama sumber data
Minta template pemetaan
Template pemetaan tanggapan

Sumber data adalah tabel yang ingin Anda gunakan untuk berinteraksi.

request mapping template menggambarkan bagaimana database akan menangani permintaan.

Di sini, Anda dapat menulis template pemetaan Anda sendiri atau memilih dari pilihan templat yang sudah ada sebelumnya untuk tindakan dasar seperti mendapatkan atau meletakkan item, di antara hal-hal lainnya.

Di sini, Anda melihat template untuk mendapatkan item.

response mapping template menjelaskan cara menangani respons dari database.

Dalam template tanggapan kami, kami pada dasarnya hanya mengembalikan context.result dan membungkusnya dalam fungsi utilitas $utils.toJson. Ini hanyalah salah satu dari banyak utilitas pembantu yang akan mengaburkan beberapa boiler VTL. Lihat daftar lengkap metode utilitas dalam dokumentasi resmi.

Seiring aplikasi Anda menjadi lebih kompleks, kunci untuk semakin mahir di AppSync semakin nyaman dengan bekerja dengan templat pemetaan ini. Saya butuh beberapa jam untuk membungkus kepala saya tentang bagaimana semuanya bekerja, tetapi setelah bereksperimen dengan itu untuk sementara waktu saya bisa melihat betapa kuatnya itu.

Kami tidak memiliki ruang di sini untuk masuk ke semua detail template pemetaan penyelesai, tetapi Anda dapat memeriksa Referensi Pemetaan Penyelesaian Referensi Template dan Pemetaan Referensi Konteks Pemetaan untuk mempelajari lebih lanjut tentang mereka.

Untuk saat ini, kami akan melanjutkan dan menyelesaikan skema kami.

Menyelesaikan Konfigurasi AppSync

Kami telah menyelesaikan skema kami, tetapi kami memiliki satu langkah terakhir sebelum kami dapat mulai berinteraksi dengan endpoint GraphQL baru kami dari aplikasi React Native kami!

Karena kami akan menyimpan semua lokasi kami dalam satu tabel, tetapi menanyakannya berdasarkan kota yang sedang kami lihat, kami perlu membuat indeks sekunder untuk memungkinkan kami melakukan kueri lokasi secara efisien dengan cityId tertentu.

Untuk membuat indeks sekunder, buka Data Sources dan klik pada tautan Tabel Location.

Ini akan membawa Anda ke tampilan tabel DynamoDB untuk Tabel Lokasi. Di sini, klik tab Indexes dan buat indeks baru dengan kunci partisi cityId.

Anda dapat menurunkan unit kapasitas baca dan tulis ke 1 untuk keperluan tutorial ini.

Selanjutnya, kita perlu memperbarui listLocations kami untuk menerima cityId ini sebagai argumen, jadi perbarui kueri untuk listLocations ke yang berikut:

1	type Query {
2	// all previous queries omitted
3	listLocations(cityId: ID!, first: Int, after: String): LocationConnection
4	}

Sekarang, kita perlu memperbarui listLocations kami untuk menggunakan indeks cityId baru ini! Ingat, kami benar-benar hanya ingin listLocations untuk mengembalikan array lokasi untuk kota yang kami lihat, sehingga penyelesai listLocations akan mengambil cityId sebagai parameter dan hanya mengembalikan lokasi untuk kota tersebut.

Untuk mendapatkan ini bekerja, mari kita perbarui template pemetaan permintaan untuk listLocations menjadi berikut:

{
    "version": "2017-02-28",
    "operation": "Query",
    "index": "cityId-index",
    "query": {
        "expression": "cityId = :cityId",
        "expressionValues": {
            ":cityId": {
                "S": "$ctx.args.cityId"
            }
        }
    },
    "limit": #if($context.arguments.limit) $context.arguments.limit #else 10 #end,
    "nextToken": #if($context.arguments.nextToken) "$context.arguments.nextToken" #else null #end
}

Kesimpulan

Dalam tutorial ini, kami telah membuat back-end untuk aplikasi React Native dengan endpoint GraphQL-nya sendiri. Kami juga melihat cara membuat dan memperbarui resolver dan bekerja dengan skema AppSync.

Sekarang setelah selesai mengkonfigurasi semuanya di konsol, kita dapat melanjutkan dan membuat klien React Native kami! Pantau terus untuk posting berikutnya, di mana saya terjun ke aplikasi seluler React Native dan menunjukkan kepada Anda cara mengaitkan React Native hingga AppSync.

Sementara itu, periksa beberapa posting kami yang lain tentang React Native app development!

Beberapa gambar digunakan dengan kredit dari Amazon Web Services, Inc.