Pic-a-daily: ห้องทดลอง 4 - สร้างฟรอนท์เอนด์ของเว็บ

1. ภาพรวม

ใน Codelab นี้ คุณจะได้สร้างส่วนหน้าของเว็บใน Google App Engine ซึ่งจะช่วยให้ผู้ใช้อัปโหลดรูปภาพจากเว็บแอปพลิเคชัน รวมถึงเรียกดูรูปภาพที่อัปโหลดและภาพขนาดย่อของรูปภาพเหล่านั้นได้

เว็บแอปพลิเคชันนี้จะใช้เฟรมเวิร์ก CSS ที่ชื่อ Bulma เพื่อให้มีอินเทอร์เฟซผู้ใช้ที่ดูดี และใช้เฟรมเวิร์กส่วนหน้า JavaScript Vue.JS เพื่อเรียกใช้ API ของแอปพลิเคชันที่คุณจะสร้าง

แอปพลิเคชันนี้ประกอบด้วย 3 แท็บ ได้แก่

หน้าหน้าแรกที่จะแสดงภาพขนาดย่อของรูปภาพทั้งหมดที่อัปโหลด พร้อมกับรายการป้ายกำกับที่อธิบายรูปภาพ (ป้ายกำกับที่ Cloud Vision API ตรวจพบใน Lab ก่อนหน้า)
หน้าภาพคอลลาจที่จะแสดงภาพคอลลาจที่สร้างจากรูปภาพ 4 รูปที่อัปโหลดล่าสุด
หน้าอัปโหลดที่ผู้ใช้อัปโหลดรูปภาพใหม่ได้

ส่วนหน้าของเว็บไซต์ที่ได้จะมีลักษณะดังนี้

หน้าเว็บทั้ง 3 หน้าเป็นหน้า HTML แบบง่ายๆ ดังนี้

หน้าหน้าแรก (index.html) เรียกใช้โค้ดแบ็กเอนด์ของ Node App Engine เพื่อรับรายการรูปภาพขนาดย่อและป้ายกำกับของรูปภาพเหล่านั้นผ่านการเรียก AJAX ไปยัง URL /api/pictures หน้าแรกใช้ Vue.js เพื่อดึงข้อมูลนี้
หน้าภาพคอลลาจ (collage.html) จะชี้ไปที่รูปภาพ collage.png ซึ่งประกอบขึ้นจากรูปภาพล่าสุด 4 รูป
หน้าอัปโหลด (upload.html) มีแบบฟอร์มง่ายๆ สำหรับอัปโหลดรูปภาพผ่านคำขอ POST ไปยัง URL /api/pictures

สิ่งที่คุณจะได้เรียนรู้

App Engine
Cloud Storage
Cloud Firestore

2. การตั้งค่าและข้อกำหนด

การตั้งค่าสภาพแวดล้อมแบบเรียนรู้ด้วยตนเอง

ลงชื่อเข้าใช้ Google Cloud Console แล้วสร้างโปรเจ็กต์ใหม่หรือใช้โปรเจ็กต์ที่มีอยู่ซ้ำ หากยังไม่มีบัญชี Gmail หรือ Google Workspace คุณต้องสร้างบัญชี

ชื่อโปรเจ็กต์คือชื่อที่แสดงสำหรับผู้เข้าร่วมโปรเจ็กต์นี้ โดยเป็นสตริงอักขระที่ Google APIs ไม่ได้ใช้ และคุณสามารถอัปเดตได้ทุกเมื่อ
รหัสโปรเจ็กต์ต้องไม่ซ้ำกันในโปรเจ็กต์ Google Cloud ทั้งหมดและเปลี่ยนแปลงไม่ได้ (เปลี่ยนไม่ได้หลังจากตั้งค่าแล้ว) Cloud Console จะสร้างสตริงที่ไม่ซ้ำกันโดยอัตโนมัติ ซึ่งโดยปกติแล้วคุณไม่จำเป็นต้องสนใจว่าสตริงนั้นคืออะไร ใน Codelab ส่วนใหญ่ คุณจะต้องอ้างอิงรหัสโปรเจ็กต์ (และโดยทั่วไปจะระบุเป็น PROJECT_ID) ดังนั้นหากไม่ชอบรหัสที่สร้างขึ้น ให้สร้างรหัสแบบสุ่มอีกรหัส หรือจะลองใช้รหัสของคุณเองและดูว่ามีรหัสนั้นหรือไม่ก็ได้ จากนั้นจะ "หยุด" หลังจากสร้างโปรเจ็กต์แล้ว
นอกจากนี้ยังมีค่าที่ 3 คือหมายเลขโปรเจ็กต์ ซึ่ง API บางตัวใช้ ดูข้อมูลเพิ่มเติมเกี่ยวกับค่าทั้ง 3 นี้ได้ในเอกสารประกอบ

