Wix কোড দিয়ে সহজেই একটি ওয়েব অ্যাপ তৈরি করুন

এটি একটি স্পনসর করা নিবন্ধ এবং Wix দ্বারা সম্ভব হয়েছে। প্রকৃত বিষয়বস্তু এবং মতামত হল লেখকের একমাত্র মতামত যিনি সম্পাদকীয় স্বাধীনতা বজায় রাখেন, এমনকি যখন একটি পোস্ট স্পনসর করা হয়।

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

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

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

Wix কোড জটিলতা ছাড়াই এর বিদ্যমান ওয়েব-বিল্ডিং সরঞ্জামগুলিতে এই জাতীয় জিনিসগুলি যুক্ত করে। এটি আপনাকে আপনার ডেটাবেস, ফর্মগুলি তৈরি এবং পরিচালনা করার জন্য বেশ কয়েকটি টেমপ্লেট অফার করে এবং আপনাকে আপনার সাইটে জাভাস্ক্রিপ্ট কোড যোগ করার অনুমতি দেয়। সর্বোপরি, আপনি ডাটাবেস থেকে দ্রুত বিষয়বস্তু তৈরি করতে ডায়নামিক পৃষ্ঠা বৈশিষ্ট্য ব্যবহার করতে পারেন, এটিকে ওয়েবসাইট নির্মাতার পরিবর্তে একটি বিষয়বস্তু ব্যবস্থাপনা সিস্টেমের মতো করে তোলে৷

নীচের উদাহরণে আমরা একটি সাধারণ মেক টেক ইজিয়ার ব্লগ তৈরি করব এবং Wix কোড থেকে এতে গতিশীল বৈশিষ্ট্য যোগ করব।

Wix এর সাথে একটি নতুন সাইট সেট আপ করা

ধরে নিচ্ছি যে আপনি Wix এ নতুন, আপনি Wix-এর সাথে একটি অ্যাকাউন্টের জন্য সাইন আপ করে শুরু করতে পারেন। একবার আপনি একটি অ্যাকাউন্ট তৈরি করলে, আপনাকে আপনার ওয়েবসাইট তৈরি করতে বলা হবে৷

৷

এরপরে এটি আপনাকে যে ধরনের ওয়েবসাইট তৈরি করতে চান তা নির্বাচন করতে বলবে। যেহেতু আমি একটি মেক টেক ইজিয়ার ব্লগের প্রতিলিপি করছি, তাই আমি "ব্লগ" বিকল্পটি নির্বাচন করেছি৷

Wix কোড দিয়ে সহজেই একটি ওয়েব অ্যাপ তৈরি করুন

পরবর্তী স্ক্রীনটি জিজ্ঞাসা করবে কিভাবে আপনি আপনার ওয়েবসাইট তৈরি করতে চান।

Wix কোড দিয়ে সহজেই একটি ওয়েব অ্যাপ তৈরি করুন

Wix ADI আপনার জন্য স্বয়ংক্রিয়ভাবে একটি সাইট তৈরি করতে কৃত্রিম বুদ্ধিমত্তা ব্যবহার করে। আপনি যদি ম্যানুয়াল যেতে পছন্দ করেন, Wix Editor পদ্ধতি নির্বাচন করুন। (উইক্স কোড অ্যাক্সেস করার জন্য আপনাকে পরবর্তীটি ব্যবহার করতে হবে। আপনি যদি Wix ADI বেছে নিয়ে থাকেন, তবে আপনি পরেও এডিটর মোডে স্যুইচ করতে পারেন।)

এই উদাহরণের জন্য আমি Wix সম্পাদক ব্যবহার করেছি কারণ আমি সাইটের চেহারা এবং অনুভূতির উপর সম্পূর্ণ নিয়ন্ত্রণ রাখতে চেয়েছিলাম। সেখান থেকে আপনি একটি টেমপ্লেট দিয়ে শুরু করতে পারেন। (তাদের হাজার হাজার আছে।)

Wix কোড দিয়ে সহজেই একটি ওয়েব অ্যাপ তৈরি করুন

এটি সহজ রাখতে, আমি একটি ক্লাসিক লেআউট সহ একটি ফাঁকা টেমপ্লেট দিয়ে শুরু করেছি। নিচের চিত্রটি দেখতে কেমন।

Wix কোড দিয়ে সহজেই একটি ওয়েব অ্যাপ তৈরি করুন

উইক্স কোড অ্যাক্সেস করা হচ্ছে

Wix কোড অ্যাক্সেস করতে "Tools" এ যান এবং "Developer Tools" বিকল্পটি চেক করুন।

আপনি এখন একটি নতুন "সাইট স্ট্রাকচার" কলাম দেখতে পাবেন। এখানে আপনি Wix কোডের সমস্ত বৈশিষ্ট্য অ্যাক্সেস করতে পারবেন।

