CloudCodeStudio

CloudCode Studio: ব্রাউজার ভিত্তিক হাই পারফরম্যান্স কোড স্টুডিও এবং ওয়েব আইডিই

প্রজেক্ট পরিচিতি

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

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

সমস্যা এবং সমাধান

প্রচলিত ক্লাউড এডিটরের সীমাবদ্ধতা

বর্তমানে বহুল ব্যবহৃত অধিকাংশ ক্লাউড কোড এডিটর ক্লাউড সার্ভার এবং ডকার কন্টেইনারের ওপর ব্যাপকভাবে নির্ভরশীল। এর ফলে বেশ কিছু বাস্তব সমস্যার সৃষ্টি হয়:

1. সার্ভার ল্যাটেন্সি এবং কোল্ড স্টার্ট: রিমোট সার্ভারে কোড পাঠিয়ে এক্সিকিউট করতে গিয়ে নেটওয়ার্ক ল্যাটেন্সির কারণে অনেক সময় নষ্ট হয়। ফ্রি টায়ারের সার্ভারগুলোতে কনটেইনার স্পিন আপ হতে বেশ সময় লাগে।
2. অফলাইন অক্ষমতা: ইন্টারনেট সংযোগ সামান্য বিঘ্নিত হলেই প্রজেক্টে কাজ করা অসম্ভব হয়ে পড়ে, কারণ কোড সংরক্ষণ ও রান করার জন্য সবসময় সার্ভারের সাথে সার্বক্ষণিক কানেকশন দরকার হয়।
3. প্রাইভেসির ঝুঁকি: ব্যক্তিগত কোড এবং প্রজেক্টের ফাইল অন্য কোনো তৃতীয় পক্ষের ক্লাউড সার্ভারে পাঠাতে হয়, যা অনেক ক্ষেত্রে ডেটা সিকিউরিটি ও গোপনীয়তার প্রশ্নে চিন্তার কারণ হতে পারে।
4. জটিল অবকাঠামো ও রক্ষণাবেক্ষণ খরচ: সার্ভার সাইড স্যান্ডবক্সিং এবং ক্লাউড কন্টেইনার ব্যবস্থাপনায় প্রচুর ক্লাউড কম্পিউটিং রিসোর্স ও সার্ভার খরচের প্রয়োজন হয়।
5. মোবাইল কোডিংয়ের অনুপযুক্ত অভিজ্ঞতা: বেশিরভাগ ক্লাউড এডিটর শুধুমাত্র ডেস্কটপ স্ক্রিনের জন্য তৈরি করা হয়। মোবাইল বা ট্যাবলেটে অন স্ক্রিন কিবোর্ড দিয়ে প্রোগ্রামিং করা অত্যন্ত কঠিন।

CloudCode Studio এর সমাধান

CloudCode Studio এই সমস্যাগুলোর একটি নিখুঁত আর্কিটেকচারাল সমাধান দেয়:

