สร้าง Web App ได้ง่ายด้วย Wix Code

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

เรื่องการสร้างเว็บไซต์ หากคุณเป็นนักพัฒนา สามารถใช้วิธี DIY เขียนโค้ดและโฮสต์ทุกอย่างเอง หากคุณเป็น End-user/Consumer เหมือนส่วนใหญ่ ใช้ Web Builder Software สร้างเว็บไซต์สวยงามด้วยคลิกเมาส์เพียงไม่กี่ครั้ง

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

หากสร้าง Web App หรือ Dynamic Website จะต้องใช้ Tech Jargon ที่ซับซ้อน เช่น Databases, Forms, และ JavaScripts เพื่อสร้างเว็บไซต์โต้ตอบ Web Builders ส่วนใหญ่ไม่ให้เครื่องมือแบบนี้ เพราะเพิ่มความซับซ้อนมาก

Wix Code เพิ่มสิ่งเหล่านี้เข้าไปในเครื่องมือสร้างเว็บที่มีอยู่แล้ว โดยไม่มีความซับซ้อน เสนอเทมเพลตหลายแบบสำหรับสร้างและจัดการ Databases, Forms และอนุญาตเพิ่ม JavaScript Code ลงในไซต์ สำคัญที่สุด สามารถใช้ฟีเจอร์ Dynamic Pages เพื่อ populate เนื้อหาจาก Database เร็ว ทำให้มันคล้าย CMS มากกว่า Web Builder

ในตัวอย่างด้านล่าง เราจะสร้างบล็อก Make Tech Easier เรียบง่าย และเพิ่มฟีเจอร์ Dynamic จาก Wix Code

ตั้งค่าไซต์ใหม่กับ Wix

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

หน้าจอถัดไปจะถามว่าต้องการสร้างเว็บไซต์แบบไหน เนื่องจากผมเลียนแบบบล็อก Make Tech Easier เลือก "Blog"

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

Wix ADI ใช้ AI สร้างไซต์อัตโนมัติ หากชอบแบบ Manual ให้เลือก Wix Editor Method (เพื่อเข้าถึง Wix Code ต้องใช้วิธีนี้ หากเลือก Wix ADI ยังสามารถสลับไป Editor Mode ภายหลังได้)

ตัวอย่างนี้ใช้ Wix Editor เพราะต้องการควบคุม Look and Feel ของไซต์เต็มที่ จากนั้นเริ่มจาก Template (มีพันๆ แบบ)

เพื่อทำให้ง่าย เริ่มจาก Blank Template แบบ Classic Layout ภาพต่อไปแสดงลักษณะ

เข้าถึง Wix Code

เพื่อเข้าถึง Wix Code ไปที่ "Tools" และติ๊กตัวเลือก "Developer Tools"

ตอนนี้จะเห็นคอลัมน์ "Site Structure" ใหม่ นี่คือที่เข้าถึงฟีเจอร์ Wix Code ทั้งหมด

สร้าง Databases เพื่อจัดเก็บโพสต์

ฟีเจอร์ยอดเยี่ยมของ Wix Code คือฟังก์ชัน Database ที่สร้าง Databases (เรียกว่า Collection) และจัดเก็บข้อมูล สำหรับบล็อก ต้องสร้าง Database เก็บโพสต์ทั้งหมด ในส่วน Database คลิก "Add new collection" ตั้งชื่อ Collection และระบุวัตถุประสงค์ มี Database Types หลายแบบเลือกได้ ตั้งแต่ User Generated Content, Member Submission, Private Data ฯลฯ

เมื่อสร้าง Collection แล้ว สามารถเริ่มเพิ่ม Fields และ Data เข้าไปได้

สิ่งที่สร้างคือ Posts Database ที่มี Title, Content, Published Date และด้านต่างๆ ของบล็อกโพสต์ ต่อไป ต้องนำเนื้อหา Database ไปแสดงที่หน้าหลัก

Dynamic Pages

