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

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

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

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

21741cd63b425aeb.png সম্পর্কে

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

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

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

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

6a4d5e5603ba4b73.png সম্পর্কে

ঐ ৩টি পৃষ্ঠা হল সহজ HTML পৃষ্ঠা:

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

তুমি কি শিখবে

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

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

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

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

b35bf95b8bf3d5d8.png সম্পর্কে

a99b7ace416376c4.png সম্পর্কে

bd84a6d3004737c5.png সম্পর্কে

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

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

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

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

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

55efc1aaa7a4d3ad.png সম্পর্কে

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

অনুসরণ

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

৩. API গুলি সক্ষম করুন

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

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

আমাদের প্রকল্পের মূলে, আপনার কাছে 3টি ফাইল রয়েছে:

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

আমাদের আবেদন নির্ভর করে:

firestore : আমাদের ছবির মেটাডেটা সহ ক্লাউড ফায়ারস্টোর অ্যাক্সেস করতে,
স্টোরেজ : গুগল ক্লাউড স্টোরেজ অ্যাক্সেস করতে যেখানে ছবি সংরক্ষণ করা হয়,
এক্সপ্রেস : Node.js এর জন্য ওয়েব ফ্রেমওয়ার্ক,
dayjs : একটি ছোট লাইব্রেরি যেখানে মানুষ-বান্ধব উপায়ে তারিখ দেখানো হবে,
ব্লুবার্ড : একটি জাভাস্ক্রিপ্ট প্রতিশ্রুতি লাইব্রেরি,
express-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.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-এর নিম্নলিখিত এন্ডপয়েন্ট থাকবে:

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

ছবিগুলির তালিকা তৈরি করা হচ্ছে

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

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

আপনি প্রতিটি ছবিকে একটি জাভাস্ক্রিপ্ট অ্যারেতে পুশ করেন, যার নাম, এটি বর্ণনাকারী লেবেল (ক্লাউড ভিশন 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 এর ID 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 কোডটি Axios লাইব্রেরি ব্যবহার করে আমাদের /api/pictures এন্ডপয়েন্টে AJAX কল করছে। এরপর ফিরে আসা ডেটা আপনার আগে দেখা মার্কআপের ভিউ কোডের সাথে আবদ্ধ হবে।

ছবিগুলো দেখা

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

ঐ পৃষ্ঠাগুলির HTML মার্কআপে, চিত্র src এবং লিঙ্ক href সেই 3টি শেষ বিন্দুতে নির্দেশ করে, যা ছবি, থাম্বনেইল এবং কোলাজের ক্লাউড স্টোরেজ অবস্থানগুলিতে পুনঃনির্দেশিত করে। 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 অ্যাপ্লিকেশনটি চালু করার জন্য প্রস্তুত। এক্সপ্রেস অ্যাপ্লিকেশনটি ডিফল্টরূপে পোর্ট 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

যদি সবকিছু ঠিকঠাক হয়, তাহলে 8080 পোর্টে সার্ভারটি চালু করা উচিত:

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

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

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

82fa3266d48c0d0a.png সম্পর্কে

প্রস্থান করতে 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

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

db0e196b00fceab1.png সম্পর্কে

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

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

6a4d5e5603ba4b73.png সম্পর্কে

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

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

gcloud projects delete ${GOOGLE_CLOUD_PROJECT}

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

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

আমরা যা কভার করেছি

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

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

প্রতিদিনের ছবি: ল্যাব ৫—ছবি আবর্জনা সংগ্রহকারী