1. সম্পূর্ণ জিরো সার্ভার এক্সিকিউশন: প্রতিটি ল্যাঙ্গুয়েজের এক্সিকিউশন ব্রাউজারের নিজস্ব জাভাস্ক্রিপ্ট ইঞ্জিন এবং ওয়েব অ্যাসেম্বলি রানটাইমে সম্পন্ন হয়। কোনো এক্সটার্নাল ব্যাকএন্ড রিকোয়েস্টের প্রয়োজন হয় না।
2. ইনডেক্সডডিবি ভিত্তিক লোকাল পারসিস্টেন্স: Dexie.js এর মাধ্যমে ব্রাউজারের ভেতরেই একটি রিলেশনাল স্ট্রাকচারের ফাইল সিস্টেম তৈরি করা হয়েছে। ব্রাউজার রিফ্রেশ দিলে বা ইন্টারনেট বন্ধ থাকলেও প্রজেক্টের কোনো ডেটা হারায় না।
3. প্রিভিউ স্যান্ডবক্সিং এবং সিকিউরিটি বাউন্ডারি: আইফ্রেম স্যান্ডবক্স এবং রিলেটিভ পাথ রেজোলিউশন লজিকের মাধ্যমে একাধিক ফাইলের ওয়েব প্রজেক্ট নিরাপদে ব্রাউজারেই প্রিভিউ করা যায়।
4. পাইওডাইড ও ওয়েব ওয়ার্কার নির্ভর পাইথন ইঞ্জিন: ব্রাউজারের ব্যাকগ্রাউন্ড থ্রেডে পাইথন ৩.১২ রানটাইম চালু রেখে ব্যবহারকারীর কাছ থেকে ইন্টারঅ্যাক্টিভ ইনপুট নেওয়ার জন্য কাস্টম এএসটি ট্রান্সফরমার ব্যবহার করা হয়েছে।
5. প্রোগ্রেসিভ ওয়েব অ্যাপ আর্কিটেকচার: সার্ভিস ওয়ার্কার এবং আধুনিক পিডব্লিউএ কনফিগারেশনের কারণে এটি যেকোনো অপারেটিং সিস্টেমে নেটিভ ডেস্কটপ কিংবা মোবাইল অ্যাপ হিসেবে ইন্সটল করা যায়।
6. ডেডিকেটেড মোবাইল সিম্বল বার: মোবাইল ব্যবহারকারীদের জন্য অন স্ক্রিন সিম্বল বার যুক্ত করা হয়েছে, যার ফলে প্রোগ্রামিংয়ের ব্র্যাকেট, সেমিকোলন এবং ইন্ডেন্টেশন এক ক্লিকেই টাইপ করা সম্ভব।

প্রধান ফিচারসমূহ

১. মনাকো কোড এডিটর এবং ভিজ্যুয়াল স্টুডিও কোড ইন্টারফেস

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

২. ইন্টেলিজেন্ট কোড সাজেশনস এবং স্নিপেট ইঞ্জিন

স্বাভাবিক কোডিং স্পিড বাড়ানোর জন্য সিএসএস, জাভাস্ক্রিপ্ট, পাইথন এবং সি প্লাস প্লাসের জন্য কাস্টম স্নিপেট প্রোভাইডার তৈরি করা হয়েছে। উদাহরণস্বরূপ, সিএসএসে df লিখলে সরাসরি display: flex; তৈরি হয় এবং center লিখলে ফ্লেক্সবক্সের পূর্ণাঙ্গ অ্যালাইনমেন্ট চলে আসে। একইভাবে জাভাস্ক্রিপ্টে clg লিখলে কনসোল লগ এবং পাইথনে def লিখলে ফাংশন স্ট্রাকচার নিমেষেই ইনসার্ট করা যায়।

৩. মাল্টি ল্যাঙ্গুয়েজ ক্লায়েন্ট সাইড এক্সিকিউশন

অ্যাপ্লিকেশনটিতে একই সাথে কয়েকটি প্রধান প্রোগ্রামিং ভাষা সাপোর্ট করে:

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

৪. পাইথনে ইন্টারঅ্যাক্টিভ ইনপুট ও কনসোল ইন্টিগ্রেশন

ব্রাউজারে পাইথন রান করার ক্ষেত্রে সবচেয়ে বড় চ্যালেঞ্জ হলো ব্যবহারকারীর কাছ থেকে ডায়নামিক ইনপুট গ্রহণ করা। CloudCode Studio তে পাইথন কোডের এএসটি অ্যানালাইসিস করে সিনক্রোনাস ইনপুট কলগুলোকে অ্যাসিঙ্ক ফাংশনে রূপান্তরিত করা হয়। এর ফলে ব্রাউজারের কনসোল প্যানেলে সুন্দর ইনপুট ফিল্ড পপ আপ করে এবং ব্যবহারকারী মান সাবমিট করলে পাইথন প্রোগ্রাম নির্বিঘ্নে পরবর্তী লাইনে অগ্রসর হয়।

৫. পূর্ণাঙ্গ উইন্ডোজ ১১ স্টাইল ফাইল এক্সপ্লোরার

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

৬. স্কোপড ওয়ার্কস্পেস রুট বা ওপেন ফোল্ডার ফিচার

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

