Bagaimana cara membangun REST API?

Artikel ini memberikan pengenalan tentang API, khususnya RESTful API. Kita akan melihat manfaat, keterbatasan, dan alternatifnya. Selain itu, kami akan mendemonstrasikan cara membuat REST API menggunakan Back4app – salah satu penyedia BaaS terbaik.

Apa yang dimaksud dengan API?

Antarmuka pemrograman aplikasi (API) adalah seperangkat aturan yang mendefinisikan bagaimana dua perangkat atau sistem dapat berkomunikasi satu sama lain. API dibuat oleh pengembang dan dimaksudkan untuk digunakan oleh pengembang atau sistem lain, dan bukan oleh pengguna akhir secara langsung. Pengguna akhir biasanya menggunakannya secara tidak langsung melalui apa yang disebut frontend atau klien.

Anda dapat menganggap API sebagai mediator antara klien dan sumber daya atau layanan web. Klien mengirimkan permintaan, permintaan kemudian diproses dan akhirnya, sumber daya atau respons dikembalikan.

Saat ini API digunakan hampir di semua tempat. Sebagian besar bisnis memiliki beberapa API internal dan yang dapat diakses publik. Hari ini saja Anda mungkin sudah berinteraksi dengan lebih dari seratus API. Misalnya, saat Anda memeriksa waktu, cuaca, menelusuri Facebook, atau menonton video YouTube.

Apa perbedaan antara API dan SDK?

Seperti yang telah disebutkan di atas, API adalah sekumpulan aturan yang mendefinisikan bagaimana dua perangkat atau sistem dapat berkomunikasi. Di sisi lain, Software Development Kit (SDK) adalah kumpulan alat, pustaka, dan dokumentasi yang membantu pengembang membangun perangkat lunak untuk platform tertentu (misalnya Windows, Web, Android, iOS).

SDK sering kali menggunakan berbagai API di belakang layar. Kita akan melihat contoh praktis di bagian kedua artikel ini.

Apa itu REST?

Pendekatan arsitektur perangkat lunak yang disebut Representational State Transfer (REST) mencirikan kerangka kerja internet. REST bukan merupakan protokol atau standar, sehingga memungkinkan metode implementasi yang beragam oleh para pengembang. Roy Fielding memperkenalkan REST pada tahun 2000, dan telah menjadi standar utama untuk membuat API web selama lebih dari sepuluh tahun.

REST didasarkan pada protokol HTTP dan menggunakan metode HTTP yang berbeda seperti GET, POST, PUT, dan DELETE untuk memanipulasi sumber daya. Operasi-operasi ini sering disebut CRUD (Create Retrieve Update Delete). REST mendukung berbagai format data termasuk JSON, HTML, XLT, Python, JavaScript, dan sebagainya. Format data yang paling umum digunakan adalah JSON.

Agar sebuah API dapat dianggap sebagai RESTful, API tersebut harus sesuai dengan enam batasan berikut ini:

1. Arsitektur Klien dan Server – komponen klien dan server harus terpisah.
2. Tanpa kewarganegaraan – aplikasi server tidak diizinkan untuk menyimpan data klien apa pun di antara permintaan.
3. Cacheability – bila memungkinkan sumber daya harus dapat di-cache di sisi klien atau server.
4. Sistem berlapis – API harus mengizinkan perantara, namun hal ini tidak boleh memengaruhi klien.
5. Antarmuka yang seragam – antarmuka antara server dan klien harus seragam.
6. Kode sesuai permintaan (opsional) – memungkinkan server mengirim kode yang dapat dieksekusi ke klien.

Perbedaan antara REST dan RESTful adalah bahwa REST mengacu pada sekumpulan batasan, sedangkan RESTful mengacu pada API yang mematuhi batasan tersebut.

Bagaimana cara kerja RESTful API?

RESTful API bekerja dengan cara yang mirip dengan browser. Perbedaan utamanya adalah browser menggunakan HTTP untuk meminta halaman web dan sumber daya lain dari server, sedangkan RESTful API menggunakan HTTP untuk meminta dan memanipulasi sumber daya data.

