Membuat alur kerja yang memerlukan interaksi manusia menggunakan callback

Tutorial ini menunjukkan cara membuat alur kerja terjemahan yang menunggu input Anda—yang memerlukan manusia di loop—dan yang menghubungkan database Firestore, dua Cloud Functions, Cloud Translation API, dan halaman web yang menggunakan Firebase SDK untuk melakukan pembaruan secara real time.

Dengan Workflows, Anda dapat mendukung endpoint callback (atau webhook) yang menunggu permintaan HTTP tiba di endpoint tersebut, dan melanjutkan eksekusi alur kerja di lain waktu. Dalam hal ini, alur kerja akan menunggu input Anda untuk menolak atau memvalidasi terjemahan beberapa teks, tetapi juga dapat menunggu proses eksternal. Untuk mengetahui informasi selengkapnya, lihat Menunggu menggunakan callback.

Arsitektur

Tutorial ini akan membuat aplikasi web yang memungkinkan Anda melakukan hal berikut:

Pada halaman web terjemahan, masukkan teks yang ingin diterjemahkan dari bahasa Inggris ke bahasa Prancis. Klik Terjemahkan.
Dari halaman web, sebuah Cloud Function akan dipanggil untuk meluncurkan eksekusi alur kerja. Teks yang akan diterjemahkan diteruskan sebagai parameter ke fungsi dan alur kerja.
Teks disimpan di database Cloud Firestore. Cloud Translation API dipanggil. Terjemahan yang ditampilkan disimpan dalam database. Aplikasi web di-deploy menggunakan Firebase Hosting dan diupdate secara real time untuk menampilkan teks yang diterjemahkan.
Langkah create_callback dalam alur kerja membuat URL endpoint callback yang juga disimpan di database Firestore. Halaman web kini menampilkan tombol Validasi dan Tolak.
Alur kerja kini dijeda dan menunggu permintaan POST HTTP eksplisit ke URL endpoint callback.
Anda dapat memutuskan apakah akan memvalidasi atau menolak terjemahan. Jika sebuah tombol diklik, Cloud Function kedua akan memanggil endpoint callback yang dibuat oleh alur kerja, yang meneruskan status persetujuan. Alur kerja melanjutkan eksekusinya dan menyimpan status persetujuan true atau false di database Firestore.

Diagram ini memberikan ringkasan proses:

Tujuan

Men-deploy aplikasi web.
Buat database Firestore untuk menyimpan permintaan terjemahan.
Deploy Cloud Functions untuk menjalankan alur kerja.
Men-deploy dan menjalankan alur kerja untuk mengatur seluruh proses.

Biaya

Dalam dokumen ini, Anda menggunakan komponen Google Cloud yang dapat ditagih berikut:

Untuk membuat perkiraan biaya berdasarkan proyeksi penggunaan Anda, gunakan kalkulator harga. Pengguna baru Google Cloud mungkin memenuhi syarat untuk mendapatkan uji coba gratis.

Sebelum memulai

Batasan keamanan yang ditentukan oleh organisasi mungkin mencegah Anda menyelesaikan langkah-langkah berikut. Untuk mengetahui informasi pemecahan masalah, lihat Mengembangkan aplikasi di lingkungan Google Cloud yang terbatas.

Sign in to your Google Cloud account. If you're new to Google Cloud, create an account to evaluate how our products perform in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.

Install the Google Cloud CLI.

To initialize the gcloud CLI, run the following command:

gcloud init

Buat atau pilih project Google Cloud.

Membuat project Google Cloud:
```
gcloud projects create PROJECT_ID
```
Ganti PROJECT_ID dengan nama untuk project Google Cloud yang Anda buat.
Pilih project Google Cloud yang Anda buat:
```
gcloud config set project PROJECT_ID
```
Ganti PROJECT_ID dengan nama project Google Cloud Anda.

Make sure that billing is enabled for your Google Cloud project.

Aktifkan API App Engine, Cloud Build, Cloud Functions, Firestore, Translation, and Workflows :

gcloud services enable appengine.googleapis.com cloudbuild.googleapis.com cloudfunctions.googleapis.com firestore.googleapis.com translate.googleapis.com workflows.googleapis.com

Install the Google Cloud CLI.

To initialize the gcloud CLI, run the following command:

gcloud init

Buat atau pilih project Google Cloud.