৭. এক ক্লিকে জিপ ও জেএসওএন এক্সপোর্ট এবং ইমপোর্ট

ব্যবহারকারীর তৈরিকৃত প্রজেক্ট যেন সহজেই অন্য কম্পিউটারে নিয়ে যাওয়া যায় বা ব্যাকআপ রাখা যায়, সেজন্য রয়েছে সম্পূর্ণ জিপ আর্কাইভ এক্সপোর্ট সুবিধা। JSZip লাইব্রেরি ব্যবহার করে ক্লায়েন্ট সাইডেই ফোল্ডার ডিরেক্টরি বজায় রেখে জিপ ফাইল তৈরি ও ডাউনলোড করা হয়। এছাড়াও পূর্বের তৈরি করা জিপ ফাইল সরাসরি আপলোড করে ব্রাউজারে রিস্টোর করা যায়।

৮. মোবাইল ফ্রেন্ডলি ইন্টারফেস এবং কুইক সিম্বল বার

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

ব্যবহারকারীর কাজের ধারা

CloudCode Studio ব্যবহারের প্রতিটি ধাপ অত্যন্ত সহজ ও পরিচ্ছন্নভাবে সাজানো হয়েছে:

1. অ্যাপ্লিকেশনে প্রবেশ: ব্যবহারকারী যখন প্রথমবার ওয়েবসাইটে আসেন, তখন একটি ইন্টারেক্টিভ অ্যাসকি ডট অ্যানিমেশন সম্বলিত মিনিমালিস্টিক ল্যান্ডিং পেজ প্রদর্শিত হয়। এখান থেকে সরাসরি এক ক্লিকে পিডব্লিউএ হিসেবে অ্যাপ ইন্সটল করা যায় অথবা ব্রাউজারেই স্টুডিও চালু করা যায়।
2. নতুন ওয়ার্কস্পেস তৈরি: স্টুডিও ওপেন হওয়ার পর সাইডবার এক্সপ্লোরার থেকে ফাইল বা ফোল্ডার তৈরি করা যায়। ব্যবহারকারী নিজের পছন্দমতো ফাইলের নাম যেমন index.html, style.css কিংবা main.py দিলে স্বয়ংক্রিয়ভাবে সংশ্লিষ্ট ফাইল আইকন ও সিনট্যাক্স হাইলাইটার সেট হয়ে যায়।
3. কোডিং ও অটো সেভ: মনাকো এডিটরে কোড লেখার সাথে সাথে ব্যাকগ্রাউন্ডে একটি ডিবাউন্সড টাইমার চালু হয়। টাইপিং শেষ করার ৬০০ মিলি সেকেন্ডের মধ্যে ইনডেক্সডডিবি ডাটাবেজে ফাইলটির সর্বশেষ সংস্করণ সংরক্ষিত হয়। এছাড়া কিবোর্ড শর্টকাট দিয়ে তাৎক্ষণিক সেভ করার সুবিধাও রয়েছে।
4. কোড এক্সিকিউশন: কোড রান করার জন্য কিবোর্ডে রান শর্টকাট চাপলে বা উপরের প্লে বাটনে ক্লিক করলে সিস্টেম স্বয়ংক্রিয়ভাবে ফাইলের ল্যাঙ্গুয়েজ শনাক্ত করে সংশ্লিষ্ট অ্যাডাপ্টারে পাঠিয়ে দেয়।
5. ফলাফল ও প্রিভিউ পর্যবেক্ষণ: ওয়েব প্রজেক্ট হলে স্বয়ংক্রিয়ভাবে প্রিভিউ ট্যাব খুলে যায় এবং রেসপনসিভ ভিউপোর্ট সুইচার দিয়ে মোবাইল, ট্যাবলেট ও ডেস্কটপ সাইজে আউটপুট দেখা যায়। পাইথন, টাইপস্ক্রিপ্ট বা সি প্লাস প্লাস স্ক্রিপ্ট হলে নিচের কনসোল ডক প্যানেল ওপেন হয়ে আউটপুট ও এক্সিকিউশন টাইম প্রদর্শন করে।
6. প্রজেক্ট সংরক্ষণ ও ডাউনলোড: কাজ শেষ হলে ব্যবহারকারী এক্সপ্লোরার থেকে সম্পূর্ণ প্রজেক্টকে জিপ ফাইল আকারে নিজের লোকাল ড্রাইভে সেভ করে নিতে পারেন।

