SDK เริ่มต้นและบันทึกข้อมูล (คีย์-ค่า)

1. เมธอด

init (การเริ่มต้น SDK)

⚠️ คุณต้องรอการเรียกใช้เมธอด init เพื่อเริ่มต้นใช้งานฟีเจอร์ทั้งหมดที่ SDK มีให้ โดยไม่ต้องเรียกใช้งาน SDK ก่อนที่เมธอดนี้จะเสร็จสมบูรณ์เสมอ โปรดใช้ฟีเจอร์ของ SDK เมื่อฟังก์ชันนี้เสร็จสมบูรณ์เท่านั้น

ตัวอย่าง Vanilla JS

<script defer>
    document.addEventListener('DOMContentLoaded', function() {
        // เริ่มต้น SDK EliceContents
        var eliceContents = new EliceContents();
        var rootEl = document.getElementById('root') || document.body;

        eliceContents.init().then(function() {
            // เริ่มต้น SDK เสร็จสิ้น
            renderApp();
        }).catch(function() {
            // เริ่มต้น SDK ไม่สำเร็จ
            console.error('เริ่มต้น SDK ไม่สำเร็จ');
        });

        function renderApp() {
            // เนื้อหาของคอมโพเนนต์
            var appContent = '<div>Hello, world!</div>';

            // เพิ่มเนื้อหาคอมโพเนนต์ลงใน root element
            rootEl.innerHTML = appContent;
        }
    });
</script>

ตัวอย่าง React

// main.tsx

import { EliceContents } from '@eliceio/content-sdk';

const eliceContents = new EliceContents();
const rootEl = document.getElementById('root') ?? document.body;
const root = createRoot(rootEl);

eliceContents
    .init()
    .then(() => {
        // เริ่มต้น SDK เสร็จสิ้น
        return root.render(
            <React.StrictMode>
                <App />
            </React.StrictMode>
        );
    })
    .catch(() => {
        // เริ่มต้น SDK ไม่สำเร็จ
    });

ใช้ฟังก์ชัน init() ที่ได้ติดตั้งใน SDK เพื่อเริ่มต้นใช้งาน SDK

1. ฟังก์ชันนี้จะแยกวิเคราะห์สตริงคิวรี่จาก URL โดยใช้ window.location.search เพื่อแยกวิเคราะห์ข้อมูลที่เกี่ยวข้องกับแพลตฟอร์ม Elice เช่น materialId และextToken

   // src/constants.ts
   
   import { EliceContents } from '@eliceio/content-sdk';
   
   export const eliceContents = new EliceContents();
   
   eliceContents.init(); // แยกวิเคราะห์และเริ่มต้น SDK ด้วยคิวรีสตริง

2. หากไม่สามารถให้ข้อมูลเพื่อเชื่อมต่อ URL ได้โดยตรง คุณสามารถให้ข้อมูลโดยตรงผ่านอาร์กิวเมนต์ search ในฟังก์ชัน init()

   eliceContents.init({
       search: queryString.stringify({
           materialId: 100,
           extToken: '...',
       }),
   });

3. ที่อยู่เบสเอิร์ธเมนท์ติดตั้งตามค่าเริ่มต้นในสภาพแวดล้อมการใช้งานของแพลตฟอร์ม Elice ถ้าคุณต้องการใช้งานในสภาพแวดล้อมการทดสอบโปรดตั้งค่า baseUrl เอง

   eliceContents.init({
       baseUrl: 'https://dev-v4-external-contents-api.dev.elicer.io',
   });

sendScore (ส่งคะแนนไปยังแพลตฟอร์ม Elice)

กำหนดให้ส่งคะแนนไปยังแพลตฟอร์ม Elice เมื่อผู้ใช้เสร็จสิ้นการทำงานของเนื้อหา

1. เมื่อเนื้อหาเสร็จสิ้นให้เรียกใช้ฟังก์ชัน sendScore() ที่มีค่า score เป็นอาร์กิวเมนต์ โดยทั่วไปแล้วคะแนนที่ส่งเป็น 100

   import { eliceContents } from 'src/constants';
   
   eliceContents.sendScore({ score: 100 }); // ส่งคะแนน 100 ไปยังแพลตฟอร์ม Elice

2. ตรวจสอบว่าคะแนนของเนื้อหาได้ถูกตั้งค่าเป็น 100 ในตัวอย่างด้านบน หากเนื้อหาถูกตั้งค่าเป็นเนื้อหาการเรียนรู้ Elice คุณสามารถตรวจสอบว่าคะแนนของเนื้อหาได้ถูกตั้งค่าเป็น 100 ตามภาพตัวอย่าง

postKeyValue (บันทึกการเปลี่ยนแปลงของเนื้อหาในแพลตฟอร์ม Elice)

