GSP023

Ringkasan

Dalam lab ini, Anda akan mempelajari cara men-deploy aplikasi web Python Flask ke lingkungan Fleksibel App Engine. Aplikasi contoh ini memungkinkan pengguna mengupload foto wajah seseorang dan mengetahui seberapa besar kemungkinan orang tersebut sedang bahagia. Aplikasi ini menggunakan Google Cloud API untuk Vision, Storage, dan Datastore.

Tentang App Engine

Aplikasi Google App Engine mudah dibuat, mudah dipelihara, dan mudah diskalakan seiring perubahan kebutuhan traffic dan penyimpanan data Anda. Dengan App Engine, Anda tidak perlu memelihara server. Anda cukup mengupload aplikasi dan aplikasi tersebut siap digunakan.

Aplikasi App Engine akan otomatis diskalakan berdasarkan traffic masuk. Load balancing, microservice, otorisasi, database SQL dan NoSQL, pemisahan traffic, logging, penelusuran, pembuatan versi, peluncuran dan pembatalan, serta pemindaian keamanan semuanya didukung secara native dan sangat mudah disesuaikan.

Lingkungan Fleksibel App Engine mendukung berbagai bahasa pemrograman, termasuk Java, Python, PHP, NodeJS, Ruby, dan Go. Lingkungan Standar App Engine adalah opsi tambahan untuk bahasa tertentu, termasuk Python. Kedua lingkungan ini memberi pengguna fleksibilitas maksimal dalam menangani perilaku aplikasi mereka karena setiap lingkungan memiliki keunggulan tertentu. Baca Memilih Lingkungan App Engine untuk mengetahui informasi selengkapnya.

Yang akan Anda pelajari

• Cara men-deploy aplikasi web sederhana ke Lingkungan Fleksibel App Engine
• Cara mengakses library klien Google Cloud untuk Vision, Storage, dan Datastore
• Cara menggunakan Cloud Shell

Prasyarat

• Pemahaman tentang Python
• Pemahaman tentang editor teks Linux standar, seperti vim, emacs, atau nano
• Akses ke gambar dengan wajah

Penyiapan dan persyaratan

Sebelum mengklik tombol Start Lab

Baca petunjuk ini. Lab memiliki timer dan Anda tidak dapat menjedanya. Timer yang dimulai saat Anda mengklik Start Lab akan menampilkan durasi ketersediaan resource Google Cloud untuk Anda.

Lab interaktif ini dapat Anda gunakan untuk melakukan aktivitas lab di lingkungan cloud sungguhan, bukan di lingkungan demo atau simulasi. Untuk mengakses lab ini, Anda akan diberi kredensial baru yang bersifat sementara dan dapat digunakan untuk login serta mengakses Google Cloud selama durasi lab.

Untuk menyelesaikan lab ini, Anda memerlukan:

• Akses ke browser internet standar (disarankan browser Chrome).

Catatan: Gunakan jendela Samaran (direkomendasikan) atau browser pribadi untuk menjalankan lab ini. Hal ini akan mencegah konflik antara akun pribadi Anda dan akun siswa yang dapat menyebabkan tagihan ekstra pada akun pribadi Anda.

• Waktu untuk menyelesaikan lab. Ingat, setelah dimulai, lab tidak dapat dijeda.

Catatan: Hanya gunakan akun siswa untuk lab ini. Jika Anda menggunakan akun Google Cloud yang berbeda, Anda mungkin akan dikenai tagihan ke akun tersebut.

Cara memulai lab dan login ke Konsol Google Cloud

1. Klik tombol Start Lab. Jika Anda perlu membayar lab, dialog akan terbuka untuk memilih metode pembayaran. Di sebelah kanan terdapat panel Lab setup and access yang berisi hal-hal berikut:

   • Tombol Open Google Cloud console
   • Kredensial sementara (nama pengguna dan sandi) yang harus Anda gunakan untuk lab ini
   • Informasi lain, jika diperlukan, untuk menyelesaikan lab ini

   Perhatikan bahwa timer lab terletak di dekat bagian atas halaman, yang menampilkan waktu yang tersisa.