টেকনিক্যাল আর্কিটেকচার

CloudCode Studio এর সফটওয়্যার আর্কিটেকচার সম্পূর্ণরূপে মডুলার, ডিকাপল্ড এবং এক্সটেনসিবল। নিচে এর মূল আর্কিটেকচারাল স্তম্ভগুলোর বিশ্লেষণ দেওয়া হলো:

+-----------------------------------------------------------------------+
|                           User Interface                              |
|   Workbench Root | Activity Bar | Status Bar | Tabs | Mobile Nav      |
+-----------------------------------------------------------------------+
           |                                             |
           v                                             v
+--------------------------+                 +--------------------------+
|       Monaco Core        |                 | Windows Explorer Engine  |
| Theme | Snippets | Emmet |                 | Tree | Grid | Breadcrumb |
+--------------------------+                 +--------------------------+
           |                                             |
           +----------------------+----------------------+
                                  |
                                  v
+-----------------------------------------------------------------------+
|                     Reactive Workspace State                          |
|         Dexie React Hooks  <===>  IndexedDB (BrowserEditorDB)         |
|      (Projects, Folders, Files, EditorSettings, WorkspaceState)       |
+-----------------------------------------------------------------------+
                                  |
                                  v
+-----------------------------------------------------------------------+
|                        Execution Manager                              |
|           Adapter Pattern Router based on file language               |
+-----------------------------------------------------------------------+
           |                      |                      |
           v                      v                      v
+--------------------+  +--------------------+  +--------------------+
|   HTML/CSS/JS      |  |     TypeScript     |  |      Python 3      |
| Preview Sandbox    |  |  Sucrase Compiler  |  |   Pyodide Worker   |
| (postMessage API)  |  |  (Isolated Iframe) |  |   (Wasm Runtime)   |
+--------------------+  +--------------------+  +--------------------+

ডাটা লেয়ার এবং রিঅ্যাক্টিভ সিঙ্ক

অ্যাপ্লিকেশনের মূল ডেটাবেজ হিসেবে ব্রাউজারের ইনডেক্সডডিবি ব্যবহার করা হয়েছে Dexie.js এর মাধ্যমে। এখানে পাঁচটি প্রধান টেবিল রয়েছে:

• projects: প্রতিটি প্রজেক্টের আইডি, নাম, টেমপ্লেট টাইপ এবং টাইমস্ট্যাম্প।
• folders: নেস্টেড ফোল্ডার হায়ারার্কি, প্যারেন্ট ফোল্ডার আইডি এবং ডিরেক্টরি পাথ।
• files: ফাইলের নাম, এক্সটেনশন, প্রোগ্রামিং ল্যাঙ্গুয়েজ এবং টেক্সট কনটেন্ট।
• settings: থিম চয়েস, ফন্ট সাইজ, ট্যাব স্পেসিং, ওয়ার্ড র‍্যাপ এবং মিনিম্যাপ কনফিগারেশন।
• workspace: বর্তমানে অ্যাক্টিভ প্রজেক্ট, ওপেন থাকা ট্যাবসমূহ এবং প্যানেলের অবস্থান।

useLiveQuery হুকের সাহায্যে ডেটাবেজের যেকোনো পরিবর্তন স্বয়ংক্রিয়ভাবে রিঅ্যাক্ট স্টেটকে আপডেট করে, যার ফলে কোনো ম্যানুয়াল স্টেট সিঙ্কিং লজিকের প্রয়োজন পড়ে না।

ব্যবহৃত টেকনোলজি স্ট্যাক

এই প্রজেক্টে ব্যবহৃত সকল লাইব্রেরি ও ফ্রেমওয়ার্ক অত্যন্ত সতর্কতার সাথে নির্বাচন করা হয়েছে, যেন ক্লায়েন্ট সাইডেই সর্বোচ্চ পারফরম্যান্স নিশ্চিত করা যায়:

গুরুত্বপূর্ণ টেকনিক্যাল বাস্তবায়ন

১. ইনডেক্সডডিবি স্কিমা মাইগ্রেশন এবং ডিরেক্টরি স্ট্রাকচার

প্রজেক্টের শুরুতে সাধারণ ফ্ল্যাট ফাইল সিস্টেম ব্যবহৃত হলেও পরবর্তীতে নেস্টেড ফোল্ডার কাঠামো যুক্ত করা হয়। এজন্য Dexie.js এর ভার্সন ২ স্কিমা মাইগ্রেশন তৈরি করা হয়। ব্যবহারকারীর পুরাতন ফাইল পাথের স্ল্যাশ অ্যানালাইসিস করে স্বয়ংক্রিয়ভাবে ফোল্ডার রেকর্ড তৈরি এবং সেগুলোর ইউনিক আইডি ম্যাপিংয়ের মাধ্যমে ডেটা নষ্ট হওয়া ছাড়াই সফলভাবে নতুন হায়ারার্কিতে উন্নীত করা হয়েছে।

২. ওয়েব প্রিভিউ স্যান্ডবক্সিং এবং পাথ ট্রাভার্সাল সিকিউরিটি

একাধিক এইচটিএমএল, সিএসএস ও জাভাস্ক্রিপ্ট ফাইল যখন একটি প্রজেক্টে থাকে, তখন <link rel="stylesheet" href="..."> এবং <script src="..."> ট্যাগগুলো ব্রাউজারে সরাসরি কাজ করতে পারে না কারণ সেগুলো কোনো ভার্চুয়াল লোকাল মেমরিতে থাকে।

CloudCode Studio একটি কাস্টম ডকুমেন্ট বিল্ডার রান করে। এটি এইচটিএমএল কনটেন্ট পার্স করে লিংক করা ফাইলগুলোকে ইনডেক্সডডিবি থেকে খুঁজে বের করে এবং সেগুলোকে ইনলাইন স্টাইল ও স্ক্রিপ্ট ব্লকে প্রতিস্থাপন করে। একই সাথে resolveWorkspaceRelativePath মেকানিজমের মাধ্যমে পাথ ট্রাভার্সাল চেক করা হয়, যেন কোনো রিলেটিভ পাথ দিয়ে প্রজেক্ট রুট ডিরেক্টরির বাইরে অনাকাঙ্ক্ষিত রিসোর্স কল করা না যায়।

৩. পাইথন ওয়েব ওয়ার্কার এবং এএসটি ইনপুট রূপান্তর

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

ব্রাউজারে সরাসরি জাভাস্ক্রিপ্ট প্রম্পট ব্লক না করে পাইথনের নিজস্ব ast মডিউল দিয়ে ইউজার কোড পার্স করা হয়। সেখানে থাকা প্রতিটি input() কলকে খুঁজে বের করে একটি অ্যাসিঙ্ক কল await _async_input() এ প্রতিস্থাপন করা হয়। এই অ্যাসিঙ্ক ফাংশনটি মেসেজ পাঠিয়ে ব্রাউজারের মেইন থ্রেডে ইনপুট প্রম্পট তোলে এবং ব্যবহারকারী ইনপুট সাবমিট করলে প্রমিজ রিজলভ হয়ে পাইথন রানটাইম ফলাফল নিয়ে এগিয়ে যায়।

৪. সুক্রেস লাইব্রেরি দ্বারা লাইটনিং ফাস্ট টাইপস্ক্রিপ্ট ট্রান্সপাইলিং

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

৫. পয়েন্টার ক্যাপচার ভিত্তিক স্মুথ প্যানেল রিসাইজিং

