Tiện ích trang web
Trang này được dịch từ tiếng Anh. Nếu hai bản khác nhau, trang tiếng Anh là bản đúng. Đọc trang tiếng Anh
Trên một trang web, Lingara chạy dưới dạng một phần tử tùy chỉnh, <lingara-embed>. Phần tử này vẽ phần luyện tập của Lingara trong một khung do Lingara phục vụ, nên trang của bạn không bao giờ thấy dữ liệu của người học và trang của Lingara không bao giờ thấy dữ liệu của bạn.
Gắn phần tử
Cài @lingara/embed từ npm, hoặc tải bản dựng mô-đun của nó từ một CDN nếu trang của bạn không có trình đóng gói. Sau đó đặt <lingara-embed> lên trang và định nghĩa nó. Phần tử nhận:
plan-id, kế hoạch bài học để luyện tập, một kế hoạch người chơi sở hữu;surface, nội dung cần hiển thị:practice, giá trị mặc định và là bề mặt duy nhất hiện có;theme, một tronglight,darkhoặcauto;locale, ngôn ngữ cho chữ của chính khung, nếu không đặt thì theo người học;title, tên hỗ trợ tiếp cận của khung.
Việc tạo kiểu dừng lại ở chủ đề. Trang của bạn không thể can thiệp vào bên trong khung, và chủ đề là cài đặt duy nhất khung cung cấp.
Cung cấp mã cho phần tử
Đặt tokenProvider của phần tử thành một hàm hỏi máy chủ của chính bạn để lấy mã. Máy chủ của bạn cấp mã với nguồn gốc của trang, dùng bộ công cụ máy chủ, và trả lời bằng mã cùng thời điểm hết hạn của nó. Phần tử chuyển mã cho khung bằng tin nhắn, và mã không bao giờ đi qua URL.
Hãy đăng ký mọi nguồn gốc mà tiện ích chạy trên đó trước khi cấp mã cho nguồn gốc ấy, trong phần cài đặt của máy khách trong bảng điều khiển. Trang bộ công cụ máy chủ cho biết cách làm. API từ chối mã được cấp cho bất kỳ nguồn gốc nào khác, và khung sẽ hiển thị lỗi thay vì phần luyện tập.
Bộ công cụ máy chủ cũng có thể viết toàn bộ đoạn mã cho bạn, gồm cả phần tử và hàm cung cấp mã, kèm nonce cho tập lệnh của trang nếu chính sách bảo mật nội dung của bạn cần. Mẫu cuối cùng bên dưới minh họa điều đó.
Lắng nghe những gì khung nói
Khung giao tiếp với phần tử qua một giao thức tin nhắn có phiên bản, và phần tử biến những gì trang của bạn cần thành các sự kiện DOM:
lingara:practice-completedkhi người học hoàn thành một bộ, kèmplanId,setNumber,correctvàtotalcủa nó;lingara:errorkhi khung dừng, kèmcodevàretryable. Lỗi có thể thử lại nghĩa là một lần gắn mới có thể thành công; thử lại khi nào là do bạn quyết định.
Kết quả luyện tập cũng đến máy chủ của bạn, như mô tả trong kết quả luyện tập.
npm install @lingara/embed@0.1.0-alpha.6
# No bundler? One module script instead:
# <script type="module" src="https://cdn.jsdelivr.net/npm/@lingara/embed@0.1.0-alpha.6/dist/lingara-embed.min.js"></script><!-- plan-id is a lesson plan your server made for this player. -->
<lingara-embed surface="practice" plan-id="0b9d4f2e-3c1a-4e8b-9f6d-2a7c5e1b8d40" theme="auto" title="Practice"></lingara-embed>
<script type="module">
import { defineLingaraEmbed } from '@lingara/embed'
defineLingaraEmbed()
</script>// Your own endpoint, on your own server. It mints with this page's origin and
// returns exactly { token, expires_at }: the token (lgr_et_…) never touches a URL.
widget.tokenProvider = async () => {
const response = await fetch('/lingara/token', { method: 'POST', credentials: 'same-origin' })
if (!response.ok) throw new Error(`token endpoint answered ${response.status}`)
return response.json()
}widget.addEventListener('lingara:practice-completed', (event) => {
const { planId, setNumber, correct, total } = (event as CustomEvent).detail
console.log(`set ${setNumber} of ${planId}: ${correct}/${total}`)
})
widget.addEventListener('lingara:error', (event) => {
const { code, retryable } = (event as CustomEvent).detail
// `retryable` means a remount may succeed; when to try is yours to decide.
if (retryable) setTimeout(() => widget.reload(), 30_000)
else console.warn('Lingara practice stopped:', code)
})