spuštění Asistivní čtečka

Článek
09/03/2021
10 min ke čtení

v tomto přehledujste se dozvěděli o tom, co Asistivní čtečka je a jak implementuje osvědčené techniky pro zlepšení porozumění čtení pro jazykové učení, vznikající čtenáři a studenty s rozdíly v učení. tento článek ukazuje, jak spustit Asistivní čtečka JavaScript, Python, Android nebo iOS.

Požadavky

Předplatné Azure – Vytvořte si ho zdarma .
prostředek Asistivní čtečka nakonfigurovaný pro ověřování Azure Active Directory. Pomocí těchto pokynů si můžete nastavit. Při konfiguraci vlastností prostředí budete potřebovat některé z hodnot, které jsou zde vytvořeny. Uložte výstup vaší relace do textového souboru pro budoucí referenci.
Node.js a příze
rozhraní IDE, jako je například Visual Studio Code

Vytvoření Node.js webové aplikace pomocí Expressu

Pomocí nástroje vytvořte webovou aplikaci v Node.js express-generator .

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

Nainstalujte závislosti příze a přidejte závislosti request a dotenv , které se použijí později v tomto kurzu.

yarn
yarn add request
yarn add dotenv

Získání ověřovacího tokenu Azure AD

Potom napíšete back-end rozhraní API pro načtení ověřovacího tokenu Azure AD.

Pro tuto část potřebujete od výše uvedeného kroku požadavků konfigurace ověřování Azure AD nějaké hodnoty. Vraťte se zpět k textovému souboru, který jste si uložili do této relace.

TenantId     => Azure subscription TenantId
ClientId     => Azure AD ApplicationId
ClientSecret => Azure AD 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/')

Jakmile máte tyto hodnoty, vytvořte nový soubor s názvem . env a vložte do něj následující kód a zadejte hodnoty vlastních vlastností z výše uvedeného. Nezahrnujte uvozovky nebo znaky "{" a "}".

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

Ujistěte se, že tento soubor nechcete potvrdit do správy zdrojových kódů, protože obsahuje tajné klíče, které by neměly být zveřejněny.

Dále otevřete app.js a na začátek souboru přidejte následující. Tím se načte vlastnosti definované v souboru. env jako proměnné prostředí do uzlu.

require('dotenv').config();

Otevřete soubor routes\index.js a nahraďte jeho obsah následujícím kódem.

Tento kód vytvoří koncový bod rozhraní API, který získá ověřovací token Azure AD pomocí vašeho hesla instančního objektu. Také načte subdoménu. Pak vrátí objekt obsahující token a subdoménu.

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;

koncový bod rozhraní getimmersivereaderlaunchparams API by měl být zabezpečený za určitou formou ověřování (například OAuth), aby se zabránilo neoprávněným uživatelům získat tokeny, které se mají použít pro vaši službu Asistivní čtečka a fakturace. Tato práce překračuje rámec tohoto kurzu.

spuštění Asistivní čtečka s ukázkovým obsahem

Otevřete views\layout.pug a přidejte následující kód pod head značku před body značku. tyto script značky načtou Asistivní čtečka SDK a jQuery.

script(src='https://contentstorage.onenote.office.net/onenoteltir/immersivereadersdk/immersive-reader-sdk.0.0.2.js')
script(src='https://code.jquery.com/jquery-3.3.1.min.js')

Otevřete views\index.pug a nahraďte jeho obsah následujícím kódem. tento kód naplní stránku nějakým ukázkovým obsahem a přidá tlačítko, které spustí Asistivní čtečka.

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);
        }

Naše webová aplikace je teď připravená. Spusťte aplikaci spuštěním:
```
npm start
```
Otevřete prohlížeč a přejděte na http://localhost:3000 . Na stránce byste měli vidět výše uvedený obsah. kliknutím na tlačítko Asistivní čtečka spustíte Asistivní čtečka s vaším obsahem.

Zadejte jazyk vašeho obsahu

Asistivní čtečka podporuje řadu různých jazyků. Jazyk vašeho obsahu můžete určit podle následujících kroků.

Otevřete views\index.pug a přidejte následující kód pod p(id=content) značku, kterou jste přidali v předchozím kroku. Tento kód přidá do stránky obsah pro španělštinu obsahu.

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.

V kódu JavaScriptu přidejte následující nad volání ImmersiveReader.launchAsync . tento kód projde španělským obsahem do Asistivní čtečka.
```
content.chunks.push({
  content: document.getElementById('content-spanish').innerText + '\n\n',
  lang: 'es'
});
```
Znovu přejděte na http://localhost:3000 . na stránce byste měli vidět španělský text a když kliknete na Asistivní čtečka, zobrazí se také v Asistivní čtečka.

