Ringkasan

Dalam lab ini, Anda akan mengintegrasikan agen AI LangChain dengan aplikasi Flutter. Flutter digunakan sebagai framework aplikasi klien, Agent Search di Gemini Enterprise Agent Platform digunakan sebagai database vektor, dan Agent Runtime di Gemini Enterprise Agent Platform digunakan untuk membangun dan men-deploy agen LangChain. Agen ini menggunakan Gemini, yakni rangkaian model bahasa besar (LLM) yang sangat canggih untuk menghasilkan respons AI terhadap perintah teks dan gambar.

Lab ini telah disediakan sebelumnya dengan VSCode sebagai IDE menggunakan code-server, bersama dengan ekstensi Flutter dan Dart yang diperlukan untuk menjalankan aplikasi Flutter. Lab ini juga menyertakan fwr, yakni alat yang digunakan untuk menyajikan aplikasi Flutter sebagai aplikasi web yang Anda akses menggunakan browser.

Lab ini ditujukan bagi para developer dengan segala tingkat pengalaman yang berkontribusi untuk membangun aplikasi, tetapi mungkin belum memahami pengembangan aplikasi cloud. Akan sangat membantu apabila Anda telah berpengalaman dalam menggunakan Python, dan familier dengan framework Flutter. Anda tidak harus mengenal Flutter agar dapat melakukan tugas-tugas dalam lab ini, tetapi Anda akan meninjau beberapa kode aplikasi Flutter dan menguji fungsi aplikasi tersebut.

Tujuan

Di lab ini, Anda akan melakukan tugas-tugas berikut:

• Membuat penyimpanan data penelusuran dan aplikasi penelusuran menggunakan Aplikasi AI di Konsol Google Cloud.

• Men-deploy agen LangChain menggunakan Gemini Enterprise Agent Platform Workbench.

• Menggunakan aplikasi Python yang terintegrasi dengan Agent Search dan agen LangChain.

• Men-deploy aplikasi ke Cloud Run dan menggunakannya sebagai backend untuk aplikasi Flutter.

• Membuat aplikasi Flutter untuk digunakan sebagai aplikasi chat frontend.

  Berikut adalah ringkasan berbagai komponen yang digunakan dalam lab ini:

  

Penyiapan

Untuk setiap lab, Anda akan memperoleh project Google Cloud baru serta serangkaian resource selama jangka waktu tertentu, tanpa biaya.

1. Login ke Google Skills menggunakan jendela samaran.

2. Perhatikan waktu akses lab (misalnya, 1:15:00), dan pastikan Anda dapat menyelesaikannya dalam waktu tersebut.
   Tidak ada fitur jeda. Bila perlu, Anda dapat memulai ulang lab, tetapi Anda harus memulai dari awal.

3. Jika sudah siap, klik Start lab.

4. Catat kredensial lab (Nama pengguna dan Sandi) Anda. Anda akan menggunakannya untuk login ke Google Cloud Console.

5. Klik Open Google Console.

6. Klik Use another account, lalu salin/tempel kredensial lab ini ke perintah yang muncul.
   Jika menggunakan kredensial lain, Anda akan menerima pesan error atau dikenai biaya.

7. Setujui ketentuan dan lewati halaman resource pemulihan.

Tugas 1. Membuat penyimpanan data penelusuran dan aplikasi penelusuran

Dalam tugas ini, Anda akan menerapkan kemampuan penelusuran untuk aplikasi Flutter dengan membuat penyimpanan data penelusuran dan aplikasi penelusuran menggunakan aplikasi AI di Konsol Google Cloud.

Membuat penyimpanan data penelusuran

1. Di Konsol Cloud, klik View All Products. Di halaman All Products, scroll ke bagian Artificial Intelligence, lalu klik AI Applications.

2. Klik Continue and activate the API.

3. Di panel kiri, klik Data Stores, dan di halaman Data Stores, klik Create Data Store.

   Di halaman ini, Anda akan mengonfigurasi sumber data untuk digunakan di hasil penelusuran. Lab ini telah disediakan dengan bucket Cloud Storage yang berisi file .csv yang memiliki data tentang item dari toko merchandise Google.

4. Untuk memilih Cloud Storage sebagai sumber data, di bagian Cloud Storage, klik Select.

5. Untuk jenis data yang diimpor, di bagian Structured Data Import, pilih CSV (for FAQ data).

6. Scroll ke bagian Select a folder or file you want to import, lalu klik File.

7. Untuk memberikan URL Cloud Storage ke file CSV, klik Browse.

8. Untuk melihat konten bucket Cloud Storage , klik .

9. Pilih file goog_merch.csv, lalu klik Select.

   URI gs:// ke folder diisi.

   

10. Klik Continue.

11. Untuk nama penyimpanan data, ketik goog-merch-ds dan klik Continue.

12. Biarkan model harga yang dipilih sebagai default, lalu klik Create.

    Penyimpanan data dibuat, dan penyerapan data dari file CSV dimulai.

13. Di halaman Data Stores, klik nama penyimpanan data yang baru dibuat.

14. Klik Refresh.

    Tab Documents menampilkan daftar dokumen yang telah diimpor.

15. Untuk melihat data yang terkait dengan dokumen, klik View Document.

Untuk memverifikasi tujuan, klik Periksa progres saya. Membuat penyimpanan data Agent Search.

Membuat aplikasi penelusuran

