เว็บแอปพลิเคชันและแพลตฟอร์มธีม

Smily Website Platform

Smily ต้องการวิธีบริหารและพัฒนาเว็บไซต์ลูกค้าหลายร้อยแห่ง โดยไม่ต้องดูแลแต่ละแห่งเป็นระบบแยกจากกัน

Okzea ช่วยเปลี่ยนโมเดลนั้นให้เป็นแพลตฟอร์มเว็บไซต์ร่วมแบบมีเวอร์ชัน คือระบบแกนกลางหนึ่งเดียว ดีไซน์เฉพาะลูกค้าที่นำกลับมาใช้ได้ การปรับแต่งรายเว็บไซต์แบบมีโครงสร้าง การอัปเกรดที่ปลอดภัยขึ้น และเครื่องมือที่สร้างมาเพื่อรองรับการปล่อยเวอร์ชันอย่างต่อเนื่อง

ผลลัพธ์คือแพลตฟอร์มที่ให้บริการเว็บไซต์ที่ใช้งานอยู่มากกว่า 300 แห่ง โดยมีธีมออกเวอร์ชันใหม่มากกว่า 190 ครั้งนับตั้งแต่ปี 2019

ดูรายละเอียดโปรเจ็กต์

ภาพรวม

Smily (เดิมชื่อ BookingSync) ให้บริการเว็บไซต์จองตรงแบบโฮสต์แก่ผู้จัดการที่พักตากอากาศ โดยเชื่อมต่อกับซอฟต์แวร์บริหารที่พักของพวกเขา

Okzea ทำงานในฐานะพันธมิตรด้านเทคนิคแบบฝังตัวในทีม Experience ของ Smily ตั้งแต่ปี 2017 ถึง 2026 ช่วงแรกงานมุ่งเน้นที่สถาปัตยกรรมธีม ดีไซน์เฉพาะลูกค้า และประสบการณ์การแก้ไขเว็บไซต์ ก่อนจะค่อยๆ ขยายไปทั่วทั้งแพลตฟอร์มเว็บไซต์ รวมถึงฟีเจอร์ผลิตภัณฑ์ การบำรุงรักษา เครื่องมือภายใน และการตัดสินใจทางเทคนิค

เมื่อเวลาผ่านไป Okzea มีบทบาทสำคัญมากขึ้นเรื่อยๆ ในการรับผิดชอบทางเทคนิคและการพัฒนาแพลตฟอร์มเว็บไซต์

รายละเอียดโปรเจ็กต์

ความท้าทาย

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

แพลตฟอร์มร่วมโดยไม่สูญเสียการปรับแต่ง

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

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

ธีมแกนกลางให้เลย์เอาต์ คอมโพเนนต์ snippet สคริปต์ สไตล์ และคำแปลที่ใช้ร่วมกันทุกเว็บไซต์ variant สามารถเปลี่ยน ตัดออก หรือทับบางส่วนของแกนกลางนั้นได้ ขณะที่ตัวเลือกแบบมีโครงสร้างและปลั๊กอินเป็นชั้นสุดท้ายของการปรับแต่งสำหรับแต่ละเว็บไซต์
ทุกตัวเลือกที่แก้ไขได้ถูกนิยามด้วย JSON Schema ตัว builder สร้างหน้าจอแก้ไขจากสคีมานั้นและตรวจสอบทุกการเปลี่ยนแปลงกับสคีมา
จุดเสียบปลั๊กอิน 25 จุดต่อธีม ให้ทีมซัพพอร์ตแทรกแท็กติดตาม สไตล์ หรือมาร์กอัปในตำแหน่งที่ต้องการได้โดยไม่ต้องแก้ไขเทมเพลต
แต่ละเวอร์ชันถูก build ครั้งเดียวโดย CI กำหนดหมายเลขเวอร์ชัน และเผยแพร่เป็นแพ็กเกจ ทุกเว็บไซต์ได้รับอินสแตนซ์ที่ติดตั้งจากเวอร์ชันนั้น ขณะที่ตัวเลือกและปลั๊กอินของตัวเองยังแยกอยู่ต่างหาก
ระหว่างการอัปเกรด แพลตฟอร์มจะนำเวอร์ชันใหม่มาใช้และรวมการตั้งค่าเฉพาะเว็บไซต์เข้ากับโครงสร้างที่อัปเดตแล้ว เซ็กชัน เลย์เอาต์ และค่าที่มีอยู่ถูกรักษาไว้ ขณะที่ฟิลด์ใหม่ที่จำเป็นถูกเพิ่มเข้ามาอย่างปลอดภัย

ดีไซน์เฉพาะลูกค้าโดยไม่ต้องคัดลอกโค้ด