Panggilan API RESTful yang umum dilakukan mengikuti langkah-langkah berikut:

1. Klien mengirimkan permintaan ke server.
2. Server mengautentikasi klien dan memeriksa apakah klien memiliki izin yang cukup untuk permintaan tersebut.
3. Server memproses permintaan, misalnya melakukan perhitungan, dan mengambil data dari database.
4. Server mengembalikan respons ke klien.
5. Klien memproses respons.

Langkah-langkahnya dapat bervariasi, tergantung pada implementasi API. Petunjuk tentang cara menggunakan API dijelaskan dalam referensi API (atau dokumentasi API).

Struktur permintaan

Permintaan berisi hal-hal berikut ini:

Contoh permintaan terlihat seperti ini:

Struktur respons

Tanggapan berisi hal-hal berikut ini:

Contoh respons terlihat seperti ini:

Apa saja manfaat RESTful API?

Skalabilitas

RESTful API sangat skalabel dan dapat diskalakan baik secara vertikal maupun horizontal. Penambahan titik akhir atau sumber daya baru memiliki dampak minimal pada kinerja API, sehingga mudah untuk menskalakan sesuai kebutuhan.

Berbagai format data

RESTful API dapat mengembalikan data dalam berbagai format berdasarkan tajuk permintaan klien. Hal ini membuatnya sangat fleksibel dan mudah diintegrasikan ke dalam sistem yang sudah ada. Data dapat dikembalikan dalam bentuk JSON, XLT, Python, HTML, JavaScript, dan sebagainya.

Efisiensi

RESTful API ringan dan memiliki overhead yang lebih kecil daripada SOAP (Simple Object Access Protocol). Hal ini membuat API ini cepat dan efisien dalam menangani permintaan. API RESTful biasa dapat menangani antara 10.000 hingga 15.000 permintaan per detik.

Kemandirian platform

Manfaat besar lain dari RESTful API adalah server dan klien sepenuhnya independen. Hal ini memungkinkan para pengembang untuk mengimplementasikan RESTful API dan klien dalam beberapa bahasa pemrograman seperti Java, JavaScript, Python, dan masih banyak lagi!

Mudah dimengerti

Karena REST didasarkan pada HTTP, maka REST sangat mudah dipahami. Sebagian besar pengembang hampir pasti pernah bekerja dengan atau mengimplementasikan RESTful API setidaknya sekali.

Apa saja batasan API RESTful?

Data yang kurang & lebih dari yang seharusnya

Salah satu masalah terbesar dari RESTful API adalah pengambilan data yang kurang dan pengambilan data yang berlebihan. Overfetching terjadi ketika lebih banyak data yang dikembalikan daripada yang dibutuhkan dan underfetching terjadi ketika data yang dikembalikan tidak cukup (sebagian besar terjadi ketika menangani relasi).

Tidak ada langganan data waktu nyata

API RESTful tidak mengizinkan berlangganan perubahan data. Ini berarti bahwa klien perlu melakukan polling pada server untuk mendeteksinya. Polling sangat tidak efisien dan dapat mengakibatkan lalu lintas jaringan yang tidak perlu, peningkatan latensi, penggunaan bandwidth yang lebih tinggi, dan berkurangnya skalabilitas.

Tidak ada sistem versi

RESTful API tidak memiliki sistem versi bawaan. Selain itu, tidak ada cara untuk menghentikan penggunaan field, yang membuatnya sulit untuk mengembangkan API dari waktu ke waktu. Setiap kali Anda merilis pembaruan API utama, Anda akan dipaksa untuk memodifikasi semua klien.

Untuk mengatasi masalah yang disebutkan di atas, beberapa alternatif REST telah muncul. Beberapa yang paling populer adalah Simple Object Access Protocol (SOAP), GraphQL, dan gRPC.

Apa yang dimaksud dengan metode autentikasi RESTful?