Membuat project Google Cloud:
```
gcloud projects create PROJECT_ID
```
Ganti PROJECT_ID dengan nama untuk project Google Cloud yang Anda buat.
Pilih project Google Cloud yang Anda buat:
```
gcloud config set project PROJECT_ID
```
Ganti PROJECT_ID dengan nama project Google Cloud Anda.

Make sure that billing is enabled for your Google Cloud project.

Aktifkan API App Engine, Cloud Build, Cloud Functions, Firestore, Translation, and Workflows :

gcloud services enable appengine.googleapis.com cloudbuild.googleapis.com cloudfunctions.googleapis.com firestore.googleapis.com translate.googleapis.com workflows.googleapis.com

Update komponen Google Cloud CLI:
```
gcloud components update
```

Login menggunakan akun Anda:
```
gcloud auth login
```
Setel ID project dan lokasi default yang digunakan dalam tutorial ini:
```
export GOOGLE_CLOUD_PROJECT=PROJECT_ID
export REGION=REGION
gcloud config set workflows/location ${REGION}
```
Ganti kode berikut:
- PROJECT_ID: Project ID Google Cloud Anda. Anda dapat menemukan project ID di halaman Welcome pada Konsol Google Cloud.
- REGION: lokasi Workflows yang didukung pilihan Anda.

Men-deploy Cloud Function pertama

Cloud Function ini meluncurkan eksekusi alur kerja. Teks yang akan diterjemahkan akan diteruskan sebagai parameter ke fungsi dan alur kerja.

Buat direktori bernama callback-translation dan dengan subdirektori yang disebut invokeTranslationWorkflow,translationCallbackCall, dan public:
```
mkdir -p ~/callback-translation/{invokeTranslationWorkflow,translationCallbackCall,public}
```

Ubah ke direktori invokeTranslationWorkflow:

cd ~/callback-translation/invokeTranslationWorkflow

Buat file teks dengan nama file index.js yang berisi kode Node.js berikut:

const cors = require('cors')({origin: true});
const {ExecutionsClient} = require('@google-cloud/workflows');
const client = new ExecutionsClient();

exports.invokeTranslationWorkflow = async (req, res) => {
  cors(req, res, async () => {
    const text = req.body.text;
    console.log(`Translation request for "${text}"`);

    const PROJECT_ID = process.env.PROJECT_ID;
    const CLOUD_REGION = process.env.CLOUD_REGION;
    const WORKFLOW_NAME = process.env.WORKFLOW_NAME;

    const execResponse = await client.createExecution({
      parent: client.workflowPath(PROJECT_ID, CLOUD_REGION, WORKFLOW_NAME),
      execution: {
        argument: JSON.stringify({text})
      }
    });
    console.log(`Translation workflow execution request: ${JSON.stringify(execResponse)}`);

    const execName = execResponse[0].name;
    console.log(`Created translation workflow execution: ${execName}`);

    res.set('Access-Control-Allow-Origin', '*');
    res.status(200).json({executionId: execName});
  });
};

Buat file teks dengan nama file package.json yang berisi metadata npm berikut:

{
  "name": "launch-translation-workflow",
  "version": "0.0.1",
  "dependencies": {
    "@google-cloud/workflows": "^1.2.5",
    "cors": "^2.8.5"
  }
}

Deploy fungsi dengan pemicu HTTP dan izinkan akses yang tidak diautentikasi:

gcloud functions deploy invokeTranslationWorkflow \
--region=${REGION} \
--runtime nodejs14 \
--entry-point=invokeTranslationWorkflow \
--set-env-vars PROJECT_ID=${GOOGLE_CLOUD_PROJECT},CLOUD_REGION=${REGION},WORKFLOW_NAME=translation_validation \
--trigger-http \
--allow-unauthenticated

Fungsi mungkin memerlukan waktu beberapa menit untuk di-deploy. Atau, Anda dapat menggunakan antarmuka Cloud Functions di Konsol Google Cloud untuk men-deploy fungsi tersebut.

Setelah fungsi di-deploy, Anda dapat mengonfirmasi properti httpsTrigger.url:
```
gcloud functions describe invokeTranslationWorkflow
```
Perhatikan URL yang ditampilkan sehingga Anda dapat menggunakannya di langkah berikutnya.

Men-deploy Cloud Function kedua

