এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

প্রতিদিনের ছবি: ল্যাব 4—একটি ওয়েব ফ্রন্টএন্ড তৈরি করুন

১. সংক্ষিপ্ত বিবরণ

এই কোডল্যাবে, আপনি গুগল অ্যাপ ইঞ্জিনে একটি ওয়েব ফ্রন্টএন্ড তৈরি করবেন, যা ব্যবহারকারীদের ওয়েব অ্যাপ্লিকেশন থেকে ছবি আপলোড করার পাশাপাশি আপলোড করা ছবি এবং সেগুলোর থাম্বনেইল ব্রাউজ করার সুযোগ দেবে।

এই ওয়েব অ্যাপ্লিকেশনটিতে একটি সুন্দর ইউজার ইন্টারফেস তৈরির জন্য বুলমা (Bulma) নামক একটি সিএসএস (CSS) ফ্রেমওয়ার্ক এবং আপনার তৈরি করা অ্যাপ্লিকেশনটির এপিআই (API) কল করার জন্য ভিউ.জেএস (Vue.JS) জাভাস্ক্রিপ্ট ফ্রন্টএন্ড ফ্রেমওয়ার্ক ব্যবহার করা হবে।

এই অ্যাপ্লিকেশনটিতে তিনটি ট্যাব থাকবে:

একটি হোম পেজ, যেখানে আপলোড করা সমস্ত ছবির থাম্বনেইল এবং ছবিটির বর্ণনাকারী লেবেলগুলোর তালিকা প্রদর্শিত হবে (যেগুলো পূর্ববর্তী একটি ল্যাবে ক্লাউড ভিশন এপিআই দ্বারা শনাক্ত করা হয়েছিল)।
একটি কোলাজ পেজ যেখানে সর্বশেষ আপলোড করা ৪টি ছবি দিয়ে তৈরি কোলাজটি দেখানো হবে।
একটি আপলোড পেজ, যেখানে ব্যবহারকারীরা নতুন ছবি আপলোড করতে পারবেন।

ফলস্বরূপ ফ্রন্টএন্ডটি দেখতে নিম্নরূপ:

ওই ৩টি পৃষ্ঠা হলো সাধারণ HTML পৃষ্ঠা:

হোম পেজ ( index.html ) /api/pictures ইউআরএল-এ একটি এজেক্স (AJAX) কলের মাধ্যমে থাম্বনেইল ছবি ও তাদের লেবেলের তালিকা পেতে নোড অ্যাপ ইঞ্জিন ব্যাকএন্ড কোডকে কল করে। এই ডেটা আনার জন্য হোম পেজটি ভিউ.জেএস (Vue.js) ব্যবহার করছে।
কোলাজ পৃষ্ঠাটি ( collage.html ) collage.png ছবিটিকে নির্দেশ করে, যেটি সর্বশেষ ৪টি ছবিকে একত্রিত করে তৈরি।
আপলোড পেজে ( upload.html ) /api/pictures ইউআরএল-এ একটি POST অনুরোধের মাধ্যমে ছবি আপলোড করার জন্য একটি সহজ ফর্ম রয়েছে।

আপনি যা শিখবেন

অ্যাপ ইঞ্জিন
ক্লাউড স্টোরেজ
ক্লাউড ফায়ারস্টোর

২. সেটআপ এবং প্রয়োজনীয়তা

স্ব-গতিতে পরিবেশ সেটআপ

Google Cloud Console- এ সাইন-ইন করুন এবং একটি নতুন প্রজেক্ট তৈরি করুন অথবা বিদ্যমান কোনো প্রজেক্ট পুনরায় ব্যবহার করুন। যদি আপনার আগে থেকে Gmail বা Google Workspace অ্যাকাউন্ট না থাকে, তবে আপনাকে অবশ্যই একটি তৈরি করতে হবে।

প্রজেক্টের নামটি হলো এই প্রজেক্টের অংশগ্রহণকারীদের প্রদর্শিত নাম। এটি একটি ক্যারেক্টার স্ট্রিং যা গুগল এপিআই ব্যবহার করে না, এবং আপনি যেকোনো সময় এটি আপডেট করতে পারেন।
সমস্ত গুগল ক্লাউড প্রজেক্ট জুড়ে প্রজেক্ট আইডি অবশ্যই অনন্য হতে হবে এবং এটি অপরিবর্তনীয় (একবার সেট করার পর পরিবর্তন করা যায় না)। ক্লাউড কনসোল স্বয়ংক্রিয়ভাবে একটি অনন্য স্ট্রিং তৈরি করে; সাধারণত এটি কী তা নিয়ে আপনার মাথা ঘামানোর দরকার নেই। বেশিরভাগ কোডল্যাবে, আপনাকে প্রজেক্ট আইডি উল্লেখ করতে হবে (এবং এটি সাধারণত PROJECT_ID হিসাবে চিহ্নিত করা হয়), তাই যদি এটি আপনার পছন্দ না হয়, তবে এলোমেলোভাবে অন্য একটি তৈরি করুন, অথবা, আপনি নিজের আইডি দিয়ে চেষ্টা করে দেখতে পারেন যে সেটি উপলব্ধ আছে কিনা। এরপর প্রজেক্ট তৈরি হয়ে গেলে এটি "স্থির" হয়ে যায়।
তৃতীয় আরেকটি ভ্যালু আছে, যা হলো প্রজেক্ট নম্বর এবং কিছু এপিআই এটি ব্যবহার করে। এই তিনটি ভ্যালু সম্পর্কে আরও জানতে ডকুমেন্টেশন দেখুন।

