ফায়ারবেস স্টোরেজ সহ কীভাবে একটি অঙ্কন ওয়েব অ্যাপ তৈরি করতে হয়

ফায়ারবেস গুগল দ্বারা সরবরাহ একটি দুর্দান্ত পরিষেবা। এটিতে ডাটাবেস, হোস্টিং এবং আরও অনেকগুলি ক্রিয়াকলাপ অন্তর্ভুক্ত রয়েছে। এটি ব্যবহার করা সহজ, এবং কিছু পরিস্থিতিতে ডেটাবেসগুলি মোকাবেলা করার জন্য ব্যাকএন্ডের প্রয়োজন হয় না, এটি এটিকে একটি শক্তিশালী প্রোটোটাইপ সরঞ্জাম হিসাবে তৈরি করে। এই পোস্টটি একটি ওয়েবসাইট তৈরি করতে ফায়ারবেস ডাটাবেস এবং স্টোরেজ উভয়ই ব্যবহার করার জন্য একটি ধাপে ধাপে টিউটোরিয়াল যা ব্যবহারকারীকে ক্যানভাসে আঁকতে এবং এটি গ্যালারিতে জমা দেওয়ার অনুমতি দেয়। অঙ্কনগুলি আমাদের তৈরি করা ডেটাবেজে সংরক্ষণ করা হবে এবং এটি জমা দেওয়ার পরে গ্যালারী স্টাইলে সম্পূর্ণ উপস্থাপন করা হবে (নীচে ফ্লো স্কেচ দেখুন)। পূর্ণ ডেমোটি এখানে উপলভ্য: https://eraince.github.io/firebase/draw.html। এই অ্যাপের কোডটি আমার গিথুব রেপোতে পাওয়া যাবে। আমরা কীভাবে দ্রুত ফায়ারবেসকে ঝুলতে পারি এবং এটির কাজ চালিয়ে যেতে পারি তা প্রদর্শনের জন্য এই ডেমোটি কম উর্বরতার উদ্দেশ্য।

আমি প্রক্রিয়াটি 4 টি ধাপে বিভক্ত করেছি: সেটআপ ফায়ারবেস কনসোল, সেটআপ এইচটিএমএল / জাভাস্ক্রিপ্ট, ডেটা প্রেরণ এবং ডেটা অনুরোধ করুন।

পদক্ষেপ 1 - ফায়ারবেস কনসোল সেটআপ করুন

Https://firebase.google.com এ যান; আপনার যদি কোনও গুগল অ্যাকাউন্ট না থাকে তবে আপনার একটি নিবন্ধন করতে হবে। উপরের ডানদিকে, "কনসোলে যান" বোতাম / লিঙ্কটি ক্লিক করুন।

তারপরে আপনি এমন একটি পৃষ্ঠা দেখতে পাবেন যার মাঝখানে একটি "প্রকল্প তৈরি করুন" বোতাম রয়েছে, একেবারে নতুন প্রকল্প তৈরি করতে এটিতে ক্লিক করুন, আপনি যা চান তার নাম দিন।

অবিরত ক্লিক করুন, চুক্তিটি পরীক্ষা করুন এবং তারপরে আমাদের একটি নতুন প্রকল্প তৈরি হবে।

আপনার অ্যাপটির নাম দিন তারপরে আপনি এর মতো কিছু পাবেন:

ফায়ারবেস সার্ভারে নিজেকে সনাক্ত করার জন্য আমাদের এটি ব্যবহার করা দরকার যাতে তারা জানতে পারে যে আমরা যাচাই করা ব্যবহারকারী এবং আমাদের ডেটা কোথায় রাখা উচিত। এই পৃষ্ঠাটি এখনও বন্ধ করবেন না; আমাদের এটি স্টেপ 2 এ লাগবে।

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

প্রথমে ডাটাবেসে (ক্লাউড ফায়ার স্টোর নামে পরিচিত) ক্লিক করুন এবং "তৈরি ডেটাবেস" এ ক্লিক করুন এবং এই প্রোটোটাইপের জন্য পরীক্ষা মোডটি বেছে নিন কারণ আমরা এই টিউটোরিয়ালটির সরলতার জন্য কেবল প্রমাণীকরণটি এড়িয়ে যেতে চাই। সুরক্ষার নিয়মগুলি পরে নিয়ম ট্যাবে সংশোধন করা যেতে পারে।

পরবর্তী স্টোরেজ জন্য একই হবে। বাম কলামের স্টোরেজে ক্লিক করুন এবং তারপরে "শুরু করুন" এ ক্লিক করুন। আমাদের এটির জন্য নিরাপদ নিয়মগুলি ম্যানুয়ালি পরিবর্তন করতে হবে। যদি বিবৃতিটি মুছুন এবং "প্রকাশ করুন" ক্লিক করুন। আবার এটি পরীক্ষার জন্য একটি প্রোটোটাইপ। আপনার অ্যাপ্লিকেশনটি পরে সুরক্ষিত করতে আপনি এই বিধিটি সংশোধন করতে ফিরে আসতে পারেন।

এখন, আমরা ধাপ 1 দিয়ে সম্পন্ন করেছি! হুররে!

পদক্ষেপ 2 - এইচটিএমএল / জেএস সেটআপ করুন

প্রথমত, আপনাকে যে সমস্ত HTML ফাইল আপনার ফায়ারবেস উপলভ্য থাকতে হবে সেখানে আপনাকে অতিরিক্ত স্ক্রিপ্ট ট্যাগ যুক্ত করতে হবে। আপনি মধ্যে উপাদানগুলি, নিম্নলিখিত যুক্ত করুন:

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