Wix কোড দিয়ে সহজেই একটি ওয়েব অ্যাপ তৈরি করুন

পোস্ট সংরক্ষণ করার জন্য ডেটাবেস তৈরি করা

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

Wix কোড দিয়ে সহজেই একটি ওয়েব অ্যাপ তৈরি করুন

সংগ্রহটি তৈরি হয়ে গেলে, আপনি এতে ক্ষেত্র এবং ডেটা যোগ করা শুরু করতে পারেন।

Wix কোড দিয়ে সহজেই একটি ওয়েব অ্যাপ তৈরি করুন

আমরা যা তৈরি করেছি তা হল একটি ব্লগ পোস্টের শিরোনাম, বিষয়বস্তু, প্রকাশিত তারিখ এবং বিভিন্ন দিক সম্বলিত একটি পোস্ট ডাটাবেস। এরপরে, আমাদের ডাটাবেস বিষয়বস্তুকে মূল সাইটে পপুলেট করতে হবে।

গতিশীল পৃষ্ঠাগুলি

ডায়নামিক পৃষ্ঠাগুলি একটি টেমপ্লেট পৃষ্ঠার মতো যেখানে আপনি একটি ডিজাইন তৈরি করতে পারেন এবং এটিকে ডাটাবেসের সাথে সংযুক্ত করতে পারেন এবং এটি আপনার ডাটাবেসের সমস্ত আইটেমকে তাদের নিজস্ব URL এর অধীনে প্রথম পৃষ্ঠায় স্বয়ংক্রিয়ভাবে পপুলেট করবে৷ উদাহরণস্বরূপ, ডাটাবেসে আমাদের ছয়টি পোস্ট রয়েছে। একটি একক গতিশীল পৃষ্ঠার সাথে, আমরা এটিকে মূল সাইটের সমস্ত পোস্ট প্রদর্শন করতে পারি। এটি আপনাকে প্রতিটি পোস্টের জন্য ম্যানুয়ালি একটি একক পৃষ্ঠা তৈরি করার প্রচেষ্টাকে বাঁচায়৷ Wix কোডে দুটি প্রধান ধরণের গতিশীল পৃষ্ঠা রয়েছে – একটি হল একটি একক আইটেম প্রদর্শনের জন্য, অন্যটি হল বিভাগের জন্য (একটি তালিকায় অনুরূপ আইটেমের সংগ্রহ)।

নিচে দেখানো হয়েছে কিভাবে গতিশীল পৃষ্ঠা তৈরি করতে হয় এবং সেগুলিকে সাইটে লিঙ্ক করতে হয়।

1. ভাসমান টুলবারে প্রথম আইকনে ক্লিক করুন এবং "ডাইনামিক পেজ" নির্বাচন করুন। "সাইটে যোগ করুন" বোতামে ক্লিক করুন৷

৷

Wix কোড দিয়ে সহজেই একটি ওয়েব অ্যাপ তৈরি করুন

2. পপআপ থেকে "আইটেম পৃষ্ঠা" নির্বাচন করুন৷

৷

Wix কোড দিয়ে সহজেই একটি ওয়েব অ্যাপ তৈরি করুন

3. URL-এ ক্ষেত্রটি নির্বাচন করুন (ডাটাবেসে) যেটি আপনি URL-এর জন্য ব্যবহার করতে চান৷ এই ক্ষেত্রে আমি "শিরোনাম" কে URL হিসাবে সেট করেছি৷

৷

Wix কোড দিয়ে সহজেই একটি ওয়েব অ্যাপ তৈরি করুন

4. এরপর, পৃষ্ঠাটি ডিজাইন করুন এবং ডাটাবেস থেকে ক্ষেত্র যোগ করুন। আপনি পৃষ্ঠায় টেনে আনা প্রতিটি উপাদানের সাথে, আপনি ডাটাবেস থেকে ফিল্ডের সাথে লিঙ্ক করতে "ডেটাতে সংযোগ করুন" বোতামে ক্লিক করতে পারেন। উদাহরণস্বরূপ, আমি পৃষ্ঠায় একটি "শিরোনাম 1" উপাদান টেনে এনে পোস্ট ডাটাবেসের "শিরোনাম" ক্ষেত্রের সাথে লিঙ্ক করেছি৷

Wix কোড দিয়ে সহজেই একটি ওয়েব অ্যাপ তৈরি করুন

এবং আমি ফিচারড ইমেজ, পোস্ট কন্টেন্ট ইত্যাদির জন্য একই কাজ করেছি।

Wix কোড দিয়ে সহজেই একটি ওয়েব অ্যাপ তৈরি করুন

5. একবার আপনি ডিজাইনটি সম্পন্ন করার পরে, আপনি এটির পূর্বরূপ দেখতে পারেন এবং দেখতে পারেন যে এটি সামনের প্রান্তে কেমন দেখাচ্ছে৷