2. Klik Open Google Cloud console (atau klik kanan dan pilih Open Link in Incognito Window jika Anda menjalankan browser Chrome).

   Lab akan menjalankan resource, lalu membuka tab lain yang menampilkan halaman Sign in.

   Tips: Atur tab di jendela terpisah secara berdampingan.

   Catatan: Jika Anda melihat dialog Choose an account, klik Use Another Account.

3. Jika perlu, salin Username di bawah dan tempel ke dialog Sign in.

   {{{user_0.username | "Username"}}}

   Anda juga dapat menemukan Username di panel Lab setup and access.

4. Klik Next.

5. Salin Password di bawah dan tempel ke dialog Welcome.

   {{{user_0.password | "Password"}}}

   Anda juga dapat menemukan Password di panel Lab setup and access.

6. Klik Next.

   Penting: Anda harus menggunakan kredensial yang diberikan lab. Jangan menggunakan kredensial akun Google Cloud Anda. Catatan: Penggunaan akun Google Cloud sendiri untuk lab ini mungkin dikenai biaya tambahan.

7. Klik untuk melanjutkan ke halaman berikutnya:

   • Setujui persyaratan dan ketentuan.
   • Jangan tambahkan opsi pemulihan atau autentikasi 2 langkah (karena ini akun sementara).
   • Jangan daftar uji coba gratis.

Setelah beberapa saat, Konsol Google Cloud akan terbuka di tab ini.

Catatan: Untuk mengakses produk dan layanan Google Cloud, klik Navigation menu atau ketik nama layanan atau produk di kolom Search.

Mengaktifkan Cloud Shell

Cloud Shell adalah mesin virtual yang dilengkapi dengan berbagai alat pengembangan. Mesin virtual ini menawarkan direktori beranda persisten berkapasitas 5 GB dan berjalan di Google Cloud. Cloud Shell menyediakan akses command-line untuk resource Google Cloud Anda.

1. Klik Activate Cloud Shell di bagian atas Konsol Google Cloud.

2. Klik jendela berikut:

   • Lanjutkan melalui jendela informasi Cloud Shell.
   • Beri otorisasi ke Cloud Shell untuk menggunakan kredensial Anda guna melakukan panggilan Google Cloud API.

Setelah terhubung, Anda sudah diautentikasi, dan project ditetapkan ke Project_ID, . Output berisi baris yang mendeklarasikan Project_ID untuk sesi ini:

Project Cloud Platform Anda dalam sesi ini disetel ke {{{project_0.project_id | "PROJECT_ID"}}}

gcloud adalah alat command line untuk Google Cloud. Alat ini sudah terinstal di Cloud Shell dan mendukung pelengkapan command line.

3. (Opsional) Anda dapat menampilkan daftar nama akun yang aktif dengan perintah ini:

gcloud auth list

4. Klik Authorize.

Output:

ACTIVE: * ACCOUNT: {{{user_0.username | "ACCOUNT"}}} Untuk menetapkan akun aktif, jalankan: $ gcloud config set account `ACCOUNT`

5. (Opsional) Anda dapat menampilkan daftar ID project dengan perintah ini:

gcloud config list project

Output:

[core] project = {{{project_0.project_id | "PROJECT_ID"}}} Catatan: Untuk mendapatkan dokumentasi gcloud yang lengkap di Google Cloud, baca panduan ringkasan gcloud CLI.

Tugas 1. Mendapatkan kode contoh

1. Di Cloud Shell, jalankan perintah berikut untuk menyalin kode contoh:

gcloud storage cp -r gs://spls/gsp023/flex_and_vision/ .

2. Ubah direktori menjadi flex_and_vision:

cd flex_and_vision

Tugas 2. Mengautentikasi permintaan API

Datastore, Storage, dan Vision API diaktifkan secara otomatis untuk Anda dalam lab ini. Untuk membuat permintaan ke API, Anda akan memerlukan kredensial akun layanan. Anda dapat membuat kredensial dari project Anda menggunakan gcloud di Cloud Shell. Project ID Anda dapat ditemukan di tab tempat Anda memulai lab.

1. Tetapkan variabel lingkungan untuk Project ID Anda:

export PROJECT_ID=$(gcloud config get-value project)

2. Buat Akun Layanan untuk mengakses Google Cloud API saat melakukan pengujian secara lokal:

gcloud iam service-accounts create qwiklab \ --display-name "My Qwiklab Service Account"

