Tam Ekran Okuyucu başlatma

Makale
08/28/2021
Okumak için 10 dakika

genel bakışta, Tam Ekran Okuyucu ne olduğunu ve dil öğrenimi, gelişmekte olan okuyucular ve öğrenme farklılığı olan öğrenciler için okuma kavramasını geliştirmek üzere kendini kanıtlamış tekniklerin nasıl uyguladığını öğrendiniz. bu makalede JavaScript, Python, Android veya iOS Tam Ekran Okuyucu nasıl başlatacağı gösterilmektedir.

Önkoşullar

Azure aboneliği- ücretsiz olarak bir tane oluşturun
Azure Active Directory kimlik doğrulaması için yapılandırılmış bir Tam Ekran Okuyucu kaynağı. Kurulumunu yapmak için Bu yönergeleri izleyin. Ortam özellikleri yapılandırılırken burada oluşturulan bazı değerler gerekir. Daha sonra başvurmak üzere oturumunuzun çıkışını bir metin dosyasına kaydedin.
Node.js ve Yarn
Visual Studio Code gibi bir ıde

Express ile Node.js Web uygulaması oluşturma

Araçla bir Node.js Web uygulaması oluşturun express-generator .

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

Yarn bağımlılıklarını yükleyip request dotenv daha sonra öğreticide kullanılacak bağımlılıkları ekleyin.

yarn
yarn add request
yarn add dotenv

Azure AD kimlik doğrulaması belirteci alma

Ardından, bir Azure AD kimlik doğrulama belirteci almak için bir arka uç API 'SI yazın.

Bu bölüm için yukarıdaki Azure AD auth yapılandırması önkoşul adımından bazı değerlere ihtiyacınız vardır. Bu oturumu kaydettiğiniz metin dosyasına geri bakın.

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/')

Bu değerleri aldıktan sonra, . env adlı yeni bir dosya oluşturun ve yukarıdaki özel özellik değerlerinizi sağlayarak aşağıdaki kodu içine yapıştırın. Tırnak işaretlerini veya "{" ve "}" karakterlerini eklemeyin.

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

Ortak olmaması gereken gizli dizileri içerdiğinden, bu dosyayı kaynak denetimine yürütmemeyi unutmayın.

Sonra, app.js açın ve aşağıdaki dosyayı dosyanın en üstüne ekleyin. Bu,. env dosyasında tanımlanan özellikleri, düğümüne ortam değişkenleri olarak yükler.

require('dotenv').config();

routes\index.js dosyasını açın ve içeriğini aşağıdaki kodla değiştirin.

Bu kod, hizmet sorumlusu parolanızı kullanarak bir Azure AD kimlik doğrulama belirteci alan bir API uç noktası oluşturur. Alt etki alanı da alır. Sonra belirteci ve alt etki alanını içeren bir nesne döndürür.

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;

getimmersivereaderlaunchparams apı uç noktası, yetkisiz kullanıcıların Tam Ekran Okuyucu hizmetinize ve faturalandırmaya karşı kullanım belirteçleri almasını engellemek için bazı kimlik doğrulama (örneğin, OAuth) arkasından güvenli olmalıdır; Bu iş, Bu öğreticinin kapsamı dışındadır.

örnek içerikle Tam Ekran Okuyucu başlatın

Views\layout.exe' nı açın ve etiketinden önce etiketin altına aşağıdaki kodu ekleyin head body . bu script etiketler Tam Ekran Okuyucu SDK ve jQuery ' i yükler.

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')

Views\ındex.Pug dosyasını açın ve içeriğini aşağıdaki kodla değiştirin. bu kod, sayfayı bazı örnek içerikle doldurur ve Tam Ekran Okuyucu başlatan bir düğme ekler.

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