API RESTful dapat menggunakan metode autentikasi yang berbeda untuk mengamankan titik akhir mereka. Metode autentikasi yang paling umum digunakan adalah:

• Otentikasi HTTP
• Kunci API
• OAuth 2.0
• OpenID Connect
• Otentikasi JWT

Sebagian besar metode ini mengharuskan klien untuk mengirimkan kredensial atau kunci API mereka di header permintaan. Metode autentikasi yang berbeda harus dipertimbangkan ketika memulai sebuah proyek.

Bagaimana cara membangun API RESTful?

Bagian artikel ini membahas tentang pembuatan RESTful API menggunakan Back4app dan membuat koneksi dengan frontend Next.js.

Prasyarat

• Pengalaman dengan JavaScript ES6
• Pengalaman dengan React dan Next.js
• Pemahaman dasar tentang REST

Apa itu Back4app?

Back4app adalah solusi BaaS – Backend as a Service yang luar biasa. Solusi ini menggunakan perangkat lunak sumber terbuka dan menawarkan banyak fitur untuk membantu pengembang membuat aplikasi seluler dan web lebih cepat. Hal ini memungkinkan bisnis untuk fokus pada logika bisnis mereka, tanpa mengkhawatirkan infrastruktur cloud.

Menampilkan dasbor yang ramah pengguna dan antarmuka baris perintah, platform ini menawarkan Kit Pengembangan Perangkat Lunak (SDK) yang kompatibel dengan alat yang banyak digunakan seperti Node.js, Flutter, React Native, Android, Angular, dan iOS.

Back4app mempunyai model harga sederhana yang dapat disesuaikan dengan aplikasi apa pun. Mereka juga mempunyai paket gratis, yang tidak memerlukan kartu kredit, yang merupakan pilihan bagus untuk pengembangan, pengujian dan pembuatan prototipe.

Untuk mengetahui lebih lanjut tentang Back4app, silakan baca Apa itu Back4app?

Pengenalan Proyek

Pada artikel ini, kita akan membuat aplikasi web blog sederhana. Aplikasi web ini akan memungkinkan editor untuk menambahkan artikel dan pengguna untuk membacanya. Aplikasi ini akan memiliki dua bagian: backend (berbasis REST) dan frontend. Untuk backend, kita akan menggunakan Back4app dan untuk frontend, kita akan menggunakan React dengan Next.js.

Backend

Buat Aplikasi Back4app

Langkah-langkah berikut ini mengharuskan Anda memiliki akun Back4app. Silakan masuk atau buat akun jika Anda belum memilikinya.

Masuk ke dasbor Back4app Anda dan buat aplikasi baru dengan mengklik “Buat aplikasi baru”.

Pilih “Backend as a Service (BaaS)”, beri nama khusus, dan pilih “NoSQL Database” sebagai basis data Anda. Terakhir, klik “Create” untuk memulai proses pembuatan aplikasi.

Back4app akan membutuhkan waktu beberapa saat untuk mempersiapkan semua yang diperlukan untuk aplikasi Anda seperti database, penskalaan, dan keamanan. Setelah aplikasi Anda siap, Anda akan diarahkan ke tampilan “Database”.

Menentukan Kelas Basis Data

Selanjutnya, mari kita mendefinisikan kelas-kelas database.

Kami akan mengadakan dua kelas berikut ini:

1. ArticleCategory mewakili kategori artikel (mis. blockchain, AI, pemrograman)
2. Artikel merupakan sebuah artikel. Sebuah artikel dapat memiliki beberapa kategori (M:N).

Untuk membuat kelas, buka dasbor Back4app Anda dan pilih “Database” di bilah sisi. Kemudian klik “Buat kelas”, beri nama ArticleCategoy dan aktifkan “Baca dan Tulis Publik”.

Ketika pindah ke produksi, Anda harus menonaktifkan “Baca dan Tulis Publik” dan memperkuat keamanan dengan ACL dan CLP. Untuk informasi lebih lanjut, tinjau Mengurai Keamanan Server.

