Запуск Иммерсивное средство чтения

В overview вы узнали о Иммерсивное средство чтения и о том, как он реализует проверенные методы для улучшения понимания чтения для учащихся языка, новых читателей и учащихся с различиями в обучении. В этой статье показано, как запустить Иммерсивное средство чтения с помощью JavaScript, Python, C#, Android или iOS.

Предварительные условия

  • Подписка Azure. Вы можете создать бесплатную учетную запись.
  • Ресурс Иммерсивное средство чтения, настроенный для аутентификации Microsoft Entra. Инструкции по настройке см. здесь. Сохраните выходные данные сеанса в текстовый файл, чтобы настроить свойства среды.
  • Node.js и Yarn.
  • Интегрированная среда разработки, например Visual Studio Code.

Создание веб-приложения Node.js с помощью средства Express

Создайте веб-приложение Node.js с помощью средства express-generator.

npm install express-generator -g
express --view=pug myapp
cd myapp

Установите зависимости yarn, а также добавьте зависимости request и dotenv, которые будут использоваться позже в руководстве.

yarn
yarn add request
yarn add dotenv

Установите библиотеки axios и qs, выполнив следующую команду:

npm install axios qs

Настройка проверки подлинности

Затем напишите бэкенд API для получения токена аутентификации Microsoft Entra.

Для этой части вам понадобятся некоторые значения из шага предварительных требований настройки аутентификации Microsoft Entra. Вернитесь к текстовому файлу, сохраненного из этого сеанса.

TenantId     => Azure subscription TenantId
ClientId     => Microsoft Entra ApplicationId
ClientSecret => Microsoft Entra Application Service Principal password
Subdomain    => Immersive Reader resource subdomain (resource 'Name' if the resource was created in the Azure portal, or 'CustomSubDomain' option if the resource was created with Azure CLI PowerShell. Check the Azure portal for the subdomain on the Endpoint in the resource Overview page, for example, 'https://[SUBDOMAIN].cognitiveservices.azure.com/')

Создайте новый файл с именем .env в корневом каталоге проекта. Вставьте в него следующий код, указав значения, заданные при создании ресурса Иммерсивное средство чтения. Не включайте кавычки или {} символы.

TENANT_ID={YOUR_TENANT_ID}
CLIENT_ID={YOUR_CLIENT_ID}
CLIENT_SECRET={YOUR_CLIENT_SECRET}
SUBDOMAIN={YOUR_SUBDOMAIN}

Не добавляйте этот файл в систему управления версиями, так как он содержит секреты, которые не должны быть доступны.

Затем откройте файл app.js и добавьте следующее в его начало. При этом свойства, определенные в env-файле, загружаются в виде переменных среды в Node.

require('dotenv').config();

Откройте файл routes\index.js и замените имеющееся содержимое приведенным ниже кодом.

Этот код создает конечную точку API, которая получает токен аутентификации Microsoft Entra с помощью пароля служебной учетной записи. Кроме того, он извлекает субдомен. Затем возвращается объект, содержащий токен и поддомен.

var request = require('request');
var express = require('express');
var router = express.Router();

router.get('/getimmersivereaderlaunchparams', function(req, res) {
    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, tokenResponse) {
                if (err) {
                    return res.status(500).send('CogSvcs IssueToken error');
                }

                const token = JSON.parse(tokenResponse).access_token;
                const subdomain = process.env.SUBDOMAIN;
                return res.send({token: token, subdomain: subdomain});
        }
  );
});

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

Конечная точка API getimmersivereaderlaunchparams должна быть защищена с помощью какой-либо формы аутентификации (например, OAuth), чтобы запретить несанкционированным пользователям получать токены для использования против вашей службы Иммерсивное средство чтения и для выставления счетов; эта задача выходит за рамки данного руководства.

