Menguasai autentikasi API Web dengan Parse – Javascript SDK dan GraphQL

Banyak aplikasi, terutama situs web, perlu membatasi akses ke konten mereka, dan memiliki akun pengguna yang hanya menampilkan informasi yang relevan dengan pengguna tersebut dengan cara yang aman adalah cara yang paling populer untuk melakukannya.

Hari ini kita akan belajar cara mengimplementasikan fungsionalitas Login ke halaman HTML yang sudah ada, dengan hanya menulis sedikit kode dan membuat Parse melakukan semua pekerjaan berat untuk Anda, dan untuk melakukannya, saya memilih templat Formulir Login yang dapat Anda unduh secara gratis.

Kami akan menggunakan dua teknologi berbeda yang dapat Anda pilih: Javascript SDK dan GraphQL melalui Javascript.

GraphQL adalah teknologi baru yang baru saja dirilis dan tujuan saya adalah membandingkan kedua cara untuk melakukan hal yang sama, sehingga Anda dapat memilih salah satu yang paling Anda sukai.
PERINGATAN SPOILER!! Saya yakin Anda akan lebih menyukai GraphQL…

Yang sudah memiliki semua file yang diperlukan untuk menampilkan file secara visual tetapi tidak memiliki fungsionalitas, yang akan kita tambahkan.

Jika Anda ingin tahu lebih banyak tentang GraphQL, lihatlah tulisan ini: Apa itu GraphQL

Ini akan menjadi artikel yang cukup panjang, jadi izinkan saya menunjukkan kepada Anda apa yang akan Anda pelajari, per bab:

1. Menyiapkan Hosting Web Anda di Back4app
2. Mengaktifkan penggunaan GraphQL
3. Menerapkan situs web pertama Anda
4. Membuat file Javascript pertama Anda
5. Menanamkan Parse SDK
6. Mengonfigurasi dan menerapkan SDK dalam kode Anda
7. Menambahkan pengguna secara grafis
8. Gunakan Javascript SDK untuk mendaftarkan pengguna
9. Menguji pendaftaran dengan situs web Anda (nilai yang dikodekan)
10. Menulis kode untuk membaca formulir dan menerapkannya ke kode Javascript Anda
11. Menguji pendaftaran dengan situs web Anda (nilai dinamis)
12. Membuat proses Log In dengan Javascript SDK
13. Menguji proses login dengan situs web Anda (nilai dinamis)
14. Kesimpulan dari bagian Javascript SDK
15. Pengantar ke GraphQL
16. Apa yang Anda perlukan untuk menggunakan GraphQL
17. Menginstal alat yang Anda perlukan
18. Penjelasan singkat tentang bagaimana kita akan membuat kode untuk frontend
19. Menggunakan modul NPM pada kode NodeJS Anda
20. Pengantar Kueri dan Mutasi di GraphQL
21. Pertanyaan
22. Mutasi
23. Membuat metode GraphQL SingUp Anda sendiri
24. Membuat metode LogIn GraphQL Anda sendiri
25. Gunakan Browserify untuk mengonversi kode NodeJS Anda ke kode yang kompatibel dengan frontend
26. Sertakan kode tersebut ke dalam berkas HTML Anda
27. Kode Javascript berfungsi untuk memanggil kode yang dihasilkan Browserify
28. Menguji Pendaftaran dan Login GraphQL Anda
29. Kesimpulan dari bagian GraphQL

1. Langkah Pertama Pertama

Langkah pertama adalah membuat Aplikasi Anda di Back4app jika Anda belum memilikinya. Anda dapat memeriksa langkah-langkah untuk membuatnya menggunakan dokumen ini.

Langkah ini umum untuk kedua teknologi tersebut, jadi apa pun yang Anda pilih, Anda harus melakukannya.

Setelah membuat Aplikasi, kita perlu mengatur fitur Web Hosting. Ya. Anda dapat meng-host situs web Anda dengan konten statis di Back4app secara gratis. Hebat ya?

Setelah Aplikasi Anda dibuat, buka Pengaturan Server:

Dan di bawah Web Hosting dan Live Query, klik Pengaturan:

Sekarang aktifkan Back4app Hosting dan pilih nama domain yang bagus untuk aplikasi Anda. Anda dapat langsung mengakses domain tersebut di dalam back4app.io, atau Anda dapat membuat record CNAME pada DNS Anda yang mengarah ke domain tersebut jika Anda mau:

Sekarang Anda siap untuk mulai men-deploy beberapa kode.

2. Bagaimana dengan GraphQL?

Jika Anda ingin menggunakan GraphQL, ada satu langkah lagi yang harus dilakukan. Jika Anda berencana untuk menggunakan Javascript SDK saja, Anda dapat menggunakan versi Parse apa pun, tetapi mengapa tidak menggunakan yang terbaru dan terhebat?