3. Berikan izin yang sesuai untuk Akun Layanan yang baru dibuat:

gcloud projects add-iam-policy-binding ${PROJECT_ID} \ --member serviceAccount:qwiklab@${PROJECT_ID}.iam.gserviceaccount.com \ --role roles/owner

4. Setelah membuat Akun Layanan Anda, buat kunci Akun Layanan:

gcloud iam service-accounts keys create ~/key.json \ --iam-account qwiklab@${PROJECT_ID}.iam.gserviceaccount.com

Perintah ini menghasilkan kunci akun layanan yang disimpan dalam file JSON bernama key.json di direktori utama Anda.

5. Dengan menggunakan jalur absolut kunci yang dihasilkan, tetapkan variabel lingkungan untuk kunci akun layanan Anda:

export GOOGLE_APPLICATION_CREDENTIALS="/home/${USER}/key.json"

Pelajari lebih lanjut cara mengautentikasi Vision API dari Panduan Memulai: Panduan Menyiapkan Vision API.

Klik Periksa progres saya di bawah untuk memeriksa progres lab Anda.

Mengautentikasi Permintaan API

Tugas 3. Menguji aplikasi secara lokal

Menginstal dependensi

1. Gunakan pip untuk menginstal dependensi untuk project Anda dari file requirements.txt:

pip install -r requirements.txt

File requirements.txt adalah daftar dependensi paket yang diperlukan untuk project Anda. Perintah di atas mendownload semua dependensi paket yang tercantum ke virtualenv.

Membuat aplikasi App Engine

1. Pertama, buat variabel lingkungan dengan region yang ditetapkan untuk Anda:

AE_REGION={{{project_0.startup_script.app_region|REGION}}}

2. Selanjutnya, buat instance App Engine dengan menggunakan:

gcloud app create --region=$AE_REGION

Membuat bucket penyimpanan

1. Pertama, tetapkan variabel lingkungan CLOUD_STORAGE_BUCKET sehingga sama dengan nama PROJECT_ID Anda. (Secara umum, sebaiknya namai bucket Anda sama dengan PROJECT_ID Anda untuk tujuan kemudahan):

export CLOUD_STORAGE_BUCKET=${PROJECT_ID}

2. Sekarang, jalankan perintah berikut untuk membuat bucket dengan nama yang sama dengan PROJECT_ID Anda:

gcloud storage buckets create gs://${PROJECT_ID}

Klik Periksa progres saya di bawah untuk memeriksa progres lab Anda.

Membuat Aplikasi App Engine dan Bucket Penyimpanan

Menjalankan Aplikasi

1. Jalankan perintah berikut untuk memulai aplikasi Anda:

python main.py

2. Setelah aplikasi dimulai, klik ikon Pratinjau Web di toolbar Cloud Shell, lalu pilih Preview on port 8080.

Tab di browser Anda akan terbuka dan terhubung ke server yang baru saja Anda mulai. Anda akan melihat yang seperti ini:

Sekarang semuanya akan menjadi menarik.

3. Klik tombol Choose File, cari gambar dari komputer Anda yang menampilkan wajah manusia, lalu klik Submit.

Setelah mengupload foto, Anda akan melihat sesuatu seperti ini:

Catatan: Setelah Anda selesai menguji aplikasi secara lokal, tekan CTRL+C di Cloud Shell untuk mematikan server web lokal.

Klik Periksa progres saya di bawah untuk memeriksa progres lab Anda.

Menjalankan Aplikasi

Tugas 4. Menjelajahi kode

Tata letak kode contoh

Contoh memiliki tata letak berikut:

templates/ homepage.html /* HTML template that uses Jinja2 */ app.yaml /* App Engine application configuration file */ main.py /* Python Flask web application */ requirements.txt /* List of dependencies for the project */

main.py

File Python ini adalah aplikasi web Flask. Dengan aplikasi ini, pengguna dapat mengirimkan foto (sebaiknya foto wajah), yang disimpan di Cloud Storage dan dianalisis menggunakan fitur deteksi wajah Cloud Vision API. Informasi penting tentang setiap foto disimpan di Datastore, database NoSQL Google Cloud, tempat informasi tersebut diakses setiap kali pengguna mengunjungi situs.