Cloud Function ini membuat permintaan POST HTTP ke endpoint callback yang dibuat oleh alur kerja, yang meneruskan status persetujuan yang mencerminkan apakah terjemahan divalidasi atau ditolak.

Ubah ke direktori translationCallbackCall:
```
cd ../translationCallbackCall
```

Buat file teks dengan nama file index.js yang berisi kode Node.js berikut:

const cors = require('cors')({origin: true});
const fetch = require('node-fetch');

exports.translationCallbackCall = async (req, res) => {
  cors(req, res, async () => {
    res.set('Access-Control-Allow-Origin', '*');

    const {url, approved} = req.body;
    console.log("Approved? ", approved);
    console.log("URL = ", url);
    const {GoogleAuth} = require('google-auth-library');
    const auth = new GoogleAuth();
    const token = await auth.getAccessToken();
    console.log("Token", token);

    try {
      const resp = await fetch(url, {
          method: 'POST',
          headers: {
              'accept': 'application/json',
              'content-type': 'application/json',
              'authorization': `Bearer ${token}`
          },
          body: JSON.stringify({ approved })
      });
      console.log("Response = ", JSON.stringify(resp));

      const result = await resp.json();
      console.log("Outcome = ", JSON.stringify(result));

      res.status(200).json({status: 'OK'});
    } catch(e) {
      console.error(e);

      res.status(200).json({status: 'error'});
    }
  });
};

Buat file teks dengan nama file package.json yang berisi metadata npm berikut:

{
  "name": "approve-translation-workflow",
  "version": "0.0.1",
  "dependencies": {
    "cors": "^2.8.5",
    "node-fetch": "^2.6.1",
    "google-auth-library": "^7.1.1"
  }
}

Deploy fungsi dengan pemicu HTTP dan izinkan akses yang tidak diautentikasi:
```
gcloud functions deploy translationCallbackCall \
--region=${REGION} \
--runtime nodejs14 \
--entry-point=translationCallbackCall \
--trigger-http \
--allow-unauthenticated
```
Fungsi mungkin memerlukan waktu beberapa menit untuk di-deploy. Atau, Anda dapat menggunakan antarmuka Cloud Functions di Konsol Google Cloud untuk men-deploy fungsi tersebut.
Setelah fungsi di-deploy, Anda dapat mengonfirmasi properti httpsTrigger.url:
```
gcloud functions describe translationCallbackCall
```
Perhatikan URL yang ditampilkan sehingga Anda dapat menggunakannya di langkah berikutnya.

Men-deploy alur kerja

Alur kerja terdiri dari serangkaian langkah yang dijelaskan menggunakan sintaksis Workflows, yang dapat ditulis dalam format YAML atau JSON. Ini adalah definisi alur kerja. Setelah membuat alur kerja, Anda bisa men-deploy-nya agar tersedia untuk dieksekusi.

Ubah ke direktori callback-translation:
```
cd ..
```

Buat file teks dengan nama file translation-validation.yaml dan berisi konten berikut:

main:
    params: [translation_request]
    steps:
        - log_request:
            call: sys.log
            args:
                text: ${translation_request}
        - vars:
            assign:
                - exec_id: ${sys.get_env("GOOGLE_CLOUD_WORKFLOW_EXECUTION_ID")}
                - text_to_translate: ${translation_request.text}
                - database_root: ${"projects/" + sys.get_env("GOOGLE_CLOUD_PROJECT_ID") + "/databases/(default)/documents/translations/"}
        - log_translation_request:
            call: sys.log
            args:
                text: ${text_to_translate}

        - store_translation_request:
            call: googleapis.firestore.v1.projects.databases.documents.patch
            args:
                name: ${database_root + exec_id}
                updateMask:
                    fieldPaths: ['text']
                body:
                    fields:
                        text:
                            stringValue: ${text_to_translate}
            result: store_translation_request_result

        - translate:
            call: googleapis.translate.v2.translations.translate
            args:
                query:
                    q: ${text_to_translate}
                    target: "FR"
                    format: "text"
                    source: "EN"
            result: translation_result
        - assign_translation:
            assign:
                - translation: ${translation_result.data.translations[0].translatedText}
        - log_translation_result:
            call: sys.log
            args:
                text: ${translation}

        - store_translated_text:
            call: googleapis.firestore.v1.projects.databases.documents.patch
            args:
                name: ${database_root + exec_id}
                updateMask:
                    fieldPaths: ['translation']
                body:
                    fields:
                        translation:
                            stringValue: ${translation}
            result: store_translation_request_result

        - create_callback:
            call: events.create_callback_endpoint
            args:
                http_callback_method: "POST"
            result: callback_details
        - log_callback_details:
            call: sys.log
            args:
                text: ${callback_details}

        - store_callback_details:
            call: googleapis.firestore.v1.projects.databases.documents.patch
            args:
                name: ${database_root + exec_id}
                updateMask:
                    fieldPaths: ['callback']
                body:
                    fields:
                        callback:
                            stringValue: ${callback_details.url}
            result: store_callback_details_result

        - await_callback:
            call: events.await_callback
            args:
                callback: ${callback_details}
                timeout: 3600
            result: callback_request
        - assign_approval:
            assign:
                - approved: ${callback_request.http_request.body.approved}

        - store_approval:
            call: googleapis.firestore.v1.projects.databases.documents.patch
            args:
                name: ${database_root + exec_id}
                updateMask:
                    fieldPaths: ['approved']
                body:
                    fields:
                        approved:
                            booleanValue: ${approved}
            result: store_approval_result

        - return_outcome:
            return:
                text: ${text_to_translate}
                translation: ${translation}
                approved: ${approved}

