Pic-a-daily: Lab 4—वेब फ़्रंटएंड बनाएं

1. खास जानकारी

इस कोडलैब में, Google App Engine पर एक वेब फ़्रंटएंड बनाया जाता है. इससे उपयोगकर्ता, वेब ऐप्लिकेशन से फ़ोटो अपलोड कर पाएंगे. साथ ही, अपलोड की गई फ़ोटो और उनके थंबनेल ब्राउज़ कर पाएंगे.

यह वेब ऐप्लिकेशन, Bulma नाम के सीएसएस फ़्रेमवर्क का इस्तेमाल करेगा. इससे ऐप्लिकेशन का यूज़र इंटरफ़ेस (यूआई) बेहतर दिखेगा. साथ ही, यह Vue.JS JavaScript फ़्रंटएंड फ़्रेमवर्क का इस्तेमाल करेगा, ताकि ऐप्लिकेशन के उस एपीआई को कॉल किया जा सके जिसे आपको बनाना है.

इस ऐप्लिकेशन में तीन टैब होंगे:

• एक होम पेज, जिस पर अपलोड की गई सभी इमेज के थंबनेल दिखेंगे. साथ ही, इमेज के बारे में बताने वाले लेबल की सूची भी दिखेगी. ये वही लेबल होंगे जिन्हें Cloud Vision API ने पिछले लैब में पहचाना था.
• एक कोलाज पेज, जिसमें अपलोड की गई सबसे हाल की चार फ़ोटो का कोलाज दिखेगा.
• अपलोड करें पेज, जहां उपयोगकर्ता नई तस्वीरें अपलोड कर सकते हैं.

नतीजे में मिलने वाला फ़्रंटएंड ऐसा दिखता है:

ये तीनों पेज सामान्य एचटीएमएल पेज हैं:

• होम पेज (index.html), थंबनेल इमेज और उनके लेबल की सूची पाने के लिए, Node App Engine के बैकएंड कोड को कॉल करता है. इसके लिए, वह /api/pictures यूआरएल पर AJAX कॉल करता है. होम पेज, इस डेटा को फ़ेच करने के लिए Vue.js का इस्तेमाल कर रहा है.
• कोलाज पेज (collage.html) पर, collage.png इमेज दिखाई गई है. इसमें चार नई फ़ोटो शामिल हैं.
• अपलोड करें पेज (upload.html) पर, /api/pictures यूआरएल पर POST अनुरोध के ज़रिए फ़ोटो अपलोड करने के लिए एक आसान फ़ॉर्म दिया गया है.

आपको क्या सीखने को मिलेगा

• App Engine
• Cloud Storage
• Cloud Firestore

2. सेटअप और ज़रूरी शर्तें

अपने हिसाब से एनवायरमेंट सेट अप करना

1. Google Cloud Console में साइन इन करें और नया प्रोजेक्ट बनाएं या किसी मौजूदा प्रोजेक्ट का फिर से इस्तेमाल करें. अगर आपके पास पहले से कोई Gmail या Google Workspace खाता नहीं है, तो आपको एक खाता बनाना होगा.

• प्रोजेक्ट का नाम, इस प्रोजेक्ट में हिस्सा लेने वाले लोगों के लिए डिसप्ले नेम होता है. यह एक कैरेक्टर स्ट्रिंग है, जिसका इस्तेमाल Google API नहीं करते. इसे किसी भी समय अपडेट किया जा सकता है.
• प्रोजेक्ट आईडी, सभी Google Cloud प्रोजेक्ट के लिए यूनीक होना चाहिए. साथ ही, इसे बदला नहीं जा सकता. Cloud Console, एक यूनीक स्ट्रिंग अपने-आप जनरेट करता है. आम तौर पर, आपको इससे कोई फ़र्क़ नहीं पड़ता कि यह क्या है. ज़्यादातर कोडलैब में, आपको प्रोजेक्ट आईडी का रेफ़रंस देना होगा. इसे आम तौर पर PROJECT_ID के तौर पर पहचाना जाता है. इसलिए, अगर आपको यह पसंद नहीं है, तो कोई दूसरा रैंडम आईडी जनरेट करें. इसके अलावा, अपने हिसाब से कोई आईडी बनाकर देखें कि वह उपलब्ध है या नहीं. इसके बाद, प्रोजेक्ट बनाने के बाद इसे "फ़्रीज़" कर दिया जाता है.
• तीसरी वैल्यू, प्रोजेक्ट नंबर होती है. इसका इस्तेमाल कुछ एपीआई करते हैं. इन तीनों वैल्यू के बारे में ज़्यादा जानने के लिए, दस्तावेज़ देखें.