Запуск Иммерсивное средство чтения с примером содержимого

  1. Откройте файл views\layout.pug и добавьте следующий код под тег head перед тегом body. Эти теги script загружают пакет SDK Иммерсивное средство чтения и jQuery.

    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')
    
  2. Откройте файл views\index.pug и замените его содержимое следующим кодом. Этот код заполняет страницу примером содержимого и добавляет кнопку, которая запускает Иммерсивное средство чтения.

    extends layout
    
    block content
          h2(id='title') Geography
          p(id='content') The study of Earth's landforms is called physical geography. Landforms can be mountains and valleys. They can also be glaciers, lakes or rivers.
          div(class='immersive-reader-button' data-button-style='iconAndText' data-locale='en-US' onclick='launchImmersiveReader()')
          script.
    
            function getImmersiveReaderLaunchParamsAsync() {
                    return new Promise((resolve, reject) => {
                        $.ajax({
                                url: '/getimmersivereaderlaunchparams',
                                type: 'GET',
                                success: data => {
                                        resolve(data);
                                },
                                error: err => {
                                        console.log('Error in getting token and subdomain!', err);
                                        reject(err);
                                }
                        });
                    });
            }
    
            async function launchImmersiveReader() {
                    const content = {
                            title: document.getElementById('title').innerText,
                            chunks: [{
                                    content: document.getElementById('content').innerText + '\n\n',
                                    lang: 'en'
                            }]
                    };
    
                    const launchParams = await getImmersiveReaderLaunchParamsAsync();
                    const token = launchParams.token;
                    const subdomain = launchParams.subdomain;
    
                    ImmersiveReader.launchAsync(token, subdomain, content);
            }
    
  3. Теперь наше веб-приложение готово. Запустите приложение, выполнив следующую команду:

    npm start
    
  4. Откройте браузер и перейдите по адресу http://localhost:3000. Вы увидите упомянутое выше содержимое на странице. Нажмите кнопку Иммерсивное средство чтения, чтобы запустить Иммерсивное средство чтения с содержимым.

Указание языка содержимого

В Иммерсивное средство чтения поддерживается множество различных языков. Вы можете указать язык содержимого, выполнив следующие действия.

  1. Откройте файл views\index.pug и добавьте следующий код ниже тега p(id=content), который был добавлен в предыдущем шаге. Этот код добавляет на вашу страницу содержимое на испанском языке.

    p(id='content-spanish') El estudio de las formas terrestres de la Tierra se llama geografía física. Los accidentes geográficos pueden ser montañas y valles. También pueden ser glaciares, lagos o ríos.
    
  2. В views\index.pug добавьте следующий код над вызовом ImmersiveReader.launchAsync. Этот код передает испанское содержимое в Иммерсивное средство чтения.

    content.chunks.push({
      content: document.getElementById('content-spanish').innerText + '\n\n',
      lang: 'es'
    });
    
  3. Перейдите по адресу http://localhost:3000 еще раз. На странице должен отображаться испанский текст, а также при выборе Иммерсивное средство чтения он отображается в Иммерсивное средство чтения.

Укажите язык интерфейса Иммерсивное средство чтения

По умолчанию язык интерфейса Иммерсивное средство чтения соответствует параметрам языка браузера. Можно также указать язык интерфейса Иммерсивное средство чтения со следующим кодом.

  1. В views/index.pug замените вызов ImmersiveReader.launchAsync(token, subdomain, content) следующим кодом.

    const options = {
        uiLang: 'fr',
    }
    ImmersiveReader.launchAsync(token, subdomain, content, options);
    
  2. Перейдите по адресу http://localhost:3000. При запуске Иммерсивное средство чтения интерфейс отображается на французском языке.

Запуск Иммерсивное средство чтения с математическим содержимым

Вы можете включить математическое содержимое в Иммерсивное средство чтения с помощью MathML.

  1. Добавьте в файл views\index.pug следующий код над вызовом ImmersiveReader.launchAsync:

    const mathML = '<math xmlns="https://www.w3.org/1998/Math/MathML" display="block"> \
      <munderover> \
        <mo>∫</mo> \
        <mn>0</mn> \
        <mn>1</mn> \
      </munderover> \
      <mrow> \
        <msup> \
          <mi>x</mi> \
          <mn>2</mn> \
        </msup> \
        <mo>ⅆ</mo> \
        <mi>x</mi> \
      </mrow> \
    </math>';
    
    content.chunks.push({
      content: mathML,
      mimeType: 'application/mathml+xml'
    });
    
  2. Перейдите по адресу http://localhost:3000. При запуске Иммерсивное средство чтения и прокрутке вниз вы увидите математические формулы.