Wix কোড দিয়ে সহজেই একটি ওয়েব অ্যাপ তৈরি করুন

6. পরবর্তী ধাপ হল হোম পেজ থেকে ডায়নামিক পেজ লিঙ্ক করা। হোম পেজ লোড করুন এবং "তালিকা এবং গ্রিড" বিভাগ থেকে একটি রিপিটার উইজেট যোগ করুন। উইজেটটিকে পোস্ট ডাটাবেসের সাথে সংযুক্ত করুন এবং উইজেটের প্রতিটি উপাদানকে ডাটাবেসের ক্ষেত্রগুলির সাথে লিঙ্ক করুন। "লিঙ্ক এর সাথে সংযোগ করে" বিভাগের অধীনে, নীচে স্ক্রোল করুন এবং ডায়নামিক পৃষ্ঠা বিভাগে "পোস্ট" নির্বাচন করুন৷

Wix কোড দিয়ে সহজেই একটি ওয়েব অ্যাপ তৈরি করুন

এটাই।

Wix কোড দিয়ে সহজেই একটি ওয়েব অ্যাপ তৈরি করুন

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

পৃষ্ঠাগুলিতে জাভাস্ক্রিপ্ট যোগ করা হচ্ছে

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

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

Wix কোড দিয়ে সহজেই একটি ওয়েব অ্যাপ তৈরি করুন

1. আমরা একটি সাধারণ ফর্ম তৈরি করেছি যা ব্যবহারকারীর কাছ থেকে প্রথম নাম, শেষ নাম এবং ইমেল ঠিকানা সংগ্রহ করবে। এই ফর্মের জন্য আমরা ইমেল ঠিকানা যাচাই করতে চাই এবং নিশ্চিত করতে চাই যে "ইমেল নিশ্চিত করুন" ক্ষেত্রটি "ইমেল" ক্ষেত্রের মতোই।

2. "পৃষ্ঠা কোড" বিভাগে নিম্নলিখিত কোড যোগ করুন:

$w.onReady(function () {
 
	const validateEmail = (otherEmailElementId) => (value, reject) => {
		let otherEmailElement = $w(otherEmailElementId);
	 	if (value === otherEmailElement.value) {
  			otherEmailElement.validity.valid = true;
  			otherEmailElement.resetValidityIndication();
	    	return;
	  	} 
	  	console.log("Email and Confirm Your Email fields do not match");
	  	otherEmailElement.validity.valid = false;
	  	otherEmailElement.updateValidityIndication();
	  	reject("Email and Confirm Email fields do not match");
	};
	$w("#emailConfirmInput").onCustomValidation(validateEmail("#emailInput"));
	$w("#emailInput").onCustomValidation(validateEmail("#emailConfirmInput"));
 
	$w('#dataset1').onBeforeSave(() => {
		let validationMessage = '';
 
		if (!$w('#emailInput').valid) {
		    if (!$w('#emailInput').value)
			validationMessage += 'Please enter an email address\n';
		    else if ($w('#emailInput').value !== $w("#emailConfirmInput").value) {
			validationMessage += 'Email and Confirm Email fields do not match\n';
		    }	
                   $w('#validationMessages').text = validationMessage;
                   $w('#validationMessages').expand();		
                }
		else 
		    $w('#validationMessages').collapse();
 
        });
});

এটি ইমেল ঠিকানা যাচাই করবে এবং ইমেলটি অবৈধ হলে ত্রুটি বার্তা দেখাবে৷

৷

Wix কোড দিয়ে সহজেই একটি ওয়েব অ্যাপ তৈরি করুন

জাভাস্ক্রিপ্ট দিয়ে আপনি অনেক কিছু করতে পারেন। আরও তথ্যের জন্য এখানে উদাহরণগুলি দেখুন৷

৷

বাহ্যিক APIs

এটিই একমাত্র পদক্ষেপ যেখানে এটি আরও জটিল হতে পারে। Wix কোড এখন বাহ্যিক API-এর সাথে একীভূত হয়েছে, যাতে আপনি সহজেই আমাজন, ড্রপবক্স, গুগল ড্রাইভ, টুইটার, IFTTT, Zapier ইত্যাদির মতো তৃতীয় পক্ষের পরিষেবাগুলির সাথে সংযোগ করতে পারেন। আমি এখানে বিশদে যাব না, তবে আপনি যদি আগ্রহী হন তবে আপনি তাদের API ডকুমেন্টেশন চেক করতে পারেন।

উপসংহার

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

এমন একটি সহজে ব্যবহারযোগ্য টুল তৈরি করার জন্য Wix কে ধন্যবাদ যা অনেক সমস্যার সমাধান করবে।

Wix কোড ব্যবহার করে দেখুন এবং আপনি এটি সম্পর্কে কী ভাবছেন তা আমাদের জানান।

উইক্স কোড