Buka Pengaturan Server:

Dan di bawah Pengaturan di Kelola Server Parse:

Pilih versi yang lebih dari 3.5.0. Di Back4app saya menggunakan 3.6.0:

Sekarang Anda seharusnya sudah mengaktifkan GraphQL dan kita siap menggunakannya!
Oh, asal tahu saja, Anda bisa menggunakan GraphQL dan SDK pada aplikasi yang sama. Tidak perlu memilih.

Jika Anda hanya tertarik dengan GraphQL, Anda bisa menggulir ke bab 15 tutorial ini sekarang.

3. Menerapkan Situs Web Pertama Anda

Sekarang setelah kita mengatur fitur Web Hosting, kita dapat men-deploy situs web kita.
Langkah ini juga umum dilakukan pada kedua teknologi tersebut.
Situs web Anda belum memiliki fungsi apa pun, tetapi rasanya menyenangkan melihatnya berfungsi untuk pertama kalinya, jadi mari kita lakukan.

Buka Pengaturan Server sekali lagi:

Dan sekarang pilih Pengaturan di bawah Kode Cloud:

Di sana Anda akan menemukan dua folder: Cloud dan Publik.

Cloud adalah untuk men-deploy Cloud Code, yaitu kode NodeJS yang berjalan dari server Back4app, melakukan semua beban berat pemrosesan untuk aplikasi Anda dan membawa banyak keuntungan seperti menghemat baterai dan paket data di ponsel, karena ponsel itu sendiri tidak perlu memproses banyak atau mengambil beban penuh data, hanya mengandalkan hasil akhir pemrosesan, yang dikirimkan oleh server Back4app.

Publik adalah untuk menyebarkan konten statis seperti HTML, CSS dan file Javascript statis. Inilah yang kami minati saat ini.
Pilih folder tersebut dan klik tombol +TAMBAH di atas, dan tambahkan file HTML dan CSS untuk template kita yang telah Anda unduh dari situs web pada bab pertama.

Setelah memilih berkas-berkas tersebut, tekan tombol Deploy dan Anda akan melihat berkas-berkas tersebut di dalam folder Public:

Dan sekarang saatnya untuk melakukan pengujian.
Jika Anda menekan URL yang Anda tetapkan di Web Hosting, Anda akan melihat situs web baru Anda yang mengkilap sekarang berjalan secara gratis:

4. Tambahkan Beberapa Kecerdasan

Situs web baru yang mengkilap dan mewah sudah aktif dan berjalan dan itu hanya membutuhkan waktu berapa lama? 2 menit? Penampilan yang bagus mengalahkan yang gratis, Internet!
Dan apakah saya sudah mengatakan bahwa situs web ini sepenuhnya aman dan sudah dilengkapi dengan HTTPS? Karena kita tidak membayar untuk sertifikat ketika Back4app akan memberikannya secara gratis, bukan?

Sekarang saatnya untuk mendapatkan beberapa kecerdasan dalam hal itu. Dan bagaimana jika kita membuatnya hanya membutuhkan waktu 2 menit? Saya suka yang cerdas dan saya suka yang cepat.

Pilihlah IDE favorit Anda dan mari kita mulai dengan Javascript. Visual Studio Code untukku, tolong. Dan espresso dengan itu.

Mulai sekarang saya akan fokus pada Javascript SDK saja, dan kemudian, pada GraphQL saja.

Buat sebuah file baru bernama Parse.js dan kita siap untuk memulai.

5. Menambahkan Kerangka Kerja Parse

(Hanya untuk Javascript SDK)

Parse membuatnya sangat mudah untuk menerapkan framework-nya. Pertama-tama Anda harus menginstansiasi framework Javascript dengan menambahkan baris berikut ini di bagian Head pada file index.html Anda:

<script src="https://npmcdn.com/parse/dist/parse.min.js"></script>

Sekarang kerangka kerja Parse (yang diperkecil) lengkap dapat diakses dari kode Javascript Anda dan kita dapat menggunakan semuanya.

6. Menjalankan mesin Parse

(Hanya untuk Javascript SDK)

Sekarang kita sudah memiliki akses ke framework Parse, tetapi kita perlu menjalankannya sebelum menjalankannya.

Kita perlu mengidentifikasi Aplikasi kita untuk diurai dan cara kita melakukannya adalah dengan mengatur AppId dan Javascript Key untuk Aplikasi kita, bersama dengan URL server yang memberi tahu aplikasi kita yang kita jalankan di Back4app.

Untuk melakukannya, buka Pengaturan Server:

dan di Pengaturan di bawah Pengaturan Inti:

Anda akan menemukan semua informasi yang Anda butuhkan:

Salin informasi tersebut dan mari kita tempelkan ke dalam file Parse.js kita seperti ini:

Parse.inisialisasi("YourAppIdHere", "YourJavascriptKeyHere");
Parse.serverURL = 'YourParseAPIAddressHere'

