ফায়ারবেস, ভেক্স এবং ভিউ রাউটার ব্যবহার করে ভ্যু.জেজে ওয়েব অ্যাপ্লিকেশন তৈরি করা (অংশ 1)

এখানে আমরা ফায়ারবেস ব্যাকএন্ড সহ একটি শোকেস অ্যাপ্লিকেশন বাস্তবায়ন করি। আমরা ভ্যুটিফাই, ভিউেক্স এবং ভিউ-রাউটার এবং ফায়ারবেস ব্যবহার করব।

আমরা কি করব

  1. Vue.js অ্যাপ্লিকেশন তৈরি করুন
  2. Vuetify যোগ করুন
  3. আমাদের অ্যাপের জন্য একটি কাঠামো তৈরি করুন
  4. আমাদের অ্যাপ্লিকেশনটির কার্যপ্রবাহ
  5. ফায়ারবেস অ্যাকাউন্ট তৈরি করুন
  6. ফায়ারবেস অ্যাপ্লিকেশনে সংযুক্ত করুন
  7. অ্যাপ্লিকেশনটির জন্য একটি নেভিগেশন বার তৈরি করুন
  8. রেজিস্টার পৃষ্ঠা যুক্ত করুন
  9. ফায়ারবেস দিয়ে নিবন্ধকরণ পরীক্ষা করুন
  10. লগইন পৃষ্ঠা যুক্ত করুন
  11. ফায়ারবেস দিয়ে নিবন্ধকরণ পরীক্ষা করুন
  12. একত্রিত করুন ভেক্স
  13. রিফেক্টর রেজিস্টার.ভ্যু ফাইল
  14. রিফ্যাক্টর Signin.vue ফাইল
  15. সাইন ইন এবং সাইন আউট এর অধীনে নেভিগেশন সমস্যাগুলি সমাধান করুন

1. Vue.js অ্যাপ্লিকেশন তৈরি করুন

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

মান শোকেস তৈরি করুন

হুরয়, প্রথম পদক্ষেপটি শেষ হয়েছে, এখন স্থানীয় উন্নয়ন অবশ্যই চালিত হতে হবে

এনপিএম রান পরিবেশন

আমাদের অ্যাপ্লিকেশনটি 8080 বন্দরে চলে।

2. vuetify যোগ করুন

ভ্যুটিফাই ভ্যু.জেএস এর জন্য একটি উপাদান নকশার কাঠামো এবং এটি আমাদের অ্যাপ্লিকেশন প্রয়োজনীয়তার বাস্তবায়নকে সহজতর করে। আমরা এটিও ব্যবহার করব। যেহেতু আমরা ভ্যু-ক্লিপ ব্যবহার করি, তাই আমরা কমান্ডটি সহ আমাদের অ্যাপ্লিকেশনটিতে কেবল মূল্য সংযোজন করতে পারি।

vue যোগ করা vuetify

Vuetify এর যাদু দেখতে এখন ডেভলপমেন্ট সার্ভারটি চালান।

দুর্দান্ত, আমাদের অ্যাপ্লিকেশন মধ্যে সংহত vuetify

৩. আমাদের অ্যাপের জন্য একটি কাঠামো তৈরি করুন

আমাদের অ্যাপ্লিকেশনটি বর্তমানে নিম্নরূপে কাঠামোযুক্ত।

কিছু পরিবর্তন অন্তর্ভুক্ত করার জন্য আমরা আমাদের অ্যাপ্লিকেশনটিতে কিছু সামঞ্জস্য করছি। কাঠামোটি কিছু ব্যবহারের ক্ষেত্রে এবং অন্যান্য ব্লগে কিছু সাধারণ ধারণার ভিত্তিতে তৈরি। এটি কারও কাছে আপত্তিকরও হতে পারে। আপনার নিজস্ব প্রকল্প কাঠামোটি ব্যবহার করতে আপনাকে স্বাগত জানাই।

এটি হবে আমাদের প্রস্তাবিত প্রয়োগ পরিকল্পনা। আথ ফোল্ডারে নিবন্ধকরণ এবং লগইন উপাদান রয়েছে।

পরিষেবাদি ফোল্ডারে এমন কোনও এপিআই কল বা ডেটা রয়েছে যা যুক্ত করা দরকার।

