Aracılığıyla paylaş

MongoDB için Azure Cosmos DB API'siyle Angular uygulaması oluşturma - Node.js Express uygulaması oluşturma

  • Şunlara uygulanır: ✅ MongoDB

ŞUNLAR IÇIN GEÇERLIDIR: MongoDB

Bu çok bölümlü öğreticide Express ve Angular ile Node.js yazılmış yeni bir uygulamanın nasıl oluşturulacağı ve ardından MongoDB için Azure Cosmos DB API'siyle yapılandırılan Azure Cosmos DB hesabınıza nasıl bağlanacağınız gösterilmektedir.

Öğreticinin 2. bölümünde giriş bölümündeki konular genişletilir ve aşağıdaki görevler yer alır:

  • Angular CLI’yi ve TypeScript’i yükleme
  • Angular kullanarak yeni bir proje oluşturma
  • Express framework kullanarak uygulama oluşturma
  • Uygulamayı HTTP test aracında test etme

Görüntülü kılavuz

Önkoşullar

Öğreticinin bu bölümüne başlatmadan önce giriş videosunu izlediğinizden emin olun.

Bu öğretici için aşağıdakiler de gereklidir:

  • Node.js sürüm 8.4.0 veya üzeri.
  • HTTP test aracı
    • Uykusuzluk, curl, Visual Studio veya Invoke-RestMethod
  • Visual Studio Code veya sık kullandığınız bir kod düzenleyici.

İpucu

Bu öğretici, uygulamanızı adım adım oluşturmanızı sağlayacak adımlarla size yol gösterir. Tamamlanmış projeyi indirmek isterseniz, tamamlanmış uygulamayı github'daki angular-cosmosdb deposundan alabilirsiniz.

Angular CLI’yi ve TypeScript’i yükleme

  1. Bir Windows Komut İstemi veya Mac Terminal penceresi açın ve Angular CLI’yi yükleyin.

    npm install -g @angular/cli

  2. İstemde aşağıdaki komutu girerek TypeScript’i yükleyin.

    npm install -g typescript

Yeni bir proje oluşturmak için Angular CLI’yi kullanma

  1. Komut isteminde, yeni projenizi oluşturmak istediğiniz klasöre gidin, ardından aşağıdaki komutu çalıştırın. Bu komut, yeni bir klasör ve angular-cosmosdb adlı bir proje oluşturur ve yeni bir uygulama için gerekli Angular bileşenlerini yükler. Minimal kurulumu kullanır (--minimal) ve projenin Sass kullandığını belirtir (--style scss bayrağıyla CSS benzeri bir sözdizimi).

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

  2. Komut tamamlandığında, dizinleri src/istemci klasörüyle değiştirin.

    cd angular-cosmosdb

  3. Ardından Visual Studio Code’da klasörü açın.

    code .

Express framework kullanarak uygulamayı oluşturma

  1. Visual Studio Code’da Gezgin bölmesinde, src klasörüne sağ tıklayın, Yeni Klasör’e tıklayın ve yeni klasöre sunucu adını verin.

  2. Gezgin bölmesinde, sunucu klasörüne sağ tıklayın, Yeni Dosya’ya tıklayın ve yeni dosyaya index.js adını verin.

  3. Komut istemine dönün, gövde ayrıştırıcısını yüklemek için aşağıdaki komutu kullanın. Bu, uygulamamızın API'ler aracılığıyla iletilen JSON verilerini ayrıştırmasına yardımcı olur.

    npm i express body-parser --save

  4. Visual Studio Code’da index.js dosyasına aşağıdaki kodu kopyalayın. Bu kod:

    • Express’e başvurur
    • İsteklerin gövdesine JSON verilerini okumak için gövde ayrıştırıcısını getirir
    • Path adında yerleşik bir özellik kullanır
    • Kodlarımızın bulunduğu yeri bulmayı kolaylaştırmak için kök değişkenleri belirler
    • Bağlantı noktasını ayarlar
    • Express'i başlatır
    • Uygulamaya, sunucuyu sunmak için kullanılacak ara yazılımları kullanmayı anlatır
    • dist klasöründeki her şeyi sunar, bu klasördekiler statik içerik olacaktır
    • Uygulamayı oluşturur ve sunucuda bulunamayan tüm GET istekleri için index.html dosyasını sunar (ayrıntılı bağlantılar için)
    • app.listen ile sunucuyu başlatır
    • Bağlantı noktasının etkin olduğunu günlüğe kaydetmek için bir ok işlevi kullanır
    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. Visual Studio Code’da Gezgin bölmesinde, server klasörüne sağ tıklayın, ardından Yeni dosya’ya tıklayın. Yeni dosyaya routes.js adını verin.

  6. routes.js’ye aşağıdaki kodları kopyalayın: Bu kod:

    • Express yönlendiricisine başvurur
    • Hero’ları alır
    • Tanımlanmış bir kahraman için JSON’u geri gönderir
    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. Tüm değiştirilmiş dosyalarınızı kaydeder.

  8. Visual Studio Code'da Hata Ayıkla düğmesine tıklayın, Dişli düğmesine tıklayın. Yeni Launch.json dosyası Visual Studio Code’da açılır.

  9. launch.json dosyasının 11. satırında "${workspaceFolder}\\server" değerini "program": "${workspaceRoot}/src/server/index.js" ile değiştirin dosyayı kaydedin.

  10. Uygulamayı çalıştırmak için Hata Ayıklamayı Başlat düğmesine tıklayın.

    Uygulama hatasız çalışmalıdır.

Uygulamanın HTTP uç noktalarını test edin

  1. Şimdi adresine istek http://localhost:3000/api/heroesgöndermek için bir GET HTTP test aracı kullanın.

  2. Yanıt, uygulamanın çalışır durumda olduğunu ve yerel olarak çalıştığını gösterir.

Sonraki adımlar

Öğreticinin bu bölümünde aşağıdakileri yaptınız:

  • Angular CLI kullanarak bir Node.js projesi oluşturdunuz
  • HTTP test aracı kullanarak uygulamayı test etme

Kullanıcı arabirimini oluşturmak için öğreticinin sonraki bölümüne geçebilirsiniz.

Angular ile kullanıcı arabirimini oluşturma

Azure Cosmos DB'ye geçiş için kapasite planlaması yapmaya mı çalışıyorsunuz? Kapasite planlaması için mevcut veritabanı kümeniz hakkındaki bilgileri kullanabilirsiniz.

  • Tek bildiğiniz mevcut veritabanı kümenizdeki sanal çekirdek ve sunucu sayısıysa, sanal çekirdek veya vCPU kullanarak istek birimlerini tahmin etme hakkında bilgi edinin
  • Geçerli veritabanı iş yükünüz için tipik istek oranlarını biliyorsanız Azure Cosmos DB kapasite planlayıcısı kullanarak istek birimlerini tahmin etme hakkında bilgi edinin
  • Last updated on