Parse.initialize("5aYJZXz4W3po8soDVSF47Ufa5bztsSJ1T4VQB6TH", "SchM9sm5W6TpPBr8zyHOwOYAGyPTYf66qxSUCsvE");
Parse.serverURL = 'https://parseapi.back4app.com/';

Sekarang aplikasi kita memiliki akses penuh ke Parse dan Parse mengetahui pengaturan kita sehingga dapat beroperasi.
Lampu hijau. Kecepatan penuh!

7. Tetapi saya hanya memiliki beberapa pengguna…

Jika aplikasi Anda tidak membutuhkan pengguna untuk mendaftar dan Anda lebih suka mengelolanya secara manual, Anda bisa mendapatkan kelas Pengguna di Browser Database pada Dasbor Parse, dengan menekan tombol Tambah Baris:

Namun secara realistis, aplikasi Anda mungkin akan berkembang seiring berjalannya waktu dan memiliki pengguna yang dapat mendaftar sendiri ke sistem akan membantu.

8. Tidak ada pengguna? Tidak masalah! signUp() akan membantu!

(Hanya untuk Javascript SDK)

Pada awalnya, aplikasi Anda tidak akan memiliki pengguna di dalamnya, jadi kita harus menyediakan cara bagi pengguna untuk mendaftar.

Situs web kita sudah memiliki formulir yang indah untuk itu. Mari kita buat itu bekerja, bukan?
Dan bagaimana jika saya katakan bahwa kita dapat melakukannya dengan kurang dari 12 baris kode? Kedengarannya lebih baik?

Kelas Parse.User memiliki tiga properti dasar yang dapat Anda atur. Anda dapat mengatur lebih banyak lagi jika Anda menginginkan atau membutuhkannya, tetapi ketiganya sudah dibuat untuk kenyamanan dan dua dari ketiganya bersifat wajib:

• nama pengguna (wajib)
• kata sandi (wajib)
• email (opsional)

Mari kita tambahkan pengguna uji coba ke basis data kita hanya untuk memeriksa operasinya. Tambahkan ini ke berkas Parse.js Anda:

function singnUp(){
    var user = new Parse.User();
    user.set("username", "alex"); // menetapkan nilai dari formulir Nama Pengguna ke nama pengguna properti
    user.set("password", "abc123"); // menyetel nilai dari formulir Password ke properti password
    user.set("email", "[email protected]"); // menyetel nilai dari form Email ke properti email
    mencoba {
        user.signUp(); // Semuanya berhasil dan pengguna masuk
    } catch (error) {
        alert("Error: " + error.code + " " + error.message); // Ups.. terjadi kesalahan
    }
}

Ini akan membuat pengguna baru dengan nilai yang sudah dikodekan:

nama pengguna: alexk
kata sandi: abc123
email: [email protected]

Kita akan mempelajari cara mengambil nilai-nilai tersebut dari formulir lebih lanjut pada artikel ini, tetapi untuk pengguna uji coba ini, ini sudah cukup.

Sekarang buka file index.html Anda dan cari baris ini:

<input type="submit" class="button" value="Daftar">

Dan ubahlah menjadi seperti ini:

<input type="submit" class="button" value="Daftar" onclick="singnUp()">

Pada dasarnya apa yang kita lakukan di sini adalah mengatur event onClick untuk menjalankan fungsi signUp yang baru saja kita kodekan.

Pindahkan kedua berkas ke folder Cloud Code Public (berkas Parse.js yang baru dan berkas index.html yang telah diubah) seperti yang telah Anda pelajari di atas dan buka kembali situs web di peramban Anda.

9. Menguji… Menguji… 123…

Waktunya untuk melakukan pengujian, sayang! Biarkan kodenya berbicara dengan sendirinya!

Pergi ke bagian Daftar dan Anda tidak perlu mengisi apa pun karena kita tidak mengirimkan data nyata, hanya tes yang sudah dikodekan, dan klik tombol Daftar:

dan jika semuanya berjalan dengan baik, Anda akan melihat di Dasbor Parse Anda, Anda sekarang memiliki pengguna tersebut bersama dengan Sesi baru untuk pengguna tersebut:

10. Hore!! Sekarang mari kita membuatnya lebih pintar…

(Javascript SDK & GraphQL)

Sekarang kita dapat mendaftarkan pengguna, mari kita buat fungsi pendaftaran yang beroperasi secara penuh.
Kita perlu membaca nilai dari formulir untuk memasukkannya ke dalam database dan untuk itu, kita akan menggunakan metode javascript:

document.getElementById("idOfTheInput").value

Saya menemukan saat menulis artikel ini bahwa template yang kami gunakan memiliki masalah kecil. ID harus unik agar kita dapat mengambil nilai yang benar, dan template kita memiliki beberapa pengulangan, mungkin karena penyalinan dan penempelan kode oleh pembuatnya, jadi mari kita ubah.