จากนั้นคุณจะต้องเปิดใช้การเรียกเก็บเงินใน Cloud Console เพื่อใช้ทรัพยากร/API ของ Cloud การทำตาม Codelab นี้ไม่ควรมีค่าใช้จ่ายมากนัก หรืออาจไม่มีเลย หากต้องการปิดแหล่งข้อมูลเพื่อไม่ให้มีการเรียกเก็บเงินนอกเหนือจากบทแนะนำนี้ ให้ทำตามวิธีการ "ล้างข้อมูล" ที่ตอนท้ายของ Codelab ผู้ใช้ Google Cloud รายใหม่มีสิทธิ์เข้าร่วมโปรแกรมช่วงทดลองใช้ฟรีมูลค่า$300 USD

เริ่มต้น Cloud Shell

แม้ว่าคุณจะใช้งาน Google Cloud จากระยะไกลจากแล็ปท็อปได้ แต่ใน Codelab นี้คุณจะใช้ Google Cloud Shell ซึ่งเป็นสภาพแวดล้อมบรรทัดคำสั่งที่ทำงานในระบบคลาวด์

จาก Google Cloud Console ให้คลิกไอคอน Cloud Shell ในแถบเครื่องมือด้านขวาบน

การจัดสรรและเชื่อมต่อกับสภาพแวดล้อมจะใช้เวลาเพียงไม่กี่นาที เมื่อเสร็จแล้ว คุณควรเห็นข้อความคล้ายกับตัวอย่างต่อไปนี้

เครื่องเสมือนนี้มาพร้อมเครื่องมือพัฒนาซอฟต์แวร์ทั้งหมดที่คุณต้องการ โดยมีไดเรกทอรีหลักแบบถาวรขนาด 5 GB และทำงานบน Google Cloud ซึ่งช่วยเพิ่มประสิทธิภาพเครือข่ายและการตรวจสอบสิทธิ์ได้อย่างมาก คุณสามารถทำงานทั้งหมดในห้องทดลองนี้ได้โดยใช้เพียงเบราว์เซอร์

3. เปิดใช้ API

App Engine ต้องใช้ Compute Engine API ตรวจสอบว่าเปิดใช้แล้ว ดังนี้

gcloud services enable compute.googleapis.com

คุณควรเห็นการดำเนินการเสร็จสมบูรณ์

Operation "operations/acf.5c5ef4f6-f734-455d-b2f0-ee70b5a17322" finished successfully.

4. โคลนโค้ด

ดูโค้ด หากยังไม่ได้ดำเนินการ

git clone https://github.com/GoogleCloudPlatform/serverless-photosharing-workshop

จากนั้นคุณจะไปที่ไดเรกทอรีที่มีส่วนหน้าได้โดยทำดังนี้

cd serverless-photosharing-workshop/frontend

คุณจะมีเลย์เอาต์ไฟล์ต่อไปนี้สำหรับส่วนหน้า

frontend
 |
 ├── index.js
 ├── package.json
 ├── app.yaml
 |
 ├── public
      |
      ├── index.html
      ├── collage.html
      ├── upload.html
      |
      ├── app.js
      ├── script.js
      ├── style.css

ที่รูทของโปรเจ็กต์ คุณจะมีไฟล์ 3 ไฟล์ดังนี้

index.js มีโค้ด Node.js
package.json กำหนดทรัพยากร Dependency ของไลบรารี
app.yaml คือไฟล์การกำหนดค่าสำหรับ Google App Engine

public โฟลเดอร์มีทรัพยากรแบบคงที่ดังนี้

index.html คือหน้าเว็บที่แสดงรูปภาพขนาดย่อและป้ายกำกับทั้งหมด
collage.html แสดงภาพต่อกันของรูปภาพล่าสุด
upload.html มีแบบฟอร์มสำหรับอัปโหลดรูปภาพใหม่
app.js ใช้ Vue.js เพื่อป้อนข้อมูลลงในหน้า index.html
script.js จัดการเมนูการนำทางและไอคอน "แฮมเบอร์เกอร์" ในหน้าจอขนาดเล็ก
style.css กำหนดคำสั่ง CSS บางอย่าง