ตั้งแต่ธีม v3 ในปี 2022 ดีไซน์เฉพาะลูกค้าถูกสร้างเป็นธีมลูกที่ซ้อนอยู่บนแกนกลางร่วมเพียงหนึ่งเดียว

ธีมลูกมีเฉพาะไฟล์ที่เปลี่ยนแปลง เช่น สไตล์ชีต คอมโพเนนต์ หรือเทมเพลต ส่วนที่เหลือทั้งหมดสืบทอดมาจากแกนกลาง
นั่นหมายความว่าดีไซน์เฉพาะลูกค้าไม่ต้องคัดลอกทั้งธีมอีกต่อไป การแก้ไขและการปรับปรุงร่วมกันยังอยู่ในแกนกลางและส่งถึงธีมลูกทุกตัวในการปล่อยเวอร์ชันถัดไป
ดีไซน์เฉพาะลูกค้าราว 27 แบบถูกสร้างขึ้นด้วยโมเดลนี้จนถึงตอนนี้

เก้าปีแห่งวิวัฒนาการของแพลตฟอร์ม

2017
เข้าร่วมทีม Experience และรับช่วงธีมรุ่นแรก ส่งมอบดีไซน์เฉพาะสำหรับลูกค้ารายแรก ๆ พร้อมปรับปรุงหน้าแรก ปฏิทิน และการค้นหา
2018
ปรับฐานรากของธีมให้สะอาด แทนที่ไลบรารี mixin ของ Sass รุ่นเก่าด้วยคอมโพเนนต์ Bootstrap ขณะที่งานดีไซน์เฉพาะยังคงเดินหน้า
2019
ธีม v2: สร้างธีมหลักใหม่บน Bootstrap 4 และขยายเป็นครอบครัวธีมสี่แบบที่ส่งมอบเป็นแพ็กเกจแบบมีเวอร์ชัน
2022
ธีม v3: เขียนใหม่โดยไม่ใช้ jQuery ด้วย web components ค้นหาแบบ JSON แผนที่โต้ตอบ แชร์รายการโปรด หน้าแคมเปญ และนโยบายการยกเลิก
2023
ขยายแพลตฟอร์มด้วยระบบจัดการเซ็กชัน แอตทริบิวต์กำหนดเอง คลังสื่อ ปลั๊กอิน ข้อเสนอพิเศษและราคาขีดฆ่า GA4 พร้อม consent mode แผนที่ที่พัก และรีวิวจากทุกแหล่ง
2026
ธีม v4: ระบบดีไซน์บน Tailwind พร้อมคอมโพเนนต์ที่ขับเคลื่อนด้วยสคีมา พรีเซ็ต และจุดเชื่อมของ editor ที่โยงหน้าที่เรนเดอร์กลับไปยังตัวเลือกที่สร้างมัน

Website builder แบบสด ขับเคลื่อนด้วยสคีมา

ระยะล่าสุดของแพลตฟอร์มคือ editor ใหม่สำหรับเว็บไซต์ธีม v4 ที่รวมงานเกี่ยวกับธีมไว้ในอินเทอร์เฟซเดียวควบคู่กับพรีวิวสด

หน้าเว็บ เซ็กชัน เมนูนำทาง เนื้อหาบล็อก คำแปล สื่อ และปลั๊กอิน จัดการได้ทั้งหมดจากประสบการณ์การแก้ไขเดียวกัน
editor แบบ React ใช้ฟิลด์ที่ขับเคลื่อนด้วยสคีมาและลิ้นชักเซ็กชัน โดยการเปลี่ยนแปลงสะท้อนในพรีวิวผ่านสะพานส่งข้อความแทนการโหลดหน้าใหม่
หน้าเว็บประกอบจากคอมโพเนนต์และพรีเซ็ต ทำให้ผู้ใช้ทั่วไปเพิ่มเซ็กชันได้อย่างรวดเร็ว ขณะที่ยังมีการควบคุมแบบมีโครงสร้างให้ใช้เมื่อต้องการ
เมนูนำทาง คำแปล และการแก้ไขบล็อกถูกผสานเข้าใน editor โดยตรง ทำให้เนื้อหาแก้ไขได้ตรงจุดที่มันปรากฏ
ผู้ช่วย AI เข้าใจโครงสร้างของธีม สามารถอธิบายตัวเลือก แก้ไขเฉพาะจุด ออกแบบเซ็กชัน สร้าง landing page ทั้งหน้า เขียนคำโฆษณา หรือแปลเนื้อหา
ตัวตรวจสอบดีไซน์เช็กทุกข้อเสนอของ AI กับ class manifest และพาเลตต์จริงของธีม เพื่อให้หน้าที่สร้างขึ้นใช้เฉพาะสไตล์ที่มีอยู่ในธีม

