Firebase স্টুডিওতে কোড আমদানি করতে একটি বোতাম তৈরি করুন

ব্যবহারকারীদের একটি এজেন্টিক ক্লাউড-ভিত্তিক ডেভেলপমেন্ট এনভায়রনমেন্টে কাজ চালিয়ে যেতে দিয়ে আপনার সাইট থেকে সরাসরি একটি Firebase Studio ওয়ার্কস্পেসে কোড ইম্পোর্ট করার জন্য একটি নিরবিচ্ছিন্ন উপায় প্রদান করতে আপনার ওয়েবসাইটে একটি " Firebase Studio খুলুন" বোতাম যোগ করুন।

এই বৈশিষ্ট্যটির জন্য ডিজাইন করা হয়েছে:

• কোড খেলার মাঠ, যেখানে আপনার ব্যবহারকারীরা একটি মৌলিক সম্পাদক থেকে একটি সম্পূর্ণ উন্নয়ন পরিবেশে যেতে পারে।

• অ্যাপ প্রোটোটাইপিং টুল, যেখানে আপনার সাইট কোড এবং ভিজ্যুয়াল প্রোটোটাইপ তৈরি করে এবং ব্যবহারকারী তারপর Firebase Studio এটির উপর পুনরাবৃত্তি করে।

Firebase Studio SDK-এ ওপেন ব্যবহার করুন

" Firebase Studio খুলুন" বোতামটি ওপেন ইন Firebase Studio SDK দ্বারা চালিত হয়, একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা একটি নতুন ওয়ার্কস্পেস তৈরি এবং পপুলেট করার জন্য উপযুক্ত লিঙ্ক তৈরি করে৷ কোডটি কীভাবে আমদানি করা হয় তার জন্য এটি বিভিন্ন বিকল্প সরবরাহ করে।

আমদানি পদ্ধতি

আপনি নিম্নলিখিত পদ্ধতিগুলি ব্যবহার করে কোড আমদানি করতে বোতামটি কনফিগার করতে পারেন:

• একটি গিট সংগ্রহস্থল বা টেমপ্লেট থেকে : একটি গিট সংগ্রহস্থল বা Firebase Studio টেমপ্লেটের সাথে লিঙ্ক করুন। এটি সম্পূর্ণ প্রকল্প বা পূর্বনির্ধারিত টেমপ্লেটের জন্য দুর্দান্ত। এই ব্যবহার-ক্ষেত্রগুলি সম্পর্কে আরও তথ্যের জন্য, Firebase Studio পূর্বনির্ধারিত ওয়ার্কস্পেসের একটি শর্টকাট তৈরি করুন দেখুন।

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

আপনার সাইটে "Firebase স্টুডিওতে খুলুন" বোতামটি যোগ করুন

ফায়ারবেস স্টুডিও SDK-এ ওপেন : বোতামের ছবি তৈরি করতে, গভীর লিঙ্ক তৈরি করতে এবং Firebase Studio ওয়ার্কস্পেস তৈরি করতে ফাইল সামগ্রী পাঠানোর সহায়ক ফাংশন সহ আপনার প্রয়োজনীয় সবকিছু সরবরাহ করে।

আপনার ওয়েবসাইটে " Firebase Studio খুলুন" বোতাম যোগ করতে:

1. আপনার প্রকল্প ডিরেক্টরিতে প্যাকেজ ইনস্টল করুন:

   npm install @firebase-studio/open-sdk
   

2. লাইব্রেরি আমদানি করতে আপনার কোডে নিম্নলিখিত যোগ করুন:

   import * as FirebaseStudio from '@firebase-studio/open-sdk';
   

বিস্তারিত নির্দেশাবলী, কোড উদাহরণ এবং সম্পূর্ণ API রেফারেন্সের জন্য, অফিসিয়াল SDK ডকুমেন্টেশন দেখুন।

কর্মক্ষেত্রের পরিবেশ বুঝুন

যখন একজন ব্যবহারকারী আপনার সাইট থেকে একটি ওয়ার্কস্পেস তৈরি করে, Firebase Studio তাদের জন্য ডেভেলপমেন্ট এনভায়রনমেন্ট সেট আপ করে। অটোমেশন স্তর প্রকল্পের ধরনের উপর নির্ভর করে।

অপ্টিমাইজ করা পরিবেশ