Setelah membuat alur kerja, Anda dapat men-deploy-nya, tetapi jangan menjalankan alur kerja tersebut:
```
gcloud workflows deploy translation_validation --source=translation-validation.yaml
```

Buat aplikasi web Anda

Buat aplikasi web yang memanggil Cloud Function yang meluncurkan eksekusi alur kerja. Halaman web akan diperbarui secara real time untuk menampilkan hasil permintaan terjemahan.

Ubah ke direktori public:
```
cd public
```

Buat file teks dengan nama file index.html yang berisi markup HTML berikut. (Di langkah selanjutnya, Anda akan mengubah file index.html dan menambahkan skrip Firebase SDK.)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">

    <title>Frenglish translation — Feature Workflows callbacks</title>

    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.42/dist/themes/base.css">
    <script type="module"
        src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.42/dist/shoelace.js"></script>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <h1>Translate from English to French</h1>

    <sl-form class="form-overview">
        <sl-textarea id="text" placeholder="The quick brown fox jumps over the lazy dog."
            label="English text to translate"></sl-textarea>
        <p></p>
        <sl-button id="translateBtn" type="primary">Translate</sl-button>
        <p></p>
        <sl-alert id="translation" type="primary">
            Le rapide renard brun saute au dessus du chien paresseux.
        </sl-alert>
        <p></p>
        <div id="buttonRow" style="display: none;">
            <sl-button id="validateBtn" type="success">Validate</sl-button>
            <sl-button id="rejectBtn" type="danger">Reject</sl-button>
        </div>
        <p></p>
        <sl-alert id="validationAlert" type="success">
            <sl-icon slot="icon" name="check2-circle"></sl-icon>
            <strong>The translation has been validated</strong><br>
            Glad that you liked our translation! We'll save it in our database.
        </sl-alert>
        <sl-alert id="rejectionAlert" type="danger">
            <sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
            <strong>The translation has been rejected</strong><br>
            A pity the translation isn't good! We'll do better next time!
        </sl-alert>
        <p></p>
        <sl-button id="newBtn" style="display: none;" type="primary">New translation</sl-button>
    </sl-form>

    <script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-firestore.js"></script>

    <script>
        var firebaseConfig = {
            apiKey: "XXXX",
            authDomain: "XXXX",
            projectId: "XXXX",
            storageBucket: "XXXX",
            messagingSenderId: "XXXX",
            appId: "XXXX",
            measurementId: "XXXX"
        };
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
    </script>
    <script src="./script.js" type="module"></script>
</body>

</html>

Buat file teks dengan nama file script.js yang berisi kode JavaScript berikut:

