몰입형 리더를 시작하는 Node.js 웹 앱 만들기

Immersive Reader는 새로운 독자, 언어 학습자 및 난독증과 같이 학습 차이가 있는 사람들을 위해 읽기 이해력을 향상시키기 위해 입증된 기술을 구현하는 포괄적으로 설계된 도구입니다. 이 튜토리얼에서는 몰입형 리더를 시작하는 Node.js 웹 애플리케이션을 만드는 방법을 다룹니다. 이 자습서에서는 다음을 수행하는 방법을 배웁니다.

• Express로 Node.js 웹 앱 만들기
• 액세스 토큰 획득
• 샘플 콘텐츠가 포함된 몰입형 리더 시작
• 콘텐츠 언어 지정
• 몰입형 리더 인터페이스의 언어 지정
• 수학 콘텐츠가 포함된 몰입형 리더 시작

Azure 구독이 없는 경우 무료 계정 시작하기 전에.

전제 조건

• Azure Active Directory 인증을 위해 구성된 몰입형 리더 리소스입니다. 환경 속성을 구성할 때 여기에서 생성된 값 중 일부가 필요합니다. 나중에 참조할 수 있도록 세션의 출력을 텍스트 파일에 저장합니다.
• 노드.js 그리고 실
• 다음과 같은 IDE 비주얼 스튜디오 코드

Express로 Node.js 웹 앱 만들기

|_+_|를 사용하여 Node.js 웹 앱 만들기 도구.

얀 종속성을 설치하고 종속성을 추가하십시오 |_+_| 및 |_+_|, 이 튜토리얼의 뒷부분에서 사용됩니다.

Azure AD 인증 토큰 획득

다음으로 Azure AD 인증 토큰을 검색하는 백엔드 API를 작성합니다.

디지털 준비 통화 가격 예측

이 부분에 대해 위의 Azure AD 인증 구성 필수 구성 요소 단계에서 일부 값이 필요합니다. 해당 세션에 대해 저장한 텍스트 파일을 다시 참조하십시오.

이 값이 있으면 다음이라는 새 파일을 만듭니다. .env , 위의 사용자 지정 속성 값을 제공하여 다음 코드를 붙여넣습니다. 따옴표 또는 { 및 } 문자를 포함하지 마십시오.

커스텀 페이스북 로그인 버튼

이 파일에는 공개해서는 안 되는 비밀이 포함되어 있으므로 소스 제어에 커밋하지 마십시오.

다음으로 엽니다. 앱.js 파일 맨 위에 다음을 추가하십시오. 그러면 .env 파일에 정의된 속성이 환경 변수로 Node.js에 로드됩니다.

열기 경로index.js 파일을 만들고 그 내용을 다음 코드로 바꿉니다.

이 코드는 서비스 주체 암호를 사용하여 Azure AD 인증 토큰을 획득하는 API 끝점을 만듭니다. 또한 하위 도메인을 검색합니다. 그런 다음 토큰과 하위 도메인이 포함된 개체를 반환합니다.

NS timmersivereaderlaunchparams API 엔드포인트는 특정 형식의 인증(예: OAuth ) 승인되지 않은 사용자가 몰입형 리더 서비스 및 청구에 사용할 토큰을 얻지 못하도록 방지합니다. 그 작업은 이 튜토리얼의 범위를 벗어납니다.

샘플 콘텐츠가 포함된 몰입형 리더 시작

1. 열려있는 보기레이아웃.퍼그 , |_+_| 아래에 다음 코드를 추가하십시오. 태그, |_+_| 꼬리표. 이 |_+_| 태그 로드 몰입형 리더 SDK 그리고 제이쿼리.

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

2. 열려있는 보기index.pug , 그 내용을 다음 코드로 바꿉니다. 이 코드는 페이지를 몇 가지 샘플 콘텐츠로 채우고 몰입형 리더를 시작하는 버튼을 추가합니다.

   att.net 이메일 비밀번호 재설정

   require('dotenv').config();

3. 이제 웹 앱이 준비되었습니다. 다음을 실행하여 앱을 시작합니다.

   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;

4. 브라우저를 열고 다음으로 이동하십시오. http://localhost:3000 . 페이지에 위의 내용이 표시되어야 합니다. 클릭 몰입형 리더 버튼을 눌러 콘텐츠와 함께 몰입형 리더를 시작합니다.

콘텐츠 언어 지정

몰입형 리더는 다양한 언어를 지원합니다. 아래 단계에 따라 콘텐츠의 언어를 지정할 수 있습니다.

1. 열려있는 보기index.pug |_+_| 아래에 다음 코드를 추가하십시오. 이전 단계에서 추가한 태그입니다. 이 코드는 일부 콘텐츠 스페인어 콘텐츠를 페이지에 추가합니다.

   head

2. JavaScript 코드에서 |__+_| 호출 위에 다음을 추가합니다. 이 코드는 스페인어 콘텐츠를 몰입형 리더로 전달합니다.

   webroot 스파이 스위퍼를 비활성화하는 방법

   body

3. 로 이동 http://localhost:3000 다시. 페이지에 스페인어 텍스트가 표시되어야 합니다. 몰입형 리더 , 몰입형 리더에도 표시됩니다.

몰입형 리더 인터페이스의 언어 지정

기본적으로 몰입형 리더 인터페이스의 언어는 브라우저의 언어 설정과 일치합니다. 다음 코드를 사용하여 몰입형 리더 인터페이스의 언어를 지정할 수도 있습니다.

1. 에 보기index.pug , 호출을 |_+_|로 바꿉니다. 아래 코드로.

   script

2. 로 이동 http://localhost:3000 . 몰입형 리더를 실행하면 인터페이스가 프랑스어로 표시됩니다.

수학 콘텐츠가 포함된 몰입형 리더 시작

다음을 사용하여 몰입형 리더에 수학 콘텐츠를 포함할 수 있습니다. 수학ML .

우리에서 시바 코인을 구입하는 방법

1. 수정하다 보기index.pug |_+_|에 대한 호출 위에 다음 코드를 포함합니다.

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

2. 로 이동 http://localhost:3000 . 몰입형 리더를 실행하고 맨 아래로 스크롤하면 수학 공식이 표시됩니다.

다음 단계

• 탐색 몰입형 리더 SDK
• 코드 샘플 보기 깃허브

#nodejs #azure #몰입형 리더