Buka berkas HTML Anda dan temukan baris berikut ini di bagian sign-up-htm:

<input id="user" type="text" class="input">
<input id="pass" type="password" class="input" data-type="password">
<input id="pass" type="password" class="input" data-type="password">
<input id="lulus" type="text" class="input">

Perhatikan atribut id untuk baris-baris tersebut diulang beberapa kali dalam kode. Mari kita ubah menjadi unik:

<input id="nama pengguna" type="text" class="input">
<input id="password" type="password" class="input" data-type="password">
<input id="passwordverify" type="password" class="input" data-type="password">
<input id="email" type="text" class="input">

    var username = document.getElementById("username").value;
    var kata sandi = document.getElementById("kata sandi").value;
    var passwordverify = document.getElementById("passwordverify").value;
    var email = document.getElementById("email").value;

    if (password !== passwordverify){
        peringatan ('Kata sandi tidak cocok')
        return
    }

    user.set("username", "alexk"); // menetapkan nilai dari form Username ke properti username
    user.set("password", "abc123"); // menyetel nilai dari formulir Kata Sandi ke properti kata sandi
    user.set("email", "[email protected]"); // menyetel nilai dari formulir Email ke properti email

    user.set("username", alexl); // menyetel nilai dari formulir Username ke username properti
    user.set("password", password); // menyetel nilai dari formulir Password ke properti password
    user.set("email", email); // menyetel nilai dari formulir Email ke properti email

11. Waktunya menguji lagi. Sekarang yang sebenarnya.

12. Saatnya Login, sayang!

(Hanya untuk Javascript SDK)

function logIn(){
    var user = document.getElementById("user").value;
    var pass = document.getElementById("pass").value;
}

Parse.User.logIn(user, pass).then(() => {
    // Hore! Pengguna masuk
    alert('Hore! Pengguna masuk!');
});

Parse.User.logIn(user, pass).then(() => {
    // Hore! Pengguna berhasil masuk
    alert('Hore! Pengguna berhasil masuk!');
}).catch(function(error){
    // Ups.. ada yang salah terjadi
    alert("Error: " + error.code + " " + error.message);
});

13. Dan noooow….

14. Kesimpulan dari bagian Javascript SDK

15. Biarkan GraphQL masuk

Jika Anda bersemangat dengan Javascript SDK, sekarang ambil popcorn karena pertunjukan akan segera dimulai.

Back4app sekarang mendukung GraphQL, yang berarti kami mengikuti tren teknologi fashion terbaru dan terhebat, dan sekarang Parse lebih pintar dari sebelumnya!

Anda dapat mengandalkan GraphQL Playground yang berfungsi penuh dengan pelengkapan otomatis (ya!!!) untuk menghasilkan kueri yang akan kita lakukan.

Selain itu, kita juga dapat menentukan dengan tepat apa yang ingin kita ambil, yang berarti payload yang lebih kecil, membuat pengiriman data Anda lebih cepat ke pengguna akhir dan API jauh lebih mudah untuk dipelihara dari waktu ke waktu.

Oke. Sudah cukup bicara. GraphQL sangat luar biasa jika saya tidak menghentikan diri saya, saya akan terus menulis tentangnya dan tidak menunjukkan cara menggunakannya.

16. Apa yang akan kita butuhkan

(Hanya GraphQL)

Jika Anda belum mengubah versi Parse Anda menjadi setidaknya 3.5.0 (3.6.0 di Back4app adalah yang paling awal yang mendukung GraphQL), lanjutkan ke bagian 2 artikel ini dan lakukan itu.

Kita perlu menginstal NPM agar dapat menggunakan modul-modulnya.
Modul-modul tersebut ditulis di NodeJS dan awalnya dirancang untuk pemrograman backend, jadi kita harus mengubahnya.
Saya tidak akan menunjukkan kepada Anda cara menginstal NPM, karena tutorial di situs web di atas sudah membahasnya secara ekstensif.
Namun, saya akan menunjukkan kepada Anda bagaimana cara menggunakannya sehingga kita dapat menghemat banyak usaha saat melakukan coding.

Siap? Jadi, instal semua alat tersebut, kencangkan sabuk pengaman Anda dan mari kita pergi!

17. Menginstal klien GraphQL dan Browserify

(Hanya GraphQL)

GraphQL memiliki beberapa klien yang tersedia untuk Anda gunakan. Karena saya tidak bisa memilih salah satu (karena semuanya cukup bagus), saya memutuskan untuk memilih yang paling mudah untuk dikonfigurasi pada tutorial pertama ini, dan menggunakan yang lain pada tutorial berikutnya sehingga kita dapat membandingkannya.