document.addEventListener("DOMContentLoaded", async function (event) {
    const textArea = document.getElementById("text");
    textArea.focus();

    const newBtn = document.getElementById("newBtn");
    newBtn.addEventListener("sl-focus", event => {
        event.target.blur();
        window.location.reload();
    });

    const translationAlert = document.getElementById("translation");
    const buttonRow = document.getElementById("buttonRow");

    var callbackUrl = "";

    const validationAlert = document.getElementById("validationAlert");
    const rejectionAlert = document.getElementById("rejectionAlert");
    const validateBtn = document.getElementById("validateBtn");
    const rejectBtn = document.getElementById("rejectBtn");

    const translateBtn = document.getElementById("translateBtn");
    translateBtn.addEventListener("sl-focus", async event => {
        event.target.disabled = true;
        event.target.loading = true;
        textArea.disabled = true;

        console.log("Text to translate = ", textArea.value);

        const fnUrl = UPDATE_ME;

        try {
            console.log("Calling workflow executor function...");
            const resp = await fetch(fnUrl, {
                method: "POST",
                headers: {
                    "accept": "application/json",
                    "content-type": "application/json"
                },
                body: JSON.stringify({ text: textArea.value })
            });
            const executionResp = await resp.json();
            const executionId = executionResp.executionId.slice(-36);
            console.log("Execution ID = ", executionId);

            const db = firebase.firestore();
            const translationDoc = db.collection("translations").doc(executionId);

            var translationReceived = false;
            var callbackReceived =  false;
            var approvalReceived = false;
            translationDoc.onSnapshot((doc) => {
                console.log("Firestore update", doc.data());
                if (doc.data()) {
                    if ("translation" in doc.data()) {
                        if (!translationReceived) {
                            console.log("Translation = ", doc.data().translation);
                            translationReceived = true;
                            translationAlert.innerText = doc.data().translation;
                            translationAlert.open = true;
                        }
                    }
                    if ("callback" in doc.data()) {
                        if (!callbackReceived) {
                            console.log("Callback URL = ", doc.data().callback);
                            callbackReceived = true;
                            callbackUrl = doc.data().callback;
                            buttonRow.style.display = "block";
                        }
                    }
                    if ("approved" in doc.data()) {
                        if (!approvalReceived) {
                            const approved = doc.data().approved;
                            console.log("Approval received = ", approved);
                            if (approved) {
                                validationAlert.open = true;
                                buttonRow.style.display = "none";
                                newBtn.style.display = "inline-block";
                            } else {
                                rejectionAlert.open = true;
                                buttonRow.style.display = "none";
                                newBtn.style.display = "inline-block";
                            }
                            approvalReceived = true;
                        }
                    }
                }
            });
        } catch (e) {
            console.log(e);
        }
        event.target.loading = false;
    });

    validateBtn.addEventListener("sl-focus", async event => {
        validateBtn.disabled = true;
        rejectBtn.disabled = true;
        validateBtn.loading = true;
        validateBtn.blur();

        // call callback
        await callCallbackUrl(callbackUrl, true);
    });

    rejectBtn.addEventListener("sl-focus", async event => {
        rejectBtn.disabled = true;
        validateBtn.disabled = true;
        rejectBtn.loading = true;
        rejectBtn.blur();

        // call callback
        await callCallbackUrl(callbackUrl, false);
    });

});

async function callCallbackUrl(url, approved) {
    console.log("Calling callback URL with status = ", approved);

    const fnUrl = UPDATE_ME;
    try {
        const resp = await fetch(fnUrl, {
            method: "POST",
            headers: {
                "accept": "application/json",
                "content-type": "application/json"
            },
            body: JSON.stringify({ url, approved })
        });
        const result = await resp.json();
        console.log("Callback answer = ", result);
    } catch(e) {
        console.log(e);
    }
}

Edit file script.js dan ganti placeholder UPDATE_ME dengan URL Cloud Function yang Anda catat sebelumnya.
1. Di metode translateBtn.addEventListener, ganti const fnUrl = UPDATE_ME; dengan:
```
const fnUrl = "https://REGION-PROJECT_ID.cloudfunctions.net/invokeTranslationWorkflow";
```
2. Di fungsi callCallbackUrl, ganti const fnUrl = UPDATE_ME; dengan:
```
const fnUrl = "https://REGION-PROJECT_ID.cloudfunctions.net/translationCallbackCall";
```

Buat file teks dengan nama file style.css yang berisi gaya cascading berikut:

* {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
    margin: 20px;
}

h1, h2, h3, h4 {
    color: #0ea5e9;
}

Menambahkan Firebase ke aplikasi web

Dalam tutorial ini, halaman HTML, skrip JavaScript, dan style sheet CSS di-deploy sebagai aset statis menggunakan Firebase Hosting, tetapi halaman tersebut dapat dihosting di mana saja dan ditayangkan secara lokal di mesin Anda sendiri untuk tujuan pengujian.