zadejte jazyk rozhraní Asistivní čtečka

ve výchozím nastavení se jazyk rozhraní Asistivní čtečka shoduje s nastaveními jazyka v prohlížeči. jazyk rozhraní Asistivní čtečka lze také zadat pomocí následujícího kódu.

V views\index.pug nahraďte volání ImmersiveReader.launchAsync(token, subdomain, content) kódem níže.

const options = {
    uiLang: 'fr',
}
ImmersiveReader.launchAsync(token, subdomain, content, options);

Přejděte na http://localhost:3000 . když spustíte Asistivní čtečka, rozhraní se zobrazí ve francouzštině.

spuštění Asistivní čtečka s využitím matematického obsahu

do Asistivní čtečka můžete zahrnout matematický obsah pomocí formátu MathML.

Upravte views\index.pug tak, aby zahrnoval následující kód nad volání 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'
});

Přejděte na http://localhost:3000 . když spustíte Asistivní čtečka a posuňte se k dolnímu okraji, uvidíte matematický vzorec.

Další kroky

prozkoumejte Asistivní čtečka sdk a referenční informace k sadě sdk pro Asistivní čtečka .
Zobrazit ukázky kódu na GitHub

Požadavky

Předplatné Azure – Vytvořte si ho zdarma .
prostředek Asistivní čtečka nakonfigurovaný pro ověřování Azure Active Directory. Pomocí těchto pokynů si můžete nastavit. Při konfiguraci vlastností prostředí budete potřebovat některé z hodnot, které jsou zde vytvořeny. Uložte výstup vaší relace do textového souboru pro budoucí referenci.
Git.
Asistivní čtečka SDK.
Python a PIP. Od Pythonu 3,4 je PIP ve výchozím nastavení součástí s binárními instalačními programy Pythonu.
Baňka.
Jinja.
virtualenv a virtualenvwrapper-win pro Windows nebo virtualenvwrapper pro OSX.
Modul žádosti.
rozhraní IDE, jako je například Visual Studio Code.

Konfigurace ověřovacích přihlašovacích údajů

Vytvořte nový soubor s názvem . env a vložte do něj následující názvy a hodnoty. zadejte hodnoty, které jste zadali při vytváření prostředku Asistivní čtečka.

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

Tento soubor Nepotvrzujte do správy zdrojových kódů, protože obsahuje tajné klíče, které by neměly být zveřejněny.

Zabezpečte koncový bod rozhraní getimmersivereadertoken API za nějakým formulářem ověřování, například OAuth. ověřování zabraňuje neoprávněným uživatelům získat tokeny, které se mají použít pro vaši službu Asistivní čtečka a účtování. Tato práce překračuje rámec tohoto kurzu.

Vytvoření webové aplikace v Pythonu na Windows

Vytvořte webovou aplikaci v Pythonu pomocí flask Windows.

Nainstalujte Git.

po instalaci Git otevřete příkazový řádek a naklonujte úložiště Git Asistivní čtečka SDK do složky ve vašem počítači.

git clone https://github.com/microsoft/immersive-reader-sdk.git

Nainstalujte Python.

Zaškrtněte políčko Přidat Python do cesty .

dialogová okna instalace pythonu Windows – krok 1

Přidejte volitelné funkce zaškrtnutím políček a pak vyberte Další.

dialogová okna instalace pythonu Windows – krok 2

Vyberte možnost vlastní instalace a nastavte cestu instalace jako kořenovou složku, například C:\Python37-32\ . Pak vyberte nainstalovat.

dialogová okna instalace pythonu Windows – krok 3

Po dokončení instalace Pythonu otevřete příkazový řádek a použijte příkaz cd pro přechod do složky Python Scripts.

cd C:\Python37-32\Scripts

Nainstalovat baňce.

pip install flask

Nainstalujte Jinja2. Je to plnohodnotný modul šablon pro Python.

pip install jinja2

Nainstalujte virtualenv. Tento nástroj vytváří izolovaná prostředí Pythonu.

pip install virtualenv

Nainstalujte virtualenvwrapper-Win. Nápad za virtualenvwrapper je snadné použití virtualenv.

pip install virtualenvwrapper-win

Nainstalujte modul požadavky. Požadavky jsou apache2 licencovaná knihovna HTTP, která je napsaná v Pythonu.

pip install requests

Nainstalujte modul Python-dotenv. Tento modul přečte dvojici klíč-hodnota ze souboru. ENV a přidá je do proměnné prostředí.