এরপরে, ক্লাউড রিসোর্স/এপিআই ব্যবহার করার জন্য আপনাকে ক্লাউড কনসোলে বিলিং চালু করতে হবে। এই কোডল্যাবটি সম্পন্ন করতে খুব বেশি খরচ হওয়ার কথা নয়, এমনকি আদৌ কোনো খরচ নাও হতে পারে। এই টিউটোরিয়ালের পর যাতে কোনো বিলিং না হয়, সেজন্য রিসোর্সগুলো বন্ধ করতে কোডল্যাবের শেষে দেওয়া যেকোনো "ক্লিন-আপ" নির্দেশাবলী অনুসরণ করুন। গুগল ক্লাউডের নতুন ব্যবহারকারীরা ৩০০ মার্কিন ডলারের ফ্রি ট্রায়াল প্রোগ্রামের জন্য যোগ্য।

ক্লাউড শেল শুরু করুন

যদিও গুগল ক্লাউড আপনার ল্যাপটপ থেকে দূরবর্তীভাবে পরিচালনা করা যায়, এই কোডল্যাবে আপনি গুগল ক্লাউড শেল ব্যবহার করবেন, যা ক্লাউডে চালিত একটি কমান্ড লাইন পরিবেশ।

গুগল ক্লাউড কনসোল থেকে, উপরের ডানদিকের টুলবারে থাকা ক্লাউড শেল আইকনটিতে ক্লিক করুন:

পরিবেশটি প্রস্তুত করতে এবং এর সাথে সংযোগ স্থাপন করতে মাত্র কয়েক মুহূর্ত সময় লাগবে। এটি শেষ হলে, আপনি এইরকম কিছু দেখতে পাবেন:

এই ভার্চুয়াল মেশিনটিতে আপনার প্রয়োজনীয় সমস্ত ডেভেলপমেন্ট টুলস লোড করা আছে। এটি একটি স্থায়ী ৫ জিবি হোম ডিরেক্টরি প্রদান করে এবং গুগল ক্লাউডে চলে, যা নেটওয়ার্ক পারফরম্যান্স ও অথেনটিকেশনকে ব্যাপকভাবে উন্নত করে। এই ল্যাবে আপনার সমস্ত কাজ শুধুমাত্র একটি ব্রাউজার দিয়েই করা যাবে।

৩. এপিআই সক্রিয় করুন

অ্যাপ ইঞ্জিনের জন্য কম্পিউট ইঞ্জিন এপিআই প্রয়োজন। এটি সক্রিয় আছে কিনা তা নিশ্চিত করুন:

gcloud services enable compute.googleapis.com

অপারেশনটি সফলভাবে সম্পন্ন হতে দেখবেন:

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

৪. কোডটি ক্লোন করুন

কোডটি দেখে নিন, যদি আগে থেকে না দেখে থাকেন:

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 হলো গুগল অ্যাপ ইঞ্জিনের কনফিগারেশন ফাইল।

একটি public ফোল্ডারে স্ট্যাটিক রিসোর্সসমূহ থাকে:

index.html হলো সেই পৃষ্ঠা যেখানে সমস্ত থাম্বনেইল ছবি এবং লেবেলগুলো দেখানো হয়।
collage.html সাম্প্রতিক ছবিগুলোর কোলাজ দেখানো হচ্ছে।
upload.html নতুন ছবি আপলোড করার জন্য একটি ফর্ম রয়েছে।
app.js Vue.js ব্যবহার করে index.html পেজটিকে ডেটা দিয়ে পূরণ করছে।
script.js ছোট স্ক্রিনে নেভিগেশন মেনু এবং এর 'হ্যামবার্গার' আইকনটি পরিচালনা করে।
style.css কিছু CSS ডিরেক্টিভ সংজ্ঞায়িত করে।

৫. কোডটি অন্বেষণ করুন

নির্ভরশীলতা

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

আমাদের অ্যাপ্লিকেশনটি নির্ভর করে:

ফায়ারস্টোর : আমাদের ছবির মেটাডেটা ব্যবহার করে ক্লাউড ফায়ারস্টোর অ্যাক্সেস করতে,
স্টোরেজ : গুগল ক্লাউড স্টোরেজ অ্যাক্সেস করতে যেখানে ছবিগুলো সংরক্ষিত আছে,
এক্সপ্রেস : নোড.জেএস-এর ওয়েব ফ্রেমওয়ার্ক
dayjs : মানুষের বোঝার সুবিধার্থে তারিখ দেখানোর জন্য একটি ছোট লাইব্রেরি,
ব্লুবার্ড : একটি জাভাস্ক্রিপ্ট প্রমিস লাইব্রেরি,
এক্সপ্রেস-ফাইলআপলোড : সহজে ফাইল আপলোড করার একটি লাইব্রেরি।

এক্সপ্রেস ফ্রন্টএন্ড

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.static() কলটি নির্দেশ করে যে স্ট্যাটিক রিসোর্সগুলো public সাব-ডিরেক্টরিতে উপলব্ধ হবে।
এবং fileUpload() ফাংশন ফাইলের আকার ১০ মেগাবাইটে সীমিত রেখে ফাইলগুলোকে স্থানীয়ভাবে ইন-মেমরি ফাইল সিস্টেমের /tmp ডিরেক্টরিতে আপলোড করার জন্য কনফিগার করে।

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

স্ট্যাটিক রিসোর্সগুলোর মধ্যে হোম পেজ, কোলাজ পেজ এবং আপলোড পেজের HTML ফাইলগুলো রয়েছে। এই পেজগুলো API ব্যাকএন্ডকে কল করবে। এই API-টির নিম্নলিখিত এন্ডপয়েন্টগুলো থাকবে:

upload.html-এর ফর্মের মাধ্যমে একটি POST রিকোয়েস্ট POST /api/pictures ছবিগুলো আপলোড করা হবে।
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>
...

ফর্ম এলিমেন্টটি একটি HTTP POST মেথড এবং মাল্টি-পার্ট ফরম্যাট সহ /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 মেথড ব্যবহার করে ফাইলগুলো স্থানীয়ভাবে ডাউনলোড করুন। এখন যেহেতু ফাইলগুলো স্থানীয় ফাইলসিস্টেমে পাওয়া যাচ্ছে, আপনি ছবিগুলো ক্লাউড স্টোরেজ বাকেটে আপলোড করুন। সবশেষে, ব্যবহারকারীকে অ্যাপ্লিকেশনটির মূল স্ক্রিনে ফিরিয়ে দিন।

ছবিগুলো তালিকাভুক্ত করা

আপনার সুন্দর ছবিগুলো প্রদর্শন করার সময় হয়েছে!

/api/pictures হ্যান্ডলারে, আপনি ফায়ারস্টোর ডাটাবেসের pictures কালেকশন থেকে তৈরির তারিখ অনুসারে অবরোহী ক্রমে সাজানো সমস্ত ছবি (যেগুলোর থাম্বনেইল তৈরি করা হয়েছে) পুনরুদ্ধার করেন।