Следующий шаг

Предварительные условия

В рамках инструкций в этом руководстве вы можете установить следующие инструменты.

Определение учетных данных для проверки подлинности

Создайте файл с именем ENV в корневом каталоге проекта. Вставьте в него следующие имена и значения. Укажите значения, заданные при создании ресурса Иммерсивное средство чтения.

TENANT_ID={YOUR_TENANT_ID}
CLIENT_ID={YOUR_CLIENT_ID}
CLIENT_SECRET={YOUR_CLIENT_SECRET}
SUBDOMAIN={YOUR_SUBDOMAIN}

Не фиксируйте этот файл в системе управления версиями, так как он содержит секреты, не предназначенные для публикации.

Защитите конечную точку API getimmersivereadertoken с помощью какой-либо проверки подлинности, например OAuth. Проверка подлинности предотвращает получение несанкционированными пользователями токенов для использования в службе Иммерсивное средство чтения и выставления счетов. Эти действия не рассматриваются в этом руководстве.

Создание веб-приложения Python на Windows

Установите Python.

Выберите флажок Добавить Python в PATH и выберите Custom installation.

Снимок экрана установки Python, шаг 1, с добавлением Python в путь с помощью флажка.

Добавьте дополнительные функции, установив нужные флажки, а затем щелкните Далее.

Скриншот шага 2 установки Python с дополнительными функциями.

В разделе "Дополнительные параметры" задайте путь установки в качестве корневой папки, например C:\Python312. Затем нажмите кнопку "Установить".

Совет

При установке пользовательского пути установки переменная PATH может по-прежнему указывать на путь установки по умолчанию. Убедитесь, что PATH указывает на пользовательскую папку.

Скриншот шага 3 установки Python с пользовательским путем установки.

После завершения установки Python откройте командную строку и используйте cd, чтобы перейти в папку скриптов Python.

cd C:\Python312\Scripts

Установите Flask.

pip install flask

Установите Jinja2. Это полнофункциональный механизм шаблонов для Python.

pip install jinja2

Установите virtualenv. Это средство создает изолированные среды Python.

pip install virtualenv

Установите virtualenvwrapper-win. virtualenvwrapper предназначен для упрощения работы с virtualenv.

pip install virtualenvwrapper-win

Установите модуль "requests". Запросы — это лицензированная http-библиотека Apache2, написанная Python.

pip install requests

Установите модуль python-dotenv. Этот модуль считывает пару "ключ-значение" из env-файла и добавляет их в переменную среды.

pip install python-dotenv

Создайте виртуальную среду.

mkvirtualenv.bat quickstart-python

Командой cd перейдите в корневую папку примера проекта.

cd C:\immersive-reader-sdk\js\samples\quickstart-python

Подключите пример проекта к среде. Это действие сопоставляет новую виртуальную среду с корневой папкой примера проекта.

setprojectdir .

Включите виртуальную среду.

activate

Теперь проект должен стать активным, и в командной строке отобразится примерно следующее: (quickstart-python) C:\immersive-reader-sdk\js\samples\quickstart-python>.

Отключите среду.

deactivate

Префикс (quickstart-python) должен исчезнуть, так как среда отключена.

Чтобы повторно включить среду, выполните команду workon quickstart-python из корневой папки примера проекта.

workon quickstart-python

Запуск Иммерсивное средство чтения с примером содержимого

При включенной среде запустите пример проекта, введя команду flask run в корневой папке проекта.

flask run

Откройте браузер и перейдите по адресу http://localhost:5000.

Создание веб-приложения Python в OSX

Установите Python.

Корневая папка Python, например Python312, должна находиться в папке "Приложения". Откройте терминал и используйте cd для перехода в папку Python.

cd Python312

Установите pip.

curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py

Выполните следующий фрагмент кода, чтобы установить pip для активного пользователя, чтобы избежать проблем с разрешениями.

