Oktatóanyag: Webalkalmazás előkészítése az Azure Communication Serviceshez (Node.js)

Az Azure Communication Services használatával valós idejű kommunikációt adhat az alkalmazásokhoz. Ebben az oktatóanyagban megtudhatja, hogyan állíthat be olyan webalkalmazást, amely támogatja az Azure Communication Servicest. Ez egy bevezető oktatóanyag azoknak az új fejlesztőknek, akik valós idejű kommunikációt szeretnének kezdeni.

Az oktatóanyag végére rendelkezni fog egy alapkonfigurációs webalkalmazással, amely az Azure Communication Services SDK-kkal van konfigurálva. Ezután az alkalmazás használatával megkezdheti a valós idejű kommunikációs megoldás kiépítését.

Ha visszajelzést szeretne küldeni, látogasson el az Azure Communication Services GitHub oldalára .

Ebben az oktatóanyagban az alábbiakkal fog megismerkedni:

• Konfigurálja a fejlesztési környezetet.
• Helyi webkiszolgáló beállítása.
• Adja hozzá az Azure Communication Services-csomagokat a webhelyéhez.
• Tegye közzé webhelyét az Azure statikus webhelyein.

Előfeltételek

• Egy Azure-fiók, aktív előfizetéssel. További részletekért lásd : Fiók létrehozása ingyenesen. Az ingyenes fiók 200 USD értékű Azure-kreditet biztosít a szolgáltatások bármilyen kombinációjának kipróbálásához.
• Visual Studio Code a kód helyi fejlesztési környezetben való szerkesztéséhez.
• webpack a kód kötegeléséhez és helyi üzemeltetéséhez.
• Node.js olyan függőségek telepítéséhez és kezeléséhez, mint az Azure Communication Services SDK-k és a webpack.
• nvm és npm a verziókövetés kezeléséhez.
• A Visual Studio Code Azure Storage-bővítménye . Erre a bővítményre van szüksége az alkalmazás Azure Storage-ban való közzétételéhez. További információ a statikus webhelyek Azure Storage-ban való üzemeltetéséről.
• A Azure-alkalmazás szolgáltatásbővítmény. A bővítmény lehetővé teszi a webhelyek üzembe helyezését a teljes körűen felügyelt folyamatos integráció és folyamatos teljesítés (CI/CD) konfigurálásával.
• Az Azure Functions-bővítmény saját kiszolgáló nélküli alkalmazások létrehozásához. Például üzemeltetheti a hitelesítési alkalmazást az Azure Functionsben.
• Aktív Communication Services-erőforrás és kapcsolati sztring. Megtudhatja, hogyan hozhat létre Kommunikációs szolgáltatások erőforrást.
• Felhasználói hozzáférési jogkivonat. Útmutatásért tekintse meg a hozzáférési jogkivonatok létrehozásának és kezelésének rövid útmutatóit , vagy a megbízható hitelesítési szolgáltatás létrehozásához szükséges oktatóanyagot.

A fejlesztési környezet konfigurálása

A helyi fejlesztési környezet a következőképpen lesz konfigurálva:

Node.js, nvm és npm telepítése

Az ügyféloldali alkalmazáshoz szükséges különböző függőségek letöltéséhez és telepítéséhez Node.js fogjuk használni. Ezzel statikus fájlokat hozunk létre, amelyeket aztán az Azure-ban fogunk üzemeltetni, így nem kell aggódnia amiatt, hogy konfigurálja a kiszolgálón.

A Windows fejlesztői ezt a Node.js oktatóanyagot követve konfigurálhatják a Node, az nvm és az npm függvényt.

Ez az oktatóanyag az LTS 12.20.0-s verzióján alapul. Az nvm telepítése után a következő PowerShell-paranccsal telepítse a használni kívánt verziót:

PowerShell

nvm list available
nvm install 12.20.0
nvm use 12.20.0

A Visual Studio Code konfigurálása

A Visual Studio Code-ot az egyik támogatott platformon töltheti le.

Munkaterület létrehozása Azure Communication Services-projektekhez