আপনি প্রতিটি ছবিকে একটি জাভাস্ক্রিপ্ট অ্যারেতে যুক্ত করবেন, যেখানে থাকবে ছবিটির নাম, সেটির বর্ণনাকারী লেবেল (যা ক্লাউড ভিশন এপিআই থেকে নেওয়া), প্রধান রঙ এবং তৈরির একটি সুবিধাজনক তারিখ ( 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>

div-এর আইডি Vue.js-কে জানিয়ে দেবে যে এটি মার্কআপের সেই অংশ যা ডাইনামিকভাবে রেন্ডার করা হবে। v-for ডিরেক্টিভগুলোর মাধ্যমে এই পুনরাবৃত্তিগুলো সম্পন্ন হয়।

ক্লাউড ভিশন এপিআই দ্বারা শনাক্তকৃত ছবির প্রধান রঙের সাথে সামঞ্জস্য রেখে ছবিগুলোতে একটি সুন্দর রঙিন বর্ডার যুক্ত হয় এবং আমরা লিঙ্ক ও ছবির উৎসগুলোতে থাকা থাম্বনেইল এবং পূর্ণ-প্রস্থের ছবিগুলোকে নির্দেশ করি।

সবশেষে, আমরা ছবিটির বর্ণনাকারী লেবেলগুলো তালিকাভুক্ত করি।

এখানে Vue.js স্নিপেটের জন্য জাভাস্ক্রিপ্ট কোড দেওয়া হল (যা 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 কোডটি আমাদের /api/pictures এন্ডপয়েন্টে একটি AJAX কল করার জন্য Axios লাইব্রেরি ব্যবহার করছে। এরপর, ফেরত আসা ডেটাটি পূর্বে দেখা মার্কআপে থাকা ভিউ কোডের সাথে বাইন্ড করা হয়।

ছবিগুলো দেখা

index.html থেকে আমাদের ব্যবহারকারীরা ছবিগুলোর থাম্বনেইল দেখতে পারেন, সেগুলোতে ক্লিক করে পূর্ণ আকারের ছবি দেখতে পারেন এবং collage.html থেকে collage.png ছবিটি দেখতে পারেন।

ওই পেজগুলোর HTML মার্কআপে, ইমেজ src এবং লিঙ্ক href ওই তিনটি এন্ডপয়েন্টকে নির্দেশ করে, যেগুলো ছবি, থাম্বনেইল এবং কোলাজের ক্লাউড স্টোরেজ লোকেশনে রিডাইরেক্ট করে। 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.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}`);
});

৬. স্থানীয়ভাবে পরীক্ষা করুন

ক্লাউডে ডেপ্লয় করার আগে কোডটি ঠিকমতো কাজ করছে কিনা তা নিশ্চিত করতে আপনার লোকাল মেশিনে পরীক্ষা করে নিন।

আপনাকে দুটি ক্লাউড স্টোরেজ বাকেটের সাথে সম্পর্কিত দুটি এনভায়রনমেন্ট ভেরিয়েবল এক্সপোর্ট করতে হবে:

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

frontend ফোল্ডারের ভিতরে, npm ডিপেন্ডেন্সিগুলো ইনস্টল করুন এবং সার্ভারটি চালু করুন:

npm install; npm start

সবকিছু ঠিকঠাক থাকলে, সার্ভারটি ৮০৮০ পোর্টে চালু হয়ে যাবে:

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

আপনার বাকেটগুলোর আসল নাম ওই লগগুলোতে দেখা যাবে, যা ডিবাগিংয়ের জন্য সহায়ক।

ক্লাউড শেল থেকে, আপনি স্থানীয়ভাবে চলমান অ্যাপ্লিকেশনটি ব্রাউজ করার জন্য ওয়েব প্রিভিউ বৈশিষ্ট্যটি ব্যবহার করতে পারেন:

প্রস্থান করতে CTRL-C ব্যবহার করুন।

৭. অ্যাপ ইঞ্জিনে স্থাপন করুন

আপনার অ্যাপ্লিকেশনটি ডেপ্লয় করার জন্য প্রস্তুত।

অ্যাপ ইঞ্জিন কনফিগার করুন

অ্যাপ ইঞ্জিনের জন্য 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

মোতায়েন করুন

অ্যাপ ইঞ্জিনের জন্য আপনার পছন্দের অঞ্চল সেট করুন, আগের ল্যাবগুলোতে ব্যবহৃত অঞ্চলটিই ব্যবহার করতে ভুলবেন না:

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

অ্যাপটি ডেপ্লয় করা হয়েছে কিনা তা দেখতে এবং ভার্সনিং ও ট্র্যাফিক স্প্লিটিং-এর মতো অ্যাপ ইঞ্জিনের ফিচারগুলো অন্বেষণ করতে আপনি ক্লাউড কনসোলের অ্যাপ ইঞ্জিন সেকশনেও যেতে পারেন:

৮. অ্যাপটি পরীক্ষা করুন

পরীক্ষা করার জন্য, অ্যাপটির ডিফল্ট অ্যাপ ইঞ্জিন ইউআরএল-এ ( https://<YOUR_PROJECT_ID>.appspot.com/ ) যান এবং আপনি ফ্রন্টএন্ড ইউআইটি চালু দেখতে পাবেন!

৯. পরিষ্কার করা (ঐচ্ছিক)

যদি আপনি অ্যাপটি রাখতে না চান, তাহলে খরচ বাঁচাতে এবং সার্বিকভাবে একজন ভালো ক্লাউড ব্যবহারকারী হতে পুরো প্রজেক্টটি ডিলিট করে রিসোর্সগুলো পরিষ্কার করতে পারেন:

gcloud projects delete ${GOOGLE_CLOUD_PROJECT}

১০. অভিনন্দন!

অভিনন্দন! অ্যাপ ইঞ্জিনে হোস্ট করা এই Node.js ওয়েব অ্যাপ্লিকেশনটি আপনার সমস্ত সার্ভিসকে একত্রিত করে এবং আপনার ব্যবহারকারীদের ছবি আপলোড ও দেখার সুযোগ করে দেয়।

আমরা যা আলোচনা করেছি

অ্যাপ ইঞ্জিন
ক্লাউড স্টোরেজ
ক্লাউড ফায়ারস্টোর

পরবর্তী পদক্ষেপ

পিক-এ-ডেইলি: ল্যাব ৫—ইমেজ গার্বেজ কালেক্টর