python get-pip.py --user
sudo nano /etc/paths
  • В ответ на запрос введите свой пароль.
  • Добавьте путь установки pip в переменную PATH.
  • Перейдите в нижнюю часть файла и введите путь, который нужно добавить в конец списка, например PATH=$PATH:/usr/local/bin.
  • Чтобы выйти, нажмите клавиши CTRL+X.
  • Введите Y для сохранения изменений буфера.

Вот и все! Чтобы проверить установку, в новом окне терминала введите echo $PATH.

Установите Flask.

pip install flask --user

Установите Jinja2. Это полнофункциональный механизм шаблонов для Python.

pip install Jinja2 --user

Установите virtualenv. Это средство создает изолированные среды Python.

pip install virtualenv --user

Установите virtualenvwrapper. virtualenvwrapper предназначен для упрощения работы с virtualenv.

pip install virtualenvwrapper --user

Установите модуль "requests". Запросы — это лицензированная http-библиотека Apache2, написанная Python.

pip install requests --user

Установите модуль python-dotenv. Этот модуль считывает пару "ключ-значение" из env-файла и добавляет их в переменную среды.

pip install python-dotenv --user

Выберите папку, в которой вы хотите разместить виртуальные среды, и выполните эту команду:

mkdir ~/.virtualenvs

Используйте cd, чтобы перейти в папку примера приложения Python SDK Иммерсивное средство чтения.

cd immersive-reader-sdk/js/samples/quickstart-python

Создайте виртуальную среду.

mkvirtualenv -p /usr/local/bin/python3 quickstart-python

Подключите пример проекта к среде. Это действие сопоставляет новую виртуальную среду с корневой папкой примера проекта.

setprojectdir .

Включите виртуальную среду.

activate

Теперь проект должен стать активным, и в командной строке отобразится примерно следующее: (quickstart-python) /immersive-reader-sdk/js/samples/quickstart-python>.

Отключите среду.

deactivate

Префикс (quickstart-python) должен исчезнуть, так как среда отключена.

Чтобы повторно включить среду, выполните команду workon quickstart-python из корневой папки примера проекта.

workon quickstart-python

Запуск Иммерсивное средство чтения с примером содержимого

При включенной среде запустите пример проекта, введя команду flask run в корневой папке проекта.

flask run

Откройте браузер и перейдите по адресу http://localhost:5000.

Следующий шаг

Предварительные условия

Настройка проверки подлинности

В этом руководстве используется DefaultAzureCredential из библиотеки Azure.Identity для аутентификации в службе Иммерсивное средство чтения. В коде не требуется секрет клиента. Локально DefaultAzureCredential использует ваши учетные данные, вход в систему с помощью Azure CLI или Visual Studio. При развертывании в Azure он автоматически использует управляемое удостоверение, назначенное приложению.

Вам нужен только ресурс Иммерсивное средство чтения subdomain. Сохраните значение поддомена при создании ресурса Иммерсивное средство чтения.

Войдите в Azure, чтобы DefaultAzureCredential могли обнаруживать учетные данные во время локальной разработки:

az login

Защитите точку API GetTokenAndSubdomain с использованием формы аутентификации, например, OAuth. Проверка подлинности предотвращает получение несанкционированными пользователями токенов для использования в службе Иммерсивное средство чтения и выставления счетов. Эти действия не рассматриваются в этом руководстве.

Создание веб-приложения ASP.NET Core MVC

Создайте веб-приложение ASP.NET Core MVC.

dotnet new mvc -n QuickstartSampleWebApp
cd QuickstartSampleWebApp

Установите пакет Azure.Identity для получения токенов Microsoft Entra без клиентских секретов.

dotnet add package Azure.Identity

Настройка контроллера

Откройте контроллеры\HomeController.cs и замените его содержимое следующим кодом. Замените {YOUR_SUBDOMAIN} на поддомен вашего ресурса Иммерсивное средство чтения. Этот контроллер использует DefaultAzureCredential для получения токена аутентификации Microsoft Entra и передает токен и поддомен в представление.

using System.Threading;
using System.Threading.Tasks;
using Azure.Core;
using Azure.Identity;
using Microsoft.AspNetCore.Mvc;