Membuat project Firebase

Agar dapat menambahkan Firebase ke aplikasi, Anda perlu membuat project Firebase yang akan dihubungkan ke aplikasi.

Di Firebase console, klik Create a project, lalu pilih project Google Cloud yang ada dari menu drop-down untuk menambahkan resource Firebase ke project tersebut.
Klik Continue hingga Anda melihat opsi untuk menambahkan Firebase.
Lewati penyiapan Google Analytics untuk project Anda.
Klik Add Firebase.

Firebase otomatis menyediakan resource untuk project Firebase Anda. Setelah selesai, Anda akan dibawa ke halaman ringkasan untuk project Anda di Firebase console.

Mendaftarkan aplikasi ke Firebase

Setelah memiliki project Firebase, Anda dapat menambahkan aplikasi web ke project tersebut.

Di bagian tengah halaman ringkasan project, klik ikon Web (</>) untuk meluncurkan alur kerja penyiapan.
Masukkan nama panggilan untuk aplikasi Anda.

Bagian ini hanya dapat dilihat oleh Anda di Firebase console.
Lewati penyiapan Firebase Hosting untuk saat ini.
Klik Register app dan lanjutkan ke konsol.

Aktifkan Cloud Firestore

Aplikasi web menggunakan Cloud Firestore untuk menerima dan menyimpan data. Anda harus mengaktifkan Cloud Firestore.

Di bagian Build Firebase console, klik Firestore Database.

(Anda mungkin harus meluaskan panel navigasi kiri terlebih dahulu untuk melihat bagian Build.)
Di panel Cloud Firestore, klik Create database.
Pilih Mulai dalam mode pengujian, menggunakan aturan keamanan seperti berikut:
```
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
  match /{document=**} {
    allow read, write;
  }
}
}
```
Catatan: Mode pengujian memastikan bahwa Anda dapat menulis ke database dengan bebas selama pengembangan. Tindakan ini tidak direkomendasikan untuk aplikasi produksi.
Klik Berikutnya setelah membaca pernyataan penyangkalan tentang aturan keamanan.
Tetapkan lokasi penyimpanan data Cloud Firestore. Anda dapat menyetujui setelan default atau memilih region yang dekat dengan Anda.
Klik Enable untuk menyediakan Firestore.

Menambahkan Firebase SDK dan melakukan inisialisasi Firebase

Firebase menyediakan library JavaScript untuk sebagian besar produk Firebase. Sebelum menggunakan Firebase Hosting, Anda harus menambahkan Firebase SDK ke aplikasi Web Anda.

Untuk melakukan inisialisasi Firebase di aplikasi, Anda harus memberikan konfigurasi project Firebase aplikasi Anda.
1. Di Firebase console, buka Project settings .
2. Di panel Your apps, pilih aplikasi Anda.
3. Di panel SDK setup and configuration, untuk memuat library Firebase SDK dari CDN, pilih CDN.
4. Salin cuplikan ke file index.html di bagian bawah tag <body>, yang menggantikan nilai placeholder XXXX.
Instal Firebase JavaScript SDK.
1. Jika Anda belum memiliki file package.json, buat dengan menjalankan perintah berikut dari direktori callback-translation:
```
npm init
```
2. Instal paket npm firebase dan simpan ke file package.json Anda dengan menjalankan:
```
npm install --save firebase
```

Melakukan inisialisasi dan men-deploy project

Untuk menghubungkan file project lokal ke project Firebase, Anda harus menginisialisasi project. Kemudian, Anda dapat men-deploy aplikasi web.

Jalankan perintah berikut dari direktori callback-translation:
```
firebase init
```
Pilih opsi Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys.
Pilih untuk menggunakan project yang sudah ada dan masukkan project ID Anda.
Terima public sebagai direktori utama publik default.
Pilih untuk mengonfigurasi aplikasi satu halaman.
Lewati penyiapan build dan deploy otomatis dengan GitHub.
Pada perintah File public/index.html already exists. Overwrite?, ketik No.
Ubah ke direktori public:
```
cd public
```
Dari direktori public, jalankan perintah berikut untuk men-deploy project ke situs Anda:
```
firebase deploy --only hosting
```

Menguji aplikasi web secara lokal