เพื่อบันทึกการเปลี่ยนแปลงของเนื้อหาของนักเรียนในแพลตฟอร์ม Elice คุณสามารถใช้ฟังก์ชัน postKeyValue() ที่มีหน้าที่บันทึกคีย์และค่า

import { eliceContents } from 'src/constants';

await eliceContents.postKeyValue({
    key: 'quiz01.answer', // คีย์ต้องเขียนเป็น camelCase เท่านั้น
                          // คีย์ต้องเป็นตัวอักษรภาษาอังกฤษและตัวเลขเท่านั้น (`[a-zA-Z0-9]+]`)
    value: 'Elice' // ค่าที่เป็นไปได้มีประเภท string, number, boolean, object, array
                  // หากเป็น object คีย์ต้องเขียนเป็น camelCase เท่านั้น
});

⚠️ กฎการเขียนคีย์และค่า

• คีย์ควรเขียนเป็น camelCase เท่านั้น และควรประกอบด้วย ตัวอักษรภาษาอังกฤษและตัวเลขเท่านั้น ([a-zA-Z0-9]+])

• ค่าที่เป็นไปได้มีประเภท string, number, boolean, object, array และเมื่อเป็น object คีย์ต้องเขียนเป็น camelCase

getKeyValue (ค้นหาการเปลี่ยนแปลงของเนื้อหาในแพลตฟอร์ม Elice)

เมื่อต้องการให้นักเรียนสามารถเรียกคืนการเปลี่ยนแปลงของเนื้อหาให้ใช้ฟังก์ชัน getKeyValue() ที่มีหน้าที่ดึงค่าจากคีย์

import { eliceContents } from 'src/constants';

const value = await eliceContents.getKeyValue({
    key: 'quiz01.answer',
});

console.log(value); // "Elice"

// หรือคุณสามารถระบุเพียงบางส่วนของคีย์เพื่อเรียกคืนคีย์ย่อยทั้งหมดของคีย์ดังกล่าว
// ตัวแยกความแตกต่างคือจุด (dot) เท่านั้น

const value = await getKeyValue({
    key: 'quiz01',
});

console.log(value); // { answer: "Elice" }

delete (ลบคีย์และค่า)

เมธอดนี้ใช้ในการลบคีย์และค่าจากคลังข้อมูล Key-Value

พารามิเตอร์

ชื่อ	ชนิดข้อมูล	คำอธิบาย
key	string	แทนคีย์ที่ต้องการลบคีย์และค่าออกจากคลังข้อมูล

ตัวอย่าง JavaScript

import { eliceContents } from 'src/constants';

const deleteButton = document.createElement('button');

const handleDelete = async () => {
    await eliceContents.kvstore.delete('quiz01.answer');
    const value = await eliceContents.kvstore.get('quiz01.answer');
    console.log(value); // ค่า null
};

deleteButton.addEventListener('click', handleDelete);
deleteButton.click();

ตัวอย่าง React

import { eliceContents } from 'src/constants';
import { useState } from 'react';

const App = () => {
    const [value, setValue] = useState(null);

    const handleDelete = async () => {
        await eliceContents.kvstore.delete('quiz01.answer');
        const value = await eliceContents.kvstore.get('quiz01.answer');
        setValue(value);
    };

    return (
        <div>
            <button onClick={handleDelete}>ลบ</button>
            {value === null ? 'ลบแล้ว' : value}
        </div>
    );
};

2. คุณสมบัติ

account (ข้อมูลบัญชี)

⚠️ คุณสมบัติ account.accountId จะถูกลบตั้งแต่เวอร์ชัน v1.0.0 โปรดใช้ account.uid แทน

คุณสามารถดึงข้อมูลบัญชีของบัญชีที่เปิดใช้งานในแพลตฟอร์ม Elice ได้ ข้อมูลบัญชีดังกล่าวสามารถดึงได้ผ่านคุณสมบัติ account ข้อมูลการเปิดบัญชีประกอบด้วย accountId (ไอดีบัญชี), fullname (ชื่อเต็ม), uid (ไอดีรวม)

import { eliceContents } from 'src/constants';

console.log(eliceContents.account); // { accountId: '550e8400-e29b-41d4-a716-446655440000', fullname: 'elice', uid: 123 }

metadata (เมตาดาต้าของเนื้อหาการเรียนรู้)

คุณสามารถดึงเมตาดาต้าของเนื้อหาการเรียนรู้ที่ลงทะเบียนในแพลตฟอร์ม Elice ได้ ข้อมูลดังกล่าวสามารถดึงผ่านคุณสมบัติ metadata ข้อมูลเมตาดาต้าประกอบด้วย materialId (ไอดีเนื้อหา)

import { eliceContents } from 'src/constants';

console.log(eliceContents.metadata);  // { materialId: 456 }