Bagikan melalui

Membuat aplikasi Angular dengan API Azure Cosmos DB untuk MongoDB - Membuat aplikasi Node.js Ekspres

  • Berlaku untuk: ✅ MongoDB

BERLAKU UNTUK: MongoDB

Tutorial multi-bagian ini menunjukkan cara membuat aplikasi baru yang ditulis dalam Node.js dengan Express dan Angular lalu menyambungkannya ke akun Azure Cosmos DB Anda yang dikonfigurasi dengan API Azure Cosmos DB untuk MongoDB.

Bagian 2 dari tutorial dikembangkan dari pengantar dan mencakup tugas-tugas berikut:

  • Menginstal Angular CLI dan TypeScript
  • Membuat proyek baru menggunakan Angular
  • Membuat aplikasi menggunakan kerangka kerja Ekspres
  • Menguji aplikasi dalam alat pengujian HTTP

Panduan video

Prasyarat

Sebelum memulai bagian tutorial ini, pastikan Anda telah menonton video pengantar.

Tutorial ini juga memerlukan:

  • Node.js versi 8.4.0 atau lebih tinggi.
  • Alat pengujian HTTP
    • Kami merekomendasikan Insomnia, curl, Visual Studio, atau Invoke-RestMethod
  • Visual Studio Code atau editor kode favorit Anda.

Tip

Tutorial ini memandu Anda melalui langkah-langkah untuk membangun aplikasi langkah demi langkah. Jika Anda ingin mengunduh proyek yang sudah selesai, Anda bisa mendapatkan aplikasi yang diselesaikan dari repo angular-cosmosdb di GitHub.

Menginstal Angular CLI dan TypeScript

  1. Buka jendela Prompt Perintah Windows atau Terminal Mac dan instal Angular CLI.

    npm install -g @angular/cli

  2. Instal TypeScript dengan memasukkan perintah berikut ini di prompt.

    npm install -g typescript

Menggunakan Angular CLI untuk membuat proyek baru

  1. Pada prompt perintah, alihkan ke folder tempat Anda ingin membuat proyek baru, lalu jalankan perintah berikut. Perintah ini membuat folder dan proyek baru bernama angular-cosmosdb dan menginstal komponen Angular yang diperlukan untuk aplikasi baru. Perintah ini menggunakan pengaturan minimal (--minimal), dan menetapkan bahwa proyek menggunakan Sass (sintaks seperti-CSS dengan tanda --style scss).

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

  2. Setelah perintah selesai, ubah direktori ke folder src/client.

    cd angular-cosmosdb

  3. Kemudian buka folder di Visual Studio Code.

    code .

Membuat aplikasi menggunakan kerangka kerja Ekspres

  1. Di Visual Studio Code, pada panel Explorer, klik kanan folder src, klik Folder Baru, dan beri nama server folder baru.

  2. Pada panel Explorer, klik kanan folder server, klik File Baru, dan beri nama file baru index.js.

  3. Kembali ke prompt perintah, gunakan perintah berikut untuk menginstal pemilah isi. Ini membantu aplikasi kita memilah data JSON yang diteruskan melalui API.

    npm i express body-parser --save

  4. Di Visual Studio Code, salin kode berikut ke dalam file index.js. kode ini:

    • Referensi Ekspres
    • Menarik masuk pemilah-isi untuk membaca data JSON dalam isi permintaan
    • Menggunakan fitur bawaan yang disebut jalur
    • Mengatur variabel root untuk mempermudah mencari di mana kode kita berada
    • Menyiapkan port
    • Memulai Ekspres
    • Memberi tahu aplikasi cara menggunakan middleware yang akan digunakan untuk melayani server
    • Melayani semua yang ada dalam folder dist, yang akan menjadi konten statis
    • Melayani aplikasi, dan melayani index.html untuk setiap permintaan GET yang tidak ditemukan di server (untuk tautan mendalam)
    • Memulai server dengan app.listen
    • Menggunakan fungsi panah untuk mencatat log bahwa port aktif
    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. Di Visual Studio Code, pada panel Explorer, klik kanan folder server, lalu klik File baru. Beri nama file baru routes.js.

  6. Salin kode berikut ke routes.js. kode ini:

    • Mereferensikan router Ekspres
    • Mendapatkan hero
    • Mengirim kembali JSON untuk hero yang ditentukan
    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. Simpan semua file yang Anda modifikasi.

  8. Di Visual Studio Code, klik tombol Debug , klik tombol Gerigi . File launch.json baru akan terbuka di Visual Studio Code.

  9. Pada baris 11 file launch.json, ubah "${workspaceFolder}\\server" menjadi "program": "${workspaceRoot}/src/server/index.js" dan simpan file.

  10. Klik tombol Mulai Debugging untuk menjalankan aplikasi.

    Aplikasi harus berjalan tanpa kesalahan.

Menguji titik akhir HTTP aplikasi

  1. Sekarang gunakan alat pengujian HTTP untuk mengeluarkan GET permintaan ke http://localhost:3000/api/heroes.

  2. Respons menunjukkan aplikasi aktif dan berjalan secara lokal.

Langkah berikutnya

Di bagian tutorial ini, Anda telah melakukan hal berikut:

  • Membuat proyek Node.js menggunakan Angular CLI
  • Menguji aplikasi menggunakan alat pengujian HTTP

Anda dapat melanjutkan ke bagian berikutnya dari tutorial untuk membangun UI.

Membangun UI dengan Angular

Mencoba melakukan perencanaan kapasitas untuk migrasi ke Azure Cosmos DB? Anda dapat menggunakan informasi tentang kluster database Anda yang ada saat ini untuk membuat perencanaan kapasitas.

  • Last updated on