Selanjutnya, tambahkan bidang berikut ini ke dalamnya:

+-----------------------------+-----------------+--------------------+-------------+
| Data type                   | Name            | Default value      | Required    |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | name            | <leave blank>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | slug            | <leave blank>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | description     | <leave blank>      | no          |
+-----------------------------+-----------------+--------------------+-------------+

Lakukan langkah yang sama untuk kelas kedua yang bernama Article. Tambahkan bidang-bidang berikut ini:

+-----------------------------+-----------------+--------------------+-------------+
| Data type                   | Name            | Default value      | Required    |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | title           | <leave blank>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | slug            | <leave blank>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | shortContent    | <leave blank>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | content         | <leave blank>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| Relation -> ArticleCategory | categories      | <leave blank>      | no          |
+-----------------------------+-----------------+--------------------+-------------+

Bagus, itu saja.

Mengisi Basis Data

Pada langkah selanjutnya saat kita menguji API, kita akan membutuhkan beberapa data untuk digunakan. Lanjutkan dan isi basis data dengan beberapa contoh kategori artikel & artikel.

Untuk menambahkan ArticleCategory baru, pilih di bilah sisi dan klik “Tambah baris”.

Anda dapat menggunakan kategori artikel ini atau membuat kategori sendiri:

+------------+------------+---------------------------------------------------------+
| name       | slug       | description                                             |
+------------+------------+---------------------------------------------------------+
| Blockchain | blockchain | Blockchain, crypto & more!                              |
+------------+------------+---------------------------------------------------------+
| AI         | ai         | Artificial intelligence, LLMs, stable diffusion.        |
+------------+------------+---------------------------------------------------------+

Anda juga dapat menggunakan ChatGPT untuk menghasilkan data sampel. Untuk mempelajari lebih lanjut tentang ChatGPT, lihat Bagaimana cara menggunakan ChatGPT untuk membuat aplikasi?

Lakukan hal yang sama untuk kelas Artikel:

+------------------+---------------+--------------+---------+-----------------------+
| title            | slug          | shortContent | content | categories            |
+------------------+---------------+--------------+---------+-----------------------+
| Beyond Crypto    | beyond-crypto | ...          | ...     | <blockchain.objectId> |
+------------------+---------------+--------------+---------+-----------------------+
| The Rise of AI   | rise-of-ai    | ...          | ...     | <ai.objectId>         |
+------------------+---------------+--------------+---------+-----------------------+
| What is ChatGPT? | chatgpt       | ...          | ...     | <ai.objectId>         |
+------------------+---------------+--------------+---------+-----------------------+

Pastikan untuk mengganti dan dengan objectId ArtikelKategori yang sebenarnya. Dalam kasus saya, itu adalah SxS0yiWDij dan Hf8yBDTO79 (gambar di atas sebagai referensi).

REST API

Hal yang hebat tentang Back4app adalah ketika Anda mendefinisikan kelas basis data, Back4app akan secara otomatis menyiapkan REST API untuk Anda. REST API yang dihasilkan memungkinkan Anda untuk melakukan operasi CRUD dasar pada semua kelas dalam database Anda.

Konsol API REST

Untuk menguji API, buka dasbor Back4app Anda dan pilih “API > Konsol > REST” di bilah sisi. Kemudian pilih GET sebagai jenis permintaan, dan classes/Article sebagai titik akhir. Terakhir, klik “Send Query” di bagian kanan bawah layar untuk mengirim permintaan.

Permintaan ini akan mengembalikan semua artikel dalam basis data Anda. Anda akan mendapatkan respons yang serupa:

{
   "results":[
      {
         "objectId": "yEaR8K44il",
         "title": "Beyond Crypto",
         "slug": "beyond-crypto",
         "shortContent": "...",
         "content": "...",
         "createdAt": "2023-04-17T14:26:19.016Z",
         "updatedAt": "2023-04-17T14:26:30.922Z",
         "categories": {
            "__type": "Relation",
            "className": "ArticleCategory"
         }
      },
      {
         "objectId": "l46nMkHElH",
         "title": "What is ChatGPT?",
         "slug": "chatgpt",
         "shortContent": "...",
         "content": "...",
         "createdAt": "2023-04-17T14:27:34.931Z",
         "updatedAt": "2023-04-17T14:27:42.636Z",
         "categories": {
            "__type": "Relation",
            "className": "ArticleCategory"
         }
      }
      // ...
   ]
}

Konsol REST juga memungkinkan Anda untuk melakukan operasi POST, PUT, dan DELETE. Selain itu, Anda dapat menggunakan parameter Parse Query untuk memfilter data, menangani hubungan, dan banyak lagi.

Sebagai contoh, jika Anda ingin mengambil artikel yang termasuk dalam kategori “Blockchain”, Anda dapat menggunakan pernyataan where berikut ini:

where={"categories": {
    "__type": "Pointer", "className": "ArticleCategory", "objectId": "<objectId>"
}}

Pastikan untuk mengganti dengan objectId blockchain.

Pelajari lebih lanjut tentang parameter kueri dengan melihat Panduan API Parse REST.

cURL

REST Console sangat bagus, tetapi ketika Anda bekerja pada aplikasi yang sebenarnya, Anda akan menginginkan pendekatan yang lebih berorientasi pada programmer untuk permintaan API. Salah satu alat yang bisa Anda gunakan adalah cURL – alat baris perintah untuk berbagai protokol seperti HTTP, FTP, dan SMTP.

Contoh perintah cURL untuk membuat daftar kategori artikel akan terlihat seperti ini:

$ curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  https://parseapi.back4app.com/classes/ArticleCategory | jq

Anda dapat memperoleh kunci dari “Dasbor Back4app > Pengaturan Aplikasi > Keamanan & Kunci”.

Seperti yang dapat Anda lihat ketika menggunakan cURL, Anda harus menentukan jenis metode HTTP dan memberikan ID aplikasi dan kunci REST API Anda. Selain itu, Anda dapat menyalurkan respons ke dalam jq untuk memformatnya secara otomatis dan menyorotnya dengan warna.

Referensi API

Hal hebat lainnya tentang Back4app adalah secara otomatis menghasilkan referensi API untuk semua kelas basis data Anda. Setiap kali Anda membuat perubahan, perubahan tersebut tercermin dalam dokumentasi.

Untuk mengakses referensi API, pilih “Database” pada bilah sisi, dan gunakan tiga titik di kanan atas layar untuk melihat semua opsi. Terakhir, pilih “Referensi API”.

Referensi API berisi deskripsi semua kelas basis data Anda, instruksi untuk operasi CRUD, contoh permintaan, respons, dan cuplikan kode.

Itu saja untuk backend. Di bagian selanjutnya, kita akan melihat bagaimana mengimplementasikan frontend yang dapat berkomunikasi dengan backend.

Frontend

Seperti yang telah disebutkan di atas, kita akan menggunakan React dengan Next.js 13 untuk membangun frontend. Secara umum, ada tiga cara untuk menyambungkan backend berbasis Parse dari frontend JavaScript:

1. Dengan menggunakan REST API (permintaan dan respons HTTP)
2. Dengan menggunakan API GraphQL (dibahas dalam artikel ini)
3. Dengan menggunakan JavaScript SDK

Anda harus memilih opsi terakhir atau opsi kedua terakhir. Penggunaan langsung REST API tidak disarankan pada aplikasi klien yang dapat menggunakan Parse SDK (misalnya JavaScript, Flutter, Android, iOS, Xamarin). Hal ini dikarenakan Parse SDK memungkinkan Anda untuk menulis kode yang lebih bersih dan tidak terlalu rentan terhadap kesalahan. Di balik layar, Parse SDK menggunakan REST API.

Buat Aplikasi Berikutnya

