GraphQL iOS: Menggunakan Fungsi-fungsi Cloud dalam Aplikasi Swift

Pada artikel ini, saya menunjukkan kepada Anda cara menggunakan GraphQL dengan NodeJS Cloud Code di Back4app.

Dan pada panduan ini, saya menunjukkan kepada Anda cara menggunakan Apollo GraphQL iOS Client dengan Swift.

Sekarang mari kita gabungkan semuanya dan membuat banyak operasi yang rumit dengan menghasilkan kode yang sangat mudah. Dan mari kita juga menggunakan XCode untuk secara otomatis menghasilkan kode API apa pun untuk kita bahkan ketika kita mengubah Kelas.

Kedengarannya bagus? Jadi, mari kita minum kopi dan mulai belajar!

Sebelum memulai…

Anda akan membutuhkan akun Back4app dengan satu Aplikasi yang telah dibuat. Jika Anda belum memilikinya, ikuti panduan ini dan Anda akan memiliki semuanya dalam waktu singkat.

Beberapa perangkat lunak yang akan membantu kita…

Kami juga akan menggunakan beberapa hal untuk mempercepat semuanya.

Tentu saja, Anda bisa melakukan semuanya secara manual jika Anda mau, tetapi saya tidak merekomendasikan cara itu terutama untuk pemula.
Dengan menambahkan paket secara manual, Anda juga perlu memelihara paket secara manual yang bisa merepotkan setelah beberapa waktu.

Anda tidak harus menggunakan manajer paket yang akan saya tunjukkan di sini, tetapi saya sangat menyarankan agar Anda menggunakan setidaknya beberapa manajer paket daripada melakukan manajemen manual. Seperti yang saya katakan sebelumnya, pengelolaan manual bisa menjadi aneh seiring berjalannya waktu.

Saya akan menggunakan Cocoapods untuk manajemen paket iOS dan NPM untuk manajemen desktop, tetapi sekali lagi, silakan gunakan apa pun yang Anda sukai.

Petunjuk untuk menginstal Cocoapods dapat ditemukan di situs ini.

Petunjuk untuk menginstal NPM dapat ditemukan di situs ini.

Membuat Kelas kita

Kami akan menerapkan 3 kelas: Pemilik, Anjing, dan Ras.

Model kita akan menyiratkan hal itu:

• Seorang Pemilik dapat memiliki beberapa Anjing
• Seekor Anjing hanya dapat memiliki satu Ras

Properti kita akan menjadi:

• Pemilik
  • nama (String)
  • usia (Angka)
  • alamat (String)
  • hasDogs (Hubungan dengan Anjing, karena Pemilik dapat memiliki beberapa Anjing)
• Anjing
  • nama (String)
  • ulang tahun (Tanggal)
  • jenis (Pointer ke Jenis, karena seekor Anjing hanya memiliki satu jenis)