আমি আরম্ভের কোডটি অন্য জেএস ফাইলে আলাদা করতে চাই যাতে ফাইলগুলি আরও সুসংহত এবং ব্যবহারযোগ্য হয়। ডাটাবেস-init.js নামে একটি নতুন জেএস ফাইল তৈরি করুন। মনে আছে আমি বলেছিলাম আমাদের একটি ট্যাব খোলা রাখা দরকার?

ডাটাবেস-init.js ফাইলে এই অংশটি অনুলিপি করুন। ফায়ারবেস সার্ভারে নিজেকে সনাক্ত করার জন্য আমরা যখন ফায়ারবেস রেফারেন্স তৈরি করি তখন আমাদের প্রয়োজনীয় তথ্যগুলি। এই ডাটাবেস-init.js ফায়ারবেস-স্টোরেজ.জেএস এর অন্তর্ভুক্ত করুন:

এখন আমরা কনসোল এবং এইচটিএমএল / জেএস উভয়ই সেট আপ করেছি এবং ফায়ারবেস ব্যবহারের জন্য প্রস্তুত। এরপরে আমরা ফায়ারবেসে ডেটা জমা দেওয়ার কাজ করব।

পদক্ষেপ 3 - ডেটা প্রেরণ করুন

ক্যানভাসটি সংরক্ষণ এবং এটি পাঠানোর আগে আমাদের আরও একটি পদক্ষেপ করতে হবে। ফায়ারবেস অ্যাক্সেস করতে, আমাদের প্রথমে এটির একটি রেফারেন্স তৈরি করতে হবে।

পূর্বে উল্লিখিত হিসাবে, আমরা দুটি ধরণের ডেটা সংরক্ষণ করছি: স্ট্রিং এবং চিত্র (এই ক্ষেত্রে, .png ফাইল)। যে কারণে আমরা এটি একসাথে না করতে পারি তা হ'ল ফায়ার স্টোর কেবল স্ট্রিং এবং সংখ্যাগুলির মতো ডেটা টাইপ গ্রহণ করে যখন স্টোরেজ কেবলমাত্র ফাইলগুলিকে অনুমতি দেয়। স্টোরেজে ফাইলগুলি সংরক্ষণ করতে, আমাদের এটির একটি নাম দিতে হবে যাতে আমরা পরে এটি পুনরুদ্ধার করতে পারি। রেকর্ডটি মেলানোর জন্য, আমি যে কৌশলটি নিয়ে এসেছি তা হ'ল ব্যবহারকারীরা ফায়ার স্টোরে তথ্য ইনপুট করার অনুমতি দিন এবং চিত্রটি সংরক্ষণের জন্য সেই তথ্যটি চিত্রের নাম হিসাবে ব্যবহার করুন। সুতরাং আমরা যখন ছবিটি পুনরুদ্ধার করার চেষ্টা করব, আমরা প্রথমে ফায়ার স্টোর থেকে চিত্রের নামটি পেতে পারি এবং স্টোরেজ থেকে চিত্রটির জন্য অনুরোধ করতে পারি। এটি জটিল মনে হতে পারে তবে আপনি যতক্ষণ না অনুসরণ করছেন কোড ততক্ষণ স্বজ্ঞাত।

আমাদের জমা দেওয়া বোতামটিতে ইভেন্ট শ্রোতাদের হুক আপ করতে হবে। ইভেন্ট শ্রোতার মধ্যে আমরা প্রথমে স্ট্রিং ডেটা প্রেরণ করব, যা এই ডেমোতে নাম এবং শিরোনাম।

এই কাঠামোটি আপনার ফায়ারবেস কনসোলে থাকা ডেটা রেকর্ডগুলির মানচিত্র তৈরি করবে। এই ক্ষেত্রে সংগ্রহটি কী তা আপনি বুঝতে পেরেছেন তা নিশ্চিত করুন যাতে আপনার প্রয়োজন অনুসারে আপনি আপনার ডাটাবেস কাঠামোটি ডিজাইন করতে পারেন।

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

এখন আপনি যদি আপনার স্টোরেজ কনসোলটি খোলেন, আপনি চিত্রগুলি নামে একটি ফোল্ডার দেখতে পাবেন এবং আপনি ডেটা জমা দিলে এর ভিতরে চিত্র থাকবে।

যেহেতু আমরা পাঠানোর ডেটা অংশটি কাজ করেছিলাম, তাই শেষ পদক্ষেপটি হবে ফায়ারবেস থেকে ডেটা অনুরোধ করা।

পদক্ষেপ 4 - অনুরোধ ডেটা

ডেটা রিকোয়েস্ট করা ডেটা প্রেরণের মতোই অনুরূপ। নাম + শিরোনাম পেতে আমরা প্রথমে ফায়ারস্টোর থেকে ডেটা উদ্ধার করি যাতে আমরা এটি আমাদের সঞ্চিত চিত্রগুলির ফাইলের পথটি তৈরি করতে ব্যবহার করতে পারি।

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

এটাই! অ্যাপটি হয়ে গেল! আবার, আমি এটিকে সমস্ত সহজ এবং সংক্ষিপ্ত রাখতে এই কোডটিতে সমস্ত কোড অন্তর্ভুক্ত করি নি। কোডটি এখানে পাওয়া যাবে: https://github.com/Eraince/firebase-pic-json। এটি ক্লোন করুন এবং এটি সংশোধন করতে নির্দ্বিধায়।

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