Saya menemukan bahwa yang paling mudah diatur adalah graphql-request, yang dapat Anda instal dengan membuka terminal, masuk ke folder tempat Parse.js kita berada dan mengetik:

npm install graphql-request

Jika instalasi berhasil, Anda akan mendapatkan tampilan seperti ini:

Kita juga dapat menginstal alat yang disebut Browserify.
Browserify melakukan transisi modul NPM untuk digunakan di front end (browser Anda). Ingat ketika saya mengatakan bahwa modul NPM pada awalnya dirancang untuk penggunaan backend? Alat ini akan membuatnya tersedia di frontend dengan sedikit usaha.
Saya suka menginstalnya secara global (tombol -g) sehingga saya dapat menggunakannya dari mana saja:

npm install -g browserify

Dan sekali lagi, jika semuanya berjalan dengan baik, Anda akan mendapatkan tampilan seperti ini:

Sekarang klien GraphQL sudah terinstal dan kita bisa mengonversinya untuk penggunaan frontend. Hanya butuh waktu 2 menit untuk melakukannya, jadi kita mengalami kemajuan pesat.

18. Bagaimana tepatnya ini akan bekerja?

(Hanya untuk GraphQL)

Pada dasarnya, kita akan melakukannya:

1. Menulis beberapa kode NodeJS menggunakan modul NPM
2. Mengonversinya menjadi kode yang kompatibel dengan frontend menggunakan Browserify
3. Mengekspor kode tersebut sehingga kita dapat memanggilnya dari berkas lain
4. Memanggil kode tersebut dari kode Javascript kita

Perintah untuk melakukan browserify adalah:

browserify inputFile.js -o outputFile.js

OutputFile.js akan berisi kode yang kompatibel dengan frontend kita, jadi mari kita lanjutkan, buat inputFile.js, dan buka di IDE favorit kita.

19. Beberapa kode NodeJS

(Hanya untuk GraphQL)

Kita akan mulai dengan menambahkan modul NPM ke dalam kode kita dengan cara mewajibkannya.

const { GraphQLClient } = require('graphql-request');

Dan buatlah ekspor global dengan nama yang akan kita gunakan untuk memanggil fungsi kita, dalam hal ini, signUp:

global.singUp = function() {

}

Dengan demikian, kita dapat mulai menambahkan kode ke fungsi singUp.
Mari kita mulai dengan menambahkan URL endpoint kita, yang dapat Anda ambil dari GraphQL Playground Anda:

const endpoint = 'https://parseapi.back4app.com/graphql';

Dan karena kita perlu mengautentikasi, buatlah klien GraphQL dengan mengoper URL tersebut sebagai parameter, bersama dengan header autentikasi: X-Parse-Application-ID dan X-Parse-Javascript-Key. Kedua parameter tersebut akan memiliki AppId dan Javascript Key yang telah Anda pelajari cara mengambilnya pada langkah 6.

const { GraphQLClient } = require('graphql-request')

global.singUp = function() {
    constendpoint = 'https://parseapi.back4app.com/graphql';
    
    constgraphQLClient = newGraphQLClient(endpoint, {
        header: {
            "X-Parse-Application-Id": "5aYJZXz4W3po8soDVSF47Ufa5bztsSJ1T4VQB6TH",
            "X-Parse-Javascript-Key": "pLuH6zKGl8thmIJfWFjvXll4B2YTAnlhlpAGVuoq"
        },
    });
}

Sekarang saatnya kita menulis beberapa kueri dan mutasi GraphQL.

20. Query dan Mutasi, Umum atau Khusus

(Hanya untuk GraphQL)

Pada saat penulisan dokumen ini, Back4app dan Parse bekerja dengan Query dan Mutasi. Metode-metode baru dapat dikembangkan dari waktu ke waktu, tetapi mari kita bahas kedua hal ini.

Query digunakan ketika hanya mengambil data dari server.

Mutasi digunakan ketika Anda mengubah data di server, yang dapat atau tidak dapat mengambil hasil.

Jadi, jika Anda hanya mengonsumsi informasi, Anda harus menggunakan Query, dan jika Anda menambah atau mengubah informasi, Anda harus menggunakan Mutation.

Kita akan mulai dengan Query sederhana dan berkembang ke mutasi setelah itu.

Ketika berbicara tentang hal itu, kita memiliki metode Spesifik dan Generik dalam GraphQL, masing-masing dengan kelebihan dan kekurangannya.

Metode generik memungkinkan Anda untuk beroperasi di kelas apa pun. Jika Anda membuat sebuah query generik misalnya, Anda dapat mengambil data dengan menentukan kelas yang Anda inginkan. Ini luar biasa karena Anda dapat menggunakan sintaks yang sama untuk hampir semua hal, dan ketika menggunakan Mutasi, Anda dapat membuat kelas dan objek yang tidak ada pada awalnya.