5. สำรวจโค้ด

ทรัพยากร Dependency

ไฟล์ package.json จะกำหนดทรัพยากร Dependency ของไลบรารีที่จำเป็น

{
  "name": "frontend",
  "version": "0.0.1",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "@google-cloud/firestore": "^3.4.1",
    "@google-cloud/storage": "^4.0.0",
    "express": "^4.16.4",
    "dayjs": "^1.8.22",
    "bluebird": "^3.5.0",
    "express-fileupload": "^1.1.6"
  }
}

แอปพลิเคชันของเราขึ้นอยู่กับสิ่งต่อไปนี้

firestore: เพื่อเข้าถึง Cloud Firestore ด้วยข้อมูลเมตาของรูปภาพ
พื้นที่เก็บข้อมูล: เพื่อเข้าถึง Google Cloud Storage ที่จัดเก็บรูปภาพ
express: เฟรมเวิร์กเว็บสําหรับ Node.js
dayjs: ไลบรารีขนาดเล็กที่แสดงวันที่ในรูปแบบที่อ่านง่าย
bluebird: ไลบรารี Promise ของ JavaScript
express-fileupload: ไลบรารีสำหรับจัดการการอัปโหลดไฟล์ได้อย่างง่ายดาย

ฟรอนท์เอนด์ Express

ที่จุดเริ่มต้นของตัวควบคุม index.js คุณจะต้องใช้ทรัพยากร Dependency ทั้งหมดที่กำหนดไว้ใน package.json ก่อนหน้านี้

const express = require('express');
const fileUpload = require('express-fileupload');
const Firestore = require('@google-cloud/firestore');
const Promise = require("bluebird");
const {Storage} = require('@google-cloud/storage');
const storage = new Storage();
const path = require('path');
const dayjs = require('dayjs');
const relativeTime = require('dayjs/plugin/relativeTime')
dayjs.extend(relativeTime)

จากนั้นจะมีการสร้างอินสแตนซ์แอปพลิเคชัน Express

ใช้มิดเดิลแวร์ Express 2 รายการ ดังนี้

การเรียก express.static() แสดงว่าทรัพยากรแบบคงที่จะพร้อมใช้งานในไดเรกทอรีย่อย public
และ fileUpload() จะกำหนดค่าการอัปโหลดไฟล์เพื่อจำกัดขนาดไฟล์ไม่เกิน 10 MB เพื่ออัปโหลดไฟล์ในเครื่องในระบบไฟล์ในหน่วยความจำในไดเรกทอรี /tmp

const app = express();
app.use(express.static('public'));
app.use(fileUpload({
    limits: { fileSize: 10 * 1024 * 1024 },
    useTempFiles : true,
    tempFileDir : '/tmp/'
}))

ในบรรดาทรัพยากรแบบคงที่ คุณมีไฟล์ HTML สำหรับหน้าแรก หน้าคอลลาจ และหน้าอัปโหลด หน้าเหล่านั้นจะเรียกใช้แบ็กเอนด์ของ API API นี้จะมีปลายทางต่อไปนี้

POST /api/pictures รูปภาพจะอัปโหลดผ่านคำขอ POST โดยใช้แบบฟอร์มใน upload.html
GET /api/pictures ปลายทางนี้จะแสดงเอกสาร JSON ที่มีรายการรูปภาพและป้ายกำกับของรูปภาพ
GET /api/pictures/:name URL นี้จะเปลี่ยนเส้นทางไปยังตำแหน่งพื้นที่เก็บข้อมูลระบบคลาวด์ของรูปภาพขนาดเต็ม
GET /api/thumbnails/:name URL นี้จะเปลี่ยนเส้นทางไปยังตำแหน่งที่จัดเก็บในระบบคลาวด์ของภาพขนาดย่อ
GET /api/collage URL สุดท้ายนี้จะเปลี่ยนเส้นทางไปยังตำแหน่งที่จัดเก็บในระบบคลาวด์ของรูปภาพคอลลาจที่สร้างขึ้น

การอัปโหลดรูปภาพ

ก่อนที่จะดูโค้ด Node.js สำหรับการอัปโหลดรูปภาพ ให้ดูpublic/upload.htmlอย่างรวดเร็ว

... 
<form method="POST" action="/api/pictures" enctype="multipart/form-data">
    ... 
    <input type="file" name="pictures">
    <button>Submit</button>
    ... 
</form>
...