Web Uygulamam artık hazır. Uygulamayı çalıştırarak başlatın:
```
npm start
```
Tarayıcınızı açın ve adresine gidin http://localhost:3000 . Sayfada Yukarıdaki içeriği görmeniz gerekir. içeriğinizi Tam Ekran Okuyucu başlatmak için Tam Ekran Okuyucu düğmesine tıklayın.

İçeriğinizin dilini belirtin

Tam Ekran Okuyucu birçok farklı dil için destek içerir. Aşağıdaki adımları izleyerek, içeriğinizin dilini belirtebilirsiniz.

Views\ındex.Pug ' i açın ve p(id=content) önceki adımda eklediğiniz etiketin altına aşağıdaki kodu ekleyin. Bu kod, sayfanıza bazı içerik Ispanyolca içerikleri ekler.

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.

JavaScript kodunda, çağrısının üzerine aşağıdakini ekleyin ImmersiveReader.launchAsync . bu kod, ispanyolca içeriğini Tam Ekran Okuyucu geçirir.
```
content.chunks.push({
  content: document.getElementById('content-spanish').innerText + '\n\n',
  lang: 'es'
});
```
Tekrar gidin http://localhost:3000 . sayfada ispanyolca metin görmeniz gerekir ve Tam Ekran Okuyucu' ye tıkladığınızda, Tam Ekran Okuyucu da görünür.

Tam Ekran Okuyucu arabiriminin dilini belirtin

varsayılan olarak, Tam Ekran Okuyucu arabiriminin dili tarayıcının dil ayarlarıyla eşleşir. aşağıdaki kodla Tam Ekran Okuyucu arabiriminin dilini de belirtebilirsiniz.

Views\ındex.Pug içinde, çağrısını ImmersiveReader.launchAsync(token, subdomain, content) aşağıdaki kodla değiştirin.
```
const options = {
    uiLang: 'fr',
}
ImmersiveReader.launchAsync(token, subdomain, content, options);
```
Öğesine gidin http://localhost:3000 . Tam Ekran Okuyucu başlattığınızda, arabirim fransızca olarak gösterilir.

matematik içeriğiyle Tam Ekran Okuyucu başlatın

MathML'yi kullanarak Tam Ekran Okuyucu matematik içeriği ekleyebilirsiniz.

Aşağıdaki kodu çağrısının üzerine eklemek için views\ındex.Pug öğesini değiştirin 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'
});

Öğesine gidin http://localhost:3000 . Tam Ekran Okuyucu başlatıp en alta kaydırdığınızda matematik formülünü görürsünüz.

Sonraki adımlar

Tam Ekran Okuyucu sdk ve Tam Ekran Okuyucu sdk başvurusunu keşfet
GitHub kod örneklerini görüntüle

Önkoşullar

Azure aboneliği- ücretsiz olarak bir tane oluşturun
Azure Active Directory kimlik doğrulaması için yapılandırılmış bir Tam Ekran Okuyucu kaynağı. Kurulumunu yapmak için Bu yönergeleri izleyin. Ortam özellikleri yapılandırılırken burada oluşturulan bazı değerler gerekir. Daha sonra başvurmak üzere oturumunuzun çıkışını bir metin dosyasına kaydedin.
Git.
SDK Tam Ekran Okuyucu.
Python ve PIP. Python 3,4 ' den başlayarak, PIP Python ikili yükleyicilerine göre varsayılan olarak dahil edilir.
Flask.
Jınja.
virtualalenv ve virtualalenvwrapper-win for Windows veya virtualenvwrapper for osx.
İstekler modülü.
Visual Studio Codegibi bir ıde.

Kimlik doğrulama kimlik bilgilerini yapılandırma

. Env adlı yeni bir dosya oluşturun ve içine aşağıdaki adları ve değerleri yapıştırın. Tam Ekran Okuyucu kaynağını oluştururken verilen değerleri sağlayın.

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

Ortak yapılmaması gereken gizli dizileri içerdiğinden, bu dosyayı kaynak denetimine teslim etmeyin.