এডিটর, সাইডবার এবং বটম কনসোলের মধ্যকার স্প্লিট প্যানেল রিসাইজ করার জন্য পয়েন্টার ইভেন্টস ও setPointerCapture টেকনিক ব্যবহার করা হয়েছে। মাউস যখন দ্রুত মুভ করা হয় বা আইফ্রেমের ওপর দিয়ে যায়, তখনো যেন মাউস ট্র্যাকিং হারিয়ে না যায় এবং ৬০ এফপিএস ফ্রেমরেটে কোনো ল্যাগ ছাড়া মসৃণভাবে প্যানেল রিসাইজ হয়, তা সুনিশ্চিত করা হয়েছে।

উন্নয়নকালীন চ্যালেঞ্জ এবং সমাধান

চ্যালেঞ্জ ১: ব্রাউজার এনভায়রনমেন্টে পাইথনের ইনপুট মেকানিজম পরিচালনা

ব্রাউজারে ওয়েব অ্যাসেম্বলির মাধ্যমে পাইথন চালানোর সময় পাইথনের মূল সি লেভেল stdin কল সিস্টেম এরর দেয়, কারণ ব্রাউজারে কোনো স্ট্যান্ডার্ড ইনপুট টার্মিনাল ডক থাকে না।

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

চ্যালেঞ্জ ২: মাল্টি ফাইল ওয়েব প্রিভিউতে স্যান্ডবক্স এরর হ্যান্ডলিং

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

সমাধান: একটি পূর্ণাঙ্গ কনসোল ইন্টারসেপ্টর স্ক্রিপ্ট তৈরি করা হয়েছে যা আইফ্রেম ডকুমেন্টের হেডারে ইনজেক্ট করা হয়। এটি আইফ্রেমের console.log, console.warn, console.error এবং window.onerror ফাংশনগুলোকে র‍্যাপ করে এবং window.parent.postMessage এর মাধ্যমে প্যারেন্ট এডিটরে পাঠিয়ে দেয়। ফলে ব্যবহারকারী নিচের কনসোল ডক থেকেই আইফ্রেমের সমস্ত আউটপুট এবং এরর দেখতে পান।

চ্যালেঞ্জ ৩: মোবাইল ডিভাইসে ভিউপোর্ট সাইজিং এবং আইওএস পিডব্লিউএ সেফ এরিয়া

আইওএস ডিভাইসে সাফারি ব্রাউজার বা পিডব্লিউএ মোডে বটম হোম ইন্ডিকেটর বার এবং টপ নচ এর কারণে প্রায়ই এডিটরের টেক্সট এবং বটম নেভিগেশন বার স্ক্রিনের নিচে ঢাকা পড়ে যেত।

সমাধান: সিএসএসের মডার্ন ভিউপোর্ট ইউনিট এবং env(safe-area-inset-bottom) এবং env(safe-area-inset-top) ব্যবহার করে পুরো লেআউটের প্যাডিং ডায়নামিক করা হয়েছে। এছাড়া মোবাইলে কিবোর্ড ওপেন হলে এডিটর স্ক্রিন নিজে থেকেই রিসাইজ হয়ে কার্সারকে চোখের সামনে ভিজিবল রাখে।

চ্যালেঞ্জ ৪: অপ্রয়োজনীয় ডাটাবেজ রাইট রোধে ডিবাউন্সড সেভ স্ট্র্যাটেজি

ব্যবহারকারী প্রতিবার টাইপ করার সাথে সাথে ইনডেক্সডডিবিতে সরাসরি রাইট করলে ব্রাউজারের আই/ও পারফরম্যান্স মারাত্মকভাবে হ্রাস পায়।

সমাধান: একটি স্মার্ট ডিবাউন্সড মেকানিজম বাস্তবায়ন করা হয়েছে। ব্যবহারকারী টাইপ করা শুরু করলে একটি সেভিং স্টেট প্রদর্শিত হয় এবং টাইপিং বিরতির ৬০০ মিলি সেকেন্ড পর একটি সিঙ্গেল ব্যাচ রাইট অপারেশনের মাধ্যমে ডাটাবেজ আপডেট করা হয়। একই সাথে ব্যবহারকারী চাইলে Ctrl+S চেপে মুহূর্তেই তাৎক্ষণিক সেভ সম্পন্ন করতে পারেন।

ডিজাইন এবং ইউজার এক্সপেরিয়েন্স