เครื่องมือสำหรับทีมผลิตภัณฑ์ขนาดเล็ก

การรองรับเว็บไซต์หลายร้อยแห่งต้องอาศัยเครื่องมือที่ลดงานซ้ำซากและทำให้การพัฒนาและการปล่อยเวอร์ชันจัดการได้ง่ายขึ้น

เครื่องมือเดสก์ท็อป Electron ใช้ build ธีม ซิงก์ไปยังเว็บไซต์ใดก็ได้ผ่าน API ของแพลตฟอร์ม จัดการ environment และเปรียบเทียบไฟล์
ไปป์ไลน์ build หลายธีม ยูนิตเทสต์และเทสต์ end-to-end อัตโนมัติ และ mock server ทำให้เรนเดอร์ธีมในเครื่องได้โดยไม่ต้องรันแพลตฟอร์มทั้งหมด
การปล่อยเวอร์ชันอัตโนมัติสร้าง changelog และการแจ้งเตือนทาง Slack ขณะที่การ deploy ผ่าน CI แยกตามธีมป้องกันไม่ให้การปล่อยธีมหนึ่งเขียนทับอีกธีม
ระบบจัดการเซ็กชันสำหรับ editor v3 ถูกสร้างขึ้นทั้งหมดรอบ JSON Schema โดยไม่ต้องแก้ไข backend
คอนโซลปฏิบัติการภายในถูกสร้างใหม่เป็น React SPA บน JSON API ให้ความคืบหน้าการติดตั้งธีม สถานะงาน บันทึกตรวจสอบ และทราฟฟิกรายเว็บไซต์

SEO และประสิทธิภาพในระดับแพลตฟอร์ม

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

การสร้าง sitemap และ hreflang ใหม่ลบ URL ที่ตายหรือซ้ำกว่า 900 รายการบนเว็บไซต์เดียว พร้อม canonical URL เฉพาะสำหรับหน้า 404 และกฎ robots สำหรับการค้นหาแบบ facet
เพิ่ม structured data สำหรับที่พัก รีวิว และหน้ากำหนดเอง พร้อมภาพพรีวิวสำหรับแชร์บนโซเชียลและหัวข้อที่แปลตามภาษา
โปรไฟเลอร์การเรนเดอร์ Liquid และ memoization ของ drop ระบุและกำจัดจุดคอขวดที่กินเวลาหลายสิบมิลลิวินาทีต่อการเรียก บนหน้าที่อาจใช้เวลาหลายวินาทีเมื่อโหลดหนัก
แพลตฟอร์มยังนำ skeleton screen การกำหนดเวอร์ชัน asset การส่งภาพ AVIF ผ่าน CDN และการโหลดสื่อแบบ lazy มาใช้
งาน analytics และการติดตามรวมถึง GA4 พร้อม consent mode การติดตามการซื้อผ่าน Meta Pixel และการตรวจจับบอตสำหรับวิดเจ็ตคุกกี้

ผลลัพธ์

ความร่วมมือด้านผลิตภัณฑ์ระยะยาว: 9 ปี
เว็บไซต์ลูกค้าที่ใช้งานอยู่: 300+
ธีมที่ปล่อยตั้งแต่ปี 2019: 190+
ธีมรุ่นหลัก: 4
ดีไซน์เฉพาะลูกค้าที่สร้างบนแกนกลางร่วม: 27
ภาษาที่รองรับ: 13

คอมโพเนนต์ร่วม 30 ชิ้น
snippet 43 ชิ้น
เทมเพลตหน้า 17 แบบ
คีย์คำแปลกว่า 1,000 รายการต่อธีม
จุดเสียบปลั๊กอิน 25 จุดต่อธีม

นอกเหนือจากตัวแพลตฟอร์มเอง งานยังรวมถึงการสนับสนุนทีม customer success ทุกวัน และการลงมือย้ายเว็บไซต์ลูกค้าระหว่างธีมแต่ละรุ่น

แกลเลอรี

คำรับรอง

