Menulis Layanan Web Dasar untuk App Engine

Menulis dan menguji secara lokal layanan web yang menyalurkan file HTML statis menggunakan Flask. Kemudian, membuat file konfigurasi yang Anda perlukan untuk men-deploy layanan web ke App Engine.

Pada langkah ini, Anda akan membuat dan menguji secara lokal versi layanan web yang menampilkan data placeholder. Di sini, tujuannya adalah untuk memastikan bahwa layanan web dasar Anda berfungsi sebelum menambahkan autentikasi Datastore dan Firebase.

Sebelum memulai

Jika Anda belum membuat project Google Cloud, buat project Google Cloud.
Jika belum melakukannya, siapkan lingkungan lokal Anda untuk pengembangan Python 3 dengan menyelesaikan hal berikut:
- Download dan instal Python 3 untuk mengembangkan layanan web Anda dan menjalankan Google Cloud CLI.
- Gunakan kredensial pengguna Google Cloud Anda untuk melakukan autentikasi dengan Google Cloud CLI dan mengaktifkan pengujian lokal dengan Datastore:
```
gcloud auth application-default login
```
  Tips: Untuk pengujian yang lebih ekstensif, sebaiknya siapkan akun layanan, bukan menggunakan kredensial pengguna. Untuk mengetahui informasi selengkapnya tentang akun layanan dan jenis autentikasi lainnya, lihat Ringkasan Autentikasi.

Membuat struktur file layanan web

Direktori project tempat Anda membuat layanan web akan memiliki struktur file berikut:

building-an-app/
- app.yaml
- main.py
- requirements.txt
- static/
  - script.js
  - style.css
- templates/
  - index.html

Bagian berikut memberikan contoh cara menyiapkan file di direktori project Anda.

Menulis layanan web Anda

Iterasi awal layanan web Anda menggunakan Flask untuk menayangkan template HTML berbasis Jinja.

Untuk menyiapkan layanan web Anda:

Buat file templates/index.html:

<!doctype html>
<!--
 Copyright 2021 Google LLC

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-->

<html>
<head>
  <title>Datastore and Firebase Auth Example</title>
  <script src="{{ url_for('static', filename='script.js') }}"></script>
  <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>

  <h1>Datastore and Firebase Auth Example</h1>

  <h2>Last 10 visits</h2>
  {% for time in times %}
    <p>{{ time }}</p>
  {% endfor %}

</body>
</html>

Tambahkan perilaku dan gaya dengan file static/script.js dan static/style.css:

'use strict';

window.addEventListener('load', function () {

  console.log("Hello World!");

});

/**
 * Copyright 2021 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

body {
  font-family: "helvetica", sans-serif;
  text-align: center;
}

Di file main.py, gunakan Flask untuk merender template HTML Anda dengan data placeholder:

import datetime

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def root():
    # For the sake of example, use static information to inflate the template.
    # This will be replaced with real information in later steps.
    dummy_times = [
        datetime.datetime(2018, 1, 1, 10, 0, 0),
        datetime.datetime(2018, 1, 2, 10, 30, 0),
        datetime.datetime(2018, 1, 3, 11, 0, 0),
    ]

    return render_template("index.html", times=dummy_times)

if __name__ == "__main__":
    # This is used when running locally only. When deploying to Google App
    # Engine, a webserver process such as Gunicorn will serve the app. This
    # can be configured by adding an `entrypoint` to app.yaml.
    # Flask's development server will automatically serve static files in
    # the "static" directory. See:
    # http://flask.pocoo.org/docs/1.0/quickstart/#static-files. Once deployed,
    # App Engine itself will serve those files as configured in app.yaml.
    app.run(host="127.0.0.1", port=8080, debug=True)

Konfigurasikan semua dependensi yang akan diperlukan untuk layanan web di file requirements.txt Anda:
```
Flask==3.0.0
```

Menguji layanan web Anda

Uji layanan web Anda dengan menjalankannya secara lokal di lingkungan virtual:

Mac OS/Linux

Buat lingkungan Python yang terisolasi:

python3 -m venv env
source env/bin/activate

Jika Anda tidak berada dalam direktori yang berisi kode contoh, buka direktori yang berisi kode contoh hello_world. Kemudian instal dependensi:
```
cd YOUR_SAMPLE_CODE_DIR
pip install -r requirements.txt
```
Jalankan aplikasi:
```
python main.py
```
Di browser web, masukkan alamat berikut:
```
http://localhost:8080
```

Windows

Gunakan PowerShell untuk menjalankan paket Python Anda.

Temukan penginstalan PowerShell Anda.
Klik kanan pintasan PowerShell dan mulai sebagai administrator.

Buat lingkungan Python yang terisolasi.

python -m venv env
.\env\Scripts\activate

Buka direktori project Anda lalu instal dependensi. Jika Anda tidak berada dalam direktori yang berisi kode contoh, buka direktori yang berisi kode contoh hello_world. Kemudian, instal dependensi:
```
cd YOUR_SAMPLE_CODE_DIR
pip install -r requirements.txt
```
Jalankan aplikasi:
```
python main.py
```
Di browser web, masukkan alamat berikut:
```
http://localhost:8080
```

Mengonfigurasi layanan web untuk App Engine

Untuk men-deploy layanan web ke App Engine, Anda memerlukan file app.yaml. File konfigurasi ini menentukan setelan layanan web Anda untuk App Engine.

Untuk mengonfigurasi layanan web agar dapat di-deploy ke App Engine, buat file app.yaml di direktori utama project Anda, misalnya building-an-app:

# Copyright 2021 Google LLC
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
#      http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.

runtime: python39

handlers:
  # This configures Google App Engine to serve the files in the app's static
  # directory.
- url: /static
  static_dir: static

  # This handler routes all requests not caught above to your main app. It is
  # required when static routes are defined, but can be omitted (along with
  # the entire handlers section) when there are no static files defined.
- url: /.*
  script: auto

Perhatikan bahwa untuk layanan web sederhana ini, file app.yaml hanya perlu menentukan setelan runtime dan pengendali untuk file statis.

Untuk layanan web yang lebih rumit, Anda dapat mengonfigurasi setelan tambahan di app.yaml, seperti penskalaan, pengendali tambahan, dan elemen aplikasi lainnya, seperti variabel lingkungan dan nama layanan. Untuk mengetahui informasi selengkapnya dan daftar semua elemen yang didukung, lihat referensi app.yaml.

Langkah berikutnya

Setelah mengonfigurasi, membuat, dan menguji layanan web, Anda dapat men-deploy versi layanan web ini ke App Engine.

Sebelumnya

Buat project Anda

Berikutnya

Men-deploy layanan web Anda