चेतावनी: प्रोजेक्ट आईडी, दुनिया भर में यूनीक होना चाहिए. इसे चुनने के बाद, कोई और इसका इस्तेमाल नहीं कर सकता. उस आईडी का इस्तेमाल सिर्फ़ आपने किया हो. किसी प्रोजेक्ट को मिटाने के बाद, उस आईडी का इस्तेमाल कभी नहीं किया जा सकता.

ध्यान दें: अगर Gmail खाते का इस्तेमाल किया जा रहा है, तो डिफ़ॉल्ट जगह को कोई संगठन नहीं पर सेट किया जा सकता है. अगर Google Workspace खाते का इस्तेमाल किया जा रहा है, तो अपने संगठन के हिसाब से कोई जगह चुनें.

2. इसके बाद, आपको Cloud Console में बिलिंग चालू करनी होगी, ताकि Cloud संसाधनों/एपीआई का इस्तेमाल किया जा सके. इस कोडलैब को पूरा करने में ज़्यादा खर्च नहीं आएगा. संसाधन बंद करने के लिए, कोडलैब के आखिर में दिए गए "बंद करें" निर्देशों का पालन करें, ताकि इस ट्यूटोरियल के बाद आपको बिलिंग न करनी पड़े. Google Cloud के नए उपयोगकर्ताओं को, मुफ़्त में आज़माने के लिए 300 डॉलर का क्रेडिट मिलता है.

Cloud Shell शुरू करें

Google Cloud को अपने लैपटॉप से रिमोटली ऐक्सेस किया जा सकता है. हालांकि, इस कोडलैब में Google Cloud Shell का इस्तेमाल किया जाएगा. यह क्लाउड में चलने वाला कमांड लाइन एनवायरमेंट है.

Google Cloud Console में, सबसे ऊपर दाएं कोने में मौजूद टूलबार पर, Cloud Shell आइकॉन पर क्लिक करें:

इसे चालू करने और एनवायरमेंट से कनेक्ट करने में सिर्फ़ कुछ सेकंड लगेंगे. यह प्रोसेस पूरी होने के बाद, आपको कुछ ऐसा दिखेगा:

इस वर्चुअल मशीन में, डेवलपमेंट के लिए ज़रूरी सभी टूल पहले से मौजूद हैं. यह 5 जीबी की होम डायरेक्ट्री उपलब्ध कराता है. साथ ही, यह Google Cloud पर काम करता है. इससे नेटवर्क की परफ़ॉर्मेंस और पुष्टि करने की प्रोसेस बेहतर होती है. इस लैब में मौजूद सभी टास्क को सिर्फ़ ब्राउज़र की मदद से पूरा किया जा सकता है.

3. एपीआई चालू करें

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

हमारे प्रोजेक्ट के रूट में, ये तीन फ़ाइलें मौजूद हैं:

• index.js में Node.js कोड शामिल है
• package.json लाइब्रेरी की डिपेंडेंसी तय करता है
• app.yaml Google App Engine के लिए कॉन्फ़िगरेशन फ़ाइल है

public फ़ोल्डर में स्टैटिक रिसॉर्स होते हैं:

• index.html वह पेज है जिस पर सभी थंबनेल इमेज और लेबल दिखते हैं
• collage.html में हाल की तस्वीरों का कोलाज दिखता है
• upload.html में नई तस्वीरें अपलोड करने के लिए एक फ़ॉर्म मौजूद है
• app.js, index.html पेज पर डेटा दिखाने के लिए Vue.js का इस्तेमाल कर रहा है
• script.js छोटी स्क्रीन पर नेविगेशन मेन्यू और उसके "हैमबर्गर" आइकॉन को मैनेज करता है
• style.css कुछ सीएसएस डायरेक्टिव तय करता है

5. कोड के बारे में जानकारी

ज़रूरी शर्तें

package.json फ़ाइल में, ज़रूरी लाइब्रेरी डिपेंडेंसी के बारे में बताया गया है:

{
  "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 को ऐक्सेस करने के लिए किया जाता है,
• storage: इसका इस्तेमाल, Google Cloud Storage को ऐक्सेस करने के लिए किया जाता है. इसमें फ़ोटो सेव की जाती हैं,
• express: Node.js के लिए वेब फ़्रेमवर्क,
• dayjs: यह एक छोटी लाइब्रेरी है. इसका इस्तेमाल तारीखों को आसानी से समझने वाले फ़ॉर्मैट में दिखाने के लिए किया जाता है,
• bluebird: यह JavaScript प्रॉमिस लाइब्रेरी है,
• express-fileupload: यह फ़ाइल अपलोड करने की प्रोसेस को आसानी से मैनेज करने के लिए इस्तेमाल की जाने वाली लाइब्रेरी है.

Express फ़्रंटएंड

index.js कंट्रोलर की शुरुआत में, आपको 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 मिडलवेयर का इस्तेमाल किया जाता है:

• express.static() कॉल से पता चलता है कि स्टैटिक संसाधन, public सब-डायरेक्ट्री में उपलब्ध होंगे.
• साथ ही, fileUpload() फ़ाइल अपलोड करने की सुविधा को कॉन्फ़िगर करता है, ताकि फ़ाइल का साइज़ 10 एमबी से ज़्यादा न हो. इससे फ़ाइलों को /tmp डायरेक्ट्री में, इन-मेमोरी फ़ाइल सिस्टम में स्थानीय तौर पर अपलोड किया जा सकता है.

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

स्टैटिक रिसॉर्स में, आपके पास होम पेज, कोलाज पेज, और अपलोड पेज के लिए एचटीएमएल फ़ाइलें होती हैं. ये पेज, एपीआई बैकएंड को कॉल करेंगे. इस एपीआई के ये एंडपॉइंट होंगे:

• POST /api/pictures upload.html में मौजूद फ़ॉर्म के ज़रिए, POST अनुरोध के ज़रिए फ़ोटो अपलोड की जाएंगी
• GET /api/pictures यह एंडपॉइंट, JSON फ़ॉर्मैट में एक ऐसा दस्तावेज़ दिखाता है जिसमें तस्वीरों की सूची और उनके लेबल शामिल होते हैं
• GET /api/pictures/:name यह यूआरएल, पूरी साइज़ वाली इमेज के Cloud Storage की जगह पर रीडायरेक्ट करता है
• GET /api/thumbnails/:name यह यूआरएल, थंबनेल इमेज के क्लाउड स्टोरेज की जगह पर रीडायरेक्ट करता है
• GET /api/collage यह आखिरी यूआरएल, जनरेट की गई कोलाज इमेज के क्लाउड स्टोरेज की जगह पर रीडायरेक्ट करता है

फ़ोटो अपलोड करना

फ़ोटो अपलोड करने के लिए 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 एंडपॉइंट पर ले जाता है. अब 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 विधि का इस्तेमाल करके, फ़ाइलों को स्थानीय तौर पर डाउनलोड करें. अब जब फ़ाइलें लोकल फ़ाइल सिस्टम पर उपलब्ध हैं, तब आपको Cloud Storage बकेट में फ़ोटो अपलोड करनी होंगी. आखिर में, उपयोगकर्ता को ऐप्लिकेशन की मुख्य स्क्रीन पर वापस भेज दिया जाता है.

तस्वीरों की लिस्टिंग

अब बारी है अपनी खूबसूरत तस्वीरें दिखाने की!

/api/pictures हैंडलर में, Firestore डेटाबेस के pictures कलेक्शन को देखा जाता है. इससे उन सभी फ़ोटो को वापस पाया जा सकता है जिनके थंबनेल जनरेट किए गए हैं. इन फ़ोटो को बनाने की तारीख के हिसाब से क्रम में लगाया जाता है.

हर इमेज को JavaScript ऐरे में पुश किया जाता है. इसमें इमेज का नाम, इमेज के बारे में बताने वाले लेबल (Cloud Vision API से मिले), मुख्य रंग, और इमेज के बनाए जाने की तारीख (dayjs के साथ, हम "आज से तीन दिन बाद" जैसे रिलेटिव टाइम ऑफ़सेट का इस्तेमाल करते हैं) शामिल होती है.

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"
   },
   ...
]

इस डेटा स्ट्रक्चर का इस्तेमाल, index.html पेज के Vue.js स्निपेट से किया जाता है. यहां उस पेज के मार्कअप का आसान वर्शन दिया गया है:

<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>

डिव का आईडी, Vue.js को यह बताएगा कि यह मार्कअप का वह हिस्सा है जिसे डाइनैमिक तौर पर रेंडर किया जाएगा. v-for डायरेक्टिव की वजह से, इस प्रोसेस को बार-बार दोहराया जाता है.