Örnek, OAuthgibi bir kimlik doğrulaması biçiminin arkasındaki getimmersivereadertoken API uç noktasının güvenliğini sağlayın. kimlik doğrulaması, yetkisiz kullanıcıların Tam Ekran Okuyucu hizmetinize ve faturalandırmaya yönelik belirteçleri kullanmasına engel olur. Bu iş, Bu öğreticinin kapsamı dışındadır.

Windows üzerinde Python web uygulaması oluşturma

Windows kullanarak bir Python web uygulaması oluşturun flask .

Git'i yükler.

Git yüklendikten sonra, bir komut istemi açın ve Tam Ekran Okuyucu SDK Git deposunu bilgisayarınızdaki bir klasöre kopyalayın.

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

Python'ı yükler.

Yola Python Ekle onay kutusunu seçin.

Python Windows yüklemesi iletişim kutusu 1. adım

Onay kutularını seçerek Isteğe bağlı özellikler ekleyin ve ardından İleri' yi seçin.

Python Windows yüklemesi iletişim kutusu 2. adım

Özel yükleme' yi seçin ve yükleme yolunu kök klasörünüz olarak ayarlayın (örneğin,) C:\Python37-32\ . Ardından Yükle’yi seçin.

Python Windows yüklemesi iletişim kutusu 3. adım

Python yüklemesi tamamlandıktan sonra, bir komut istemi açın ve cd Python betikleri klasörüne gitmek için öğesini kullanın.

cd C:\Python37-32\Scripts

Flask 'yi yükler.

pip install flask

Jinja2 'i yükler. Python için tam özellikli bir şablon altyapısıdır.

pip install jinja2

Virtualenv 'yi yükler. Bu araç yalıtılmış Python ortamları oluşturur.

pip install virtualenv

Virtualalenvwrapper-WIN 'yi yükler. Virtualalenvwrapper arkasındaki fikir virtualalenv kullanımını kolaylaştırmaya yönelik.

pip install virtualenvwrapper-win

İstekler modülünü yükler. İstekler, Python 'da yazılmış bir apache2 lisanslı HTTP kitaplığı.

pip install requests

Python-dotenv modülünü yükler. Bu modül,. env dosyasından anahtar-değer çiftini okur ve ortam değişkenine ekler.

pip install python-dotenv

Sanal bir ortam oluşturun.

mkvirtualenv advanced-python

cdÖrnek proje kök klasörüne gitmek için öğesini kullanın.

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

örnek projeyi ortamla Bağlan. Bu eylem, yeni oluşturulan sanal ortamı örnek proje kök klasörüne eşler.

setprojectdir .

Sanal ortamı etkinleştirin.

activate

Proje artık etkin olmalıdır ve komut isteminde gibi bir şey görürsünüz (advanced-python) C:\immersive-reader-sdk\js\samples\advanced-python> .

Ortamı devre dışı bırakın.

deactivate

(advanced-python)Ortam devre dışı bırakıldığı için ön ek gitmelidir.

Ortamı yeniden etkinleştirmek için workon advanced-python örnek proje kök klasöründen çalıştırın.

workon advanced-python

örnek içerikle Tam Ekran Okuyucu başlatın

Ortam etkin olduğunda, örnek proje kök klasöründen girerek örnek projeyi çalıştırın flask run .

flask run

Tarayıcınızı açın ve adresine gidin http://localhost:5000 .

OSX üzerinde bir Python web uygulaması oluşturma

OSX üzerinde kullanarak bir Python web uygulaması oluşturun flask .

Git'i yükler.

Git yüklendikten sonra, Terminal 'yi açın ve Tam Ekran Okuyucu SDK Git deposunu bilgisayarınızdaki bir klasöre kopyalayın.

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

Python'ı yükler.

Python kök klasörü, örneğin,, Python37-32 artık uygulamalar klasöründe olmalıdır.

Python yüklemesi tamamlandıktan sonra, ' yi açın ve cd Python betikleri klasörüne gitmek için öğesini kullanın.

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