Untuk menggunakan penyimpanan data penelusuran, Anda dapat menghubungkannya ke aplikasi penelusuran di Aplikasi AI.

1. Di Konsol Cloud, klik AI applications, lalu klik Apps.

2. Klik Create a new app.

3. Di halaman Create App, untuk jenis aplikasi yang akan dibangun, di tab Search and assistant, di bagian Custom search (general), klik Create.

4. Di halaman Search app configuration, konfigurasi aplikasi penelusuran website dengan setelan ini, dan tetap gunakan nilai default untuk setelan lainnya:

   Properti	Nilai (ketik atau pilih)
   Enterprise edition features	Disable
   Your app name	gms-search-app
   External name of your company or organization	gms-company
   Location of your app	global (Global)

5. Klik Continue.

6. Daftar penyimpanan data yang ada akan ditampilkan. Pilih penyimpanan data goog_merch_ds yang Anda buat di subtugas sebelumnya, lalu klik Continue.

7. Biarkan paket harga yang dipilih sebagai default, lalu klik Create.

   Aplikasi penelusuran telah dibuat dan penyimpanan data telah terhubung ke aplikasi.

8. Untuk menguji aplikasi penelusuran, di menu navigasi aplikasi AI, klik Preview.

9. Di kolom Search, ketik dino, lalu tekan Enter.

   Daftar hasil penelusuran terkait ditampilkan dari dokumen yang diimpor ke penyimpanan data.

   

   Catatan: Jika Anda melihat error yang menyatakan bahwa Search preview isn't ready yet, tunggu beberapa menit sebelum mencoba lagi. Jika tidak ingin menunggu, Anda dapat melanjutkan ke tugas berikutnya di lab.

Untuk memverifikasi tujuan, klik Periksa progres saya. Membuat aplikasi Agent Search.

Tugas 2. Membangun dan men-deploy backend

Backend aplikasi Flutter akan berjalan sebagai layanan Cloud Run di Google Cloud. Layanan backend terintegrasi dengan aplikasi penelusuran yang Anda buat dalam tugas sebelumnya untuk menghasilkan respons penelusuran dari data toko merchandise.

Dalam tugas selanjutnya, Anda juga akan mengintegrasikan aplikasi backend dengan agen LangChain untuk mengakses Gemini guna mendapatkan konten AI generatif sebagai respons terhadap kueri dari aplikasi Flutter.

Dalam tugas ini, Anda akan membangun dan men-deploy aplikasi Python backend ke Cloud Run.

Mengonfigurasi dan meninjau aplikasi backend

1. IDE berbasis VSCode telah disediakan untuk lab ini. Untuk mengakses IDE, salin IDE Service URL dari panel kredensial lab dan tempel ke jendela atau tab browser samaran baru.

   

   Catatan: URL layanan IDE merupakan endpoint dari layanan Cloud Run yang telah disediakan sebelumnya untuk lab ini, dan menjalankan proxy permintaan ke VM code-server. IDE ini dibangun menggunakan Code Server dan menyertakan ekstensi Flutter, Dart, dan Vim.

   

2. Buka terminal di IDE. Di menu navigasi IDE (), klik Terminal > New Terminal.

   Catatan: Jalankan perintah pada langkah-langkah di bawah di jendela terminal IDE.

3. Versi awal aplikasi backend dan file terkait telah disediakan untuk lab ini. Salin versi awal folder aplikasi backend beserta kontennya dari arsip di Cloud Storage:

   gcloud storage cp gs://cloud-training/OCBL453/photo-discovery/ag-web.zip ~ && unzip ~/ag-web -d ~ && rm ~/ag-web.zip Catatan: Jika diminta, klik Allow untuk menempelkan teks dan gambar dari papan klip, lalu tekan Enter.

4. Untuk menampilkan daftar konten folder, di jendela terminal IDE, jalankan:

   ls ~/ag-web/app

   Folder ag-web/app berisi kode sumber aplikasi dan file lain yang diperlukan untuk membangun dan men-deploy aplikasi backend ke Cloud Run.

5. Tetapkan konfigurasi PROJECT_ID dan LOCATION untuk aplikasi.

   sed -i 's/GCP_PROJECT_ID/{{{project_0.project_id|set at lab start}}}/' ~/ag-web/app/app.py sed -i 's/GCP_REGION/{{{project_0.default_region|set at lab start}}}/' ~/ag-web/app/app.py

6. Konfigurasi aplikasi backend untuk menggunakan penyimpanan data penelusuran yang Anda buat sebelumnya.

   sed -i 's/SEARCH_DATASTORE_ID/{YOUR_SEARCH_DATASTORE_ID}/' ~/ag-web/app/app.py

   Dalam perintah, ganti string {YOUR_SEARCH_DATASTORE_ID} dengan nilai ID penyimpanan data penelusuran Anda. Pastikan untuk menghapus tanda kurung kurawal pada perintah sed.

   Catatan: Untuk mendapatkan nilai ID penyimpanan data penelusuran, di Konsol Cloud, buka AI Applications > Data Stores, lalu klik nama penyimpanan data penelusuran yang Anda buat sebelumnya. Salin nilai ID Penyimpanan data, yang sama dengan ID mesin telusur.

   

7. Untuk melihat kode di IDE, di menu navigasi IDE, klik , lalu klik Open Folder.

8. Pilih folder IDE-DEV/ag-web/ dari daftar, lalu klik Ok.