องค์ประกอบแบบฟอร์มชี้ไปที่ปลายทาง /api/pictures โดยใช้เมธอด HTTP POST และรูปแบบหลายส่วน index.js ต้องตอบกลับปลายทางและวิธีการดังกล่าว รวมถึงแยกไฟล์

app.post('/api/pictures', async (req, res) => {
    if (!req.files || Object.keys(req.files).length === 0) {
        console.log("No file uploaded");
        return res.status(400).send('No file was uploaded.');
    }
    console.log(`Receiving files ${JSON.stringify(req.files.pictures)}`);

    const pics = Array.isArray(req.files.pictures) ? req.files.pictures : [req.files.pictures];

    pics.forEach(async (pic) => {
        console.log('Storing file', pic.name);
        const newPicture = path.resolve('/tmp', pic.name);
        await pic.mv(newPicture);

        const pictureBucket = storage.bucket(process.env.BUCKET_PICTURES);
        await pictureBucket.upload(newPicture, { resumable: false });
    });


    res.redirect('/');
});

ก่อนอื่น ให้ตรวจสอบว่ามีการอัปโหลดไฟล์จริง จากนั้นดาวน์โหลดไฟล์ในเครื่องผ่านเมธอด mv ที่มาจากโมดูล Node สำหรับการอัปโหลดไฟล์ของเรา เมื่อมีไฟล์ในระบบไฟล์ในเครื่องแล้ว คุณก็อัปโหลดรูปภาพไปยัง Bucket ของ Cloud Storage ได้ สุดท้าย ให้เปลี่ยนเส้นทางผู้ใช้กลับไปที่หน้าจอหลักของแอปพลิเคชัน

การแสดงรูปภาพ

ได้เวลาแสดงรูปภาพสวยๆ แล้ว

ใน/api/picturesแฮนเดิล คุณจะดูpicturesคอลเล็กชันของฐานข้อมูล Firestore เพื่อดึงรูปภาพทั้งหมด (ที่มีการสร้างภาพขนาดย่อแล้ว) โดยจัดเรียงตามวันที่สร้างจากล่าสุดไปเก่าสุด

คุณจะส่งรูปภาพแต่ละรูปในอาร์เรย์ JavaScript พร้อมชื่อ ป้ายกำกับที่อธิบายรูปภาพ (มาจาก Cloud Vision API) สีหลัก และวันที่สร้างที่เข้าใจง่าย (ด้วย dayjs เราจะใช้การชดเชยเวลาแบบสัมพัทธ์ เช่น "อีก 3 วัน")

app.get('/api/pictures', async (req, res) => {
    console.log('Retrieving list of pictures');

    const thumbnails = [];
    const pictureStore = new Firestore().collection('pictures');
    const snapshot = await pictureStore
        .where('thumbnail', '==', true)
        .orderBy('created', 'desc').get();

    if (snapshot.empty) {
        console.log('No pictures found');
    } else {
        snapshot.forEach(doc => {
            const pic = doc.data();
            thumbnails.push({
                name: doc.id,
                labels: pic.labels,
                color: pic.color,
                created: dayjs(pic.created.toDate()).fromNow()
            });
        });
    }
    console.table(thumbnails);
    res.send(thumbnails);
});

คอนโทรลเลอร์นี้จะแสดงผลลัพธ์ในรูปแบบต่อไปนี้

[
   {
      "name": "IMG_20180423_163745.jpg",
      "labels": [
         "Dish",
         "Food",
         "Cuisine",
         "Ingredient",
         "Orange chicken",
         "Produce",
         "Meat",
         "Staple food"
      ],
      "color": "#e78012",
      "created": "a day ago"
   },
   ...
]

โครงสร้างข้อมูลนี้จะใช้โดยข้อมูลโค้ด Vue.js ขนาดเล็กจากหน้า index.html นี่คือมาร์กอัปจากหน้าดังกล่าวในเวอร์ชันที่เรียบง่าย

<div id="app">
        <div class="container" id="app">
                <div id="picture-grid">
                        <div class="card" v-for="pic in pictures">
                                <div class="card-content">
                                        <div class="content">
                                                <div class="image-border" :style="{ 'border-color': pic.color }">
                                                        <a :href="'/api/pictures/' + pic.name">
                                                                <img :src="'/api/thumbnails/' + pic.name">
                                                        </a>
                                                </div>
                                                <a class="panel-block" v-for="label in pic.labels" :href="'/?q=' + label">
                                                        <span class="panel-icon">
                                                                <i class="fas fa-bookmark"></i> &nbsp;
                                                        </span>
                                                        {{ label }}
                                                </a>
                                        </div>
                                </div>
                        </div>
            </div>
        </div>