namespace QuickstartSampleWebApp.Controllers
{
    public class HomeController : Controller
    {
        // Replace with your Immersive Reader resource subdomain.
        private const string Subdomain = "{YOUR_SUBDOMAIN}";

        private static readonly TokenCredential Credential = new DefaultAzureCredential();
        private static readonly string[] Scopes =
            new[] { "https://cognitiveservices.azure.com/.default" };

        private async Task<string> GetTokenAsync()
        {
            var tokenRequestContext = new TokenRequestContext(Scopes);
            var accessToken = await Credential
                .GetTokenAsync(tokenRequestContext, CancellationToken.None)
                .ConfigureAwait(false);
            return accessToken.Token;
        }

        public async Task<IActionResult> Index()
        {
            ViewData["Token"]     = await GetTokenAsync();
            ViewData["Subdomain"] = Subdomain;
            return View();
        }
    }
}

Запуск Иммерсивное средство чтения с примером содержимого

  1. Откройте Views\Home\Index.cshtml и замените его содержимое следующим кодом. Этот код заполняет страницу примером содержимого и добавляет кнопку, которая запускает Иммерсивное средство чтения.

    @{
        ViewData["Title"] = "Immersive Reader C# Quickstart";
        var token     = ViewData["Token"]     as string;
        var subdomain = ViewData["Subdomain"] as string;
    }
    
    <div class="container">
        <button class="immersive-reader-button"
                data-button-style="iconAndText"
                data-locale="en">
        </button>
    
        <h1 id="ir-title">Geography</h1>
        <div id="ir-content" lang="en-us">
            <p>
                The study of Earth's landforms is called physical geography.
                Landforms can be mountains and valleys.
                They can also be glaciers, lakes, or rivers.
            </p>
        </div>
    </div>
    
    @section Scripts {
        <script src="https://ircdname.azureedge.net/immersivereadersdk/immersive-reader-sdk.1.4.0.js">
        </script>
        <script>
            function handleLaunchImmersiveReader() {
                const token     = "@token";
                const subdomain = "@subdomain";
    
                const data = {
                    title: document.getElementById('ir-title').innerText,
                    chunks: [{
                        content: document.getElementById('ir-content').innerHTML,
                        mimeType: 'text/html'
                    }]
                };
    
                const options = {
                    onExit: exitCallback
                };
    
                ImmersiveReader.launchAsync(token, subdomain, data, options)
                    .catch(function (error) {
                        console.log(error);
                        alert('Error in launching the Immersive Reader. Check the console.');
                    });
            }
    
            function exitCallback() {
                console.log('This is the callback function. It is executed when the Immersive Reader closes.');
            }
    
            document.querySelector('.immersive-reader-button')
                .addEventListener('click', handleLaunchImmersiveReader);
        </script>
    }
    
  2. Запустите приложение.

dotnet run
  1. Откройте браузер и перейдите по адресу https://localhost:5001. На странице должен отображаться пример содержимого. Нажмите кнопку Иммерсивное средство чтения, чтобы запустить Иммерсивное средство чтения с содержимым.

Указание языка содержимого

Иммерсивное средство чтения поддерживает множество различных языков. Вы можете указать язык содержимого, выполнив следующие действия.

  1. В Views\Home\Index.cshtml добавьте следующий абзац внутри #ir-content, после существующего английского абзаца:

    <p lang="es">
        El estudio de las formas terrestres de la Tierra se llama geografía física.
        Los accidentes geográficos pueden ser montañas y valles.
        También pueden ser glaciares, lagos o ríos.
    </p>
    
  2. data В блоке скрипта обновите chunks массив, чтобы включить испанский абзац:

    const data = {
        title: document.getElementById('ir-title').innerText,
        chunks: [
            {
                content: document.getElementById('ir-content').innerHTML,
                mimeType: 'text/html'
            }
        ]
    };
    

    Иммерсивное средство чтения автоматически обнаруживает языки в html-содержимом, поэтому дополнительные изменения в массиве блоков не требуются.

  3. Перейдите по адресу https://localhost:5001 еще раз. На странице должен отображаться испанский текст, а также при выборе Иммерсивное средство чтения он отображается в Иммерсивное средство чтения.