Pip yükleyin.

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

İzin sorunlarından kaçınmak için şu anda oturum açmış olan kullanıcıya yönelik PIP 'yi yüklemek için aşağıdaki kodu çalıştırın.

python get-pip.py --user

sudo nano /etc/paths

İstendiğinde parolanızı girin.
PIP yüklemenizin yolunu PATH değişkenine ekleyin.
Dosyanın sonuna gidin ve listenin son öğesi olarak eklemek istediğiniz yolu girin, örneğin PATH=$PATH:/usr/local/bin .
Çıkmak için CTRL + X ' i seçin.
Değiştirilen arabelleği kaydetmek için Y girin.
İşte bu kadar! Bunu test etmek için yeni bir Terminal penceresinde girin echo $PATH .

Flask 'yi yükler.

pip install flask --user

Jinja2 'i yükler. Python için tam özellikli bir şablon altyapısıdır.

pip install Jinja2 --user

Virtualenv 'yi yükler. Bu araç yalıtılmış Python ortamları oluşturur.

pip install virtualenv --user

Virtualalenvwrapper 'ı yükler. Virtualalenvwrapper arkasındaki fikir virtualalenv kullanımını kolaylaştırmaya yönelik.

pip install virtualenvwrapper --user

İstekler modülünü yükler. İstekler, Python 'da yazılmış bir apache2 lisanslı HTTP kitaplığı.

pip install requests --user

Python-dotenv modülünü yükler. Bu modül,. env dosyasından anahtar-değer çiftini okur ve ortam değişkenine ekler.

pip install python-dotenv --user

Sanal ortamlarınızı tutmak istediğiniz klasörü seçin ve şu komutu çalıştırın:

mkdir ~/.virtualenvs

cdTam Ekran Okuyucu SDK Python örnek uygulama klasörüne gitmek için kullanın.

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

Sanal bir ortam oluşturun.

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

örnek projeyi ortamla Bağlan. Bu eylem, yeni oluşturulan sanal ortamı örnek proje kök klasörüne eşler.

setprojectdir .

Sanal ortamı etkinleştirin.

activate

Proje artık etkin olmalıdır ve komut isteminde gibi bir şey görürsünüz (advanced-python) /immersive-reader-sdk/js/samples/advanced-python> .

Ortamı devre dışı bırakın.

deactivate

(advanced-python)Ortam devre dışı bırakıldığı için ön ek gitmelidir.

Ortamı yeniden etkinleştirmek için workon advanced-python örnek proje kök klasöründen çalıştırın.

workon advanced-python

örnek içerikle Tam Ekran Okuyucu başlatın

Ortam etkin olduğunda, örnek proje kök klasöründen girerek örnek projeyi çalıştırın flask run .

flask run

Tarayıcınızı açın ve adresine gidin http://localhost:5000 .

Sonraki adımlar

Tam Ekran Okuyucu sdk ve Tam Ekran Okuyucu sdk başvurusunugezin.
üzerinde kod örneklerini GitHub.

Önkoşullar

Azure aboneliği - Ücretsiz bir abonelik oluşturun
Kimlik Tam Ekran Okuyucu için yapılandırılmış bir Azure Active Directory kaynağı. Ayarlamak için bu yönergeleri izleyin. Ortam özelliklerini yapılandırarak burada oluşturulan değerlerden bazıları gerekir. Oturum çıkışınızı daha sonra başvurulacak bir metin dosyasına kaydedin.
Git .
Tam Ekran Okuyucu SDK'sı.
Android Studio.

Kimlik doğrulama kimlik bilgilerini yapılandırma