</div>

รหัสของ Div จะระบุให้ Vue.js ทราบว่านี่คือส่วนของมาร์กอัปที่จะแสดงผลแบบไดนามิก การทำซ้ำจะดำเนินการได้ด้วยv-forคำสั่ง

รูปภาพจะมีเส้นขอบสีสวยงามซึ่งสอดคล้องกับสีเด่นในรูปภาพตามที่ Cloud Vision API พบ และเราจะชี้ไปที่ภาพขนาดย่อและรูปภาพแบบเต็มความกว้างในแหล่งที่มาของลิงก์และรูปภาพ

สุดท้าย เราจะแสดงรายการป้ายกำกับที่อธิบายรูปภาพ

ต่อไปนี้คือโค้ด JavaScript สำหรับข้อมูลโค้ด Vue.js (ในไฟล์ public/app.js ที่นำเข้าที่ด้านล่างของหน้า index.html)

var app = new Vue({
  el: '#app',
  data() {
    return { pictures: [] }
  },
  mounted() {
    axios
      .get('/api/pictures')
      .then(response => { this.pictures = response.data })
  }
})

โค้ด Vue ใช้ไลบรารี Axios เพื่อทำการเรียก AJAX ไปยังปลายทาง /api/pictures จากนั้นระบบจะเชื่อมโยงข้อมูลที่ส่งคืนกับโค้ดมุมมองในมาร์กอัปที่คุณเห็นก่อนหน้านี้

การดูรูปภาพ

จาก index.html ผู้ใช้จะดูภาพขนาดย่อของรูปภาพ คลิกเพื่อดูรูปภาพขนาดเต็ม และจาก collage.html ผู้ใช้จะดูรูปภาพ collage.png

ในมาร์กอัป HTML ของหน้าเหล่านั้น รูปภาพ src และลิงก์ href จะชี้ไปยังปลายทางทั้ง 3 ซึ่งจะเปลี่ยนเส้นทางไปยังตำแหน่ง Cloud Storage ของรูปภาพ ภาพขนาดย่อ และภาพต่อกัน ไม่จำเป็นต้องฮาร์ดโค้ดเส้นทางในมาร์กอัป HTML

app.get('/api/pictures/:name', async (req, res) => {
    res.redirect(`https://storage.cloud.google.com/${process.env.BUCKET_PICTURES}/${req.params.name}`);
});

app.get('/api/thumbnails/:name', async (req, res) => {
    res.redirect(`https://storage.cloud.google.com/${process.env.BUCKET_THUMBNAILS}/${req.params.name}`);
});

app.get('/api/collage', async (req, res) => {
    res.redirect(`https://storage.cloud.google.com/${process.env.BUCKET_THUMBNAILS}/collage.png`);
});

การเรียกใช้แอปพลิเคชัน Node

เมื่อกำหนดปลายทางทั้งหมดแล้ว แอปพลิเคชัน Node.js ก็พร้อมเปิดตัว แอปพลิเคชัน Express จะรับฟังบนพอร์ต 8080 โดยค่าเริ่มต้น และพร้อมให้บริการคำขอขาเข้า

const PORT = process.env.PORT || 8080;

app.listen(PORT, () => {
    console.log(`Started web frontend service on port ${PORT}`);
    console.log(`- Pictures bucket = ${process.env.BUCKET_PICTURES}`);
    console.log(`- Thumbnails bucket = ${process.env.BUCKET_THUMBNAILS}`);
});

6. ทดสอบในเครื่อง

ทดสอบโค้ดในเครื่องเพื่อให้แน่ใจว่าใช้งานได้ก่อนที่จะนำไปใช้ในระบบคลาวด์

คุณต้องส่งออกตัวแปรสภาพแวดล้อม 2 รายการที่สอดคล้องกับ Bucket ของ Cloud Storage 2 รายการ

export BUCKET_THUMBNAILS=thumbnails-${GOOGLE_CLOUD_PROJECT}
export BUCKET_PICTURES=uploaded-pictures-${GOOGLE_CLOUD_PROJECT}

ในโฟลเดอร์ frontend ให้ติดตั้งทรัพยากร Dependency ของ npm และเริ่มเซิร์ฟเวอร์โดยทำดังนี้

npm install; npm start

หากทุกอย่างเป็นไปด้วยดี เซิร์ฟเวอร์ควรเริ่มทำงานบนพอร์ต 8080

