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

  • Makale

Ş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ğı 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
  • Postman içinde uygulamayı 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:

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

Uygulamayı Postman kullanarak test etme

  1. Şimdi Postman’ı açın ve GET kutusuna http://localhost:3000/api/heroes adresini girin.

  2. Gönder düğmesine tıklayın ve uygulamadan json yanıtını alın.

    Bu yanıt uygulamanın hazır ve yerel olarak çalışır durumda olduğunu gösterir.

    İsteği ve yanıtı gösteren postman

Sonraki adımlar

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

  • Angular CLI kullanarak bir Node.js projesi oluşturdunuz
  • Postman kullanarak uygulamayı test ettiniz

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.