Dynamic Pages คล้าย Template Page ที่สร้างดีไซน์หนึ่งแบบ และเชื่อมต่อกับ Database จะ Auto-populate รายการทั้งหมดใน Database ไปหน้าหลักภายใต้ URLs ของตัวเอง เช่น มี 6 โพสต์ใน Database ด้วย Dynamic Page หน้าเดียว สามารถแสดงโพสต์ทั้งหมดในไซต์หลักได้ ประหยัดความพยายามสร้างหน้าแยกสำหรับแต่ละโพสต์ มี Dynamic Pages 2 แบบหลักใน Wix Code – หนึ่งสำหรับแสดง Item เดียว อีกหนึ่งสำหรับ Category (กลุ่มไอเทมคล้ายกันในรายการ)

ขั้นตอนสร้าง Dynamic Pages และเชื่อมต่อกับไซต์:

1. บน Floating Toolbar คลิกไอคอนแรก และเลือก "Dynamic Pages" คลิก "Add to site"
2. เลือก "Item Page" จากป๊อปอัพ
3. ใน URL เลือก Field (ใน Database) ที่ต้องการใช้เป็น URL ในกรณีนี้ตั้ง "title" เป็น URL
4. ต่อไป ออกแบบหน้าและเพิ่ม Fields จาก Database ด้วยทุก Element ที่ลากไปหน้า คลิกปุ่ม "Connect to Data" เพื่อลิงก์กับ Field จาก Database เช่น ผมลาก Element "Header 1" ไปหน้า และลิงก์กับ Field "Title" ใน Posts Database
5. ทำเหมือนกันกับ Featured Image, Post Content ฯลฯ
6. เมื่อออกแบบเสร็จ สามารถ Preview ดูลักษณะ Front-end ได้
7. ขั้นตอนต่อไป: ลิงก์ Dynamic Page จาก Home Page โหลด Home Page เพิ่ม Repeater Widget จาก "Lists and Grids" เชื่อม Widget กับ Posts Database และลิงก์แต่ละ Element ใน Widget กับ Fields ใน Database ภายใต้ "Link connects to" เลื่อนลงและเลือก "Posts" ในส่วน Dynamic Pages

แค่นี้เสร็จแล้ว

สิ่งที่เห็นคือ สร้าง Dynamic Page เพียงหน้าเดียว และมันจะสร้างหน้าทั้งหมดสำหรับแต่ละ Item ใน Database อัตโนมัติ สามารถทำเหมือนกันเพื่อเพิ่ม Category Dynamic Page ได้

เพิ่ม JavaScript ลงในหน้า

หากคุณเป็น JavaScript Coder ที่เก่ง สามารถเพิ่ม JavaScript ให้แต่ละฟีเจอร์เพิ่มเติมบนแต่ละหน้า เช่น หากเพิ่ม User Form ไปหน้า สามารถใช้ JavaScript Validate ฟิลด์ฟอร์มก่อน Submit

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

1. สร้างฟอร์มง่ายๆ ที่เก็บ First Name, Last Name และ Email จากผู้ใช้ สำหรับฟอร์มนี้ ต้องการ Validate Email และให้แน่ใจว่า Field "Confirm Email" เหมือนกับ Field "Email"
2. เพิ่มโค้ดต่อไปนี้ในส่วน "Page Code":

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

โค้ดนี้จะ Validate Email และแสดงข้อความผิดพลาดหาก Email ไม่ถูกต้อง

มีอะไรทำได้มากกับ JavaScript ดูตัวอย่างเพิ่มเติมที่นี่

External APIs

นี่คือขั้นตอนเดียวที่อาจซับซ้อนขึ้น Wix Code ตอนนี้รวมกับ External API แล้ว สามารถเชื่อมต่อ Third-party Services เช่น Amazon, Dropbox, Google Drive, Twitter, IFTTT, Zapier ฯลฯ ได้ง่าย ไปรายละเอียดที่นี่ไม่ได้ แต่หากสนใจ ตรวจสอบเอกสาร API ของพวกเขา

สรุป

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

ขอแสดงความนับถือ Wix ที่สร้างเครื่องมือง่ายๆ ที่แก้ปัญหาหลายอย่าง

ลอง Wix Code และบอกเราว่าคิดอย่างไร

Wix Code