“คุณส่งปัญหาให้เขาแล้ววางมันลงได้เลย”
Okzea ดูแลแพลตฟอร์มเว็บไซต์ของเราที่ Smily ตลอดเก้าปี โดยทำงานฝังตัวอยู่ในทีม Experience ของเรา
การสร้างเว็บไซต์ดี ๆ หนึ่งเว็บไม่ใช่เรื่องยาก แต่การสร้างเว็บไซต์บนระบบจัดการที่พักและ channel manager ที่ห้องว่าง ราคา และการจองต้องซิงก์กันและถูกต้องตลอดเวลา ซับซ้อนขึ้นอย่างรวดเร็ว และการสร้างโค้ดเบสเดียวที่ปรับปรุงเว็บไซต์ 300 แห่งพร้อมกันโดยไม่ทำให้เว็บใดพัง คือส่วนที่ยากที่สุด นั่นคือสิ่งที่ Okzea สร้างขึ้น
ธีมมากกว่า 190 เวอร์ชันส่งมอบตั้งแต่ปี 2017 ดีไซน์เฉพาะ 27 แบบทำงานบนแกนกลางเดียวกันโดยไม่มีโค้ดซ้ำ 13 ภาษา ทุกเวอร์ชันถูกสร้างเพียงครั้งเดียวแล้วปล่อยไปยังเว็บไซต์ของลูกค้าที่ชำระเงินหลายร้อยแห่ง และทีมซัพพอร์ตของเราไม่ต้องใช้สัปดาห์ถัดไปไล่เก็บกวาดปัญหา
เขาเติบโตมากับบทบาทนี้ เริ่มจากงานธีมและดีไซน์ แล้วรับผิดชอบสถาปัตยกรรม เครื่องมือ ไปป์ไลน์การปล่อยเวอร์ชัน งาน SEO และประสิทธิภาพ รวมถึงการย้ายระบบให้ลูกค้า ทีมของเรามีขนาดเล็กตลอดเก้าปีส่วนใหญ่ วิจารณญาณของเขาคือเหตุผลสำคัญที่ทำให้เป็นไปได้
วันที่เขาโชว์ต้นแบบ v4 ให้ผมดู ผมทึ่งมาก คุณแค่คุยกับ AI แล้วมันขับเคลื่อน builder ทั้งหมด ทั้งการตั้งค่า การเพิ่มและลบวิดเจ็ต การเขียนข้อความ และการแปล ผมเคยเห็น Lovable และเครื่องมือสร้างเว็บด้วย AI อื่น ๆ และปัญหาของผมกับทุกตัวคือความรก พวกมันไม่สนใจแนวทางของคุณแล้วโยนงานเก็บกวาดกลับมาให้ Okzea สร้างสิ่งที่อยู่ตรงกลาง ธีมที่เข้มงวดพร้อมกฎจริง และ AI ที่เข้าใจกฎเหล่านั้นแต่ยังสร้างสิ่งใหม่ภายในกรอบได้ ในระดับสเกล การพาสิ่งนี้จากไอเดียไปจนพร้อมใช้งานจริงคือเรื่องยอดเยี่ยม
สิ่งที่ผมอยากบอกใครก็ตามที่คิดจะร่วมงานกับเขา: คุณส่งปัญหาให้เขาแล้ววางมันลงได้เลย เขาบอกว่าจะทำอะไร ลงมือทำ และแจ้งเตือนสิ่งที่กำลังจะผิดพลาดก่อนที่คุณต้องถาม
ในฐานะ CEO และผู้ก่อตั้ง การมีคนแบบนี้ในทีมคือของขวัญ ถ้าคุณอยากได้สิ่งที่สร้างแล้วยังใช้งานได้ในอีกห้าปี ทำงานกับ Okzea
“สิ่งที่เคยใช้เวลาหลายสัปดาห์ เขาทำได้ในไม่กี่ชั่วโมง”
Sebastien คือมีดพกสวิสของงานออกแบบและสร้างเว็บไซต์
ตลอดหลายปีที่ร่วมงานกับ Smily เขาออกแบบเว็บไซต์สวยงามหลายร้อยแห่งให้ผู้จัดการที่พักของเรา
เขาไม่เพียงเป็นวิศวกรที่มีความสามารถ แต่ยังทำงานร่วมกับลูกค้าโดยตรงได้ดีมาก และสร้างสรรค์โซลูชันที่ตอบโจทย์ปัญหาของพวกเขา Sebastien ยังเป็นหนึ่งในตัวอย่างที่ดีที่สุดที่ผมเคยเห็นในการใช้ประโยชน์จาก AI: สิ่งที่เคยใช้เวลาหลายสัปดาห์ เขาทำได้ในไม่กี่ชั่วโมง และเป็นบนเทคโนโลยีที่เขาไม่เคยมีประสบการณ์มากนัก แต่ผลลัพธ์สุดท้ายเหมือนสร้างโดยคนที่มีประสบการณ์หลายปีในเทคโนโลยีนั้น คุณภาพระดับนี้มีเพียงวิศวกรชั้นยอดเท่านั้นที่ทำได้ และ Sebastien คือหนึ่งในนั้นอย่างแน่นอน

โปรเจ็กต์เพิ่มเติม

ผลงานล่าสุดเพิ่มเติม

ดูโปรเจ็กต์ทั้งหมด

Mutualys

แอปพลิเคชัน · เว็บไซต์

Chord Keys

แอปพลิเคชัน

Limitless Dubai

เว็บไซต์