สร้างเว็บแอปอย่างง่ายดายด้วย Wix Code

นี่คือบทความที่ได้รับการสนับสนุนและจัดทำขึ้นโดย Wix เนื้อหาและความคิดเห็นที่แท้จริงเป็นความคิดเห็นของผู้เขียนแต่เพียงผู้เดียวที่รักษาความเป็นอิสระด้านบรรณาธิการ แม้ว่าจะสนับสนุนโพสต์ก็ตาม

เมื่อพูดถึงการสร้างเว็บไซต์ หากคุณเป็นนักพัฒนา คุณสามารถใช้แนวทาง DIY และโค้ด และโฮสต์ทุกอย่างได้ด้วยตัวเอง หากคุณเป็นผู้ใช้ปลายทาง/ผู้บริโภคเช่นเดียวกับพวกเราส่วนใหญ่ คุณสามารถใช้ซอฟต์แวร์สร้างเว็บเพื่อสร้างเว็บไซต์ที่สวยงามได้ด้วยการคลิกเพียงครั้งเดียว

Wix อยู่ในรุ่นหลัง เนื่องจากเป็นเครื่องมือสร้างเว็บที่ช่วยให้คุณสามารถสร้างเว็บไซต์ที่สวยงามได้ฟรีด้วยการคลิกเมาส์เพียงไม่กี่ครั้ง แต่ด้วยการเปิดตัว Wix Code ทำให้เส้นแบ่งระหว่างการทำด้วยตัวเองกับการสร้างเว็บไม่ชัดเจน ตอนนี้คุณทำทั้งสองอย่างได้แล้ว

หากคุณกำลังสร้างเว็บแอปหรือเว็บไซต์แบบไดนามิก คุณจะต้องใช้ศัพท์แสงทางเทคนิคที่ซับซ้อน เช่น ฐานข้อมูล แบบฟอร์ม และจาวาสคริปต์เพื่อสร้างเว็บไซต์แบบโต้ตอบ เครื่องมือสร้างเว็บส่วนใหญ่ไม่มีเครื่องมือดังกล่าว เนื่องจากจะเพิ่มความยุ่งยากมากมายให้กับแอปของตน

Wix Code เพิ่มสิ่งเหล่านี้ลงในเครื่องมือสร้างเว็บที่มีอยู่โดยไม่มีความยุ่งยากซับซ้อน มีเทมเพลตหลายแบบให้คุณสร้างและจัดการฐานข้อมูล แบบฟอร์ม และยังให้คุณเพิ่มโค้ดจาวาสคริปต์ในไซต์ของคุณได้ เหนือสิ่งอื่นใด คุณสามารถใช้คุณลักษณะเพจแบบไดนามิกเพื่อเติมเนื้อหาจากฐานข้อมูลได้อย่างรวดเร็ว ทำให้เป็นเหมือนระบบจัดการเนื้อหามากกว่าตัวสร้างเว็บไซต์

ในตัวอย่างด้านล่าง เราจะสร้างบล็อก Make Tech Easier แบบง่ายๆ และเพิ่มคุณลักษณะแบบไดนามิกจาก Wix Code

ตั้งค่าเว็บไซต์ใหม่ด้วย Wix

สมมติว่าคุณยังใหม่กับ Wix คุณสามารถเริ่มต้นได้โดยลงชื่อสมัครใช้บัญชีกับ Wix เมื่อคุณสร้างบัญชีแล้ว คุณจะได้รับแจ้งให้สร้างเว็บไซต์ของคุณ

ถัดไปจะขอให้คุณเลือกประเภทของเว็บไซต์ที่คุณต้องการสร้าง เนื่องจากฉันกำลังจำลองบล็อก Make Tech Easier ฉันจึงเลือกตัวเลือก "บล็อก"

หน้าจอถัดไปจะถามว่าคุณต้องการสร้างเว็บไซต์ของคุณอย่างไร

Wix ADI ใช้ประโยชน์จากปัญญาประดิษฐ์เพื่อสร้างเว็บไซต์ให้คุณโดยอัตโนมัติ หากคุณต้องการใช้งานด้วยตนเอง ให้เลือกวิธี Wix Editor (หากต้องการเข้าถึงรหัส Wix คุณต้องใช้รหัสหลัง หากคุณเลือก Wix ADI คุณยังสามารถเปลี่ยนเป็นโหมดตัวแก้ไขได้ในภายหลัง)

สำหรับตัวอย่างนี้ ฉันใช้ Wix Editor เนื่องจากฉันต้องการควบคุมรูปลักษณ์ของไซต์ได้อย่างเต็มที่ จากตรงนั้น คุณสามารถเริ่มต้นด้วยเทมเพลต (มีเป็นพันตัว)

