Tam Ekran Okuyucu başlatma

Makale
03/05/2024

Genel bakış bölümünde Tam Ekran Okuyucu ve dil öğrenenler, yeni ortaya çıkan okuyucular ve öğrenme farklılıkları olan öğrenciler için okuma kavramayı geliştirmek için kanıtlanmış teknikleri nasıl uyguladığını öğrendiniz. Bu makalede JavaScript, Python, Android veya iOS kullanarak Tam Ekran Okuyucu nasıl başlatıldığı gösterilmektedir.

Önkoşullar

Azure aboneliği. Ücretsiz bir tane oluşturabilirsiniz.
Microsoft Entra kimlik doğrulaması için yapılandırılmış bir Tam Ekran Okuyucu kaynağı. Ayarlamak için bu yönergeleri izleyin. Ortam özelliklerini yapılandırabilmeniz için oturumunuzun çıkışını bir metin dosyasına kaydedin.
Node.js ve Yarn.
Visual Studio Code gibi bir IDE.

Express ile Node.js web uygulaması oluşturma

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

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

Yarn bağımlılıklarını yükleyin ve öğreticinin ilerleyen bölümlerinde kullanılan ve bağımlılıklarını requestdotenvekleyin.

yarn
yarn add request
yarn add dotenv

Aşağıdaki komutla axios ve qs kitaplıklarını yükleyin:

npm install axios qs

Kimlik doğrulaması kurulumu

Ardından, Microsoft Entra kimlik doğrulama belirtecini almak için bir arka uç API'sini yazın.

Bu bölüm için Microsoft Entra kimlik doğrulama yapılandırması önkoşul adımından bazı değerlere ihtiyacınız vardır. Bu oturumdan kaydettiğiniz metin dosyasına geri dönün.

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

Projenizin kökünde .env adlı yeni bir dosya oluşturun. aşağıdaki kodu yapıştırın ve Tam Ekran Okuyucu kaynağınızı oluştururken verilen değerleri sağlayı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}

Genel kullanıma açık olmaması gereken gizli diziler içerdiği için bu dosyayı kaynak denetimine işlememeye dikkat edin.

Ardından app.js açın ve dosyanın en üstüne aşağıdakileri ekleyin. Bu, .env dosyasında ortam değişkenleri olarak tanımlanan özellikleri Node'a 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 Microsoft Entra kimlik doğrulama belirtecini alan bir API uç noktası oluşturur. Ayrıca alt etki alanını da alır. Ardından 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 API uç noktası, yetkisiz kullanıcıların Tam Ekran Okuyucu hizmetinize ve faturalamanıza karşı kullanılacak belirteçleri almasını önlemek için bir tür kimlik doğrulamasının (örneğin, OAuth) arkasında güvenli hale getirilmelidir; bu işlem bu öğreticinin kapsamı dışındadır.

Örnek içerikle Tam Ekran Okuyucu başlatma

views\layout.pug dosyasını açın ve etiketin altına etiketin head önüne body aşağıdaki kodu ekleyin. Bu script etiketler Tam Ekran Okuyucu SDK'sını ve jQuery'yi yükler.
```
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')
```

views\index.pug dosyasını açın ve içeriğini aşağıdaki kodla değiştirin. Bu kod sayfayı bazı örnek içeriklerle 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ız artık hazır. Aşağıdakini çalıştırarak uygulamayı başlatın:
```
npm start
```
Tarayıcınızı açın ve adresine http://localhost:3000gidin. Yukarıdaki içeriği sayfada görmeniz gerekir. İçeriğinizle Tam Ekran Okuyucu başlatmak için Tam Ekran Okuyucu düğmesini seçin.

İçeriğinizin dilini belirtin

Tam Ekran Okuyucu birçok farklı dil için destek vardır. Bu adımları izleyerek içeriğinizin dilini belirtebilirsiniz.

views\index.pug dosyasını açın ve önceki adımda eklediğiniz etiketin p(id=content) altına aşağıdaki kodu ekleyin. Bu kod sayfanıza bazı İspanyolca içerik 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.

views\index.pug dosyasında, çağrısının ImmersiveReader.launchAsyncüzerine aşağıdaki kodu ekleyin. Bu kod, İspanyolca içeriğini Tam Ekran Okuyucu geçirir.
```
content.chunks.push({
  content: document.getElementById('content-spanish').innerText + '\n\n',
  lang: 'es'
});
```
http://localhost:3000 sayfasına yeniden gidin. sayfada İspanyolca metni görmeniz gerekir ve Tam Ekran Okuyucu seçtiğinizde, Tam Ekran Okuyucu de gösterilir.

Tam Ekran Okuyucu arabiriminin dilini belirtme

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\index.pug dosyasında çağrısı ImmersiveReader.launchAsync(token, subdomain, content) yerine aşağıdaki kodu yazın.
```
const options = {
    uiLang: 'fr',
}
ImmersiveReader.launchAsync(token, subdomain, content, options);
```
Şuraya gidin: http://localhost:3000 Tam Ekran Okuyucu başlattığınızda arabirim Fransızca gösterilir.

