UI/UX และ Frontend สำหรับ Metadata Editor ของธนาคารโลก
ยกระดับเครื่องมือเมทาดาทาโอเพนซอร์สด้วย Vue.js 3, Nuxt 3 และ Vuetify 3
ลูกค้า
ธนาคารโลก (Development Data Group)

Metadata Editor คือเว็บแอปพลิเคชันโอเพนซอร์สของ Development Data Group (DECDG) ธนาคารโลก ใช้โดยเจ้าหน้าที่ธนาคารโลก สำนักงานสถิติแห่งชาติ และองค์กรพันธมิตร เพื่อจัดทำเอกสาร กำหนดมาตรฐาน และแบ่งปันชุดข้อมูล ตามมาตรฐานเมทาดาทาสากล Outsourcify เป็นผู้นำงานปรับปรุงครั้งใหญ่ — รีดีไซน์ภาพรวมทั้งหมด งาน UI/UX ตั้งแต่ wireframe ถึงหน้าจอจริง และ frontend ที่สร้างใหม่บน Vue.js 3 / Nuxt 3 กับ Vuetify 3 บนแบ็กเอนด์ที่ย้ายจาก CodeIgniter สู่ Laravel
ผลลัพธ์
ความท้าทาย
เมทาดาทาสถิติมีความหนาแน่น โครงสร้างลึก และแต่ละประเภทข้อมูลอยู่ภายใต้ มาตรฐานสากลคนละฉบับ — DDI Codebook สำหรับข้อมูลสำรวจ ISO 19139 สำหรับข้อมูลภูมิสารสนเทศ Dublin Core สำหรับเอกสาร IPTC สำหรับสื่อ — แต่ผู้กรอกข้อมูลคือนักสถิติ ไม่ใช่ผู้เชี่ยวชาญด้านอินเทอร์เฟซ เครื่องมือนี้ต้องทำให้ฟอร์มทางเทคนิคที่ยาวใช้งานได้ง่าย ปรับอินเทอร์เฟซ ตามข้อมูล 7 ประเภท แยกวิเคราะห์ไฟล์ข้อมูลจริง และเชื่อมเข้ากับระบบ เผยแพร่เดิมของธนาคารโลก (เครื่องมือ IHSN, Nesstar, แคตตาล็อก NADA) — ทั้งหมดนี้ขณะที่โค้ดเบสเก่ากำลังถูกแทนที่
ทางออก
เราออกแบบและพัฒนาอินเทอร์เฟซแก้ไขแบบฟอร์มไดนามิก จัดเป็นส่วนและส่วนย่อย ที่สะท้อนแต่ละมาตรฐาน: DDI Codebook 2.5 สำหรับไมโครดาต้าจากการสำรวจ โครงสร้างแบบ SDMX สำหรับตัวชี้วัดและอนุกรมเวลา ISO 19139 สำหรับข้อมูล ภูมิสารสนเทศ Dublin Core สำหรับเอกสาร IPTC สำหรับภาพและวิดีโอ รวมถึงตารางสถิติและสคริปต์งานวิจัยที่ทำซ้ำได้ งานจัดทำเอกสารจัดระเบียบ เป็นโปรเจกต์ที่จัดกลุ่มเป็นคอลเลกชันซ้อนชั้น พร้อมการค้นหาแบบ facet ตามประเภท เจ้าของ และโครงสร้างคอลเลกชัน และการแชร์ตามบทบาท (ผู้ชม ผู้แก้ไข ผู้ดูแล) ตัวแยกวิเคราะห์ไฟล์สถิตินำเข้า CSV, Stata และ SPSS แล้วดึงรายการตัวแปร ป้ายกำกับ และค่าสถิติโดยอัตโนมัติ ป้อนเข้าสู่ ตัวแก้ไขตัวแปรแบบ inline พร้อมกลุ่มตัวแปรไดนามิก การนำเข้า/ส่งออก เมทาดาทาผ่าน DDI XML และ JSON เพื่อความต่อเนื่องกับเครื่องมือ IHSN เดิม และเวิร์กโฟลว์เผยแพร่ส่งแพ็กเกจที่เสร็จสมบูรณ์ตรงสู่แคตตาล็อก NADA ผ่าน REST ส่วนพอร์ทัลผู้ดูแลครอบคลุมแดชบอร์ดวิเคราะห์ การจัดการผู้ใช้และบทบาท (Laravel Permission RBAC, โทเคน Sanctum, OTP ทางอีเมลสำหรับผู้ดูแล) คลังคำศัพท์ควบคุม และตัวจัดการคำแปล ระบบส่งมอบผ่าน GitHub ส่วนตัวพร้อม Docker สู่คลาวด์ของธนาคารโลก
เครื่องมือ
Vue.js 3 / Nuxt 3, Vuetify 3, Laravel + Sanctum, MySQL, Docker, Figma
เครื่องมือ
Vue.js 3 / Nuxt 3, Vuetify 3, Laravel + Sanctum, MySQL, Docker, Figma
ระยะเวลา
2 เดือน
สมาชิกทีมที่เกี่ยวข้อง
Kwanruedee Schneiderกรรมการผู้จัดการ ผู้ก่อตั้ง และ CEO
Bennyนักออกแบบ UX/UI
Khomสถาปนิกซอฟต์แวร์และหัวหน้าทีมนักพัฒนาเว็บ
Yingนักพัฒนาเว็บไซต์ WordPress
Benjaminผู้จัดการโครงการและนักพัฒนาเว็บฟูลสแต็ก
Louisonผู้จัดการโครงการและนักพัฒนาเว็บฟูลสแต็ก
Guyนักพัฒนาเว็บไซต์ WordPress
Nickนักพัฒนาเว็บฟูลสแต็ก
Gwanนักพัฒนาเว็บฟูลสแต็ก
Bestนักพัฒนาเว็บส่วนหน้า
โครงการนี้อยู่ตรงไหนในประวัติของเรา
- 2019
Fortify Rights (สิงคโปร์)UX/UI และเว็บไซต์ WordPress สำหรับ NGO - 2020
MIMU (สหประชาชาติ / เมียนมาร์)โครงสร้างพื้นฐานข้อมูลระดับองค์กรและระบบเวิร์กโฟลว์ที่มีขั้นตรวจสอบ
2020วีแคปวีแคป- 2023
เสรีภาพอินเทอร์เน็ตที่มากขึ้นเสรีภาพอินเทอร์เน็ตที่มากขึ้น
2023ศูนย์ยุติธรรมโลกศูนย์ยุติธรรมโลก- 2024
ธนาคารโลก (Development Data Group)UI/UX และ Frontend สำหรับ Metadata Editor ของธนาคารโลกคุณอยู่ที่นี่
ติดต่อเรา
มาหาทางออกที่ใช่สำหรับธุรกิจของคุณ
เราร่วมงานกับทีมผลิตภัณฑ์และผู้ก่อตั้ง เพื่อออกแบบ สร้าง และส่งมอบซอฟต์แวร์ที่ใช้งานได้ยั่งยืน
คุยกับทีมของเรา