Udostępnij za pośrednictwem

Tworzenie aplikacji Angular przy użyciu interfejsu API usługi Azure Cosmos DB dla bazy danych MongoDB — tworzenie aplikacji Node.js Express

  • Artykuł

DOTYCZY: MongoDB

W tym wieloczęściowym samouczku pokazano, jak utworzyć nową aplikację napisaną w Node.js za pomocą usług Express i Angular, a następnie połączyć ją z kontem usługi Azure Cosmos DB skonfigurowanym przy użyciu interfejsu API usługi Azure Cosmos DB dla bazy danych MongoDB.

Część 2 samouczka jest oparta na wprowadzeniu i obejmuje następujące zadania:

  • Instalowanie interfejsu wiersza polecenia usługi Angular i języka TypeScript
  • Tworzenie nowego projektu przy użyciu usługi Angular
  • Tworzenie aplikacji przy użyciu platformy Express
  • Testowanie aplikacji w narzędziu Postman

Przewodnik wideo

Wymagania wstępne

Przed rozpoczęciem tej części samouczka pamiętaj o obejrzeniu filmu wideo z wprowadzeniem.

Dla tego samouczka wymagane są również następujące elementy:

Napiwek

Ten samouczek przedstawia instrukcje tworzenia aplikacji krok po kroku. Jeśli chcesz pobrać gotowy projekt, ukończoną aplikację znajdziesz w repozytorium angular-cosmosdb w witrynie GitHub.

Instalowanie interfejsu wiersza polecenia usługi Angular i języka TypeScript

  1. Otwórz okno wiersza polecenia systemu Windows lub okno terminala na komputerze Mac i zainstaluj interfejs wiersza polecenia usługi Angular.

    npm install -g @angular/cli

  2. Zainstaluj język TypeScript, wprowadzając poniższe polecenie w wierszu polecenia.

    npm install -g typescript

Tworzenie nowego projektu przy użyciu interfejsu wiersza polecenia usługi Angular

  1. W wierszu polecenia przejdź do folderu, w którym chcesz utworzyć nowy projekt, a następnie uruchom poniższe polecenie. To polecenie tworzy nowy folder i projekt o nazwie angular-cosmosdb i instaluje składniki usługi Angular wymagane dla nowej aplikacji. Używa ono minimalnej instalacji (--minimal) i wskazuje, że projekt korzysta z rozwiązania Sass (składnia przypominająca język CSS ustawiana za pomocą flagi --style scss).

    ng new angular-cosmosdb --minimal --style scss

  2. Po wykonaniu polecenia przejdź do katalogów w folderze src/client.

    cd angular-cosmosdb

  3. Następnie otwórz folder w programie Visual Studio Code.

    code .

Tworzenie aplikacji przy użyciu platformy Express

  1. W programie Visual Studio Code w okienku Eksplorator kliknij prawym przyciskiem myszy folder src, kliknij pozycję Nowy folder i nadaj nowemu folderowi nazwę server.

  2. W okienku Eksplorator kliknij prawym przyciskiem myszy folder server, kliknij pozycję Nowy plik i nadaj nowemu plikowi nazwę index.js.

  3. Wróć do wiersza polecenia i użyj poniższego polecenia, aby zainstalować analizator treści. Ułatwi to naszej aplikacji analizowanie danych JSON, które są przekazywane za pośrednictwem interfejsów API.

    npm i express body-parser --save

  4. W programie Visual Studio Code skopiuj poniższy kod do pliku index.js. Ten kod:

    • Odwołuje się do platformy Express
    • Wywołuje analizator treści na potrzeby odczytywania danych JSON w treści żądań
    • Używa wbudowanej funkcji o nazwie path
    • Ustawia zmienne główne, które ułatwiają wyszukiwanie lokalizacji kodu
    • Konfiguruje port
    • Zwiększa wydajność platformy Express
    • Przekazuje do aplikacji informacje na temat sposobu korzystania z oprogramowania pośredniczącego, które miało być używane do obsługi serwera
    • Obsługuje wszystkie zasoby znajdujące się w folderze dist, które będą zawartością statyczną
    • Obsługuje aplikację i plik index.html dla żądań GET nieznalezionych na serwerze (dla linków bezpośrednich)
    • Uruchamia serwer przy użyciu elementu app.listen
    • Używa funkcji strzałki do rejestrowania, czy port jest aktywny
    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. W programie Visual Studio Code w okienku Eksplorator kliknij prawym przyciskiem myszy folder server, a następnie kliknij pozycję Nowy plik. Nadaj nowemu plikowi nazwę routes.js.

  6. Skopiuj poniższy kod do pliku routes.js. Ten kod:

    • Odwołuje się do routera platformy Express
    • Pobiera elementy hero
    • Wysyła z powrotem dane JSON dla zdefiniowanego elementu hero
    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. Zapisz wszystkie zmodyfikowane pliki.

  8. W programie Visual Studio Code kliknij przycisk Debuguj , kliknij przycisk Koła zębatego . Nowy plik launch.json zostanie otwarty w programie Visual Studio Code.

  9. W wierszu 11 pliku launch.json, zmień wartość "${workspaceFolder}\\server" na "program": "${workspaceRoot}/src/server/index.js" i zapisz plik.

  10. Kliknij przycisk Rozpocznij debugowanie, aby uruchomić aplikację.

    Aplikacja powinna działać bez błędów.

Testowanie aplikacji przy użyciu narzędzia Postman

  1. Teraz otwórz narzędzie Postman i w polu GET wstaw wartość http://localhost:3000/api/heroes.

  2. Kliknij przycisk Wyślij przycisk i pobierz odpowiedź JSON z aplikacji.

    Ta odpowiedź pokazuje, że aplikacja została uruchomiona i działa lokalnie.

    Narzędzie Postman przedstawiające żądanie i odpowiedź

Następne kroki

W tej części samouczka zostały wykonane następujące zadania:

  • Utworzono projekt Node.js przy użyciu interfejsu wiersza polecenia usługi Angular
  • Przetestowano aplikację przy użyciu narzędzia Postman

Możesz przejść do następnej części samouczka, aby utworzyć interfejs użytkownika.

Tworzenie interfejsu użytkownika przy użyciu usługi Angular

Próbujesz zaplanować pojemność migracji do usługi Azure Cosmos DB? Informacje o istniejącym klastrze bazy danych można użyć do planowania pojemności.