Dengan Firebase Hosting, Anda dapat melihat dan menguji perubahan secara lokal serta berinteraksi dengan resource project backend yang diemulasi. Saat menggunakan firebase serve, aplikasi Anda berinteraksi dengan backend yang diemulasi untuk konten dan konfigurasi hosting Anda, tetapi backend Anda yang sebenarnya untuk semua resource project lainnya. Untuk tutorial ini, Anda dapat menggunakan firebase serve, tetapi tidak direkomendasikan saat melakukan pengujian yang lebih ekstensif.

Jalankan perintah berikut dari direktori public:
```
firebase serve
```
Buka aplikasi web di URL lokal yang ditampilkan (biasanya http://localhost:5000).
Masukkan teks dalam bahasa Inggris, lalu klik Terjemahkan.

Terjemahan teks dalam bahasa Prancis akan ditampilkan.

Sekarang Anda dapat mengklik Validasi atau Tolak.

Di database Firestore, Anda dapat memverifikasi konten. Tampilannya akan terlihat seperti berikut:

approved: true
callback: "https://workflowexecutions.googleapis.com/v1/projects/26811016474/locations/us-central1/workflows/translation_validation/executions/68bfce75-5f62-445f-9cd5-eda23e6fa693/callbacks/72851c97-6bb2-45e3-9816-1e3dcc610662_1a16697f-6d90-478d-9736-33190bbe222b"
text: "The quick brown fox jumps over the lazy dog."
translation: "Le renard brun rapide saute par-dessus le chien paresseux."

Status approved adalah true atau false, bergantung pada apakah Anda memvalidasi atau menolak terjemahan.

Selamat! Anda telah membuat alur kerja terjemahan yang memerlukan interaksi manusia yang menggunakan callback Workflows.

Pembersihan

Jika Anda membuat project baru untuk tutorial ini, hapus project tersebut. Jika Anda menggunakan project yang ada dan ingin mempertahankannya tanpa perubahan yang ditambahkan dalam tutorial ini, hapus resource yang dibuat untuk tutorial.

Menghapus project

Cara termudah untuk menghilangkan penagihan adalah dengan menghapus project yang Anda buat untuk tutorial.

Untuk menghapus project:

Perhatian: Menghapus project memiliki efek berikut:

Semua hal dalam project akan dihapus. Jika menggunakan project yang sudah ada untuk tugas dalam dokumen ini, saat Anda menghapusnya, pekerjaan lain yang telah Anda lakukan dalam project tersebut juga akan terhapus.
Project ID kustom hilang. Saat membuat project ini, Anda mungkin telah membuat project ID kustom yang ingin digunakan di masa mendatang. Untuk mempertahankan URL yang menggunakan project ID, seperti URL appspot.com, hapus resource yang dipilih di dalam project, bukan menghapus seluruh project.

Jika Anda berencana mempelajari berbagai arsitektur, tutorial, atau panduan memulai, menggunakan kembali project dapat membantu agar Anda tidak melampaui batas kuota project.

Di konsol Google Cloud, buka halaman Manage resource.
Buka Manage resource
Pada daftar project, pilih project yang ingin Anda hapus, lalu klik Delete.
Pada dialog, ketik project ID, lalu klik Shut down untuk menghapus project.

Menghapus resource tutorial

Hapus konfigurasi default gcloud CLI yang Anda tambahkan selama penyiapan tutorial:
```
gcloud config unset workflows/location
```
Menghapus alur kerja yang dibuat dalam tutorial ini:
```
gcloud workflows delete WORKFLOW_NAME
```
Hapus Cloud Functions yang Anda buat dalam tutorial ini:
```
gcloud functions delete FUNCTION_NAME
```
Anda juga dapat menghapus Cloud Functions dari Konsol Google Cloud.

Membuat alur kerja yang memerlukan interaksi manusia menggunakan callback

Arsitektur

Tujuan

Biaya

Sebelum memulai

Men-deploy Cloud Function pertama

Men-deploy Cloud Function kedua

Men-deploy alur kerja

Buat aplikasi web Anda

Menambahkan Firebase ke aplikasi web

Membuat project Firebase

Mendaftarkan aplikasi ke Firebase

Aktifkan Cloud Firestore

Menambahkan Firebase SDK dan melakukan inisialisasi Firebase

Melakukan inisialisasi dan men-deploy project

Menguji aplikasi web secara lokal

Pembersihan

Menghapus project

Menghapus resource tutorial

Langkah selanjutnya