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

aşağıdakiler 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ü giriş üzerine dayanır ve aşağıdaki görevleri kapsar:

Görüntülü kılavuz

Prerequisites

Eğitimin bu bölümüne başlamadan önce giriş videosunu izlediğinizden emin olun.

Bu öğretici ayrıca şunları gerektirir:

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

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 referans verir
   • İ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 çalıştırı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 çalışır durumda olduğunu kaydetmek için bir ok fonksiyonu 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
   • Kahramanları 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ıklama 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 bir HTTP test aracı GET kullanarak http://localhost:3000/api/heroes adresine istek gönderin.

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:

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

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ını kullanarak istek birimlerini tahmin etme hakkında bilgi edinin.