matematik içeriğiyle Tam Ekran Okuyucu başlatma

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

views\index.pug dosyasını çağrısının üst kısmında aşağıdaki kodu içerecek şekilde ImmersiveReader.launchAsyncdeğiştirin:

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

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

Sonraki adım

Tam Ekran Okuyucu SDK'sını keşfetme

Önkoşullar

Azure aboneliği. Ücretsiz bir tane oluşturabilirsiniz.
Microsoft Entra kimlik doğrulaması için yapılandırılmış bir Tam Ekran Okuyucu kaynağı. Ayarlamak için bu yönergeleri izleyin. Ortam özelliklerini yapılandırabilmeniz için oturumunuzun çıkışını bir metin dosyasına kaydedin.
Visual Studio Code gibi bir IDE.
Git.
GitHub'dan Tam Ekran Okuyucu SDK'sını kopyalayın.

Bu kılavuzdaki yönergelerin bir parçası olarak aşağıdaki araçları yükleyebilirsiniz:

Python ve pip. Python 3.4'ten başlayarak, pip varsayılan olarak Python ikili yükleyicilerine eklenir.
Şişe
Jinja
Windows için virtualenv ve virtualenvwrapper-win veya OSX için virtualenvwrapper
İstekler modülü

Kimlik doğrulama kimlik bilgilerini yapılandırma

Projenizin kök dizininde .env adlı yeni bir dosya oluşturun. Aşağıdaki adları ve değerleri içine yapıştırın. Tam Ekran Okuyucu kaynağınızı 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 hale getirilmemesi gereken gizli diziler içerdiği için bu dosyayı kaynak denetimine işlemeyin.

Getimmersivereadertoken API uç noktasınıN güvenliğini OAuth gibi bir kimlik doğrulama biçiminin arkasında sağlayın. Kimlik doğrulaması, yetkisiz kullanıcıların Tam Ekran Okuyucu hizmetinize ve faturalamanıza karşı kullanmak üzere belirteçler almasını engeller. Bu çalışma bu öğreticinin kapsamının dışındadır.

Windows'da Python web uygulaması oluşturma

Python'ı yükleyin.

PYTHON'ı PATH'e ekle onay kutusunu seçin ve Özel yükleme'yi seçin.

Screenshot of Install Python step 1 with Add Python to Path checkbox.

onay kutularını seçip İleri'yi seçerek İsteğe Bağlı Özellikler'i ekleyin.

Screenshot of Install Python step 2 with optional features.

Gelişmiş Seçenekler'in altında, yükleme yolunu kök klasörünüz olarak ayarlayın; örneğin, C:\Python312. Ardından Yükle’yi seçin.

İpucu

Özel bir yükleme yolu ayarladığınızda, PATH değişkeni yine de varsayılan yükleme yolunu işaret edebilir. PATH'in özel klasöre işaret ettiğini doğrulayın.

Screenshot of Install Python step 3 with custom location.

Python yüklemesi tamamlandıktan sonra bir komut istemi açın ve komutunu kullanarak cd Python Betikleri klasörüne gidin.

cd C:\Python312\Scripts

Flask'i yükleyin.

pip install flask

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

pip install jinja2

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

pip install virtualenv

virtualenvwrapper-win dosyasını yükleyin. virtualenvwrapper'ın ardındaki fikir, virtualenv kullanımını kolaylaştırmaktır.

pip install virtualenvwrapper-win

İstekler modülünü yükleyin. İstekler, Python'da yazılmış bir Apache2 Lisanslı HTTP kitaplığıdır.

pip install requests

python-dotenv modülünü yükleyin. 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.bat quickstart-python

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

cd C:\immersive-reader-sdk\js\samples\quickstart-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 şuna benzer (quickstart-python) C:\immersive-reader-sdk\js\samples\quickstart-python> bir şey görürsünüz.

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

deactivate

(quickstart-python) Ortam devre dışı bırakıldığından ön ek gitmiş olmalıdır.

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

workon quickstart-python

örnek içerikle Tam Ekran Okuyucu başlatma

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

flask run

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

OSX'te Python web uygulaması oluşturma

Python'ı yükleyin.

Python kök klasörü, örneğin, Python312artık Uygulamalar klasöründe olmalıdır. Terminal'i açın ve Python klasörüne gitmek için kullanın cd .

cd Python312

Pip yükleyin.

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

İzin sorunlarını önlemek amacıyla şu anda oturum açmış olan kullanıcının pip dosyasını 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şkeninize ekleyin.
Dosyanın en altına gidin ve listenin son öğesi olarak eklemek istediğiniz yolu girin; örneğin, PATH=$PATH:/usr/local/bin.
Çıkmak için CTRL+X tuşlarına basın.
Değiştirilen arabelleği kaydetmek için Y girin.

İşte hepsi bu! Test etmek için yeni bir Terminal penceresine girin echo $PATH.