CloudCode Studio এর ইন্টারফেস ডিজাইনে পেশাদার ডেভেলপারদের অভ্যস্ততা এবং স্বাচ্ছন্দ্যকে সর্বোচ্চ গুরুত্ব দেওয়া হয়েছে:

• অফিসিয়াল ভিএস কোড কালার প্যালেট: ডার্ক থিমে #1e1e1e ব্যাকগ্রাউন্ড এবং অ্যাকসেন্ট হিসেবে ক্লাসিক ব্লু #007acc ব্যবহার করা হয়েছে, যা দীর্ঘ সময় কোড করলেও চোখে ক্লান্তি এনে দেয় না।
• ম্যাটেরিয়াল আইকন সিস্টেম: ফোল্ডার এবং ফাইলের জন্য নিখুঁত ভেক্টর আইকন ব্যবহার করা হয়েছে। ফাইলের এক্সটেনশন অনুসারে সিএসএস, এইচটিএমএল, জাভাস্ক্রিপ্ট, পাইথন, সি প্লাস প্লাস কিংবা প্যাকেজ কনফিগারেশনের আসল আইকন প্রদর্শিত হয়।
• অ্যাডাপ্টিভ ওয়ার্কস্পেস ডকিং: নিচের আউটপুট প্যানেলটি ব্যবহারকারীর প্রয়োজন অনুসারে ডান পাশে স্প্লিট আকারে নেওয়া যায় অথবা নিচে ডক করে রাখা যায়।
• ডায়নামিক স্ট্যাটাস বার: স্ট্যাটাস বারে বর্তমান কার্সারের লাইন নম্বর, কলাম নম্বর, অ্যাক্টিভ ল্যাঙ্গুয়েজ এবং এক্সিকিউশন স্ট্যাটাস সার্বক্ষণিক প্রদর্শিত থাকে।

কিবোর্ড শর্টকাট গাইড

ভিএস কোডের জনপ্রিয় কিবোর্ড শর্টকাটগুলো ব্রাউজারে ব্যবহারের জন্য বিশেষভাবে কনফিগার করা হয়েছে:

• কোড সেভ: Ctrl + S অথবা Cmd + S
• কোড রান: Ctrl + Enter অথবা Cmd + Enter
• সাইডবার হাইড বা শো: Ctrl + B অথবা Cmd + B
• কনসোল টার্মিনাল ডক ওপেন: Ctrl + \`` অথবা Ctrl + J`
• ফুল স্ক্রিন উইন্ডোজ ফাইল এক্সপ্লোরার: Ctrl + P (ব্রাউজারের প্রিন্ট ডায়ালগ প্রতিস্থাপন করে)
• সেটিংস মেনু: Ctrl + ,
• ভিএস কোড কমান্ড প্যালেট: Ctrl + Shift + P অথবা F1
• কোড সাজেশনস বা ইন্টেলিসেন্স: Ctrl + Space
• অ্যাক্টিভ ট্যাব ক্লোজ: Alt + W (ব্রাউজার ট্যাব যেন বন্ধ না হয় সেজন্য নিরাপদ শর্টকাট)
• কিবোর্ড শর্টকাট প্যানেল: Ctrl + K এরপর Ctrl + S

আমার ব্যক্তিগত অবদান

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

1. কোর আর্কিটেকচার ও প্রজেক্ট স্ট্রাকচার: নেক্সট জেএস অ্যাপ রাউটার এবং টাইপস্ক্রিপ্ট ব্যবহার করে একটি সম্পূর্ণ ক্লায়েন্ট সাইড স্ট্যাটিক ওয়েব অ্যাপ্লিকেশন হিসেবে পুরো প্রজেক্টের নকশা তৈরি করেছি।
2. ইনডেক্সডডিবি ফাইল সিস্টেম ও পারসিস্টেন্স: Dexie.js দিয়ে লোকাল ডেটাবেজ স্কিমা ডিজাইন, ভার্সন মাইগ্রেশন এবং রিঅ্যাক্টিভ কুয়েরি সিস্টেম ডেভেলপ করেছি।
3. পাইথন ওয়েব ওয়ার্কার ইঞ্জিন: ব্রাউজারে Pyodide এর ওয়েব অ্যাসেম্বলি লোডিং, এএসটি ইনপুট রূপান্তর এবং কনসোল ইনপুট পাইপলাইনের সম্পূর্ণ লজিক কোডিং করেছি।
4. উইন্ডোজ স্টাইল এক্সপ্লোরার ও ওয়ার্কস্পেস রুট: উইন্ডোজ ১১ অনুপ্রাণিত ফাইল এক্সপ্লোরার, নেস্টেড ট্রি ভিউ, গ্রিড ভিউ, সিকিউর পাথ রেজোলিউশন এবং ওপেন ফোল্ডার ফিচার এককভাবে বাস্তবায়ন করেছি।
5. এডিটর টিউনিং ও সাজেশনস: মনাকো এডিটরের সাথে কাস্টম সিএসএস, জেএস, পাইথন ও সি প্লাস প্লাস স্নিপেট এবং এমেট কমপ্লিশন ইন্টিগ্রেট করেছি।
6. রেসপনসিভ ও পিডব্লিউএ অপ্টিমাইজেশন: মোবাইল সিম্বল বার, সার্ভিস ওয়ার্কার ক্যাশিং এবং অ্যাসকি ডট ক্যানভাস ল্যান্ডিং পেজ তৈরি করেছি।

বর্তমান অবস্থা এবং ভবিষ্যৎ পরিকল্পনা

CloudCode Studio বর্তমানে সম্পূর্ণ কার্যকর এবং স্থিতিশীল অবস্থায় রয়েছে। ব্রাউজারে ফ্রন্টএন্ড কোডিং এবং পাইথন ও টাইপস্ক্রিপ্ট স্ক্রিপ্টিংয়ের জন্য এটি একটি স্বয়ংসম্পূর্ণ প্ল্যাটফর্ম।

ভবিষ্যৎ পরিকল্পনা

ভবিষ্যতে প্রজেক্টটিকে আরও সমৃদ্ধ করতে নিম্নলিখিত আধুনিক ফিচারগুলো যুক্ত করার পরিকল্পনা রয়েছে:

1. পূর্ণাঙ্গ ক্লাং ওয়েব অ্যাসেম্বলি কম্পাইলার: বর্তমানে সি প্লাস প্লাসের জন্য ক্লায়েন্ট সাইড সিনট্যাক্স পার্সার ব্যবহৃত হচ্ছে। ভবিষ্যতে সরাসরি ব্রাউজারেই ফুল Clang Wasm রানটাইম যুক্ত করার পরিকল্পনা রয়েছে।
2. পিয়ার টু পিয়ার লাইভ কলাবোরেশন: WebRTC এবং CRDTs (যেমন Yjs) ব্যবহার করে সার্ভার ছাড়াই দুইজন প্রোগ্রামারের একসাথে কোড করার ব্যবস্থা করা।
3. ব্রাউজার ইন মেমরি গিট ইন্টিগ্রেশন: Isomorphic Git লাইব্রেরির মাধ্যমে সরাসরি ব্রাউজার থেকেই গিটহাবে কমিট ও পুশ করার সুবিধা যুক্ত করা।
4. এক্সটার্নাল প্যাকেজ ম্যানেজার সাপোর্ট: পাইথনে মাইক্রোপিপের মাধ্যমে ডাটা সায়েন্সের অতিরিক্ত লাইব্রেরি ইনস্টল করার সুবিধা বাড়ানো।

প্রজেক্ট লিংক ও তথ্যসূত্র

• গিটহাব রিপোজিটরি: https://github.com/iamtahmidhasan/CloudCode-Studio.git
• লেখক: তাহমিদ হাসান (GitHub: @iamtahmidhasan)
• প্ল্যাটফর্ম আর্কিটেকচার: প্রোগ্রেসিভ ওয়েব অ্যাপ (পিডব্লিউএ) এবং স্ট্যাটিক ওয়েব ক্লায়েন্ট
• লাইসেন্স: ওপেন সোর্স