Membangun Aplikasi React Full-Stack

Implementasi

• Buat API dan basis data GraphQL

  a. Tambahkan API GraphQL ke aplikasi Anda dengan menjalankan perintah berikut dari root direktori aplikasi Anda:
  

  amplify add api
  
  ? Select from one of the below mentioned services: GraphQL
  ? Here is the GraphQL API that we will create. Select a setting to edit or continue: Continue
  ? Choose a schema template: Single object with fields (e.g., "Todo" with ID, name, description)
  ? Do you want to edit the schema now? (Y/n) yes

  Code snippet copied

  Copy

  b. Buka skema GraphQL di editor teks Anda: /amplify/backend/api/<api_name>/schema.graphql.

  Perbarui file dengan skema berikut:
  

  type Note @model @auth(rules: [ { allow: public } ] ){
    id: ID!
    name: String!
    description: String
  }

  Code snippet copied

  Copy

  c. Simpan file.
  

• Deploy API

  Setelah API dikonfigurasi secara lokal, kini saatnya untuk melakukan deployment API. Untuk melakukannya, jalankan perintah push Amplify:
  

  amplify push --y

  Code snippet copied

  Copy

  Perintah ini akan melakukan tiga hal:

  1. Membuat API AWS AppSync
  2. Membuat tabel DynamoDB
  3. Membuat operasi GraphQL lokal di folder yang terletak di src/graphql dan dapat Anda gunakan untuk mengueri API

  Untuk melihat API GraphQL di akun Anda kapan saja, jalankan perintah berikut, lalu pilih API GraphQL di panel navigasi kiri:

  amplify console api
  
  > Choose GraphQL
  

  Code snippet copied

  Copy

  Untuk melihat aplikasi Amplify di akun Anda kapan saja, jalankan perintah berikut:
  

  amplify console
  ? Which site do you want to open? AWS console

  Code snippet copied

  Copy
• Tulis kode frontend untuk berinteraksi dengan API

  Setelah backend di-deploy, mari kita menulis beberapa kode untuk memungkinkan pengguna membuat, daftar, dan menghapus catatan.

  Perbarui src/App.js dengan kode berikut:

  import React, { useState, useEffect } from "react";
  import "./App.css";
  import "@aws-amplify/ui-react/styles.css";
  import { API } from "aws-amplify";
  import {
    Button,
    Flex,
    Heading,
    Text,
    TextField,
    View,
    withAuthenticator,
  } from "@aws-amplify/ui-react";
  import { listNotes } from "./graphql/queries";
  import {
    createNote as createNoteMutation,
    deleteNote as deleteNoteMutation,
  } from "./graphql/mutations";
  
  const App = ({ signOut }) => {
    const [notes, setNotes] = useState([]);
  
    useEffect(() => {
      fetchNotes();
    }, []);
  
    async function fetchNotes() {
      const apiData = await API.graphql({ query: listNotes });
      const notesFromAPI = apiData.data.listNotes.items;
      setNotes(notesFromAPI);
    }
  
    async function createNote(event) {
      event.preventDefault();
      const form = new FormData(event.target);
      const data = {
        name: form.get("name"),
        description: form.get("description"),
      };
      await API.graphql({
        query: createNoteMutation,
        variables: { input: data },
      });
      fetchNotes();
      event.target.reset();
    }
  
    async function deleteNote({ id }) {
      const newNotes = notes.filter((note) => note.id !== id);
      setNotes(newNotes);
      await API.graphql({
        query: deleteNoteMutation,
        variables: { input: { id } },
      });
    }
  
    return (
      <View className="App">
        <Heading level={1}>My Notes App</Heading>
        <View as="form" margin="3rem 0" onSubmit={createNote}>
          <Flex direction="row" justifyContent="center">
            <TextField
              name="name"
              placeholder="Note Name"
              label="Note Name"
              labelHidden
              variation="quiet"
              required
            />
            <TextField
              name="description"
              placeholder="Note Description"
              label="Note Description"
              labelHidden
              variation="quiet"
              required
            />
            <Button type="submit" variation="primary">
              Create Note
            </Button>
          </Flex>
        </View>
        <Heading level={2}>Current Notes</Heading>
        <View margin="3rem 0">
          {notes.map((note) => (
            <Flex
              key={note.id || note.name}
              direction="row"
              justifyContent="center"
              alignItems="center"
            >
              <Text as="strong" fontWeight={700}>
                {note.name}
              </Text>
              <Text as="span">{note.description}</Text>
              <Button variation="link" onClick={() => deleteNote(note)}>
                Delete note
              </Button>
            </Flex>
          ))}
        </View>
        <Button onClick={signOut}>Sign Out</Button>
      </View>
    );
  };
  
  export default withAuthenticator(App);

  Code snippet copied

  Copy

  Aplikasi kami memiliki tiga fungsi utama:

  1. fetchNotes - Fungsi ini menggunakan kelas API untuk mengirim kueri ke API GraphQL dan mengambil daftar catatan.
  2. createNote - Fungsi ini juga menggunakan kelas API untuk mengirim mutasi ke API GraphQL. Perbedaan utama adalah bahwa dalam fungsi ini kita meneruskan variabel yang diperlukan untuk mutasi GraphQL sehingga kita dapat membuat catatan baru dengan data formulir.
  3. deleteNote - Seperti createNote, fungsi ini mengirimkan mutasi GraphQL bersama dengan beberapa variabel. Namun, alih-alih membuat catatan, kami justru menghapusnya.
• Jalankan aplikasi

  Untuk menguji aplikasi, jalankan perintah start:
  

  npm start

  Code snippet copied

  Copy