UI/UX และ Frontend สำหรับ Metadata Editor ของธนาคารโลก

ยกระดับเครื่องมือเมทาดาทาโอเพนซอร์สด้วย Vue.js 3, Nuxt 3 และ Vuetify 3

ลูกค้า

ธนาคารโลก (Development Data Group)

ปี

2024

ระยะเวลา

2 เดือน

ความเชี่ยวชาญ

UI designUX designFront-end interfaces

ลูกค้า

ธนาคารโลก (Development Data Group)

UI/UX และ Frontend สำหรับ Metadata Editor ของธนาคารโลก

Metadata Editor คือเว็บแอปพลิเคชันโอเพนซอร์สของ Development Data Group (DECDG) ธนาคารโลก ใช้โดยเจ้าหน้าที่ธนาคารโลก สำนักงานสถิติแห่งชาติ และองค์กรพันธมิตร เพื่อจัดทำเอกสาร กำหนดมาตรฐาน และแบ่งปันชุดข้อมูล ตามมาตรฐานเมทาดาทาสากล Outsourcify เป็นผู้นำงานปรับปรุงครั้งใหญ่ — รีดีไซน์ภาพรวมทั้งหมด งาน UI/UX ตั้งแต่ wireframe ถึงหน้าจอจริง และ frontend ที่สร้างใหม่บน Vue.js 3 / Nuxt 3 กับ Vuetify 3 บนแบ็กเอนด์ที่ย้ายจาก CodeIgniter สู่ Laravel

ผลลัพธ์

7ประเภทข้อมูลที่จัดทำเอกสารได้ แต่ละประเภทตามมาตรฐานของตน
DDI 2.5 / ISO 19139มาตรฐานเมทาดาทาสากลที่รองรับ
NADAเผยแพร่ตรงสู่แคตตาล็อกสาธารณะผ่าน REST
โอเพนซอร์สโค้ดเบสเพื่อชุมชนสถิติทั่วโลก

ความท้าทาย

เมทาดาทาสถิติมีความหนาแน่น โครงสร้างลึก และแต่ละประเภทข้อมูลอยู่ภายใต้ มาตรฐานสากลคนละฉบับ — 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 เดือน

ติดต่อเรา

มาหาทางออกที่ใช่สำหรับธุรกิจของคุณ

เราร่วมงานกับทีมผลิตภัณฑ์และผู้ก่อตั้ง เพื่อออกแบบ สร้าง และส่งมอบซอฟต์แวร์ที่ใช้งานได้ยั่งยืน

คุยกับทีมของเรา