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

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

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

21741cd63b425aeb.png

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

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

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

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

6a4d5e5603ba4b73.png

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

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

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

  • App Engine
  • Cloud Storage
  • Cloud Firestore

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

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

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

b35bf95b8bf3d5d8.png

a99b7ace416376c4.png

bd84a6d3004737c5.png

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

Cloud Shell शुरू करना

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

Google Cloud Console में जाकर, सबसे ऊपर दाईं ओर मौजूद टूलबार पर क्लाउड शेल आइकॉन पर क्लिक करें:

55efc1aaa7a4d3ad.png

प्रावधान करने और एनवायरमेंट से कनेक्ट होने में कुछ ही समय लगेगा. उसके पूरा हो जाने पर, आपको कुछ ऐसा दिखाई देगा:

7ffe5cbb04455448.png

इस वर्चुअल मशीन में ऐसे सभी डेवलपमेंट टूल मौजूद हैं जिनकी आपको ज़रूरत पड़ेगी. यह पांच जीबी की स्थायी होम डायरेक्ट्री उपलब्ध कराता है और 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 में नई फ़ोटो अपलोड करने के लिए एक फ़ॉर्म मौजूद है
  • index.html पेज को डेटा से भरने के लिए, app.js, 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 को ऐक्सेस करने के लिए,
  • स्टोरेज: Google Cloud Storage को ऐक्सेस करने के लिए, जहां तस्वीरें सेव होती हैं,
  • expression: Node.js के लिए वेब फ़्रेमवर्क
  • dayjs: तारीखों को लोगों के हिसाब से दिखाने के लिए एक छोटी लाइब्रेरी,
  • bluebird: JavaScript प्रॉमिस लाइब्रेरी,
  • expression-fileupload: यह एक लाइब्रेरी है, जिसकी मदद से फ़ाइल के अपलोड को आसानी से मैनेज किया जा सकता है.

एक्सप्रेस फ़्रंटएंड

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.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/picturesupload.html में दिए गए फ़ॉर्म के ज़रिए, पोस्ट अनुरोध के ज़रिए तस्वीरें अपलोड की जाएंगी
  • GET /api/pictures यह एंडपॉइंट, इमेज और उनके लेबल की सूची वाला JSON दस्तावेज़ दिखाता है
  • GET /api/pictures/:name यह यूआरएल, इमेज के क्लाउड स्टोरेज की जगह पर रीडायरेक्ट करता है
  • 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 के साथ, हम "अब से 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"
   },
   ...
]

इस डेटा स्ट्रक्चर का इस्तेमाल, 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>

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

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

तस्वीरें देखना

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.js ऐप्लिकेशन लॉन्च के लिए तैयार है. एक्सप्रेस ऐप्लिकेशन डिफ़ॉल्ट रूप से पोर्ट 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 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 से, वेब पर झलक देखने की सुविधा का इस्तेमाल करके, डिवाइस पर चल रहे ऐप्लिकेशन को ब्राउज़र में इस्तेमाल किया जा सकता है:

82fa3266d48c0d0a.png

बाहर निकलने के लिए, 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 को अपने असल प्रोजेक्ट आईडी से बदलने के लिए, यह निर्देश दिया जा सकता है:

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 की सुविधाओं के बारे में जाना जा सकता है. इनमें वर्शन बनाने और ट्रैफ़िक के बंटवारे जैसी सुविधाएं शामिल हैं:

db0e196b00fceab1.png

8. ऐप्लिकेशन का परीक्षण करें

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

6a4d5e5603ba4b73.png

9. स्टोरेज खाली करें (ज़रूरी नहीं)

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

gcloud projects delete ${GOOGLE_CLOUD_PROJECT}

10. बधाई हो!

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

इसमें हमने इन विषयों के बारे में बताया

  • App Engine
  • Cloud Storage
  • Cloud Firestore

अगले चरण