Hozzon létre egy mappát a projektfájlok tárolásához a következő módon: C:\Users\Documents\ACS\CallingApp. A Visual Studio Code-ban válassza a Fájl>hozzáadása mappát a munkaterülethez lehetőséget, és adja hozzá a mappát a munkaterülethez.

A bal oldali panelen nyissa meg az EXPLORERt, és a mappa megjelenik CallingApp a UNTITLED munkaterületen.

Nyugodtan frissítheti a munkaterület nevét. A Node.js verzió érvényesítéséhez kattintson a jobb gombbal a CallingApp mappára, és válassza a Megnyitás az integrált terminálban lehetőséget.

A terminálban adja meg a következő parancsot az előző lépésben telepített Node.js verzió ellenőrzéséhez:

JavaScript

node --version

Azure-bővítmények telepítése a Visual Studio Code-hoz

Telepítse az Azure Storage-bővítményt a Visual Studio piacterén vagy a Visual Studio Code-on keresztül (Bővítmények>megtekintése>Azure Storage).

Kövesse ugyanazokat a lépéseket az Azure Functions és Azure-alkalmazás szolgáltatásbővítmények esetében.

Helyi webkiszolgáló beállítása

NPM-csomag létrehozása

A terminálban a munkaterület mappájának elérési útjáról írja be a következőt:

Console

npm init -y

Ez a parancs inicializál egy új npm-csomagot, és hozzáadja package.json a projekt gyökérmappájához.

A parancs további dokumentációját az npm initnpm Docs oldalán találja.

A webpack telepítése

A webpack használatával kódot csomagolhat statikus fájlokba, amelyeket üzembe helyezhet az Azure-ban. Emellett rendelkezik egy fejlesztőkiszolgálóval is, amelyet a hívási mintával való használatra konfigurál.

A terminálban adja meg a következő parancsot a webpack telepítéséhez:

Console

npm install webpack@4.42.0 webpack-cli@3.3.11 webpack-dev-server@3.10.3 --save-dev

Ezt az oktatóanyagot az előző parancsban megadott verziókkal teszteltük. -dev A beállítás azt jelzi a csomagkezelőnek, hogy ez a függőség fejlesztési célokat szolgál, és nem kell szerepelnie az Azure-ban üzembe helyezendő kódban.

A fájlhoz package.json két új csomag lesz hozzáadva.devDependencies A csomagok a címtárban ./CallingApp/node_modules/ lesznek telepítve.

A fejlesztői kiszolgáló konfigurálása

Egy statikus alkalmazás (például a index.html fájl) böngészőből való futtatása a protokollt file:// használja. Ahhoz, hogy az npm-modulok megfelelően működjenek, szüksége lesz a HTTP protokollra a webpack helyi fejlesztési kiszolgálóként való használatával.

Két konfigurációt fog létrehozni: egyet a fejlesztéshez, a másikat pedig az éles környezethez. Az éles használatra előkészített fájlok minifikálva lesznek, ami azt jelenti, hogy eltávolítja a nem használt szóközt és karaktereket. Ez a konfiguráció olyan éles forgatókönyvekhez megfelelő, ahol minimalizálni kell a késést, vagy ha a kódot el kell rögzíteni.

webpack-merge Az eszközzel különböző konfigurációs fájlokat használhat a webpackhez.

Kezdjük a fejlesztési környezettel. Először telepítenie webpack mergekell. A terminálban futtassa a következő parancsot:

Console

npm install --save-dev webpack-merge

package.json A fájlban még egy függőség devDependenciesjelenik meg.

Ezután hozzon létre egy hívott webpack.common.js fájlt, és adja hozzá a következő kódot:

JavaScript

const path = require('path');
module.exports ={
    entry: './app.js',
    output: {
        filename:'app.js',
        path: path.resolve(__dirname, 'dist'),
    }
}

Ezután adjon hozzá két további fájlt, egyet minden konfigurációhoz:

• webpack.dev.js
• webpack.prod.js

Most módosítsa a webpack.dev.js fájlt a következő kód hozzáadásával:

JavaScript

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline-source-map',
});

Ebben a konfigurációban importálja a gyakori paramétereket, webpack.common.jsegyesíti a két fájlt, beállítja a módot development, és a forrástérképet a következőképpen inline-source-mapkonfigurálja.

A fejlesztési mód azt jelzi, hogy a webpack nem minimalizálja a fájlokat, és nem hoz létre optimalizált éles fájlokat. A webpack móddal kapcsolatos részletes dokumentációt a webpack mód weblapján találja.

A forrástérkép beállításai a webpack Devtool weblapján jelennek meg. A forrástérkép beállítása megkönnyíti a hibakeresést a böngészőben.

A fejlesztői kiszolgáló futtatásához nyissa package.json meg és adja hozzá a következő kódot a következő alatt scripts:

JavaScript

    "build:dev": "webpack-dev-server --config webpack.dev.js"

A fájlnak így kell kinéznie:

JavaScript

{
  "name": "CallingApp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:dev": "webpack-dev-server --config webpack.dev.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

Hozzáadta az npm-ből használható parancsot.

A fejlesztői kiszolgáló tesztelése

A Visual Studio Code-ban hozzon létre három fájlt a projekt alatt:

• index.html
• app.js
• app.css (nem kötelező, az alkalmazás formázásához)

Illessze be a kódot a következőbe index.html:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My first Azure Communication Services application</title>
    <link rel="stylesheet" href="./app.css"/>
    <script src="./app.js" defer></script>
</head>
<body>
    <h1>Hello from Azure Communication Services!</h1>
</body>
</html>

Adja hozzá a következő kódot a app.js fájlhoz:

JavaScript

alert('Hello world alert!');
console.log('Hello world console!');

Adja hozzá a következő kódot a app.css fájlhoz:

CSS

html {
    font-family: sans-serif;
  }

Ne felejtsen el menteni! A nem mentett fájlt fehér pöttyök jelzik az Explorerben található fájlnevek mellett.

A lap megnyitásakor a böngésző konzolján egy riasztással kell megjelennie az üzenetnek.

A fejlesztési konfiguráció teszteléséhez használja a következő terminálparancsot:

Console

npm run build:dev

A konzol megmutatja, hogy hol fut a kiszolgáló. Alapértelmezés szerint az http://localhost:8080. A build:dev parancs a korábban hozzáadott package.json parancs.

Nyissa meg a böngészőben a címet, és az előző lépésekben konfigurált lapot és riasztást kell látnia.

Amíg a kiszolgáló fut, módosíthatja a kódot és a kiszolgálót. A HTML-oldal automatikusan újra betöltődik.

Ezután nyissa meg a fájlt a app.js Visual Studio Code-ban, és törölje a fájlt alert('Hello world alert!');. Mentse a fájlt, és ellenőrizze, hogy a riasztás eltűnik-e a böngészőből.

A kiszolgáló leállításához futhat Ctrl+C a terminálon. A kiszolgáló indításához bármikor be kell írnia npm run build:dev .

Az Azure Communication Services-csomagok hozzáadása

npm install A parancs használatával telepítse az Azure Communication Services Calling SDK for JavaScriptet.

Console

npm install @azure/communication-common --save
npm install @azure/communication-calling --save

Ez a művelet hozzáadja az Azure Communication Services gyakori és hívási csomagjait a csomag függőségeiként. Két új csomag lesz hozzáadva a package.json fájlhoz. További információt npm install az adott parancs npm Docs oldalán talál.

Ezeket a csomagokat az Azure Communication Services csapata biztosítja, és tartalmazzák a hitelesítési és hívási kódtárakat. A --save parancs jelzi, hogy az alkalmazás ezektől a csomagoktól függ éles használatra, és szerepelni fog a package.json fájlbandevDependencies. Az alkalmazás éles környezetben való létrehozásakor a csomagok szerepelni fognak az éles kódban.

Webhely közzététele statikus Azure-webhelyeken

Konfiguráció létrehozása éles üzembe helyezéshez

Adja hozzá a következő kódot a webpack.prod.js fájlhoz:

JavaScript

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
});