9. Untuk memercayai penulis kode, klik Yes, I trust the authors.

10. Di panel Explorer, perluas folder app, lalu klik app.py untuk membuka file di editor.

    Kode aplikasi backend melakukan hal berikut:

    • Menginisialisasi SearchServiceClient untuk API discoveryengine.googleapis.com.
    • Fungsi search_gms() menggunakan endpoint datastores API untuk memulai permintaan penelusuran. ID datastore yang Anda buat sebelumnya digunakan dalam URL.
    • Fungsi ini menggunakan kueri penelusuran yang disediakan pengguna untuk melakukan penelusuran pada konten datastore, dan memformat hasilnya menjadi respons JSON.
    • Aplikasi ini menggunakan flask untuk merutekan panggilan ke tiap fungsi. Endpoint / adalah halaman default yang digunakan untuk memverifikasi bahwa aplikasi berhasil dimuat, sedangkan endpoint /ask_gms memanggil fungsi search_gms() yang menggunakan Agent Search.

Membangun dan men-deploy aplikasi ke Cloud Run

Skrip deploy tersedia untuk proses build dan deployment aplikasi backend ke Cloud Run.

1. Buka jendela terminal di IDE, lalu ubah ke folder aplikasi backend:

   cd ~/ag-web/app

2. Lakukan autentikasi ke Google Cloud dari gcloud CLI:

   gcloud auth login

3. Untuk melanjutkan, ketik Y.

4. Untuk meluncurkan alur login, tekan Control (untuk Windows dan Linux) atau Command (untuk MacOS), lalu klik link di terminal.

5. Jika Anda diminta untuk mengonfirmasi dibukanya situs eksternal, klik Open.

6. Klik alamat email peserta lab.

7. Saat Anda diminta untuk melanjutkan, klik Continue.

8. Agar Google Cloud SDK dapat mengakses Akun Google Anda dan menyetujui ketentuan, klik Allow.

   Kode verifikasi Anda akan ditampilkan di tab browser.

9. Klik Copy.

10. Kembali ke jendela terminal IDE, di bagian yang bertuliskan Enter authorization code, lalu tempelkan kode dan tekan Enter.

    Anda kini telah login ke Google Cloud.

11. Buat agar skrip deploy.sh dapat dieksekusi, lalu jalankan skrip untuk men-deploy aplikasi di region Cloud Run yang ditentukan:

    chmod a+x deploy.sh; ./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}

    Setelah aplikasi berhasil dibangun dan di-deploy ke Cloud Run, URL endpoint aplikasi akan ditampilkan di akhir output skrip. URL tersebut dibuat oleh perintah gcloud run deploy yang dijalankan dalam skrip.

    Catatan: Eksekusi perintah ini memerlukan waktu beberapa saat, jadi tunggu hingga perintah selesai sebelum melanjutkan ke tugas berikutnya.

Menguji aplikasi backend

Uji fungsi aplikasi dengan mengakses endpoint Cloud Run-nya.

1. Salin URL endpoint aplikasi yang dibuat di langkah sebelumnya, lalu buka URL tersebut di tab browser baru.

2. Saat aplikasi dimuat, halaman beranda akan menampilkan: Welcome to the ag-web backend app.

3. Di kolom URL browser, tambahkan jalur di bawah ke bagian akhir URL:

   /ask_gms?query=dino

4. Pastikan bahwa aplikasi merespons dengan hasil dari penyimpanan data penelusuran yang Anda buat sebelumnya.

Untuk memverifikasi tujuan, klik Periksa progres saya. Membuat aplikasi Backend.

Tugas 3. Membuat agen LangChain

Agen AI adalah aplikasi yang menggunakan kemampuan model bahasa besar (LLM) untuk melakukan penalaran dan orkestrasi dengan alat eksternal guna mencapai sasarannya. Gemini Enterprise Agent Platform adalah rangkaian produk dan alat dari Google yang membantu Anda membangun agen AI dengan menghubungkannya ke sumber data tepercaya.

Agent Runtime di Gemini Enterprise Agent Platform membantu Anda membangun dan men-deploy agen penalaran di Agent Platform. LangChain adalah alat OSS populer yang digunakan untuk membangun chatbot dan sistem RAG.

Agent Platform memungkinkan developer menggunakan Panggilan Fungsi untuk memetakan output dari LLM (Gemini) ke fungsi Python. Anda dapat mengembangkan dan men-deploy agen menggunakan template LangChain spesifik per framework melalui Agent Platform SDK.

Dalam tugas ini, Anda akan menggunakan Agent Platform Workbench dengan notebook Jupyter untuk membangun dan men-deploy agen LangChain dengan fungsi Python. Agen ini akan digunakan dalam aplikasi backend AI generatif kita pada tugas berikutnya dalam lab ini.

Membuat instance Agent Platform Workbench

Agent Platform Workbench adalah lingkungan pengembangan berbasis notebook Jupyter untuk seluruh alur kerja data science dan machine learning. Anda dapat berinteraksi dengan Agent Platform dan layanan Google Cloud lainnya dari dalam notebook Jupyter di instance workbench. Misalnya, Anda dapat mengakses dan menjelajahi data dari dalam notebook Jupyter menggunakan integrasi BigQuery dan Cloud Storage.

Notebook Agent Platform Workbench memberikan solusi yang fleksibel dan skalabel untuk mengembangkan dan men-deploy model ML di Google Cloud.

