Vytvoření aplikace Angular pomocí rozhraní API služby Azure Cosmos DB pro MongoDB – Vytvoření aplikace Node.js Express

Článek
06/01/2023

PLATÍ PRO: MongoDB

Tento vícedílný kurz ukazuje, jak vytvořit novou aplikaci napsanou v Node.js s Expressem a Angularem a pak ji připojit k účtu služby Azure Cosmos DB nakonfigurovaného pomocí rozhraní API služby Azure Cosmos DB pro MongoDB.

Druhá část kurzu vychází z úvodu a zabývá se následujícími úlohami:

Instalace Angular CLI a jazyka TypeScript
Vytvoření nového projektu pomocí Angular
Sestavení aplikace pomocí rozhraní Express
Testování aplikace v nástroji Postman

Video s návodem

Požadavky

Před zahájením této části kurzu se nezapomeňte podívat na úvodní video.

V tomto kurzu budete také potřebovat:

Node.js verze 8.4.0 nebo vyšší.
Postman
Visual Studio Code nebo váš oblíbený editor kódu.

Tip

Tento kurz vás postupně provede jednotlivými kroky vytvoření aplikace. Pokud si chcete stáhnout dokončený projekt, v úložišti angular-cosmosdb na GitHubu můžete získat hotovou aplikaci.

Instalace Angular CLI a jazyka TypeScript

Otevřete okno příkazového řádku ve Windows nebo okno Terminálu na Macu a nainstalujte Angular CLI.
```
npm install -g @angular/cli
```
Nainstalujte TypeScript zadáním následujícího příkazu na příkazovém řádku.
```
npm install -g typescript
```

Vytvoření nového projektu pomocí Angular CLI

Na příkazovém řádku přejděte do složky, ve které chcete vytvořit nový projekt, a spusťte následující příkaz. Tento příkaz vytvoří novou složku a projekt angular-cosmosdb a nainstaluje komponenty Angular požadované pro novou aplikaci. Použije minimální instalaci (--minimal) a určí, že projekt používá Sass, což je syntax podobná šablonám stylů CSS (pomocí příznaku --style scss).
```
ng new angular-cosmosdb --minimal --style scss
```
Po dokončení příkazu změňte adresář na složku src/client.
```
cd angular-cosmosdb
```
Potom tuto složku otevřete ve Visual Studio Code.
```
code .
```

Sestavení aplikace pomocí rozhraní Express

Ve Visual Studio Code v podokně Průzkumník klikněte pravým tlačítkem na složku src, klikněte na Nová složka a pojmenujte novou složku server.
V podokně Průzkumník klikněte pravým tlačítkem na složku server, klikněte na Nový soubor a pojmenujte nový soubor index.js.
Zpět na příkazovém řádku pomocí následujícího příkazu nainstalujte analyzátor textu. Ten pomáhá aplikaci parsovat data JSON předávaná prostřednictvím rozhraní API.
```
npm i express body-parser --save
```
Ve Visual Studio Code zkopírujte následující kód do souboru index.js. Tento kód:
- Odkazuje na Express.
- Přetáhne analyzátor textu pro čtení dat JSON v textech žádostí.
- Použije integrovanou funkci path.
- Nastaví kořenové proměnné pro snadnější hledání kódu.
- Nastaví port.
- Nastartuje Express.
- Sdělí aplikaci, jak používat middleware, který budeme používat k obsluze serveru.
- Obsluhuje všechno ve složce dist, což bude statický obsah.
- Obsluhuje aplikaci a na každý požadavek GET, který se nenajde na serveru (pro přímé odkazy), vrátí soubor index.html.
- Spustí server pomocí funkce app.listen.
- Používá funkci šipky k protokolování, že port je aktivní.
```
const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const routes = require('./routes');

const root = './';
const port = process.env.PORT || '3000';
const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(root, 'dist/angular-cosmosdb')));
app.use('/api', routes);
app.get('*', (req, res) => {
  res.sendFile('dist/angular-cosmosdb/index.html', {root});
});

app.listen(port, () => console.log(`API running on localhost:${port}`));
```
Ve Visual Studio Code v podokně Průzkumník klikněte pravým tlačítkem na složku server a pak klikněte na Nový soubor. Pojmenujte nový soubor routes.js.

Do souboru routes.js zkopírujte následující kód. Tento kód:

Přidá referenci na směrovač Express.
Získá hrdiny.
Odešle zpět JSON pro definovaného hrdinu.

const express = require('express');
const router = express.Router();

router.get('/heroes', (req, res) => {
 res.send(200, [
    {"id": 10, "name": "Starlord", "saying": "oh yeah"}
 ])
});

module.exports=router;

Uložte všechny upravené soubory.
V editoru Visual Studio Code klikněte na tlačítko Ladit , klikněte na tlačítko Ozubené kolo . Ve Visual Studio Code se otevře nový soubor launch.js.
Na řádku 11 souboru launch.json změňte "${workspaceFolder}\\server" na "program": "${workspaceRoot}/src/server/index.js" a uložte soubor.
Kliknutím na tlačítko Spustit ladění spusťte aplikaci.

Aplikace by se měla spustit bez chyb.

Testování aplikace pomocí nástroje Postman

Teď otevřete nástroj Postman a do pole GET vložte http://localhost:3000/api/heroes.
Klikněte na tlačítko Send (Odeslat) a získejte odpověď aplikace ve formátu JSON.

Tato odpověď značí, že aplikace funguje a je spuštěná v místním prostředí.

Další kroky

V této části kurzu jste provedli následující:

Vytvořili jste projekt Node.js pomocí Angular CLI.
Otestovali jste aplikaci pomocí nástroje Postman.

Můžete přejít k další části kurzu a vytvořit uživatelské rozhraní.

Vytvoření uživatelského rozhraní pomocí Angular

Pokoušíte se naplánovat kapacitu migrace do služby Azure Cosmos DB? Informace o stávajícím databázovém clusteru můžete použít k plánování kapacity.

Pokud víte, že je počet virtuálních jader a serverů ve vašem existujícím databázovém clusteru, přečtěte si o odhadu jednotek žádostí pomocí virtuálních jader nebo virtuálních procesorů.
Pokud znáte typické sazby požadavků pro vaši aktuální úlohu databáze, přečtěte si informace o odhadu jednotek žádostí pomocí plánovače kapacity služby Azure Cosmos DB.

Sdílet prostřednictvím