Started web frontend service on port 8080
- Pictures bucket = uploaded-pictures-${GOOGLE_CLOUD_PROJECT}
- Thumbnails bucket = thumbnails-${GOOGLE_CLOUD_PROJECT}

ชื่อจริงของที่เก็บข้อมูลจะปรากฏในบันทึกเหล่านั้น ซึ่งจะเป็นประโยชน์ในการแก้ไขข้อบกพร่อง

จาก Cloud Shell คุณสามารถใช้ฟีเจอร์ตัวอย่างเว็บเพื่อเรียกดูแอปพลิเคชันที่ทำงานในเครื่องได้โดยทำดังนี้

ใช้ CTRL-C เพื่อออก

7. ทำให้ใช้งานได้กับ App Engine

แอปพลิเคชันของคุณพร้อมใช้งานแล้ว

กำหนดค่า App Engine

ตรวจสอบapp.yamlไฟล์การกำหนดค่าสำหรับ App Engine

runtime: nodejs16
env_variables:
  BUCKET_PICTURES: uploaded-pictures-GOOGLE_CLOUD_PROJECT
  BUCKET_THUMBNAILS: thumbnails-GOOGLE_CLOUD_PROJECT

บรรทัดแรกประกาศว่ารันไทม์อิงตาม Node.js 10 มีการกำหนดตัวแปรสภาพแวดล้อม 2 ตัวเพื่อชี้ไปยัง 2 บัคเก็ตสำหรับรูปภาพต้นฉบับและภาพขนาดย่อ

หากต้องการแทนที่ GOOGLE_CLOUD_PROJECT ด้วยรหัสโปรเจ็กต์จริง ให้เรียกใช้คำสั่งต่อไปนี้

sed -i -e "s/GOOGLE_CLOUD_PROJECT/${GOOGLE_CLOUD_PROJECT}/" app.yaml

ติดตั้งใช้งาน

ตั้งค่าภูมิภาคที่ต้องการสำหรับ App Engine โดยใช้ภูมิภาคเดียวกันกับในแล็บก่อนหน้า

gcloud config set compute/region europe-west1

และทำให้ใช้งานได้

gcloud app deploy

หลังจากผ่านไป 1-2 นาที ระบบจะแจ้งว่าแอปพลิเคชันกำลังให้บริการการรับส่งข้อมูล

Beginning deployment of service [default]...
╔════════════════════════════════════════════════════════════╗
╠═ Uploading 8 files to Google Cloud Storage                ═╣
╚════════════════════════════════════════════════════════════╝
File upload done.
Updating service [default]...done.
Setting traffic split for service [default]...done.
Deployed service [default] to [https://GOOGLE_CLOUD_PROJECT.appspot.com]
You can stream logs from the command line by running:
  $ gcloud app logs tail -s default
To view your application in the web browser run:
  $ gcloud app browse

นอกจากนี้ คุณยังไปที่ส่วน App Engine ของ Cloud Console เพื่อดูว่าแอปได้รับการติดตั้งใช้งานแล้ว และสำรวจฟีเจอร์ของ App Engine เช่น การควบคุมเวอร์ชันและการแยกการรับส่งข้อมูลได้ด้วย

8. ทดสอบแอป

หากต้องการทดสอบ ให้ไปที่ URL ของ App Engine เริ่มต้นสำหรับแอป (https://<YOUR_PROJECT_ID>.appspot.com/) แล้วคุณจะเห็น UI ส่วนหน้าทำงาน

9. ล้างข้อมูล (ไม่บังคับ)

หากไม่ต้องการเก็บแอปไว้ คุณสามารถล้างข้อมูลทรัพยากรเพื่อประหยัดค่าใช้จ่ายและเป็นพลเมืองที่ดีของระบบคลาวด์โดยรวมได้โดยการลบทั้งโปรเจ็กต์ ดังนี้

gcloud projects delete ${GOOGLE_CLOUD_PROJECT}

10. ยินดีด้วย

ยินดีด้วย เว็บแอปพลิเคชัน Node.js นี้โฮสต์อยู่ใน App Engine ซึ่งจะผูกบริการทั้งหมดเข้าด้วยกัน และช่วยให้ผู้ใช้สามารถอัปโหลดและแสดงภาพรูปภาพได้

สิ่งที่เราได้พูดถึง

App Engine
Cloud Storage
Cloud Firestore

ขั้นตอนถัดไป

Pic-a-daily: Lab 5—Image garbage collector