Aplikasi ini menggunakan library klien Google Cloud untuk Storage, Datastore, dan Vision. Library klien ini memudahkan akses ke Cloud API dari bahasa pemrograman favorit Anda.

Mari kita lihat beberapa cuplikan kode penting.

Bagian impor di atas adalah tempat kita mengimpor berbagai paket yang diperlukan untuk kode kita. Berikut cara mengimpor library klien Google Cloud untuk Datastore, Storage, dan Vision:

from google.cloud import datastore from google.cloud import storage from google.cloud import vision

Kode untuk menangani apa yang terjadi saat pengguna mengunjungi URL root situs

Berikut adalah kode untuk apa yang terjadi saat pengguna mengunjungi URL root situs. Objek klien Datastore dibuat, yang digunakan untuk mengakses library klien Datastore. Kueri di Datastore dijalankan untuk entity dengan jenis Faces. Terakhir, template HTML dirender, dengan meneruskan image_entities yang kita ekstrak dari Datastore sebagai variabel.

@app.route('/') def homepage(): # Create a Cloud Datastore client. datastore_client = datastore.Client() # Use the Cloud Datastore client to fetch information from Datastore about # each photo. query = datastore_client.query(kind='Faces') image_entities = list(query.fetch()) # Return a Jinja2 HTML template and pass in image_entities as a parameter. return render_template('homepage.html', image_entities=image_entities)

Mari kita lihat cara entity disimpan ke Datastore. Datastore adalah solusi database NoSQL Google Cloud. Data disimpan dalam objek yang disebut entity. Setiap entity diberi kunci identifikasi unik, yang dapat dibuat menggunakan jenis dan string nama kunci. Jenis adalah bucket organisasi untuk jenis entity. Misalnya, kita mungkin ingin menyiapkan jenis untuk Foto, Orang, dan Hewan.

Setiap entity dapat memiliki beberapa properti yang ditentukan developer, yang dapat memiliki nilai dari beragam jenis, termasuk bilangan bulat, float, string, tanggal, atau data program biner:

# Create a Cloud Datastore client. datastore_client = datastore.Client() # Fetch the current date / time. current_datetime = datetime.now() # The kind for the new entity. kind = 'Faces' # The name/ID for the new entity. name = blob.name # Create the Cloud Datastore key for the new entity. key = datastore_client.key(kind, name) # Construct the new entity using the key. Set dictionary values for entity # keys blob_name, storage_public_url, timestamp, and joy. entity = datastore.Entity(key) entity['blob_name'] = blob.name entity['image_public_url'] = blob.public_url entity['timestamp'] = current_datetime entity['joy'] = face_joy # Save the new entity to Datastore. datastore_client.put(entity)

Library klien Storage dan Vision dapat diakses secara terprogram dengan cara yang sama seperti Datastore. Anda dapat membuka file main.py sendiri menggunakan vim, emacs, atau nano untuk menjelajahi semua kode contoh.

homepage.html

Framework web Flask memanfaatkan Jinja2 sebagai mesin template. Dengan demikian, kita dapat meneruskan variabel dan ekspresi dari main.py ke homepage.html yang diganti dengan nilai setelah halaman dirender.

Pelajari lebih lanjut Jinja2 di Dokumentasi Desainer Template.

Template HTML Jinja2 ini menampilkan formulir bagi pengguna untuk mengirimkan foto ke database. Template ini juga menampilkan setiap gambar yang sebelumnya dikirimkan beserta nama file, tanggal/waktu upload, dan kemungkinan wajah yang terdeteksi oleh Vision API terlihat bahagia.

<h1>Google Cloud Platform - Face Detection Sample</h1> <p>This Python Flask application demonstrates App Engine Flexible, Google Cloud Storage, Datastore, and the Cloud Vision API.</p> <br> <html> <body> <form action="upload_photo" method="POST" enctype="multipart/form-data"> Upload File: <input type="file" name="file"><br> <input type="submit" name="submit" value="Submit"> </form> {% for image_entity in image_entities %} <img src="{{image_entity['image_public_url']}}" width=200 height=200> <p>{{image_entity['blob_name']}} was uploaded {{image_entity['timestamp']}}.</p> <p>Joy Likelihood for Face: {{image_entity['joy']}}</p> {% endfor %} </body> </html>

