Integrasikan beberapa sumber daya Immersive Reader
Dalam gambaran umum, Anda belajar tentang Pembaca Imersif dan bagaimana hal itu menerapkan teknik yang terbukti untuk meningkatkan pemahaman membaca bagi pelajar bahasa, pembaca yang muncul, dan siswa dengan perbedaan pembelajaran. Dalam mulai cepat, Anda mempelajari cara menggunakan Immersive Reader dengan satu sumber daya. Tutorial ini mencakup cara mengintegrasikan beberapa sumber Immersive Reader dalam aplikasi yang sama.
Dalam tutorial ini, Anda akan mempelajari cara:
- Buat beberapa sumber daya Pembaca Imersif di bawah grup sumber daya yang sudah ada.
- Luncurkan Pembaca Imersif menggunakan beberapa sumber daya.
Prasyarat
- Langganan Azure. Jika Anda tidak memilikinya, buat akun gratis.
- Satu sumber daya Pembaca Imersif dikonfigurasi untuk autentikasi Microsoft Entra. Ikuti petunjuk ini untuk menyiapkannya.
- Aplikasi web NodeJS yang meluncurkan Pembaca Imersif.
Membuat beberapa sumber daya
Ikuti instruksi ini lagi untuk membuat setiap sumber daya Pembaca Imersif. Create-ImmersiveReaderResource Skrip memiliki ResourceNameparameter , ResourceSubdomain, dan ResourceLocation sebagai . Parameter ini harus unik untuk setiap sumber daya yang dibuat. Parameter yang tersisa harus sama dengan yang Anda gunakan saat menyiapkan sumber daya Immersive Reader pertama Anda. Dengan cara ini, setiap sumber daya dapat ditautkan ke grup sumber daya Azure dan aplikasi Microsoft Entra yang sama.
Contoh berikut menunjukkan cara membuat dua sumber daya, satu di WestUS dan satu lagi di EastUS. Setiap sumber daya memiliki nilai unik untuk ResourceName, ResourceSubdomain, dan ResourceLocation.
Create-ImmersiveReaderResource
-SubscriptionName <SUBSCRIPTION_NAME>
-ResourceName Resource_name_westus
-ResourceSubdomain resource-subdomain-westus
-ResourceSKU <RESOURCE_SKU>
-ResourceLocation westus
-ResourceGroupName <RESOURCE_GROUP_NAME>
-ResourceGroupLocation <RESOURCE_GROUP_LOCATION>
-AADAppDisplayName <MICROSOFT_ENTRA_DISPLAY_NAME>
-AADAppIdentifierUri <MICROSOFT_ENTRA_IDENTIFIER_URI>
-AADAppClientSecret <MICROSOFT_ENTRA_CLIENT_SECRET>
Create-ImmersiveReaderResource
-SubscriptionName <SUBSCRIPTION_NAME>
-ResourceName Resource_name_eastus
-ResourceSubdomain resource-subdomain-eastus
-ResourceSKU <RESOURCE_SKU>
-ResourceLocation eastus
-ResourceGroupName <RESOURCE_GROUP_NAME>
-ResourceGroupLocation <RESOURCE_GROUP_LOCATION>
-AADAppDisplayName <MICROSOFT_ENTRA_DISPLAY_NAME>
-AADAppIdentifierUri <MICROSOFT_ENTRA_IDENTIFIER_URI>
-AADAppClientSecret <MICROSOFT_ENTRA_CLIENT_SECRET>
Menambahkan sumber daya ke konfigurasi lingkungan
Di panduan mulai cepat, Anda membuat file konfigurasi lingkungan yang berisi parameter TenantId, ClientId, ClientSecret, dan Subdomain. Karena semua sumber daya Anda menggunakan aplikasi Microsoft Entra yang sama, Anda dapat menggunakan nilai yang sama untuk TenantId, , ClientIddan ClientSecret. Satu-satunya perubahan yang perlu dilakukan adalah membuat daftar setiap subdomain untuk setiap sumber daya.
File .env baru Anda sekarang akan terlihat seperti:
TENANT_ID={YOUR_TENANT_ID}
CLIENT_ID={YOUR_CLIENT_ID}
CLIENT_SECRET={YOUR_CLIENT_SECRET}
SUBDOMAIN_WUS={YOUR_WESTUS_SUBDOMAIN}
SUBDOMAIN_EUS={YOUR_EASTUS_SUBDOMAIN}
Catatan
Pastikan untuk tidak menerapkan file ini ke kontrol sumber karena berisi rahasia yang seharusnya tidak diumumkan ke publik.
Selanjutnya, ubah file routes\index.js yang Anda buat untuk mendukung beberapa sumber daya Anda. Ganti isinya dengan kode berikut.
Seperti sebelumnya, kode ini membuat titik akhir API yang memperoleh token autentikasi Microsoft Entra menggunakan kata sandi perwakilan layanan Anda. Kali ini, memungkinkan pengguna untuk menentukan lokasi sumber daya dan meneruskannya sebagai parameter kueri. Lalu mengembalikan objek yang berisi token dan subdomain yang sesuai.
var express = require('express');
var router = express.Router();
var request = require('request');
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
router.get('/GetTokenAndSubdomain', function(req, res) {
try {
request.post({
headers: {
'content-type': 'application/x-www-form-urlencoded'
},
url: `https://login.windows.net/${process.env.TENANT_ID}/oauth2/token`,
form: {
grant_type: 'client_credentials',
client_id: process.env.CLIENT_ID,
client_secret: process.env.CLIENT_SECRET,
resource: 'https://cognitiveservices.azure.com/'
}
},
function(err, resp, tokenResult) {
if (err) {
console.log(err);
return res.status(500).send('CogSvcs IssueToken error');
}
var tokenResultParsed = JSON.parse(tokenResult);
if (tokenResultParsed.error) {
console.log(tokenResult);
return res.send({error : "Unable to acquire Azure AD token. Check the debugger for more information."})
}
var token = tokenResultParsed.access_token;
var subdomain = "";
var region = req.query && req.query.region;
switch (region) {
case "eus":
subdomain = process.env.SUBDOMAIN_EUS
break;
case "wus":
default:
subdomain = process.env.SUBDOMAIN_WUS
}
return res.send({token, subdomain});
});
} catch (err) {
console.log(err);
return res.status(500).send('CogSvcs IssueToken error');
}
});
module.exports = router;
Titik getimmersivereaderlaunchparams akhir API harus diamankan di balik beberapa bentuk autentikasi (misalnya, OAuth) untuk mencegah pengguna yang tidak sah mendapatkan token untuk digunakan terhadap layanan dan penagihan Pembaca Imersif Anda; pekerjaan tersebut berada di luar cakupan tutorial ini.
Menambahkan konten sampel
Buka views\index.pug, dan ganti kontennya dengan kode berikut. Kode ini mengisi halaman dengan beberapa konten sampel, dan menambahkan dua tombol yang meluncurkan Pembaca Imersif. Salah satu yang meluncurkan Pembaca Imersif untuk sumber daya EastUS, dan satu lagi untuk sumber daya WestUS.
doctype html
html
head
title Immersive Reader Quickstart Node.js
link(rel='stylesheet', href='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css')
// A polyfill for Promise is needed for IE11 support.
script(src='https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js')
script(src='https://ircdname.azureedge.net/immersivereadersdk/immersive-reader-sdk.1.2.0.js')
script(src='https://code.jquery.com/jquery-3.3.1.min.js')
style(type="text/css").
.immersive-reader-button {
background-color: white;
margin-top: 5px;
border: 1px solid black;
float: right;
}
body
div(class="container")
button(class="immersive-reader-button" data-button-style="icon" data-locale="en" onclick='handleLaunchImmersiveReader("wus")') WestUS Immersive Reader
button(class="immersive-reader-button" data-button-style="icon" data-locale="en" onclick='handleLaunchImmersiveReader("eus")') EastUS Immersive Reader
h1(id="ir-title") About Immersive Reader
div(id="ir-content" lang="en-us")
p Immersive Reader is a tool that implements proven techniques to improve reading comprehension for emerging readers, language learners, and people with learning differences. The Immersive Reader is designed to make reading more accessible for everyone. The Immersive Reader
ul
li Shows content in a minimal reading view
li Displays pictures of commonly used words
li Highlights nouns, verbs, adjectives, and adverbs
li Reads your content out loud to you
li Translates your content into another language
li Breaks down words into syllables
h3 The Immersive Reader is available in many languages.
p(lang="es-es") El Lector inmersivo está disponible en varios idiomas.
p(lang="zh-cn") 沉浸式阅读器支持许多语言
p(lang="de-de") Der plastische Reader ist in vielen Sprachen verfügbar.
p(lang="ar-eg" dir="rtl" style="text-align:right") يتوفر \"القارئ الشامل\" في العديد من اللغات.
script(type="text/javascript").
function getTokenAndSubdomainAsync(region) {
return new Promise(function (resolve, reject) {
$.ajax({
url: "/GetTokenAndSubdomain",
type: "GET",
data: {
region: region
},
success: function (data) {
if (data.error) {
reject(data.error);
} else {
resolve(data);
}
},
error: function (err) {
reject(err);
}
});
});
}
function handleLaunchImmersiveReader(region) {
getTokenAndSubdomainAsync(region)
.then(function (response) {
const token = response["token"];
const subdomain = response["subdomain"];
// Learn more about chunk usage and supported MIME types https://learn.microsoft.com/azure/ai-services/immersive-reader/reference#chunk
const data = {
title: $("#ir-title").text(),
chunks: [{
content: $("#ir-content").html(),
mimeType: "text/html"
}]
};
// Learn more about options https://learn.microsoft.com/azure/ai-services/immersive-reader/reference#options
const options = {
"onExit": exitCallback,
"uiZIndex": 2000
};
ImmersiveReader.launchAsync(token, subdomain, data, options)
.catch(function (error) {
alert("Error in launching the Immersive Reader. Check the console.");
console.log(error);
});
})
.catch(function (error) {
alert("Error in getting the Immersive Reader token and subdomain. Check the console.");
console.log(error);
});
}
function exitCallback() {
console.log("This is the callback function. It is executed when the Immersive Reader closes.");
}
Aplikasi web Anda sekarang siap. Mulai aplikasi dengan menjalankan:
npm start
Buka browser Anda dan buka http://localhost:3000. Anda akan melihat konten di atas pada halaman. Pilih tombol Pembaca Imersif EastUS atau tombol Pembaca Imersif WestUS untuk meluncurkan Pembaca Imersif menggunakan sumber daya masing-masing.