เพื่อให้ง่าย ฉันเริ่มต้นด้วยเทมเพลตเปล่าที่มีเลย์เอาต์แบบคลาสสิก ภาพต่อไปนี้มีลักษณะอย่างไร

การเข้าถึงรหัส Wix

หากต้องการเข้าถึงรหัส Wix ให้ไปที่ "เครื่องมือ" และทำเครื่องหมายที่ตัวเลือก "เครื่องมือสำหรับนักพัฒนา"

ตอนนี้คุณจะเห็นคอลัมน์ "โครงสร้างไซต์" ใหม่ นี่คือที่ที่คุณสามารถเข้าถึงคุณลักษณะ Wix Code ทั้งหมดได้

การสร้างฐานข้อมูลเพื่อจัดเก็บโพสต์

หนึ่งในคุณสมบัติที่ยอดเยี่ยมของ Wix Code คือฟังก์ชันฐานข้อมูลที่ให้คุณสร้างฐานข้อมูล (aka Collection) และจัดเก็บข้อมูลในนั้น สำหรับบล็อก เราจะต้องสร้างฐานข้อมูลเพื่อจัดเก็บโพสต์ทั้งหมดของเรา ในส่วนฐานข้อมูล ให้คลิก "เพิ่มคอลเล็กชันใหม่" ตั้งชื่อคอลเลกชันของคุณและระบุวัตถุประสงค์ มีฐานข้อมูลหลายประเภทที่คุณสามารถเลือกได้ ตั้งแต่เนื้อหาที่ผู้ใช้สร้างขึ้น การส่งสมาชิก ข้อมูลส่วนตัว ฯลฯ

เมื่อสร้างคอลเลกชันแล้ว คุณสามารถเริ่มเพิ่มฟิลด์และข้อมูลลงในคอลเลกชั่นได้

สิ่งที่เราสร้างคือฐานข้อมูล Posts ที่มีชื่อ เนื้อหา วันที่เผยแพร่ และแง่มุมต่างๆ ของบล็อกโพสต์ ต่อไป เราต้องเติมเนื้อหาฐานข้อมูลลงในไซต์หลัก

ไดนามิกเพจ

เพจไดนามิกเป็นเหมือนหน้าเทมเพลตที่คุณสามารถสร้างหนึ่งการออกแบบและเชื่อมต่อกับฐานข้อมูล และมันจะเติมรายการทั้งหมดในฐานข้อมูลของคุณโดยอัตโนมัติไปยังหน้าแรกภายใต้ URL ของพวกเขาเอง ตัวอย่างเช่น เรามีหกโพสต์ในฐานข้อมูล ด้วยหน้าไดนามิกหน้าเดียว เราสามารถทำให้มันแสดงโพสต์ทั้งหมดในไซต์หลักได้ วิธีนี้ช่วยให้คุณไม่ต้องพยายามสร้างหน้าเดียวสำหรับแต่ละโพสต์ด้วยตนเอง หน้าไดนามิกในรหัส Wix มีสองประเภทหลัก – ประเภทหนึ่งสำหรับแสดงรายการเดียว ในขณะที่อีกประเภทสำหรับประเภท (คอลเลกชันของรายการที่คล้ายคลึงกันในรายการ)

ข้อมูลต่อไปนี้แสดงวิธีการสร้างเพจแบบไดนามิกและเชื่อมโยงไปยังเว็บไซต์

1. บนแถบเครื่องมือแบบลอย ให้คลิกที่ไอคอนแรกและเลือก “ไดนามิกเพจ” คลิกปุ่ม “เพิ่มในเว็บไซต์”

2. เลือก “หน้ารายการ” จากป๊อปอัป

3. ใน URL เลือกฟิลด์ (ในฐานข้อมูล) ที่คุณต้องการใช้สำหรับ URL ในกรณีนี้ ฉันตั้งค่า “title” เป็น URL

4. ถัดไป ออกแบบหน้าและเพิ่มในฟิลด์จากฐานข้อมูล ด้วยทุกองค์ประกอบที่คุณลากไปที่หน้า คุณสามารถคลิกปุ่ม "เชื่อมต่อกับข้อมูล" เพื่อเชื่อมโยงกับฟิลด์จากฐานข้อมูล ตัวอย่างเช่น ฉันลากองค์ประกอบ "Header 1" ไปที่หน้าและเชื่อมโยงกับฟิลด์ "Title" ในฐานข้อมูล Posts