Kekurangannya adalah karena Anda tidak memiliki skema untuk metode Generik, Anda tidak dapat mengandalkan Pelengkapan Otomatis sehingga Anda harus tahu apa yang Anda lakukan.
Contoh metode Generik mendapatkan dan menemukan.
Mutasi Generik adalah memperbarui, menghapus, atau membuat.

Di sisi lain, metode spesifik memiliki Skema sehingga hanya dapat digunakan oleh Kelas yang sudah ada sebelumnya. Ini adalah kelemahannya.
Tetapi menggunakan metode Spesifik membawa tingkat kedahsyatan lain, memungkinkan kita mengandalkan Pelengkapan Otomatis dan memiliki sumber daya yang jauh lebih kuat untuk mengambil data kita.
Query spesifik akan dimulai dengan get dan find, dan memiliki nama kelas di sebelahnya: findPerson, getPerson, dan seterusnya.
Mutasi spesifik dimulai dengan create, update, dan delete, dan memiliki nama kelas berikutnya: createPerson, getPerson, deletePerson:

21. Pertanyaan

(Hanya untuk GraphQL)

Mari kita membuat Query sederhana untuk bermain dengan GraphQL.
Pada Dasbor Parse Anda, buka Konsol API, lalu Konsol GraphQL.
Ketik kueri berikut ini menggunakan kueri Spesifik untuk menemukan Pengguna. Kapan saja, Anda dapat menekan CTRL + Spasi (Windows) atau OPTION + Spasi (Mac) untuk menggunakan Pelengkapan Otomatis saat Anda mengetik.

Kueri dapat bervariasi, tergantung pada versi Parse yang Anda pilih:

Parse 3.7.2:

kueri {
    benda-benda{
        temukan_Pengguna{
            hasil{
                nama_pengguna
                email
            }
        }
    }
}

Parse 3.8:

query {
  pengguna{
      hasil{
          nama pengguna
          email
      }
  }
}

Parse 3.9:

query {
  pengguna{
      hasil{
          nama pengguna
          email
      }
  }
}

Klik tombol Play:

Anda akan melihat User yang telah kita buat dengan Javascript SDK. Jika Anda melewatkan bagian tersebut, cukup tambahkan beberapa Pengguna seperti yang dijelaskan di bab 7 dan coba jalankan Query Anda lagi. Anda akan melihat hasil seperti ini:

Kita baru saja menggunakan kueri spesifik find_User untuk menemukan semua pengguna, mengambil nama pengguna dan email mereka. Kita telah menentukan dengan tepat apa yang ingin kita ambil, menghasilkan muatan yang lebih kecil, sambil mengandalkan Pelengkapan Otomatis untuk membantu kita mengembangkannya sehingga selama prosesnya kita tahu operasi mana yang tersedia.

Luar biasa, bukan?

Ayo kita buat yang lebih baik lagi!

22. Mutasi

(Hanya untuk GraphQL)

Mari kita buat mutasi GraphQL kita dengan metode khusus signUp untuk beroperasi seperti metode signUp di Javascript.

Mutasi akan menjadi seperti ini:

Parse 3.7.2

mutasi{
  users{
    signUp(fields: {
      nama pengguna: "john"
      kata sandi: "123456"
      email: "[email protected]"
    }){
      objectId
    }
  }
}

Parse 3.8

mutasi SignUp {
  signUp(fields:{
    nama pengguna: "somefolk"
    kata sandi: "beberapa kata sandi"
  }){
    objectId
    createdAt
  }
}

Parse 3.9

mutasi SignUp {
  signUp(fields:{
    nama pengguna: "somefolk"
    kata sandi: "beberapa kata sandi"
  }){
    id
    createdAt
    sessionToken
  }
}

Jalankan dan periksa apakah pengguna telah ditambahkan ke kelas User di Database Browser.

Yay! Sekarang mari kita coba untuk menjalankan kode kita.

23. Metode pendaftaran kita sendiri dengan GraphQL

(Hanya GraphQL)

Untuk metode signUp javascript kita, kita akan menggunakan Mutasi yang hampir sama dengan yang kita gunakan pada GraphQL Playground, tetapi ketika di sana kita menggunakan nilai yang sudah dikodekan, di sini kita harus mengatur variabel untuk mengasumsikan nilai yang diketikkan oleh pengguna pada formulir.

Untuk menggunakan variabel pada klien GraphQL yang kita gunakan, kita harus terlebih dahulu menentukan nama dan tipe variabel pada metode. Kita akan mengoper 3 variabel untuk metode signUp: username, password, dan email, yang semuanya berupa string, sehingga metode kita akan menjadi singUp:

const signUpMutasi = /* GraphQL */
`
mutasi signUp($username: String! $password: String! $email: String!){
    
}
`

Kemudian kita harus menggunakan variabel-variabel tersebut di dalam metode create_User, seperti ini:

Parse 3.7.2

        
        users{
            signUp(fields: {
              nama pengguna: $username
              kata sandi: $kata sandi
              email: $email
            }){
              objectId
            }
        }

Parse 3.8

        
        users{
            signUp(fields: {
              nama pengguna: $username
              kata sandi: $kata sandi
              email: $email
            }){
              objectId
            }
        }

Parse 3.9

        
        users{
            signUp(fields: {
              nama pengguna: $username
              kata sandi: $kata sandi
              email: $email
            }){
              id
            }
        }

Dan terakhir, tetapkan nilai untuknya dalam objek JSON yang berbeda, yang akan diteruskan sebagai parameter bersama dengan Mutasi:

const variables = {
        nama pengguna: formUsername,
        kata sandi: formKata sandi,
        email: formEmail
    }

Sekarang, perhatikan bahwa saya memiliki 3 nilai di sana, yaitu formUsername, form Password, dan formEmail yang akan saya ambil dari form dan saya berikan ke fungsi singUp, jadi saya harus menspesifikasikan nilai tersebut pada parameter fungsi:

global.singUp = function(formUsername, formPassword, formEmail)

Dan kita sudah siap!

Berikut adalah metode lengkapnya:

const { GraphQLClient } = require('graphql-request')

global.signUp = function(formUsername, formPassword, formEmail) { 
 
    const endpoint = 'https://parseapi.back4app.com/graphql'

    const graphQLClient = new GraphQLClient(endpoint, {
        header: {
            "X-Parse-Application-Id": "5aYJZXz4W3po8soDVSF47Ufa5bztsSJ1T4VQB6TH",
            "X-Parse-Master-Key": "pLuH6zKGl8thmIJfWFjvXll4B2YTAnlhlpAGVuoq"
        },
    })

    const signUpMutation = /* GraphQL */
    `
    mutasi signUp($username: String! $password: String! $email: String!){
        users{
            signUp(fields: {
                nama pengguna: $nama pengguna
                kata sandi: $kata sandi
                email: $email
            }){
                objectId
            }
        }
    }
    `

    const variables = {
        nama pengguna: formUsername,
        kata sandi: formKata sandi,
        email: formEmail
    }

    const data = graphQLClient.request(signUpMutasi, variables).then(data => {
        alert('Hore! Pengguna telah dibuat!')
    }).catch(error => {
        alert('Kesalahan: ' + error.code + ' ' + error.message)
    })
    
}

24. Dan karena kita berada di sini… Masuk..

(Hanya untuk GraphQL)

Karena saya sudah menjelaskan setiap langkah dari mutasi singUp, saya hanya akan meninggalkan kode untuk metode logIn, yang mengikuti prinsip-prinsip yang sama persis tetapi menggunakan mutasi khusus logIn:

mutasi logIn($username: String! $password: String!){
  users{
    logIn(username: $username password: $password){
    	sessionToken  
    }
  }
}

Dan kode lengkapnya adalah:

global.logIn = function(formUsername, formPassword){
    
    const endpoint = 'https://parseapi.back4app.com/graphql'

    const graphQLClient = new GraphQLClient(endpoint, {
        header: {
            "X-Parse-Application-Id": "5aYJZXz4W3po8soDVSF47Ufa5bztsSJ1T4VQB6TH",
            "X-Parse-Master-Key": "pLuH6zKGl8thmIJfWFjvXll4B2YTAnlhlpAGVuoq"
        },
    })

    const logInMutasi = /* GraphQL */
    `
    mutasi logIn($username: String! $password: String!){
        users{
            logIn(username: $username password: $password){
                sessionToken  
            }
        }
    }
    `

    const variabelLogIn = {
        username: formUsername,
        kata sandi: formKata sandi
    }

    const data = graphQLClient.request(logInMutasi, variablesLogIn).then(data => {
        alert('Hore! Pengguna berhasil masuk!')
    }).catch(error => {
        alert('Kesalahan : ' + error.code + ' ' + error.message)
    })
}

25. Browserifying (katakanlah apa?)

(Hanya untuk GraphQL)

Ingat pada bab 18 saya memberi Anda perintah untuk Broserify (alias mengubah modul NPM kita menjadi kompatibel dengan frontend)?
Jika tidak, ini dia lagi:

browserify inputFile.js -o outputFile.js

Mari kita jalankan di inputFile.js dan keluarkan ke file bernama graphql.js:

browserify inputFile.js -o graphql.js

Jika semuanya berhasil, seharusnya kita tidak akan mendapatkan output apapun:

Mudah sekali, bukan?

26. Memasukkan kode baru kita yang mengkilap pada HTML

(Hanya untuk GraphQL)

Di dalam tag kepala berkas HTML kita, sertakan berkas graphql.js yang telah dibuat.
Dan karena Anda sudah berada di sana, buat juga berkas kosong baru bernama Parse.js dan sertakan juga. Kita akan menggunakannya untuk memanggil metode-metode GraphQL kita:

<script src="./graphql.js"></script>
<script src="./Parse.js"></script>

Perhatian: Untuk berjaga-jaga jika Anda melewatkan bagian Javascript pada tutorial ini, silakan kembali ke bab 10 dan ubah ID tag HTML seperti yang dijelaskan di sana. Kita akan membutuhkan bagian tersebut untuk mengambil nilai dari formulir.

27. Tunjukkan beberapa aksi!

(Hanya untuk GraphQL)

Kita telah melakukan banyak kemajuan sampai di sini, ya? Mari tambahkan beberapa kode untuk mendapatkan beberapa aksi!

Sekali lagi, jika Anda melewatkan bagian Javascript, kembali ke bab 10, dan lihat bagaimana kita menggunakan Javascript untuk membaca nilai dari form menggunakan metode getElementById:

document.getElementById("idOfTheInput").value

Jadi, mari kita buka file Parse.js kita dan tambahkan dua metode di sana, logIn dan singUp:

function parseSignUp(){

}

function parseLogIn(){

}

Dan mari kita tambahkan juga kode untuk membaca nilai dari formulir, bersama dengan beberapa kode validasi kesetaraan kata sandi, sekali lagi, yang telah dijelaskan pada bab 10:

function parseSingnUp(){
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var passwordverify = document.getElementById("passwordverify").value;
    var email = document.getElementById("email").value;

    if (password !== passwordverify){
        peringatan ('Kata sandi tidak cocok')
        return
    }

}

function parseLogIn(){
    var user = document.getElementById("user").value;
    var pass = document.getElementById("pass").value;

}

Namun kali ini, alih-alih menggunakan Javascript SDK, mari kita panggil metode signUp dan logIn dari file graphql.js. Kode lengkapnya adalah sebagai berikut:

function parseSingnUp(){
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var passwordverify = document.getElementById("passwordverify").value;
    var email = document.getElementById("email").value;

    if (password !== passwordverify){
        peringatan ('Kata sandi tidak cocok')
        return
    }

    signUp(nama pengguna, kata sandi, email)
}

function parseLogIn(){
    var user = document.getElementById("user").value;
    var pass = document.getElementById("pass").value;

    logIn(user, pass)
}

Oh, dan jangan lupa untuk memanggilnya pada event onClick di berkas HTML:

Terapkan semuanya seperti yang dijelaskan pada bab 3 dan kita siap untuk beberapa…

28. Pengujian

(Hanya untuk GraphQL)

Akses situs web Anda dan masuk ke bagian Daftar. Isi formulir dan tekan tombol Daftar:

Jika semuanya berhasil, Anda akan melihat pengguna baru Anda di tabel Users:

Sekarang kembali ke bagian Masuk dan coba masuk dengan pengguna tersebut:

Jika semuanya berjalan seperti yang diharapkan, Anda seharusnya sudah masuk:

29. Kesimpulan dari bagian GraphQL

Fiuh! Saya tahu ini adalah informasi yang sangat banyak, tetapi sekarang Anda sudah menjadi ahli Daftar dan Login! Selamat!

GraphQL mungkin terlihat sedikit lebih merepotkan pada saat pertama kali digunakan, dengan beberapa proses yang harus dilalui, tetapi percayalah: ketika Anda sudah menguasainya dalam proses pengembangan Anda, itu akan sangat mudah!

Kami sekarang memiliki kode yang jauh lebih organik dan lebih mudah untuk dipelihara, yang kami buat dengan bantuan Pelengkapan Otomatis dan dapat menguji dan memverifikasi respons di GraphQL Playground bahkan sebelum kami mulai membuat kode. Hal ini sangat penting karena Anda tidak hanya dapat menulis dan menguji semua kueri Anda sebelum menghasilkan kode, tetapi juga karena Anda sekarang dapat membagi pengembangan untuk sebuah tim: beberapa pengembang dapat menulis kueri GraphQL sementara yang lain menulis kode Javascript, sehingga mempercepat keseluruhan proses.

Lebih baik dari itu, jika Anda perlu mengubah apa pun dalam kode Anda mulai sekarang, Anda hanya perlu mengubah kueri dan Anda siap menggunakannya.

Apakah bisa lebih baik lagi? Tentu saja bisa!

Dengan menggunakan sintaks yang sama persis, Anda dapat menggunakan kembali kueri GraphQL untuk setiap platform. Hal ini mirip dengan semua bahasa. Anda tidak perlu bertanya pada diri sendiri “bagaimana cara melakukannya dalam bahasa yang tidak saya kuasai?” lagi. Pertanyaan yang sama, bahasa yang berbeda.

Saya harap Anda memberi GraphQL kesempatan dalam proses pengembangan Anda. Saya cukup yakin Anda akan kagum dengan apa yang dapat Anda capai!