Lanjutkan dan buat proyek Next.js dengan menggunakan utilitas create-next-app. Buka terminal Anda dan jalankan perintah berikut:

$ yarn create next-app

√ What is your project named? ... back4app-graphql
√ Would you like to use TypeScript with this project? ... No
√ Would you like to use ESLint with this project? ... Yes
√ Would you like to use the `src/` directory with this project? ... No
√ Would you like to use the experimental `app/` directory with this project? ... No
√ What import alias would you like configured? ... @/*

Successfully created a Next.js app.

Selanjutnya, jalankan server pengembangan:

$ yarn dev

Navigasikan ke http://localhost:3000 dan Anda akan melihat halaman arahan Next.js.

ChakraUI

Untuk membuat proses pembuatan UI/UX menjadi lebih mudah, kita akan menggunakan ChakraUI. Chakra UI adalah library komponen yang tidak rumit, modular, dan ramah pengguna yang menyediakan semua elemen yang diperlukan untuk mengembangkan aplikasi React Anda.

Jika Anda mengalami masalah, lihat ChakraUI: Memulai dengan Next.js.

Pertama-tama, instal Chakra dan ketergantungannya dengan menjalankannya:

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

Selanjutnya, buka _pages/app.tsx Anda dan bungkus aplikasi Anda dengan ChakraProvider seperti ini:

// pages/_app.tsx

import "../styles/globals.css";
import {ChakraProvider, extendTheme} from "@chakra-ui/react";

export const theme = extendTheme({});

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

export default MyApp;

Jangan lupa untuk mengimpor ChakraProvider:

import {ChakraProvider} from "@chakra-ui/provider";

Muat skrip mode warna sebelum konten untuk menghindari kilatan warna acak. Untuk melakukannya, Anda dapat memanfaatkan _document.js seperti ini:

// pages/_document.js

import {ColorModeScript} from "@chakra-ui/react";
import { Html, Head, Main, NextScript } from "next/document";
import {theme} from "@/pages/_app";

export default function Document() {
  return (
    <Html lang='en'>
      <Head />
      <body>
        <ColorModeScript initialColorMode={theme.config.initialColorMode} />
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Bagus, Anda telah berhasil menginstal ChakraUI.

Antarmuka Pengguna

Selanjutnya, mari kita mengimplementasikan UI. Kita akan membuat dua halaman berikut ini:

1. / menampilkan daftar artikel
2. / / menampilkan artikel tertentu

Mulailah dengan indeks. Ganti konten pages/index.js dengan yang berikut ini:

// pages/index.js

import {Card, CardBody, Container, Heading, 
        Link, Spinner, Stack, Text} from "@chakra-ui/react";
import NextLink from "next/link";
import {useEffect, useState} from "react";

export default function Home() {

  const [isLoading, setIsLoading] = useState(true);
  const [articles, setArticles] = useState([]);

  return (
    <>
      <main>
        <Container maxW="container.lg">
          <Heading as="h1" my="4">
            back4app-rest
          </Heading>
          {isLoading ? (
            <Spinner size="lg"/>
          ) : (
            <Stack spacing="4" direction="column">
              {articles.map((article, index) => (
                <Card key={index} w="100%">
                  <CardBody>
                    <Stack spacing="3">
                      <Heading size="md">
                        <Link as={NextLink} href={article.get("slug")}>
                          {article.get("title")}
                        </Link>
                      </Heading>
                      <Text>
                        {article.get("shortContent")}
                      </Text>
                    </Stack>
                  </CardBody>
                </Card>
              ))}
            </Stack>
          )}
        </Container>
      </main>
    </>
  );
}

1. Kita telah menyiapkan artikel dan status isLoading yang akan kita gunakan nanti saat mengambil data.
2. Kami menggunakan komponen dasar ChakraUI untuk mendesain antarmuka pengguna.
3. Untuk menampilkan semua artikel, kita mengulang status artikel.

Selanjutnya, navigasikan ke pages/[slug].js dan ubahlah menjadi seperti berikut ini:

// pages/[slug].js

import {useRouter} from "next/router";
import {Card, CardBody, Container, Heading,
        Link, Spinner, Stack, Text} from "@chakra-ui/react";
import NextLink from "next/link";
import {useEffect, useState} from "react";

export default function Article() {

  const router = useRouter();
  const {slug} = router.query;

  const [isLoading, setIsLoading] = useState(true);
  const [article, setArticle] = useState(null);

  return (
    <>
      <main>
        <Container maxW="container.lg">
          <Heading as="h1" my="4">
            back4app-rest
          </Heading>
          {isLoading ? (
            <Spinner size="lg"/>
          ) : (
            <>
              {article == null ? (
                <Text>This article does not exist.</Text>
              ) : (
                <Card w="100%">
                  <CardBody>
                    <Stack spacing="3">
                      <Heading size="md">{article.get("title")}</Heading>
                      <Text>
                        {article.get("content")}
                      </Text>
                      <Text fontSize="sm">
                        Posted on {new Date(article.get("createdAt")).toDateString()}
                      </Text>
                    </Stack>
                  </CardBody>
                </Card>
              )}
            </>
          )}
          <Text size="sm" mt="2" align="right">
              <Link as={NextLink} href="/">← Go back</Link>
          </Text>
        </Container>
      </main>
    </>
  );
}

1. Kami menyiapkan status artikel untuk menyimpan artikel.
2. Kami menggunakan Next Router untuk mengambil parameter slug dari URL.

Integrasi Backend

Pada bagian terakhir ini, kita akan menghubungkan frontend ke backend.

Untuk menggunakan Parse SDK, pertama-tama kita harus menginstalnya. Lanjutkan dan jalankan perintah berikut ini:

$ yarn add parse @react-native-async-storage/async-storage

Selanjutnya, navigasikan ke halaman/_app.js Anda dan inisialisasi Parse seperti ini:

// pages/_app.js

const PARSE_HOST_URL = "https://parseapi.back4app.com/";
Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");  // replace me
Parse.serverURL = PARSE_HOST_URL;

export default function App({ Component, pageProps }) {
  return (
      // ...
  );
}

Jangan lupakan impornya:

import Parse from "parse/dist/parse.min.js";

Untuk mengambil artikel pada halaman indeks kita dapat menggunakan Parse.Query. Setelah data diambil, kita dapat menyimpannya dalam artikel dan mengatur isLoading menjadi false:

// pages/index.js

export default function Home() {

  // ...

  const getArticles = async () => {
    const query = new Parse.Query("Article");
    setArticles(await query.find());
    setIsLoading(false);
  };

  useEffect(() => {
    getArticles();
  }, []);

  return (
    // ...
  );
}

Kita kemudian dapat melakukan hal serupa untuk artikel di pages/[slug].js:

// pages/[slug].js

export default function Article() {

  // ...

  const getArticle = async () => {
    const query = new Parse.Query("Article");
    query.equalTo("slug", slug);
    const results = await query.find();
    setIsLoading(false);
    if (results.length === 0) return;
    setArticle(results[0]);
  };

  useEffect(() => {
    getArticle();
  }, []);

  return (
    // ...
  );
}

Sekali lagi, jangan lupa untuk mengimpor Parse di kedua file tersebut.

import Parse from "parse/dist/parse.min.js";

Jalankan server pengembangan Berikutnya (jika belum berjalan) dan kunjungi http://localhost:3000 di peramban web favorit Anda. Anda akan melihat daftar artikel Anda dan artikel-artikel tersebut seharusnya dapat dibaca.

Kesimpulan

Dalam artikel ini, Anda telah mempelajari tentang API, RESTful API, serta kelebihan dan kekurangannya. Sekarang Anda seharusnya sudah dapat membuat RESTful API sederhana dan menyambungkannya dari aplikasi frontend.

Anda bisa mendapatkan kode sumber final di GitHub.

Jika Anda menikmati artikel ini, silakan baca juga artikel Cara membuat API GraphQL.