প্রতিক্রিয়া, কৌণিক এবং সাধারণ HTML প্রকল্পগুলির জন্য, Firebase Studio একটি অপ্টিমাইজ করা, পূর্ব-কনফিগার করা পরিবেশ প্রদান করে, যদি কলকারী settings অবজেক্টের মধ্যে baselineEnvironment সম্পত্তি সঠিকভাবে সেট করে। এর মানে হল যে যখন একজন ব্যবহারকারী Firebase Studio তে লিঙ্কটি খোলে, Firebase Studio ওয়ার্কস্পেস তৈরি করে এবং স্বয়ংক্রিয়ভাবে:

• সমস্ত প্রয়োজনীয় নির্ভরতা ইনস্টল করে।
• সঠিক ডেভেলপমেন্ট সার্ভার কনফিগার করে এবং শুরু করে।
• সঠিক টুলিং এবং এক্সটেনশন সহ পরিবেশ সেট আপ করে।

এটি এমন একটি পরিবেশ খোলে যেখানে আপনার ব্যবহারকারীরা আপনার অ্যাপ্লিকেশনের একটি লাইভ প্রিভিউ দেখতে এবং কোডের সাথে সরাসরি ইন্টারঅ্যাক্ট করতে পারে।

সাধারণ পরিবেশ

অন্য সব ধরনের প্রকল্পের জন্য, Firebase Studio একটি সাধারণ আমদানিকারক ব্যবহার করে। এটি ওয়ার্কস্পেসে ফাইলগুলি আপলোড করে, তবে আপনার ব্যবহারকারীকে ম্যানুয়ালি প্রাথমিক সেটআপ করতে হবে। তাদের প্রয়োজন হতে পারে:

• ভাষা রানটাইম এবং নির্ভরতা ইনস্টল করুন.
• dev.nix ফাইলটি কনফিগার করুন।

এই প্রকল্পগুলির জন্য, Firebase Studio একটি অ-কাস্টমাইজড পরিবেশ তৈরি করে, ব্যবহারকারীকে সেটআপ প্রক্রিয়ার উপর সম্পূর্ণ নিয়ন্ত্রণ দেয়।

ব্যবহারকারীর অভিজ্ঞতা

উভয় ধরনের ওয়ার্কস্পেসের জন্য, একজন ব্যবহারকারী " Firebase Studio খুলুন" বোতামে ক্লিক করার পরে, তাদের ওয়ার্কস্পেসের নাম দিতে এবং আমদানি করার জন্য ফাইলগুলির তালিকা পর্যালোচনা করতে বলা হয়।

যখন ব্যবহারকারী আমদানিতে ক্লিক করেন, তখন একটি নতুন Firebase Studio ওয়ার্কস্পেস খোলে। এতে আপনার প্রজেক্ট ফাইল, একটি অ্যাপ প্রিভিউ এবং পরবর্তী ধাপ সহ একটি README ফাইল রয়েছে।

একটি " Firebase Studio খুলুন" বোতাম ডিজাইন করুন

আপনি Firebase Studio SDK-এ ওপেন ব্যবহার করে আপনার বোতাম ডিজাইন করতে পারেন বা Firebase Studio বোতামের জন্য HTML তৈরি করতে নিম্নলিখিত টুল ব্যবহার করতে পারেন:

আপনি যদি SDK ব্যবহার করেন, আপনি বোতামটির জন্য ঐচ্ছিক কনফিগারেশন বৈশিষ্ট্যগুলি অন্তর্ভুক্ত করতে পারেন:

• label : বোতামে দেখানো টেক্সট লেবেল সেট করে।
  • অনুমোদিত মান: open , try , export বা continue ।
• color : বোতামের রঙের স্কিম সংজ্ঞায়িত করে।
  • অনুমোদিত মান: dark , light , blue বা bright ।
• size : পিক্সেলে বোতামের উচ্চতা নির্দিষ্ট করে।
  • অনুমোদিত মান: 20 বা 32 ।
• imageFormat : তৈরি করা ছবির ফাইল ফরম্যাট নির্ধারণ করে।
  • অনুমোদিত মান: svg বা png ।

যেমন:

img.src = FirebaseStudio.getButtonImageUrl({
  label: 'export',
  color: 'dark',
  size: 32,
  imageFormat: 'svg'
});

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

• Firebase Studio SDK-এ ওপেন ইনস্টল করুন
• কিভাবে একটি Firebase Studio ওয়ার্কস্পেস কাস্টমাইজ করতে হয় তা বুঝুন