• Berkembang biak
  • Nama (String

Buat kelas-kelas tersebut secara grafis atau terprogram dan isi dengan beberapa data. Kelas saya berakhir seperti ini:

Ras

Anjing

Pemilik

Ayo gunakan Cloud Code, sayang!

Waktunya untuk beberapa Cloud Code. Tapi kali ini saya ingin membahasnya lebih dalam lagi.

Pernahkah saya mengatakan kepada Anda bahwa Cloud Code kompatibel dengan modul NPM? Ya! Dan ini dapat menghemat banyak waktu Anda!

Anda tahu fungsionalitas keren yang ingin Anda miliki, dan orang lain sudah melakukannya? Nah, jika itu adalah modul NPM, Anda dapat menggunakannya!

Sudah ada artikel tentang cara menggunakan modul menggunakan tutorial ini, jadi untuk implementasi kali ini, saya akan menggunakan Moment agar kita dapat menggunakan hari lahir seekor Anjing dan menghitung umurnya dalam bulan.

Jadi file package.json saya akan terlihat seperti ini:

{
      "dependencies": {
           "moment": "*"
      }
}

Tanda * berarti saya akan menggunakan versi terbaru.

Kode Cloud saya berakhir seperti di bawah ini. Kode ini dikomentari dengan baik sehingga saya tidak akan membahasnya secara detail di sini, tetapi Anda dapat melihat pada baris pertama saya menggunakan modul Moment NPM:

// Menginstansiasi Modul Moment NPM
const moment = require('moment')

Parse.Cloud.define("retrieveOwnersOrderedByAgeDescending", async req => {
    /*
        Fungsi ini mengambil semua Pemilik yang diurutkan berdasarkan usia.
        Jika tidak ada Pemilik, larik kosong akan diambil.
    */
    const query = new Parse.Query("Pemilik"); 
    query.descending("usia")
    const hasil = menunggu query.find();

    mengembalikan hasil;
});

Parse.Cloud.define("retrieveAllGermanShepherds", async req => {
    /*
        Fungsi ini mengambil Anjing yang memiliki ras "Gembala Jerman"
        Semua properti Anjing akan diambil.
        Jika tidak ada Anjing, sebuah larik kosong akan diambil.
    */
    const breedQuery = new Parse.Query("Breed");
    breedQuery.equalTo("nama", "Gembala Jerman") 
    const query = new Parse.Query("Dog"); 
    query.matchesQuery("breed", breedQuery);
    const hasil = menunggu query.find();
    mengembalikan hasil;
});

Parse.Cloud.define("retrieveDogIncludingBreedByName", async req => {
    /*
        Fungsi ini mengambil detail Anjing tertentu termasuk detail ras (nama) berdasarkan nama Anjing
        Semua properti Anjing dan Trah diambil.
        Jika tidak ada Anjing, nilai null akan diambil.
    */
    const query = new Parse.Query("Dog"); 
    query.equalTo("nama", req.params.name);
    query.include("jenis")
    const hasil = menunggu query.find();
    mengembalikan hasil;
});

Parse.Cloud.define("ambilNamaAnggotaDenganUsiaDalamBulan", async req => {
    /*
        Fungsi ini mengambil nama-nama Anjing dengan properti ulang tahun yang dikonversi dalam Bulan menggunakan modul NPM saat
        Hanya nama Dogs yang diambil dan usia yang dihitung dalam bulan.
        Jika tidak ada Anjing, sebuah larik kosong akan diambil.
    */
    let anjing = [];
    const query = new Parse.Query("Anjing"); 
    const hasil = menunggu query.find();

    for (let i = 0; i < hasil.length; i ++){
        // menghitung usia dalam Bulan menggunakan Modul NPM Moment
        let ageInMonths = moment.duration(moment().diff(hasil[i].get("birthday")).humanize();
        
        let newDog = {
            "nama_anjing": results[i].get("nama"),
            "dogAgeInMonths": ageInMonths
        }

        dogs.push(newDog);
    }

    mengembalikan anjing;
});

File schema.graphql saya yang mengekspos empat metode saya keluar seperti ini:

extend tipe Query {
  getSemuaPemilikUsiaMenurun: [OwnerClass!]! @resolve(to: "ambilSemuaPemilikDiurutkanBerdasarkanUsia")
  mendapatkanSemuaGembalaJerman: [DogClass!]! @resolve(to: "ambilSemuaGembalaJerman")
  getThisDogWithBreed (nama:String): [DogClass!]! @resolve(to: "ambilAnggotaDogBerdasarkanRas")
  getUsiaAnggotaDogsDalamBulan: [UmurAnggota!]!  @resolve(to: "ambilNamaAnggotaDogDenganUsiaDalamBulan")
}

type DogAge {
    nama_anjing: String!
    dogAgeInMonths: String!
}

Jika Anda tidak memahami sintaksnya, lihat artikel ini di bagian “Sedikit langkah tambahan”.
Perhatikan saja [DogAge!]! pada getDogsAgesInMonths. Karena saya akan mengambil objek yang dibuat oleh sistem, objek tersebut tidak memiliki skema untuk diinterpretasikan oleh GraphQL, jadi saya harus membuat tipenya juga agar klien kita dapat menginterpretasikannya.

Pengujian… Pengujian…

Waktunya untuk melakukan pengujian!

Mari kita masuk ke Konsol Parse GraphQL dan jalankan kueri kita, periksa hasilnya:

Kueri untuk getAllOwnersAgeDescending:

query{
  getAllOwnersAgeDescending {
    nama
    usia
    alamat
  }
}

Kueri untuk getAllGermanShepherds:

kueri {
  getAllGermanShepherds {
    nama
    ulang tahun
  }
}

Kueri untuk getThisDogWithBreed:

query{
  getThisDogWithBreed(nama: "Fido"){
    nama
    ulang tahun
    berkembang biak{
      nama
    }
  }
}

Kueri untuk getDogsAgesInMonths:

query{
  getDogsAgesDalamBulan
}

Semuanya bekerja! Bagus! Sekarang saatnya untuk…

Beberapa XCoding

Kita sudah mendapatkan semua yang kita butuhkan dari Back4app dan menjalankannya. Sekarang saatnya untuk menggunakannya di XCode.

Panduan ini menunjukkan bagaimana cara menjalankannya, tetapi kali ini kita sedikit lebih maju: kita memiliki beberapa metode, salah satunya adalah variabel ekspektasi, jadi kita perlu melakukan beberapa perubahan.

Jika Anda belum membaca artikel tersebut, saya sangat menyarankan Anda untuk membacanya karena artikel tersebut sangat mendetail.

Mari kita mulai dengan membuat aplikasi dan menginstal klien Apollo seperti yang dijelaskan dalam artikel tersebut.

Setelah itu, buka file Main.storyboard Anda, klik tombol Objects di pojok kanan atas dan seret dan letakkan Table View ke View Controller:

Ubah ukuran Table View Anda agar sesuai dengan seluruh View dari View Controller dengan menyeret sudut-sudutnya:

Dan buatlah Constraints untuk keempat sisi dengan mengklik tombol Add New Constraints di kanan bawah layar. Klik keempat sisi (penanda merah) dan klik tombol Add Constraints untuk menetapkan batasan baru tersebut:

Sekarang, dengan Tampilan Tabel yang dipilih (klik untuk memilih), mari kita tambahkan sebuah Sel Prototipe. Klik Atribut Inspektur di kanan atas, dan ganti angka 0 dengan angka 1 pada kotak Prototype Cells:

Sekarang, klik pada Sel Prototipe yang baru dibuat untuk memilihnya, dan berikan pengenal yang baik: “sel”.
Kita akan menggunakannya nanti pada kode untuk mengidentifikasi sel tersebut.

Sekarang kita harus menautkan Sumber Data dan Delegasi dari Tampilan Tabel ke View Controller.
Sambil menahan tombol Control pada keyboard Anda, klik Table View dan seret ke ikon kuning di bagian atas View Controller, yang bertuliskan View Controller ketika Anda mengarahkan kursor.
Dengan melepaskan tautan Table View di sana, sebuah popup kecil akan muncul. Pilih DataSource dan Delegate pada popup tersebut:

Sekarang, itu akan mencakup dasar-dasarnya, tetapi kita masih perlu melakukan penyegaran pada Tampilan Tabel tersebut setelah kita mengambil data dari Back4app. Untuk melakukannya, kita harus membuat Outlet dan menghubungkannya ke User Interface kita.

Cara termudah untuk melakukannya adalah dengan mengklik Show Assistant Editor di bagian kanan atas layar, sehingga Anda dapat melihat UI dan kode secara berdampingan.

Kemudian klik Control pada Table View dan seret ke kode:

Ketika Anda melepaskannya, Anda akan mendapatkan sebuah popup. Isi Nama untuk itu dan klik Connect:

Setelah selesai, Anda seharusnya memiliki Outlet yang terhubung (perhatikan lingkaran kecil yang terisi pada nomor baris) sehingga kita sekarang dapat memanggil kode untuk Tampilan Tabel tersebut:

Setelah semua selesai, kita dapat membuka file ViewController.swift kita karena sudah waktunya untuk…

File GraphQL kita

Panduan GraphQL kami telah menunjukkan kepada Anda cara membuat file GraphQL. Untuk proyek ini, milik saya berakhir seperti ini:

kueri findAllOwners{
    getAllOwnersAgeDescending{
        nama
        usia
        alamat
    }
}

kueri findAllGermanShepherds{
    getAllGermanShepherds {
        nama
    }
}

query findThisDog ($nama: String!){
    getThisDogWithBreed (nama: $nama) {
        nama
        ulang tahun
        berkembang biak{
            nama
        }
    }
}

query agesInMonths{
    getDogsAgesDalamBulan
}

Beberapa Kode Swift

Sekali lagi, kita telah membahas cara mengonfigurasi Apollo di Swift padapanduan ini, tetapi kode hari ini memiliki beberapa perubahan.
Karena kita akan menampilkan data secara grafis pada Table View, kita harus menyertakan dua metode untuk dieksekusi oleh Data Source dan Delegate. Metode-metode tersebut adalah

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int

dan

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell

Saya tidak akan membahas banyak hal tentang hal itu karena sudah didokumentasikan pada kode. Perlu diingat bahwa kedua metode tersebut wajib ada agar Table View kita dapat bekerja.

Kode lengkap Anda akan terlihat seperti ini:

//
// ViewController.swift
// GraphQLApollo
//
// Dibuat oleh Venom pada 19/08/19.
// Hak Cipta © 2019 Venom. Semua hak dilindungi undang-undang.
//

import UIKit
import Apollo

kelas ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    @IBOutlet lemah var tableView: UITableView!
    
    var list = [] as [String] // Larik ini akan menampung nilai untuk kita tampilkan
    
    // Inisialisasi Klien Apollo.
    // Lebih lanjut tentang hal ini di sini: https://www.back4app.com/docs/ios/swift-graphql
    mari kita jalankan apollo: ApolloClient = {
        let configuration = URLSessionConfiguration.default
        configuration.httpAdditionalHeaders = [
            "X-Parse-Application-Id": "lAcIOgR0ndd7R4uMqovhNAoudpi6tMsrOI9KCuyr",
            "X-Parse-Client-Key": "f1wwm6uWqQoxazys3QQrrtY4fKuQuxYvNYJmYQJP"
        ]
        
        let url = URL(string: "https://parseapi.back4app.com/graphql")!
        
        return ApolloClient(
            networkTransport: HTTPNetworkTransport(
                url: url,
                konfigurasi: konfigurasi
            )
        )
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Lakukan penyiapan tambahan setelah memuat tampilan.
        
        apollo.fetch(query: FindAllOwnersQuery()) { result in
            guard let data = try? hasil.get().data else { return }
            
            for nama in data.getSemuaPemilikUsiaDescending {
                // Menambahkan setiap nama untuk larik daftar kita
                self.list.append(nama.nama!)
            }
            
            //baris di bawah ini akan memaksa pemuatan ulang Tampilan Tabel kita setelah kita mengambil data
            DispatchQueue.main.async { self.tableView.reloadData() }
        }
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // Fungsi ini dipanggil oleh Table View kita melalui Data Source dan Delegate.
        // Fungsi ini hanya mengembalikan jumlah objek yang akan ditampilkan oleh Table View.
        // Ini wajib ada agar Table View dapat bekerja.
        return list.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // Fungsi ini dipanggil oleh Table View kita melalui Data Source dan Delegate.
        // Fungsi ini membuat Cell yang akan ditampilkan dengan Identifier yang telah kita tetapkan di Storyboard
        // Ini wajib ada agar Table View dapat bekerja.
        let cell = UITableViewCell(style: UITableViewCell.CellStyle.default, reuseIdentifier: "cell")
        cell.textLabel?.text = list[indexPath.row]
        return(cell)
    }
}

Mari kita jalankan!

Saatnya menjalankan kode kita! Tekan Command + R dan jika semuanya sudah benar, Anda akan melihat nama-nama kita di Tampilan Tabel:

Keren, bukan?
Sekarang kita bahkan dapat mengubah kode kita untuk menjalankan metode-metode GraphQL kita yang lain dan melihat bagaimana hasilnya!

Mari kita ubah kueri GraphQL kita untuk mengeksekusi metode getAllGermanShepherds:

    override func viewDidLoad() {
        super.viewDidLoad()
        // Lakukan penyiapan tambahan setelah memuat tampilan.
        
        apollo.fetch(query: FindAllGermanShepherdsQuery()) { result in
            guard let data = try? hasil.get().data else { return }
            
            print(data.getAllGermanShepherds)
            
            for nama in data.getAllGermanShepherds {
                // Menambahkan setiap nama untuk larik daftar kita
                self.list.append(nama.nama!)
            }
            
            //baris di bawah ini akan memaksa pemuatan ulang Tampilan Tabel kita setelah kita mengambil data
            DispatchQueue.main.async { self.tableView.reloadData() }
        }
    }

dan hasilnya…

Bagaimana jika kita ingin mengoper sebuah variabel ke kueri kita?

    override func viewDidLoad() {
        super.viewDidLoad()
        // Melakukan pengaturan tambahan setelah memuat tampilan.
        
        apollo.fetch(query: FindThisDogQuery(name: "Fido")) { result in
            guard let data = try? hasil.get().data else { return }
            
            print(data.getThisDogWithBreed)
            
            for nama in data.getThisDogWithBreed {
                // Menambahkan setiap nama untuk array daftar kita
                self.list.append(nama.nama! + " - " + (nama.trah?.nama!)!)
            }
            
            //baris di bawah ini akan memaksa pemuatan ulang Tampilan Tabel kita setelah kita mengambil data
            DispatchQueue.main.async { self.tableView.reloadData() }
        }
    }

Dan sekarang kita tahu bahwa Fido adalah seekor Pug:

Dan bagaimana dengan metode yang mengembalikan tipe baru? Mari kita uji coba juga:

   override func viewDidLoad() {
        super.viewDidLoad()
        // Lakukan pengaturan tambahan setelah memuat tampilan.
        
        apollo.fetch(query: AgesInMonthsQuery()) { result in
            guard let data = try? hasil.get().data else { return }

            print(data.getDogsAgesInMonths)

            for dog in data.getDogsAgesInMonths {
                // Menambahkan setiap nama untuk array daftar kita
                self.list.append(dog.dogName + " - " + dog.dogAgeInMonths)
            }

            //baris di bawah ini akan memaksa pemuatan ulang Tampilan Tabel kita setelah kita mengambil data
            DispatchQueue.main.async { self.tableView.reloadData() }
        }
    } 

dan hasilnya:

Kesimpulan

Cloud code itu keren. GraphQL sangat keren. Apollo membawa tingkat kedahsyatan baru ke aplikasi asli iOS Anda. Dengan ketiganya bersama-sama, Anda memiliki kekuatan yang serius untuk membuat aplikasi yang sangat kompleks dengan upaya yang sangat minimal.

Sekarang setelah Anda dapat membuat alur kerja yang berfungsi penuh untuk Aplikasi, yang mudah dibuat dan dipelihara dari waktu ke waktu, pertanyaannya adalah: apa yang akan Anda buat selanjutnya?

Semoga Anda menikmatinya! Kami akan segera merilis lebih banyak lagi! Pantau terus!