যখন কোনও পৃষ্ঠা দেখার জন্য প্রমাণীকরণের প্রয়োজন হয় তখন ইউটিলিটি ফোল্ডারটি সমস্ত রক্ষীদের সহায়তা করে।

ফোল্ডারটির বাকী কাঠামো আমার মতে স্ব-ব্যাখ্যাযোগ্য।

৫. ফায়ারবেস অ্যাকাউন্ট তৈরি করুন

ফায়ারবেসে ডুব দেওয়ার আগে আপনাকে বুঝতে হবে ফায়ারবেস কেন। প্রথমত, এটি একটি গুগল পণ্য যা আপনার কথার উদ্ধৃতি দেয়

ফায়ারবেস বিশ্লেষণ, ডাটাবেস, বার্তা এবং ক্র্যাশ প্রতিবেদনগুলির মতো বৈশিষ্ট্য সরবরাহ করে যাতে আপনি দ্রুত সরিয়ে নিতে এবং আপনার ব্যবহারকারীদের উপর ফোকাস করতে পারেন।

আমাদের অ্যাপ্লিকেশনটিতে, আমরা কেবলমাত্র প্রমাণীকরণ এবং ডাটাবেস ফাংশনগুলিতে ফোকাস করি।

ফায়ারবাসের জন্য লিঙ্ক

জিমেইলে আমরা ফায়ারবেস কনসোলে লগ ইন করতে পারি। উপরের ডান কোণে আমরা অ্যাপ্লিকেশন অঞ্চলে "কনসোলে যান" পুনর্নির্দেশ করেছি।

ফায়ারবেস সহ আমার ইতিমধ্যে একটি অ্যাপ রয়েছে। প্রকল্প যুক্ত করুন লিঙ্কটি ক্লিক করুন এবং আপনার প্রকল্পের নাম যুক্ত করুন।

হ্যাঁ, আমাদের প্রকল্পটি এখন ফায়ারবেসে চালানো যেতে পারে।

যেহেতু আমরা ফায়ারবেস দিয়ে অনুমোদনপ্রাপ্ত তাই আমাদের ফায়ারবেসে কিছু পয়েন্ট কনফিগার করতে হবে।

প্রমাণীকরণ -> লগইন পদ্ধতি সেট আপ করুন ক্লিক করুন।

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

এখন আমাদের ফায়ারবেসের সাথে আমাদের অ্যাপ্লিকেশনটি লিঙ্ক করতে হবে। আপনি ওয়েব সেটআপ ক্লিক করার সময় উপলভ্য কনফিগারেশন ফাইলগুলি ব্যবহার করে এটি করা যেতে পারে।

কনফিগারগুলি অনুলিপি করুন, আমাদের শীঘ্রই Vue.js অ্যাপে কনফিগারেশন যুক্ত করতে হবে।

6. ফায়ারবেস অ্যাপ্লিকেশন লিঙ্ক

এখন পর্যন্ত আমরা একটি ফায়ারবেস অ্যাপ তৈরি করেছি। এখন আমাদের Vue.js অ্যাপ্লিকেশনটিতে লিঙ্ক করতে হবে। এটি করার জন্য আমাদের কয়েকটি পদক্ষেপ প্রয়োজন

  1. Env বাস্তবায়ন যুক্ত করুন।
  2. ফায়ারবেস ইনস্টল করুন।
  3. অ্যাপটিতে ফায়ারবেস কী যুক্ত করুন।

1. env বাস্তবায়ন যুক্ত করুন।

এটি আমার এবং সবার জন্য একটি গুরুত্বপূর্ণ অংশ। আমরা একটি ফায়ারবেস অ্যাপ তৈরি করেছি এবং ফায়ারবেস আমাদের কিছু শংসাপত্র দিয়েছে। আমরা অন্ধভাবে আমাদের অ্যাপ্লিকেশনটি প্রসারিত করতে পারি না। এটি কোনও সমস্যা নয়, অন্যরা আমাদের শংসাপত্রগুলি ব্যবহার করতে পারে। সুতরাং এটি আমাদের .env ফাইলে রাখা ভাল

এটি করার আগে নিম্নলিখিত বিষয়গুলি অবশ্যই বিবেচনা করা উচিত।