1. Untuk membuat instance Workbench, di Konsol Cloud, klik Navigation menu (), lalu pilih Agent Platform > Notebooks.

2. Di menu navigasi Notebooks, klik Workbench.

3. Pastikan Instances dipilih di tab Instances, lalu klik Create New.

   

4. Di halaman New instance, untuk Name, ketik my-instance

5. Tetap gunakan nilai default untuk setelan lainnya, lalu klik Create.

   Instance baru Anda akan dijalankan di bagian instance. Tunggu hingga instance selesai dibuat sebelum melanjutkan ke langkah berikutnya.

   Catatan: Tanda centang hijau akan muncul di samping instance jika instance tersebut sudah siap digunakan.

6. Setelah instance siap, klik Open Jupyterlab.

   

7. Untuk meluncurkan Notebook Jupyter Python 3, klik notebook Python 3.

   

Menyalin file notebook

Notebook yang membangun dan men-deploy agen LangChain telah disediakan untuk lab ini.

1. Untuk menyalin notebook ke instance JupyterLab Anda, salin kode ini ke sel pertama di notebook baru Anda:

   !gcloud storage cp gs://cloud-training/OCBL453/photo-discovery/ag-web/ag_setup_re.ipynb .

   

2. Pilih dan jalankan sel dengan mengklik Run di menu sel:

   

   Perintah ini akan menyalin notebook dari Cloud Storage ke instance JupyterLab Anda. Setelah perintah selesai, file notebook akan terdaftar di folder root tingkat teratas.

   

3. Untuk membuka notebook, klik dua kali file notebook di daftar folder. Tab terpisah dibuat dengan konten notebook.

Membangun dan men-deploy agen Reasoning Engine

1. Jalankan semua sel kode di notebook secara berurutan dari awal. Untuk menjalankan sel, pilih sel dengan mengklik bagian mana pun di sel, lalu klik Run di menu sel atau di menu notebook teratas.

   Catatan: Saat menjalankan perintah di sel, tunggu hingga perintah selesai sebelum beralih ke sel berikutnya. Setelah perintah selesai dijalankan, tanda bintang (*) di kolom nomor sel akan diganti dengan nomor sel. Catatan: Sebelum menjalankan sel, periksa catatan di bawah untuk mengetahui petunjuk atau langkah-langkah khusus sel yang harus diikuti. Petunjuk ini ditandai dengan awalan CELL INSTR.

   a. [CELL INSTR] Restart current runtime

   Jika diminta, pada dialog Kernel Restarting, klik Ok.

   b. [CELL INSTR] Set Google Cloud project information and initialize Agent Platform:

   Sebelum menjalankan sel ini untuk melakukan inisialisasi Agent Platform, perbarui nilai konfigurasi untuk project_id, location, dan staging bucket lab Anda:

   PROJECT_ID = "{{{project_0.project_id|set at lab start}}}" LOCATION = "{{{project_0.default_region|set at lab start}}}" STAGING_BUCKET = "gs://{{{project_0.startup_script.lab_bucket_name}}}"

   Sel yang diperbarui dengan setelan konfigurasi contoh:

   

   c. [CELL INSTR] Define the Agent:

   Sebelum menjalankan sel ini, ganti nilai GEMINI_MODEL_ID dengan ID model terbaru yang digunakan oleh notebook ini: .

   Catatan: Anda juga dapat menjalankan sel dengan mengklik Run di panel menu notebook.

2. Setelah menjalankan sel Deploy the Agent to the Agent Runtime, tunggu hingga perintah selesai, lalu deploy agen LangChain. Selanjutnya, salin ID Agen:

   

   Anda akan menggunakan ID ini untuk mengonfigurasi dan men-deploy ulang aplikasi backend dalam tugas berikutnya.

   Catatan: Penyelesaian sel ini dapat memerlukan waktu hingga 10 menit. Tunggu hingga output akhir ditampilkan yang menunjukkan bahwa agen telah di-deploy sebelum melanjutkan ke langkah berikutnya.

3. Untuk menguji keberhasilan pengoperasian agen LangChain, jalankan dua sel berikutnya dan amati output-nya.

   Agen LangChain berhasil memanggil datastore Wikipedia atau Agent Search berdasarkan input kueri.

Untuk memverifikasi tujuan, klik Periksa progres saya. Men-deploy agen LangChain.

Tugas 4. Meningkatkan kemampuan aplikasi backend

Sekarang mari kita tingkatkan kemampuan aplikasi backend untuk memanggil agen LangChain yang telah di-deploy dalam tugas sebelumnya.

Versi awal aplikasi backend hanya mengambil hasil secara langsung dari Agent Search. Pada versi yang diperbarui, aplikasi ini juga akan memanggil agen yang menggunakan output dari Gemini dan alat agen untuk menghasilkan respons dari Agent Search atau Wikipedia berdasarkan perintah input.

Dalam tugas ini, Anda akan memperbarui kode aplikasi backend untuk menambahkan titik entri ekstra yang memanggil agen LangChain dengan kueri permintaan dan menampilkan respons agen.

Mengupdate aplikasi backend