Tugas 5. Men-deploy Aplikasi ke Lingkungan Fleksibel App Engine

Lingkungan Fleksibel App Engine menggunakan file bernama app.yaml untuk mendeskripsikan konfigurasi deployment aplikasi. Jika file ini tidak ada, App Engine akan mencoba menebak konfigurasi deployment-nya. Namun, sebaiknya Anda menyediakan file ini.

1. Selanjutnya, Anda akan mengubah app.yaml menggunakan editor pilihan Anda. vim, nano, atau emacs. Kita akan menggunakan editor nano:

nano app.yaml

2. Setelah Anda membuka app.yaml, ganti <your-cloud-storage-bucket> dengan nama bucket Cloud Storage Anda. (Jika Anda lupa nama bucket Cloud Storage Anda, salin Project ID dari panel lab details).

Bagian env_variables menyiapkan variabel lingkungan yang akan digunakan di main.py setelah aplikasi di-deploy.

3. Selanjutnya, setel aplikasi Anda untuk menggunakan penskalaan manual dengan menambahkan kode ini di akhir file:

manual_scaling: instances: 1

4. Terakhir, pastikan python_version disetel ke versi 3.12 agar App Engine Anda berhasil di-deploy.

File Anda akan terlihat seperti ini:

runtime: python env: flex entrypoint: gunicorn -b :$PORT main:app runtime_config: operating_system: "ubuntu22" runtime_version: "3.12" env_variables: CLOUD_STORAGE_BUCKET: <your-cloud-storage-bucket> manual_scaling: instances: 1

Ini adalah konfigurasi dasar yang diperlukan untuk men-deploy aplikasi App Engine Flex Python 3. Anda dapat mempelajari lebih lanjut cara mengonfigurasi App Engine di Panduan Mengonfigurasi Aplikasi dengan app.yaml.

5. Simpan dan tutup file di nano:

• Tekan CTRL+X.
• Di perintah, ketik Y, lalu tekan ENTER.

6. Perbarui waktu tunggu Cloud Build Anda:

gcloud config set app/cloud_build_timeout 1000

7. Deploy aplikasi Anda di App Engine menggunakan gcloud:

gcloud app deploy

Jika muncul perintah Do you want to continue (Y/n), ketik Y lalu tekan ENTER.

Lihat di Cloud Shell saat aplikasi sedang dibangun. Proses ini akan memerlukan waktu hingga 10 menit. Lingkungan Fleksibel App Engine secara otomatis menyediakan virtual machine Compute Engine untuk Anda di balik layar, kemudian menginstal aplikasi, lalu memulainya.

8. Setelah aplikasi di-deploy, buka aplikasi di browser web Anda dengan URL berikut:

https://<PROJECT_ID>.appspot.com Catatan: Jika Anda lupa PROJECT_ID, jalankan gcloud config list project dari Cloud Shell.

Klik Periksa progres saya di bawah untuk memeriksa progres lab Anda.

Men-deploy Aplikasi

Selamat!

Selamat! Dalam lab ini, Anda telah mempelajari cara menulis dan men-deploy aplikasi web Python ke lingkungan Fleksibel App Engine.

Langkah berikutnya/Pelajari lebih lanjut

• Python di Google Cloud
• Dokumentasi Lingkungan Fleksibel App Engine untuk Python
• Dokumentasi untuk Library Klien Python: Datastore, Storage, dan Vision
• Pelajari lebih lanjut Library Klien.
• Contoh kode Python lainnya
• Pelajari lebih lanjut Flask.

Sertifikasi dan pelatihan Google Cloud

...membantu Anda mengoptimalkan teknologi Google Cloud. Kelas kami mencakup keterampilan teknis dan praktik terbaik untuk membantu Anda memahami dengan cepat dan melanjutkan proses pembelajaran. Kami menawarkan pelatihan tingkat dasar hingga lanjutan dengan opsi on demand, live, dan virtual untuk menyesuaikan dengan jadwal Anda yang sibuk. Sertifikasi membantu Anda memvalidasi dan membuktikan keterampilan serta keahlian Anda dalam teknologi Google Cloud.

Manual Terakhir Diperbarui: 20 Mei 2026

Lab Terakhir Diuji: 24 Februari 2026

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 masing-masing perusahaan yang bersangkutan.