ক। আমাদের অ্যাপের মূলটিতে একটি .env ফাইল তৈরি করুন যাতে আমাদের অ্যাপটি কোনও মোডে চলার সময় প্রয়োজনীয় সমস্ত বিবরণ থাকে details

খ। একটি এন.এন.ডিভেলপমেন্ট ফাইল তৈরি করুন যাতে স্থানীয়ভাবে আমাদের অ্যাপ্লিকেশন চালানোর জন্য প্রয়োজনীয় সমস্ত বিবরণ থাকে contains আমরা আমাদের ফায়ারবেস অ্যাক্সেস ডেটা এখানে রাখি।

গ। সমস্ত পরিবেশের ভেরিয়েবলগুলি "VUE_APP_" দিয়ে শুরু করা উচিত। বা এগুলি বাতিল করা হয়।

ঘ। এই ফাইলগুলি যুক্ত করার পরে আপনি অ্যাপটি পুনরায় চালু করার বিষয়টি নিশ্চিত করুন। আমার জন্য এটি কেবল পুনরায় চালু হওয়ার পরে কাজ করে।

এটি EPS ফাইলে কাজ করে তা নিশ্চিত করার জন্য আমি কেবল একটি পরীক্ষার শিরোনাম যুক্ত করেছি। এটি আমাদের অ্যাপ্লিকেশনটিতে প্রতিটি মোডের জন্য ব্যবহৃত হয়।

VUE_APP_TITLE = 'কেস দেখান'

এখন কোড

লিঙ্ক হিসাবে শোকেস দেবে

2. ফায়ারবেস ইনস্টল করুন

আমাদের অ্যাপে ফায়ারবেস ব্যবহার করতে আপনাকে আমাদের অ্যাপে ফায়ারবেস ইনস্টল করতে হবে।

এনপিএম ফায়ারবেস ইনস্টল করুন - সেভ করুন

৩. অ্যাপটিতে ফায়ারবেস কী যুক্ত করুন।

এখন আমরা আমাদের অ্যাপে ফায়ারবেস কীটি অনুলিপি করতে পারি। আমরা এটির জন্য .env.de વિકાસের ফাইল এবং main.js ব্যবহার করতে পারি।

ফায়ারবেস থেকে কনফিগারেশন ফাইলগুলি অনুলিপি করুন এবং এন্টারভায়েন্সাল ভেরিয়েবলের অধীনে মেইন.জেএস ফাইলটিতে আটকান।

সমস্ত কীগুলি এখন ENV ভেরিয়েবল দ্বারা পরিবর্তিত হয়েছে এবং একটি .env.de વિકાસের ফাইল থেকে মূল মান দ্বারা প্রতিস্থাপিত হয়েছে।

মেইন.জেএস ফাইলগুলিতে ফায়ারবেস আমদানি করুন, মেইন.জেএস-এর সমস্ত কোডই

'ভ্যু' আমদানি 'থেকে মান আমদানি করুন। / প্লাগইনস / ভিওটিফাই' @ / অ্যাপ্লিকেশন থেকে আমদানি করুন '' @ / রাউটার থেকে 'রাউটার আমদানি করুন' @ / শপ 'থেকে আমদানি করুন *' ফায়ারবেস 'থেকে ফায়ারবেস হিসাবে আমদানি করুন
Vue.config. product- টিপ = মিথ্যা
নতুন মান ({রাউটার, ব্যবসা, রেন্ডারিং: এইচ => এইচ (অ্যাপ)))। $ মাউন্ট ('# অ্যাপ')
Var কনফিগ = {apikey: process.env.VUE_APP_FIREBASE_API_KEY, authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN, databaseURL: process.env.VUE_APP_FIREBASE_DATASE_URL, projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID, storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET, messagingSenderId: process.env। VUE_APP_FIREBASE_MESSAGE_SENDER_ID} firebase.initializeApp (কনফিগারেশন)

7. অ্যাপ্লিকেশনটির জন্য একটি নেভিগেশন বার তৈরি করুন

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

App.vue এ নেভিগেশন বার উপাদানটি আমদানি করুন এবং App.vue- তে উপাদানটি সংজ্ঞায়িত করুন।