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

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

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

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

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

Firebase Studio এসডিকে-তে খুলুন ব্যবহার করুন

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

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

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

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

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

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

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

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

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

    npm install @firebase-studio/open-sdk

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

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

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

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

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

অনুকূল পরিবেশ

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

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

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

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

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

  • ল্যাঙ্গুয়েজ রানটাইম ও ডিপেন্ডেন্সিগুলো ইনস্টল করুন।
  • dev.nix ফাইলটি কনফিগার করুন।

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

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

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

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

যখন ব্যবহারকারী 'Import'-এ ক্লিক করেন, তখন একটি নতুন 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'
});

ফায়ারবেস স্টুডিওতে এক্সপোর্ট করার বাটনের একটি উদাহরণ

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