Flask'i yükleyin.

pip install flask --user

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

pip install Jinja2 --user

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

pip install virtualenv --user

virtualenvwrapper'ı yükleyin. virtualenvwrapper'ın ardındaki fikir, virtualenv kullanımını kolaylaştırmaktır.

pip install virtualenvwrapper --user

İstekler modülünü yükleyin. İstekler, Python'da yazılmış bir Apache2 Lisanslı HTTP kitaplığıdır.

pip install requests --user

python-dotenv modülünü yükleyin. 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ı saklamak istediğiniz klasörü seçin ve şu komutu çalıştırın:

mkdir ~/.virtualenvs

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

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

Sanal bir ortam oluşturun.

mkvirtualenv -p /usr/local/bin/python3 quickstart-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 şuna benzer (quickstart-python) /immersive-reader-sdk/js/samples/quickstart-python> bir şey görürsünüz.

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

deactivate

(quickstart-python) Ortam devre dışı bırakıldığından ön ek gitmiş olmalıdır.

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

workon quickstart-python

örnek içerikle Tam Ekran Okuyucu başlatma

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

flask run

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

Sonraki adım

Tam Ekran Okuyucu SDK başvuruyu keşfetme

Önkoşullar

Azure aboneliği. Ücretsiz bir tane oluşturabilirsiniz.
Microsoft Entra kimlik doğrulaması için yapılandırılmış bir Tam Ekran Okuyucu kaynağı. Ayarlamak için bu yönergeleri izleyin. Ortam özelliklerini yapılandırabilmeniz için oturumunuzun çıkışını bir metin dosyasına kaydedin.
Git.
GitHub'dan Tam Ekran Okuyucu SDK'sını kopyalayın.
Android Studio.

Kimlik doğrulama kimlik bilgilerini yapılandırma

Android Studio'yu başlatın ve tam ekran okuyucu-sdk/js/samples/quickstart-java-android dizininden (Java) veya tam ekran okuyucu-sdk/js/samples/quickstart-kotlin dizininden (Kotlin) Tam Ekran Okuyucu SDK projesini açın.

İpucu

Sistemin Gradle eklentilerini en az 8 sürümüne güncelleştirmesine izin vermeniz gerekebilir.
Yeni bir varlıklar klasörü oluşturmak için uygulamaya sağ tıklayın ve açılan listeden Klasör ->Varlıklar Klasörü'ne tıklayın.
Varlıklara sağ tıklayın ve Yeni ->Dosya'ya tıklayın. Dosyayı env olarak adlandırın.
Aşağıdaki adları ve değerleri ekleyin ve değerleri uygun şekilde sağlayın. Ortak hale getirilmemesi gereken gizli diziler içerdiği için bu dosyayı kaynak denetimine işlemeyin.
```
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'nden bir cihaz öykünücüsü seçin ve projeyi çalıştırın.

Sonraki adımlar

Tam Ekran Okuyucu SDK'sını keşfetme

Önkoşullar

Azure aboneliği. Ücretsiz bir tane oluşturabilirsiniz.
Microsoft Entra kimlik doğrulaması için yapılandırılmış bir Tam Ekran Okuyucu kaynağı. Ayarlamak için bu yönergeleri izleyin. Ortam özelliklerini yapılandırabilmeniz için oturumunuzun çıkışını bir metin dosyasına kaydedin.
macOS ve Xcode.
Git.
GitHub'dan Tam Ekran Okuyucu SDK'sını kopyalayın.

Kimlik doğrulama kimlik bilgilerini yapılandırma

Xcode'da Varolan Projeyi Aç'ı seçin. immersive-reader-sdk/js/samples/ios/quickstart-swift.xcodeproj dosyasını açın.
Üstteki menüde Ürün>Şeması Düzeni> Düzenle'yi seçin.
Ç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. Tam Ekran Okuyucu kaynağınızı 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>
```

Genel kullanıma 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

Xcode'da bir cihaz simülatörü seçin, ardından denetimlerden projeyi çalıştırın veya Ctrl+R tuşlarına basın.

Sonraki adım

Tam Ekran Okuyucu SDK'sını keşfetme

Tam Ekran Okuyucu başlatma

Önkoşullar

Express ile Node.js web uygulaması oluşturma

Kimlik doğrulaması kurulumu

Örnek içerikle Tam Ekran Okuyucu başlatma

İçeriğinizin dilini belirtin

Tam Ekran Okuyucu arabiriminin dilini belirtme

matematik içeriğiyle Tam Ekran Okuyucu başlatma

Sonraki adım

Önkoşullar

Kimlik doğrulama kimlik bilgilerini yapılandırma

Windows'da Python web uygulaması oluşturma

örnek içerikle Tam Ekran Okuyucu başlatma

OSX'te Python web uygulaması oluşturma

örnek içerikle Tam Ekran Okuyucu başlatma

Sonraki adım

Ö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ım

Ek kaynaklar