Android Studio'yi açın ve immersive-reader-sdk/js/samples/quickstart-java-android dizininden (Java) veya immersive-reader-sdk/js/samples/quickstart-kotlin dizininden (Kotlin) projeyi açın.
/assets klasörünün içinde env adlı bir dosya oluşturun. Aşağıdaki adları ve değerleri ekleyin ve değerleri uygun şekilde ekleyin. Genel olarak açık olmaması gereken gizli diziler içerdiği için bu dosyayı kaynak denetimine işlemeyebilirsiniz.
```
TENANT_ID=<YOUR_TENANT_ID>
CLIENT_ID=<YOUR_CLIENT_ID>
CLIENT_SECRET=<YOUR_CLIENT_SECRET>
SUBDOMAIN=<YOUR_SUBDOMAIN>
```

Örnek içerikle Tam Ekran Okuyucu başlatma

AVD Yöneticisi'nde bir cihaz öykünücüsü seçin ve projeyi çalıştırın.

Sonraki adımlar

Tam Ekran Okuyucu SDK'sı ve Tam Ekran Okuyucu SDK başvurularını keşfedin.
üzerinde kod örneklerini GitHub.

Önkoşullar

Azure aboneliği - Ücretsiz bir abonelik oluşturun
Kimlik Tam Ekran Okuyucu için yapılandırılmış bir Azure Active Directory kaynağı. Ayarlamak için bu yönergeleri izleyin. Ortam özelliklerini yapılandırarak burada oluşturulan değerlerden bazıları gerekir. Oturum çıkışınızı daha sonra başvurulacak bir metin dosyasına kaydedin.
macOS.
Git .
Tam Ekran Okuyucu SDK'sı.
Xcode.

Kimlik doğrulama kimlik bilgilerini yapılandırma

Xcode'u açın ve immersive-reader-sdk/js/samples/ios/quickstart-swift/quickstart-swift.xcodeproj açın.
Üst menüden Ürün Şeması Düzenleme > Düzeni'ne > tıklayın.
Çalıştır görünümünde Bağımsız Değişkenler sekmesini seçin.
Ortam Değişkenleri bölümünde aşağıdaki adları ve değerleri ekleyin. Kaynak kaynağınızı oluşturulduğunda verilen Tam Ekran Okuyucu sağlar.
```
TENANT_ID=<YOUR_TENANT_ID>
CLIENT_ID=<YOUR_CLIENT_ID>
CLIENT_SECRET<YOUR_CLIENT_SECRET>
SUBDOMAIN=<YOUR_SUBDOMAIN>
```

Genel olarak açık olmaması gereken gizli diziler içerdiği için bu değişikliği kaynak denetimine işlemeyin.

Örnek içerikle Tam Ekran Okuyucu başlatma

Projeyi çalıştırmak için Xcode'da Ctrl+R tuşlarını seçin.

Sonraki adımlar

Tam Ekran Okuyucu SDK'sı ve Tam Ekran Okuyucu SDK başvurularını keşfedin.
üzerinde kod örneklerini GitHub.

Tam Ekran Okuyucu başlatma

Lütfen deneyiminizi değerlendirin

Önkoşullar

Express ile Node.js Web uygulaması oluşturma

Azure AD kimlik doğrulaması belirteci alma

örnek içerikle Tam Ekran Okuyucu başlatın

İçeriğinizin dilini belirtin

Tam Ekran Okuyucu arabiriminin dilini belirtin

matematik içeriğiyle Tam Ekran Okuyucu başlatın

Sonraki adımlar

Önkoşullar

Kimlik doğrulama kimlik bilgilerini yapılandırma

Windows üzerinde Python web uygulaması oluşturma

örnek içerikle Tam Ekran Okuyucu başlatın

OSX üzerinde bir Python web uygulaması oluşturma

örnek içerikle Tam Ekran Okuyucu başlatın

Sonraki adımlar

Önkoşullar

Kimlik doğrulama kimlik bilgilerini yapılandırma

Örnek içerikle Tam Ekran Okuyucu başlatma

Sonraki adımlar

Önkoşullar

Kimlik doğrulama kimlik bilgilerini yapılandırma

Örnek içerikle Tam Ekran Okuyucu başlatma

Sonraki adımlar