pip install python-dotenv

Vytvořte virtuální prostředí.

mkvirtualenv advanced-python

Použijte cd pro přechod na kořenovou složku ukázkového projektu.

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

Připojení vzorový projekt s prostředím. Tato akce provede mapování nově vytvořeného virtuálního prostředí na kořenovou složku projektu s ukázkovou příponou.

setprojectdir .

Aktivujte virtuální prostředí.

activate

Projekt by teď měl být aktivní a na příkazovém řádku se zobrazí něco podobného (advanced-python) C:\immersive-reader-sdk\js\samples\advanced-python> .

Deaktivuje prostředí.

deactivate

(advanced-python)Předpona by měla být pryč, protože prostředí je deaktivováno.

Chcete-li znovu aktivovat prostředí, spusťte workon advanced-python z kořenové složky ukázkového projektu.

workon advanced-python

spuštění Asistivní čtečka s ukázkovým obsahem

Když je prostředí aktivní, spusťte vzorový projekt zadáním flask run z kořenové složky ukázkového projektu.

flask run

Otevřete prohlížeč a pokračujte na http://localhost:5000 .

Vytvoření webové aplikace v Pythonu v OSX

Vytvořte webovou aplikaci v Pythonu pomocí flask OSX.

Nainstalujte Git.

po instalaci Git otevřete terminál a naklonujte úložiště git Asistivní čtečka SDK do složky ve vašem počítači.

git clone https://github.com/microsoft/immersive-reader-sdk.git

Nainstalujte Python.

Kořenová složka Pythonu, například Python37-32 , by měla být nyní ve složce aplikace.

Po dokončení instalace Pythonu otevřete terminál a použijte k tomu, cd abyste přešli do složky Python Scripts.

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

Nainstalovat pip.

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

Spusťte následující kód, který nainstaluje PIP pro aktuálně přihlášeného uživatele, aby nedocházelo k problémům s oprávněními.

python get-pip.py --user

sudo nano /etc/paths

Po zobrazení výzvy zadejte heslo.
Přidejte cestu k instalaci PIP do proměnné PATH.
Přejděte do dolní části souboru a zadejte cestu, kterou chcete přidat jako poslední položku seznamu, například PATH=$PATH:/usr/local/bin .
Pro ukončení vyberte CTRL + X .
Zadáním Y uložte upravenou vyrovnávací paměť.
A to je vše! Chcete-li ji otestovat, zadejte do nového okna terminálu echo $PATH .

Nainstalovat baňce.

pip install flask --user

Nainstalujte Jinja2. Je to plnohodnotný modul šablon pro Python.

pip install Jinja2 --user

Nainstalujte virtualenv. Tento nástroj vytváří izolovaná prostředí Pythonu.

pip install virtualenv --user

Nainstalujte virtualenvwrapper. Nápad za virtualenvwrapper je snadné použití virtualenv.

pip install virtualenvwrapper --user

Nainstalujte modul požadavky. Požadavky jsou apache2 licencovaná knihovna HTTP, která je napsaná v Pythonu.

pip install requests --user

Nainstalujte modul Python-dotenv. Tento modul přečte dvojici klíč-hodnota ze souboru. ENV a přidá je do proměnné prostředí.

pip install python-dotenv --user

Vyberte složku, ve které chcete zachovat vaše virtuální prostředí, a spusťte tento příkaz:

mkdir ~/.virtualenvs

použijte cd k tomu, abyste přešli do složky Asistivní čtečka SDK Python sample application.

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

Vytvořte virtuální prostředí.

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

Připojení vzorový projekt s prostředím. Tato akce provede mapování nově vytvořeného virtuálního prostředí na kořenovou složku projektu s ukázkovou příponou.

setprojectdir .

Aktivujte virtuální prostředí.

activate

Projekt by teď měl být aktivní a na příkazovém řádku se zobrazí něco podobného (advanced-python) /immersive-reader-sdk/js/samples/advanced-python> .

Deaktivuje prostředí.

deactivate

(advanced-python)Předpona by měla být pryč, protože prostředí je deaktivováno.

Chcete-li znovu aktivovat prostředí, spusťte workon advanced-python z kořenové složky ukázkového projektu.

workon advanced-python

spuštění Asistivní čtečka s ukázkovým obsahem

Když je prostředí aktivní, spusťte vzorový projekt zadáním flask run z kořenové složky ukázkového projektu.

flask run

Otevřete prohlížeč a pokračujte na http://localhost:5000 .

Další kroky