Укажите язык интерфейса Иммерсивное средство чтения

По умолчанию язык интерфейса Иммерсивное средство чтения соответствует параметрам языка браузера. Вы также можете явно указать его.

  1. В Views\Home\Index.cshtml обновите options объект в блоке скрипта:

    const options = {
        uiLang: 'fr',
        onExit: exitCallback
    };
    
  2. Перейдите по адресу https://localhost:5001. При запуске Иммерсивное средство чтения интерфейс отображается на французском языке.

Запуск Иммерсивное средство чтения с математическим содержимым

Вы можете включить математическое содержимое в Иммерсивное средство чтения с помощью MathML.

  1. В Представлениях\Home\Index.cshtml добавьте следующий код внутри handleLaunchImmersiveReader, непосредственно перед вызовом ImmersiveReader.launchAsync :

    const mathML = '<math xmlns="https://www.w3.org/1998/Math/MathML" display="block">'
        + '<munderover><mo>∫</mo><mn>0</mn><mn>1</mn></munderover>'
        + '<mrow><msup><mi>x</mi><mn>2</mn></msup><mo>ⅆ</mo><mi>x</mi></mrow>'
        + '</math>';
    
    data.chunks.push({
        content: mathML,
        mimeType: 'application/mathml+xml'
    });
    
  2. Перейдите по адресу https://localhost:5001. При запуске Иммерсивное средство чтения и прокрутке вниз вы увидите математические формулы.

Следующий шаг

Предварительные условия

Определение учетных данных для проверки подлинности

  1. Запустите Android Studio и откройте проект SDK Иммерсивное средство чтения из каталога иммерсив-reader-sdk/js/samples/quickstart-java-android (Java) или каталога иммерсивный-reader-sdk/js/samples/quickstart-kotlin (Kotlin).

    Совет

    Возможно, потребуется разрешить системе обновить подключаемые модули Gradle до по крайней мере версии 8.

  2. Чтобы создать новую папку ресурсов, щелкните правой кнопкой мыши на приложении и выберите Папка - > в раскрывающемся списке.

    Снимок экрана параметра папки

  3. Щелкните правой кнопкой мыши на ресурсах и выберите Создать ->Файл. Назовите файл env.

    Снимок экрана: поле ввода имени для создания env-файла.

  4. Добавьте следующие имена и значения и укажите значения по мере необходимости. Не фиксируйте этот файл в системе управления версиями, так как он содержит секреты, не предназначенные для публикации.

    TENANT_ID=<YOUR_TENANT_ID>
    CLIENT_ID=<YOUR_CLIENT_ID>
    CLIENT_SECRET=<YOUR_CLIENT_SECRET>
    SUBDOMAIN=<YOUR_SUBDOMAIN>
    

Запуск Иммерсивное средство чтения с примером содержимого

Выберите эмулятор устройства в диспетчере AVD и запустите проект.

Следующие шаги

Предварительные условия

Определение учетных данных для проверки подлинности

  1. В Xcode выберите "Открыть существующий проект". Откройте файл immersive-reader-sdk/js/samples/ios/quickstart-swift.xcodeproj.

  2. В верхнем меню выберите Product (Продукт)>Scheme (Схема)>Edit Scheme (Изменить схему).

  3. В представлении Run (Запуск) откройте вкладку Arguments (Аргументы).

  4. В разделе Environment Variables (Переменные среды) добавьте следующие имена и значения. Укажите значения, заданные при создании ресурса Иммерсивное средство чтения.

    TENANT_ID=<YOUR_TENANT_ID>
    CLIENT_ID=<YOUR_CLIENT_ID>
    CLIENT_SECRET<YOUR_CLIENT_SECRET>
    SUBDOMAIN=<YOUR_SUBDOMAIN>
    

Не фиксируйте это изменение в системе управления версиями, так как оно содержит секреты, не предназначенные для публикации.

Запуск Иммерсивное средство чтения с примером содержимого

В Xcode выберите симулятор устройства, а затем запустите проект из элементов управления или введите CTRL+R.

Следующий шаг