และฉันก็ทำเช่นเดียวกันกับรูปภาพเด่น เนื้อหาโพสต์ ฯลฯ

5. เมื่อคุณออกแบบเสร็จแล้ว คุณสามารถดูตัวอย่างและดูว่าหน้าตาเป็นอย่างไรที่ส่วนหน้า

6. ขั้นตอนต่อไปคือการเชื่อมโยงไดนามิกเพจจากโฮมเพจ โหลดโฮมเพจและเพิ่มวิดเจ็ต Repeater จากส่วน "รายการและกริด" เชื่อมต่อวิดเจ็ตกับฐานข้อมูล Posts และเชื่อมโยงแต่ละองค์ประกอบในวิดเจ็ตกับฟิลด์ในฐานข้อมูล ในส่วน "ลิงก์เชื่อมต่อกับ" ให้เลื่อนลงและเลือก "โพสต์" ในส่วนไดนามิกเพจ

แค่นั้นแหละ.

สิ่งที่คุณเห็นคือเราได้สร้างเพจไดนามิกเพียงเพจเดียวเท่านั้น และเพจนั้นจะสร้างเพจทั้งหมดสำหรับแต่ละรายการในฐานข้อมูลโดยอัตโนมัติ คุณสามารถทำสิ่งเดียวกันเพื่อเพิ่มหน้าไดนามิกของหมวดหมู่ได้เช่นกัน

การเพิ่มจาวาสคริปต์ในหน้า

หากคุณเป็นผู้เขียนโค้ดจาวาสคริปต์ที่เชี่ยวชาญ คุณสามารถเพิ่มจาวาสคริปต์ให้กับแต่ละคุณลักษณะเพิ่มเติมในแต่ละหน้าได้ ตัวอย่างเช่น หากคุณได้เพิ่มแบบฟอร์มผู้ใช้ในเพจของคุณ คุณสามารถใช้จาวาสคริปต์เพื่อตรวจสอบฟิลด์ของฟอร์มก่อนส่งได้

หมายเหตุ :ในการเพิ่มโค้ดจาวาสคริปต์ในหน้า ให้ไปที่หน้าใดก็ได้ (หรือหน้าที่คุณต้องการให้รหัสปรากฏ) แล้วคลิกปุ่ม "รหัสหน้า" ที่ด้านล่างของโค้ด หน้าต่างจะปรากฏขึ้น และคุณสามารถเพิ่มรหัสของคุณที่นั่นได้

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();
 
        });
});

การดำเนินการนี้จะตรวจสอบที่อยู่อีเมลและแสดงข้อความแสดงข้อผิดพลาดหากอีเมลไม่ถูกต้อง

มีหลายสิ่งที่คุณสามารถทำได้ด้วย Javascript ดูตัวอย่างที่นี่สำหรับข้อมูลเพิ่มเติม

API ภายนอก

นี่เป็นขั้นตอนเดียวที่อาจซับซ้อนกว่านี้ ตอนนี้ Wix Code ผสานรวมกับ API ภายนอกแล้ว คุณจึงสามารถเชื่อมต่อกับบริการของบุคคลที่สามได้อย่างง่ายดาย เช่น Amazon, Dropbox, Google Drive, Twitter, IFTTT, Zapier เป็นต้น ฉันจะไม่ลงรายละเอียดที่นี่ แต่ถ้าคุณสนใจ สามารถตรวจสอบเอกสาร API ของพวกเขาได้

บทสรุป

หากคุณไม่เชี่ยวชาญด้านเทคนิคหรือนักพัฒนา การสร้างเว็บไซต์ของคุณเองอาจเป็นงานที่น่าเบื่อหน่าย Wix ทำงานได้ดีในการสร้างเว็บไซต์ให้เป็นเรื่องง่าย ด้วยรหัส Wix มันก้าวไปอีกขั้นและให้คุณควบคุมไซต์ของคุณได้มากมาย ตอนนี้คุณมีสิทธิ์เข้าถึงเครื่องมือสำหรับนักพัฒนาเว็บที่ซับซ้อนและควบคุมวิธีการทำงานของเว็บไซต์ได้อย่างสมบูรณ์ ทั้งหมดนี้ทำได้ด้วยการคลิก ลากและวางง่ายๆ โดยไม่ต้องมีประสบการณ์เขียนโค้ด

ความรุ่งโรจน์ของ Wix สำหรับการสร้างเครื่องมือที่ใช้งานง่ายซึ่งจะช่วยแก้ปัญหามากมาย

ลองใช้รหัส Wix แล้วบอกเราว่าคุณคิดอย่างไรกับมัน

รหัส Wix