Sdílet prostřednictvím

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

  • Článek

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 testovacím nástroji HTTP

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šší.
  • Testovací nástroj HTTP
    • Doporučujeme režimu spánku, curlvisual studio nebo Invoke-RestMethod
  • 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

  1. Otevřete okno příkazového řádku ve Windows nebo okno Terminálu na Macu a nainstalujte Angular CLI.

    npm install -g @angular/cli

  2. 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

  1. 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

  2. Po dokončení příkazu změňte adresář na složku src/client.

    cd angular-cosmosdb

  3. Potom tuto složku otevřete ve Visual Studio Code.

    code .

Sestavení aplikace pomocí rozhraní Express

  1. 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.

  2. 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.

  3. 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

  4. 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}`));

  5. 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.

  6. 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;

  7. Uložte všechny upravené soubory.

  8. 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.

  9. Na řádku 11 souboru launch.json změňte "${workspaceFolder}\\server" na "program": "${workspaceRoot}/src/server/index.js" a uložte soubor.

  10. Kliknutím na tlačítko Spustit ladění spusťte aplikaci.

    Aplikace by se měla spustit bez chyb.

Testování koncových bodů HTTP aplikace

  1. Nyní použijte testovací nástroj HTTP k vydání GET požadavku na http://localhost:3000/api/heroes.

  2. V odpovědi se zobrazí, že je aplikace spuštěná a spuštěná místně.

Další kroky

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

  • Vytvořili jste projekt Node.js pomocí Angular CLI.
  • Testování aplikace pomocí testovacího nástroje HTTP

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.