Ez a konfiguráció egyesül webpack.common.js (ahol megadta a bemeneti fájlt, és hol tárolja az eredményeket). A konfiguráció a módot is a következőre productionállítja: .

Adja package.jsonhozzá a következő kódot:

JavaScript

"build:prod": "webpack --config webpack.prod.js"

A fájlnak a következőhöz kell hasonlítania:

JavaScript

{
  "name": "CallingApp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:dev": "webpack-dev-server --config webpack.dev.js",
    "build:prod": "webpack --config webpack.prod.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@azure/communication-calling": "^1.0.0-beta.6",
    "@azure/communication-common": "^1.0.0"
  },
  "devDependencies": {
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3",
    "webpack-merge": "^5.7.3"
  }
}

A terminálban adja ki a parancsot:

Console

npm run build:prod

A parancs létrehoz egy dist mappát és egy éles üzemre kész app.js statikus fájlt.

Az alkalmazás üzembe helyezése az Azure Storage-ban

Másolja index.html és app.css másolja a dist mappába.

dist A mappában hozzon létre egy fájlt, és nevezze el.404.html Másolja a következő korrektúrát a fájlba:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./app.css"/>
    <title>Document</title>
</head>
<body>
    <h1>The page does not exists.</h1>
</body>
</html>

Mentse a fájlt (Ctrl+S).

Kattintson a jobb gombbal a dist mappára, és válassza az Üzembe helyezés statikus webhelyen az Azure Storage-on keresztül lehetőséget.

Az Előfizetés kiválasztása területen válassza a Bejelentkezés az Azure-ba (vagy ingyenes Azure-fiók létrehozása, ha korábban még nem hozott létre előfizetést).

Válassza az Új tárfiók>létrehozása speciális lehetőséget.

Adja meg a tárcsoport nevét.

Szükség esetén hozzon létre egy új erőforráscsoportot.

Ha engedélyezni szeretné a statikus webhely üzemeltetését?, válassza az Igen lehetőséget.

Az indexdokumentum nevének megadása esetén fogadja el az alapértelmezett fájlnevet. Már létrehozta a fájlt index.html.

Írja be a 404-as hibadokumentum elérési útját, írja be a 404.html.

Válassza ki az alkalmazás helyét. A kiválasztott hely határozza meg, hogy melyik médiafeldolgozót fogja használni a jövőbeni hívóalkalmazás a csoportos hívásokban.

Az Azure Communication Services az alkalmazás helye alapján választja ki a médiafeldolgozót.

Várjon, amíg létrejön az erőforrás és a webhely.

Válassza a Tallózás a webhelyre lehetőséget.

A böngésző fejlesztői eszközeiből megvizsgálhatja a forrást, és megtekintheti az éles használatra előkészített fájlt.

Nyissa meg az Azure Portalt, válassza ki az erőforráscsoportot, és válassza ki a létrehozott alkalmazást. Ezután válassza a Beállítások>statikus webhely lehetőséget. Láthatja, hogy a statikus webhelyek engedélyezve vannak. Jegyezze fel az elsődleges végpontot, az indexdokumentum nevét és a hibadokumentum elérési útját.

A Blob Service szakaszban válassza a Tárolók lehetőséget. A lista két létrehozott tárolót jelenít meg, egyet a naplókhoz ($logs) és egyet a webhely tartalmához ($web).

Ha megnyitja a tárolót $web , látni fogja a Visual Studióban létrehozott és az Azure-ban üzembe helyezett fájlokat.

Az alkalmazást bármikor újra üzembe helyezheti a Visual Studio Code-ból.

Most már készen áll az első Azure Communication Services-webalkalmazás összeállítására.

Következő lépések

Hanghívás hozzáadása az alkalmazáshoz

A következőket is érdemes lehet elvégeznie:

• Csevegés hozzáadása az alkalmazáshoz
• Felhasználói hozzáférési jogkivonatok létrehozása
• Tudnivalók az ügyfél- és kiszolgálóarchitektúráról
• Tudnivalók a hitelesítésről