1. Di jendela terminal IDE, tambahkan file app.py dengan kode titik entri baru dengan menjalankan perintah:

   cat << EOF >> ~/ag-web/app/app.py # # Agent Engine # import vertexai from vertexai import agent_engines from google.cloud import resourcemanager_v3 def get_project_number(project_id): client = resourcemanager_v3.ProjectsClient() # Buat nama resource untuk project ini name = f"projects/{project_id}" # Dapatkan metadata project project = client.get_project(name=nama) # Kolom 'name' dalam respons menggunakan format 'projects/123456789' project_number = project.name.split('/')[-1] return project_number PROJECT_NUM = get_project_number(PROJECT_ID) LANGCHAIN_AGENT = "LANGCHAIN_AGENT_ID" remote_agent = vertexai.agent_engines.get(f"projects/{PROJECT_NUM}/locations/{LOCATION}/reasoningEngines/{LANGCHAIN_AGENT}") # Endpoint aplikasi Flask untuk memanggil Agent @app.route("/ask_gemini", methods=["GET"]) def ask_gemini(): query = request.args.get("query") log.info("[ask_gemini] query: " + query) retries = 0 resp = None while retries < MAX_RETRIES: try: retries += 1 resp = remote_agent.query(input=query) if (resp == None) or (len(resp["output"].strip()) == 0): raise ValueError("Empty response.") break except Exception as e: log.error("[ask_gemini] error: " + str(e)) if (resp == None) or (len(resp["output"].strip()) == 0): raise ValueError("Terlalu banyak percobaan ulang.") return "Tidak ada respons yang diterima dari Reasoning Engine." else: return resp["output"] EOF

2. Konfigurasi aplikasi backend untuk menggunakan agen LangChain yang Anda buat sebelumnya.

   Ganti string {YOUR_LANGCHAIN_AGENT_ID} dalam perintah di bawah dengan nilai ID agen yang Anda salin dari sel notebook dalam tugas sebelumnya, lalu jalankan perintah di bawah di jendela terminal IDE.

   Pastikan untuk menghapus tanda kurung kurawal pada perintah sed.

   sed -i 's/LANGCHAIN_AGENT_ID/{YOUR_LANGCHAIN_AGENT_ID}/' ~/ag-web/app/app.py

