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

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

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

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

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

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

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

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

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

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

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

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

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

আপনার ওয়েবসাইটে "Open in Firebase Studio " বোতামটি যোগ করতে:

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

   npm install @firebase-studio/open-sdk
   

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

আপনি Firebase Studio SDK-তে Open ব্যবহার করে আপনার বোতামটি ডিজাইন করতে পারেন অথবা 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 ওয়ার্কস্পেস কীভাবে কাস্টমাইজ করবেন তা বুঝুন