इमेज के मुख्य रंग के हिसाब से, इमेज को रंगीन बॉर्डर मिलता है. यह रंग, Cloud Vision API से पता चलता है. हम लिंक और इमेज सोर्स में थंबनेल और पूरी चौड़ाई वाली इमेज दिखाते हैं.

आखिर में, हम इमेज की जानकारी देने वाले लेबल की सूची बनाते हैं.

यहां Vue.js स्निपेट के लिए JavaScript कोड दिया गया है. यह कोड, index.html पेज के सबसे नीचे इंपोर्ट की गई public/app.js फ़ाइल में मौजूद है:

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

Vue कोड, Axios लाइब्रेरी का इस्तेमाल करके हमारे /api/pictures एंडपॉइंट पर AJAX कॉल कर रहा है. इसके बाद, मिले हुए डेटा को उस व्यू कोड से बाइंड कर दिया जाता है जिसे आपने पहले मार्कअप में देखा था.

फ़ोटो देखना

index.html से हमारे उपयोगकर्ता, तस्वीरों के थंबनेल देख सकते हैं. साथ ही, पूरी इमेज देखने के लिए उन पर क्लिक कर सकते हैं. इसके अलावा, collage.html से उपयोगकर्ता, collage.png इमेज देख सकते हैं.

उन पेजों के एचटीएमएल मार्कअप में, इमेज src और लिंक href उन तीन एंडपॉइंट की ओर इशारा करते हैं. ये एंडपॉइंट, तस्वीरों, थंबनेल, और कोलाज की Cloud Storage लोकेशन पर रीडायरेक्ट करते हैं. एचटीएमएल मार्कअप में पाथ को हार्ड-कोड करने की ज़रूरत नहीं होती.

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. लोकल तौर पर टेस्ट करना

कोड को क्लाउड पर डिप्लॉय करने से पहले, स्थानीय तौर पर उसकी जांच करें. इससे यह पक्का किया जा सकेगा कि कोड काम कर रहा है.

आपको दो Cloud Storage बकेट से जुड़े दो एनवायरमेंट वैरिएबल एक्सपोर्ट करने होंगे:

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

frontend फ़ोल्डर में, 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 Engine के लिए app.yaml कॉन्फ़िगरेशन फ़ाइल की जांच करें:

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

पहली लाइन से पता चलता है कि रनटाइम, Node.js 10 पर आधारित है. ओरिजनल इमेज और थंबनेल के लिए, दो बकेट की ओर इशारा करने वाले दो एनवायरमेंट वैरिएबल तय किए गए हैं.

अहम जानकारी: GOOGLE_CLOUD_PROJECT को अपने GCP प्रोजेक्ट आइडेंटिफ़ायर से बदलना न भूलें.

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

एक या दो मिनट के बाद, आपको बताया जाएगा कि ऐप्लिकेशन ट्रैफ़िक दिखा रहा है या नहीं:

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

ऐप्लिकेशन को डिप्लॉय किया गया है या नहीं, यह देखने के लिए Cloud Console के App Engine सेक्शन पर जाएं. साथ ही, App Engine की सुविधाओं के बारे में जानें. जैसे, वर्शनिंग और ट्रैफ़िक स्प्लिटिंग:

8. ऐप्लिकेशन को टेस्ट करना

जांच करने के लिए, ऐप्लिकेशन के डिफ़ॉल्ट App Engine यूआरएल (https://<YOUR_PROJECT_ID>.appspot.com/) पर जाएं. आपको फ़्रंटएंड यूज़र इंटरफ़ेस (यूआई) चालू दिखेगा!

9. डेटा साफ़ करना (ज़रूरी नहीं)

अगर आपको ऐप्लिकेशन नहीं रखना है, तो लागत बचाने के लिए संसाधनों को क्लीन अप किया जा सकता है. साथ ही, पूरे प्रोजेक्ट को मिटाकर, क्लाउड का बेहतर तरीके से इस्तेमाल किया जा सकता है:

gcloud projects delete ${GOOGLE_CLOUD_PROJECT} 

10. बधाई हो!

बधाई हो! App Engine पर होस्ट किया गया यह Node.js वेब ऐप्लिकेशन, आपकी सभी सेवाओं को एक साथ जोड़ता है. साथ ही, यह आपके उपयोगकर्ताओं को फ़ोटो अपलोड करने और उन्हें देखने की अनुमति देता है.

हमने क्या-क्या बताया

• App Engine
• Cloud Storage
• Cloud Firestore

अगले चरण

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