prozkoumejte Asistivní čtečka sdk a referenční informace k sadě sdk pro Asistivní čtečka.
Zobrazení ukázek kódu na GitHub.

Požadavky

Předplatné Azure – Vytvořte si ho zdarma .
prostředek Asistivní čtečka nakonfigurovaný pro ověřování Azure Active Directory. Pomocí těchto pokynů si můžete nastavit. Při konfiguraci vlastností prostředí budete potřebovat některé z hodnot, které jsou zde vytvořeny. Uložte výstup vaší relace do textového souboru pro budoucí referenci.
Git.
Asistivní čtečka SDK.
Android Studio.

Konfigurace ověřovacích přihlašovacích údajů

Spusťte Android Studio a otevřete projekt z aplikace moderního čtenář-SDK/js/Samples/Starter-Java-Android (Java) nebo s adresářem moderního čtenář-SDK/js/Samples/Start-Kotlin (Kotlin).
Ve složce /assets vytvořte soubor s názvem ENV . Přidejte následující názvy a hodnoty a podle potřeby zadejte hodnoty. Tento soubor Nepotvrzujte do správy zdrojových kódů, protože obsahuje tajné klíče, které by neměly být zveřejněny.
```
TENANT_ID=<YOUR_TENANT_ID>
CLIENT_ID=<YOUR_CLIENT_ID>
CLIENT_SECRET=<YOUR_CLIENT_SECRET>
SUBDOMAIN=<YOUR_SUBDOMAIN>
```

spuštění Asistivní čtečka s ukázkovým obsahem

Vyberte emulátor zařízení z AVD Manageru a spusťte projekt.

Další kroky

prozkoumejte Asistivní čtečka sdk a referenční informace k sadě sdk pro Asistivní čtečka.
Zobrazení ukázek kódu na GitHub.

Požadavky

Předplatné Azure – Vytvořte si ho zdarma .
prostředek Asistivní čtečka nakonfigurovaný pro ověřování Azure Active Directory. Pomocí těchto pokynů si můžete nastavit. Při konfiguraci vlastností prostředí budete potřebovat některé z hodnot, které jsou zde vytvořeny. Uložte výstup vaší relace do textového souboru pro budoucí referenci.
MacOS.
Git.
Asistivní čtečka SDK.
Xcode.

Konfigurace ověřovacích přihlašovacích údajů

Otevřete Xcode a otevřete Immersive-Reader-SDK/js/Samples/iOS/Quickstart-SWIFT/Quickstart-SWIFT. xcodeproj.
V horní nabídce vyberte možnost > > schéma úprav schématu produktu.
V zobrazení spuštění vyberte kartu argumenty .
V části proměnné prostředí přidejte následující názvy a hodnoty. zadejte hodnoty, které jste zadali při vytváření prostředku Asistivní čtečka.
```
TENANT_ID=<YOUR_TENANT_ID>
CLIENT_ID=<YOUR_CLIENT_ID>
CLIENT_SECRET<YOUR_CLIENT_SECRET>
SUBDOMAIN=<YOUR_SUBDOMAIN>
```

Tuto změnu nepotvrďte správou zdrojových kódů, protože obsahuje tajné klíče, které by se neměly zveřejnit.

spuštění Asistivní čtečka s ukázkovým obsahem

V Xcode klikněte na CTRL + R a spusťte projekt.

Další kroky

prozkoumejte Asistivní čtečka sdk a referenční informace k sadě sdk pro Asistivní čtečka.
Zobrazení ukázek kódu na GitHub.

spuštění Asistivní čtečka

Ohodnoťte vaše zkušenosti

Požadavky

Vytvoření Node.js webové aplikace pomocí Expressu

Získání ověřovacího tokenu Azure AD

spuštění Asistivní čtečka s ukázkovým obsahem

Zadejte jazyk vašeho obsahu

zadejte jazyk rozhraní Asistivní čtečka

spuštění Asistivní čtečka s využitím matematického obsahu

Další kroky

Požadavky

Konfigurace ověřovacích přihlašovacích údajů

Vytvoření webové aplikace v Pythonu na Windows

spuštění Asistivní čtečka s ukázkovým obsahem

Vytvoření webové aplikace v Pythonu v OSX

spuštění Asistivní čtečka s ukázkovým obsahem

Další kroky

Požadavky

Konfigurace ověřovacích přihlašovacích údajů

spuštění Asistivní čtečka s ukázkovým obsahem

Další kroky

Požadavky

Konfigurace ověřovacích přihlašovacích údajů

spuštění Asistivní čtečka s ukázkovým obsahem

Další kroky