3. Untuk melihat kode di IDE, di menu navigasi IDE, klik , lalu pilih file IDE-DEV/ag-web/app/app.py.

   Di versi aplikasi backend yang ditingkatkan:

   • Handle pada remote_agent diambil dari Agent Runtime menggunakan LANGCHAIN_AGENT_ID dari agen yang telah dibuat dalam tugas sebelumnya.
   • Endpoint /ask_gemini yang menentukan fungsi `ask_gemini() telah ditentukan.
   • Fungsi ini meneruskan parameter query yang disediakan pengguna dari permintaan ke agen LangChain (remote_agent), dan menampilkan respons dari agen.

Membangun dan men-deploy ulang aplikasi backend ke Cloud Run

1. Ubah ke folder aplikasi backend:

   cd ~/ag-web/app

2. Jalankan skrip untuk men-deploy ulang aplikasi di region Cloud Run yang ditentukan:

   ./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}

Menguji aplikasi backend

Uji fungsi aplikasi dengan mengakses endpoint Cloud Run-nya.

1. Salin URL endpoint aplikasi yang dibuat di langkah sebelumnya, lalu buka URL tersebut di tab browser baru.

2. Saat aplikasi dimuat, halaman beranda akan menampilkan Welcome to the ag-web backend app.

3. Di kolom URL browser, tambahkan jalur di bawah ke bagian akhir URL:

   /ask_gemini?query=di mana saya bisa membeli pin chrome dino?

   Aplikasi akan merespons dengan hasil dari agen yang mengambil hasil dari penyimpanan data Agent Search yang Anda buat sebelumnya.

   Pin Enamel Chrome Dino adalah produk yang dijual di Toko Merchandise Google. Harganya USD 7,00. Anda bisa membeli produk ini di situs mereka: https://shop.merch.google/product/chrome-dino-enamel-pin-ggoegcbb203299/.

4. Di kolom URL browser, ganti jalur dengan:

   /ask_gemini?query=apa itu fallingwater? Tulis jawabannya dalam teks biasa.

   Aplikasi akan merespons dengan hasil dari agen yang mengambil respons dari Wikipedia API yang Anda konfigurasi di notebook.

   Fallingwater dirancang oleh arsitek Frank Lloyd Wright pada tahun 1935. Bangunan ini berada di Pennsylvania barat daya, sekitar 123 km di tenggara Pittsburgh. Rumah ini terkenal karena sebagian bangunannya berada di atas air terjun. Catatan: Respons yang Anda terima nantinya mungkin berbeda dengan yang ditampilkan di atas.

Tugas 5. Membuat aplikasi frontend Flutter

Flutter adalah framework pengembangan aplikasi multiplatform open source. Dengan Flutter, Anda dapat menulis satu codebase yang berjalan di Android, iOS, Web, macOS, Windows, dan Linux. Aplikasi Flutter dikembangkan dalam bahasa pemrograman Dart.

Untuk keperluan lab ini, Anda akan menggunakan web sebagai platform target, sehingga aplikasi Flutter dapat di-deploy sebagai aplikasi web dan diakses menggunakan browser.

Dalam tugas ini, Anda akan membuat aplikasi chat sederhana menggunakan Flutter, memperbarui kode, serta membangun dan menjalankan aplikasi sebagai aplikasi web.

Membuat aplikasi Flutter

1. Di terminal IDE, buka direktori utama Anda dan jalankan:

   cd ~; flutter create chat_app

   Perintah flutter create membuat semua file, folder, dan konfigurasi yang diperlukan untuk project Flutter baru yang dapat dijalankan.

2. Untuk melihat kode aplikasi chat default di IDE, buka folder IDE-DEV/chat_app.

   Anda mungkin perlu mengklik Refresh untuk memperbarui konten panel navigasi folder di IDE.

3. Jika diminta untuk memercayai penulis file di folder itu, klik Yes, I trust the authors.

Meninjau kode aplikasi Flutter

Berikut ringkasan umum tentang konten folder chat_app:

Folder/File	Deskripsi
chat_app	Folder root project yang berisi subfolder dan file yang membentuk aplikasi Flutter.
android/ios/linux/macos/web/windows	Berisi file khusus platform yang diperlukan untuk menjalankan aplikasi Flutter di setiap platform yang didukung.
lib	Berisi file Dart aplikasi inti yang mencakup fungsionalitas dan antarmuka pengguna.
test	Berisi pengujian Dart yang digunakan untuk menguji widget aplikasi.
pubspec.yaml	Berisi dependensi aplikasi, versi Flutter, dan setelan konfigurasi lainnya.
analysis_options.yaml	Berisi setelan konfigurasi untuk analisis statis aplikasi.

Mari kita tinjau file titik entri main.dart aplikasi Flutter.

• Di menu Explorer, klik file IDE-DEV/chat_app/lib/main.dart untuk membukanya.

  Ini adalah titik entri aplikasi untuk aplikasi Flutter. Setelah melakukan tugas inisialisasi, kode dalam file ini akan membangun UI aplikasi menggunakan komponen material, lalu menetapkan judul, tema, dan konfigurasi lainnya.

  Catatan: Aplikasi Material dimulai dengan widget MaterialApp, yang membangun sejumlah widget berguna di root aplikasi Anda, termasuk Navigator yang mengelola pemilihan rute ke berbagai layar di aplikasi Anda.

  Flutter menggunakan konsep Widget, yang merupakan class deklaratif yang digunakan untuk membangun aplikasi. Di Flutter, Anda membuat tata letak dengan menyusun widget untuk membangun widget yang lebih kompleks guna membentuk hierarki widget. Untuk mempelajari lebih lanjut cara membangun UI di Flutter, lihat dokumentasi.

  File ini berisi class yang membangun widget aplikasi. Isinya mencakup:

  • Class MyApp yang merupakan widget root aplikasi chat.
  • Class MyHomePage yang membuat halaman utama aplikasi menggunakan class _MyHomePageState.
  • Class _MyHomePageState yang membangun UI aplikasi dan bertanggung jawab memperbarui status UI.

  Kita akan mengganti kode default yang dihasilkan di class ini dalam subtugas berikutnya saat Anda membangun aplikasi chat.

Memperbarui kode aplikasi Flutter

1. Pertama, perbarui judul aplikasi. Di class MyApp pada baris 14, ubah nilai properti title:

   title: 'Aplikasi Chat Gemini',

   

2. Di class _MyHomePageState, pada baris 58, hapus baris int _counter = 0; dan fungsi _incrementCounter(), lalu tambahkan properti berikut:

   final TextEditingController _controller = TextEditingController(); final List<Map<String, String>> _messages = []; String _cloudRunHost = '';

   Properti ini digunakan untuk menerima input pengguna untuk perintah teks, menyimpan input pengguna dan respons aplikasi backend untuk ditampilkan, serta menyimpan nama host layanan Cloud Run aplikasi backend.

3. Tambahkan metode initState() ke class:

   @override void initState() { super.initState(); _loadConfig(); }

   Metode ini menjalankan fungsi inisialisasi saat objek State dibuat. Di aplikasi chat, kita memuat isi file dengan memanggil metode _loadConfig() yang akan kita terapkan berikutnya.

4. Tambahkan metode _loadConfig() ke class:

   Future<void> _loadConfig() async { final configString = await rootBundle.loadString('assets/config.json'); final config = json.decode(configString); setState(() { _cloudRunHost = config['cloudRunHost']; }); }

   Metode ini mengambil isi file konfigurasi aplikasi chat yang menyimpan nilai nama host aplikasi backend Cloud Run Anda dalam objek JSON. Kita akan membuat file ini nanti dalam lab ini. Metode ini menyimpan nilai tersebut di properti _cloudRunHost internal yang dibuat sebelumnya, dan membangun UI widget.

5. Tambahkan metode _sendMessage() ke class:

   Future<void> _sendMessage() async { if (_controller.text.isEmpty) { return; } final message = _controller.text; _controller.clear(); setState(() { _messages.add({'sender': 'user', 'text': message}); }); if (_cloudRunHost.isEmpty || _cloudRunHost == 'YOUR_CLOUD_RUN_ENDPOINT_URL') { setState(() { _messages.add({ 'sender': 'bot', 'text': 'Konfigurasi endpoint Cloud Run di assets/config.json' }); }); return; } try { var endpoint_query = Uri.https(_cloudRunHost, '/ask_gemini', {'query': message}); final response = await http.get(endpoint_query); if (response.statusCode == 200) { var responseText = utf8.decode(response.bodyBytes); responseText = responseText.replaceAll(RegExp(r'\*'), ''); setState(() { _messages.add({'sender': 'bot', 'text': responseText}); }); } else { setState(() { _messages.add({ 'sender': 'bot', 'text': 'Error: ${response.statusCode}' }); }); } } catch (e) { setState(() { _messages.add({'sender': 'bot', 'text': 'Error: $e'}); }); } }

   Metode ini mengambil teks perintah yang dimasukkan oleh pengguna dan menambahkannya ke daftar pesan yang ditampilkan di panel chat. Selanjutnya, permintaan GET HTTP dikirim ke URL endpoint layanan backend Cloud Run beserta perintah input, dan respons dari layanan ditampilkan.

   Kode ini membuat URL ke endpoint host backend Cloud Run yang menyertakan teks perintah dalam parameter kueri. Permintaan GET HTTP kemudian dikirim ke endpoint. Setelah respons diterima dengan kode status 200, respons tersebut akan didekode dan ditambahkan ke daftar pesan untuk ditampilkan di layar chat. Jika respons tidak berhasil atau terjadi pengecualian, kode status atau pesan pengecualian akan ditambahkan ke daftar pesan dan ditampilkan.

6. Untuk membangun UI aplikasi chat, ganti metode build yang ada dengan kode di bawah di class _MyHomePageState:

   @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Aplikasi Chat Gemini'), ), body: Column( children: [ Expanded( child: ListView.builder( padding: const EdgeInsets.all(8.0), itemCount: _messages.length, itemBuilder: (context, index) { final message = _messages[index]; final isUserMessage = message['sender'] == 'user'; return Align( alignment: isUserMessage ? Alignment.centerRight : Alignment.centerLeft, child: Container( margin: const EdgeInsets.symmetric(vertical: 4.0), padding: const EdgeInsets.all(12.0), decoration: BoxDecoration( color: isUserMessage ? Colors.blue[100] : Colors.grey[200], borderRadius: BorderRadius.circular(8.0), ), child: Text(message['text']!), ), ); }, ), ), Padding( padding: const EdgeInsets.all(8.0), child: Row( children: [ Expanded( child: TextField( controller: _controller, decoration: const InputDecoration( hintText: 'Enter a message', ), onSubmitted: (text) => _sendMessage(), ), ), IconButton( icon: const Icon(Icons.send), onPressed: _sendMessage, ), ], ), ), ], ), ); }

   Metode build menjelaskan UI aplikasi chat. Metode ini membuat hierarki widget dengan konfigurasi dan status saat ini, yang kemudian dirender oleh framework Flutter ke layar. Di UI aplikasi chat ini, kode menampilkan pesan chat dalam sebuah kolom beserta kolom teks dan tombol kirim untuk perintah pengguna. Pesan yang dimasukkan pengguna (perintah) dirender dalam kotak biru, sedangkan pesan respons atau error dari aplikasi (bot) dirender dalam kotak abu-abu.

   Saat pengguna mengklik Send di aplikasi chat atau menekan Enter di kolom teks setelah memasukkan perintah, metode callback _sendMessage() akan dipanggil.

Menambahkan impor

Kode yang ditambahkan bergantung pada library atau paket tertentu dari SDK Dart dan Flutter.

1. Untuk mengimpor paket tersebut, tambahkan pernyataan import berikut di awal file main.dart di bawah pernyataan import yang ada:

   import 'package:http/http.dart' as http; import 'dart:convert'; import 'package:flutter/services.dart' show rootBundle;
   • Paket http.dart berisi sekumpulan fungsi dan class tingkat tinggi yang memudahkan penggunaan resource HTTP.
   • Library dart:convert memiliki fungsi yang menangani konversi data umum seperti serialisasi JSON dan encoding/decoding UTF-8.
   • Properti rootBundle adalah objek statis global yang menyediakan akses ke paket aset utama yang dikemas dengan aplikasi Flutter Anda.

2. Untuk menyimpan perubahan pada aplikasi, di menu navigasi IDE, klik File > Save.

Memperbarui dependensi

File pubspec.yaml menentukan metadata project, dependensi paket, dan aset untuk aplikasi Flutter Anda.

1. Edit file pubspec.yaml dengan memilihnya di panel Explorer di IDE. File ini berada di folder chat_app.

2. Di bagian dependencies, tambahkan dependensi paket http di bawah library font cupertino_icons:

   http: ^1.6.0 Pastikan indentasi spasi yang benar dipertahankan.

   

3. Scroll ke bagian flutter dalam file pubspec.yaml dan hapus tanda komentar di baris 63. Tambahkan folder assets di bawah assets dengan mempertahankan indentasi spasi:

   assets: - assets/

   

   Tindakan ini mengonfigurasi folder aset tempat kita menyimpan file config.json untuk aplikasi.

4. Untuk menyimpan perubahan pada file pubspec.yaml, di menu navigasi IDE, klik File > Save.

Mengintegrasikan aplikasi Flutter dengan backend Cloud Run

Aplikasi Flutter terintegrasi dengan agen Reasoning Engine yang telah Anda deploy sebelumnya dalam lab ini. Integrasi dapat dilakukan dengan menghubungkan aplikasi Flutter ke endpoint aplikasi backend yang juga Anda bangun dan deploy ke Cloud Run.

Dalam metode _sendMessage(), Anda mungkin telah melihat kode yang memeriksa apakah properti _cloudRunHost kosong atau tidak dikonfigurasi dalam file bernama assets/config.json. Kita akan menambahkan file ini ke aplikasi Flutter kita dalam subtugas ini.

1. Pertama, ambil nama host endpoint Cloud Run aplikasi backend, dan simpan nilainya dalam variabel lingkungan.

   Di jendela terminal IDE, jalankan:

   BACKEND_APP_HOST=$(gcloud run services describe ag-web --region {{{project_0.default_region|set at lab start}}} --format 'value(status.url)' | cut -d'/' -f3); echo $BACKEND_APP_HOST

2. Buat direktori /assets di direktori utama aplikasi chat Flutter Anda:

   mkdir ~/chat_app/assets

3. Buat file config.json di direktori /assets:

   cat <<EOF > ~/chat_app/assets/config.json { "cloudRunHost": "$BACKEND_APP_HOST" } EOF

4. Untuk memverifikasi perubahan, refresh konten di menu Explorer IDE, lalu klik file IDE-DEV/chat_app/assets/config.json untuk membukanya. Pastikan nilai entri konfigurasi cloudRunHost diperbarui dengan nilai nama host aplikasi backend Cloud Run Anda.

   Catatan: Nilainya harus sesuai dengan nilai variabel lingkungan `BACKEND_APP_HOST` yang Anda tetapkan pada langkah sebelumnya.

Men-deploy aplikasi Flutter

Setelah konfigurasi aplikasi Flutter selesai, Anda dapat membangun dan men-deploy aplikasi. Untuk tujuan lab ini, guna menjalankan aplikasi sebagai aplikasi web, kami menggunakan Fwr yang merupakan server pengembangan untuk Flutter web.

1. Pastikan Anda berada di folder aplikasi Flutter. Di jendela terminal IDE, jalankan:

   cd ~/chat_app

2. Untuk mengambil dependensi project aplikasi, jalankan:

   flutter pub get

3. Untuk membangun project dan memulai server web, jalankan:

   fwr

   Tunggu hingga server dimulai dan menyajikan aplikasi Flutter. Setelah dimulai, output dari perintah akan terlihat seperti ini:

   

Tugas 6. Menguji aplikasi Flutter

Mari kita uji fungsionalitas aplikasi Flutter.

Menguji aplikasi

1. Untuk mengakses aplikasi Flutter, salin URL Live Server dari panel kredensial lab, lalu buka di tab baru jendela browser samaran Anda.

   Tunggu beberapa detik hingga aplikasi chat selesai dimuat.

2. Untuk message di bagian bawah, ketik:

   Apa itu fallingwater? Tulis jawabannya dalam teks biasa.

   Setelah beberapa detik, respons dari agen backend akan ditampilkan di aplikasi.

3. Untuk menguji aplikasi dan agen, untuk jenis message, ketik:

   Di mana saya bisa membeli pin Chrome dino?

   Setelah beberapa detik, respons dari agen backend akan ditampilkan di aplikasi.

   Aplikasi chat akan memanggil endpoint Cloud Run /ask_gemini aplikasi backend, yang kemudian memanggil agen LangChain yang menggunakan Gemini untuk menampilkan respons dari datastore Agent Search.

4. Untuk melihat aplikasi Flutter yang dipaskan ke tata letak perangkat seluler, ubah ukuran jendela browser Anda ke ukuran perangkat seluler:

   

   Hal ini menunjukkan bahwa aplikasi Flutter responsif terhadap perubahan berdasarkan ukuran layar atau jendela. Flutter memiliki widget dan paket yang membantu membuat aplikasi Anda responsif dan adaptif terhadap perubahan berdasarkan konfigurasi perangkat.

Untuk memverifikasi tujuan, klik Periksa progres saya. Mengembangkan dan menguji aplikasi chat Flutter.

Mengakhiri lab Anda

Setelah Anda menyelesaikan lab, klik End Lab. Google Skills akan menghapus resource yang telah Anda gunakan dan membersihkan akun.

Anda akan diberi kesempatan untuk menilai pengalaman menggunakan lab. Pilih jumlah bintang yang sesuai, ketik komentar, lalu klik Submit.

Makna jumlah bintang:

• 1 bintang = Sangat tidak puas
• 2 bintang = Tidak puas
• 3 bintang = Netral
• 4 bintang = Puas
• 5 bintang = Sangat puas

Anda dapat menutup kotak dialog jika tidak ingin memberikan masukan.

Untuk masukan, saran, atau koreksi, gunakan tab Support.

Selamat!

Dalam lab ini, Anda telah:

• Membuat penyimpanan data penelusuran dan aplikasi penelusuran menggunakan Aplikasi AI di Konsol Google Cloud.
• Men-deploy agen LangChain menggunakan Agent Platform Workbench.
• Membangun aplikasi Python yang terintegrasi dengan Agent Search dan agen LangChain.
• Men-deploy aplikasi ke Cloud Run dan menggunakannya sebagai backend untuk aplikasi Flutter.
• Mengembangkan aplikasi chat Flutter dan mengintegrasikannya dengan layanan backend untuk berinteraksi dengan Gemini.

Langkah berikutnya/pelajari lebih lanjut

• Ringkasan Gemini untuk Google Cloud
• Agent Platform Workbench
• Gemini Enterprise Agent Platform Studio
• Flutter
• Dart

Hak cipta 2026 Google LLC. Semua hak dilindungi undang-undang. Google dan logo Google adalah merek dagang dari Google LLC. Semua nama perusahaan dan produk lain mungkin adalah merek dagang dari tiap-tiap perusahaan yang bersangkutan.