Loopback 4 - MongoDB Projesi Nasıl Oluşturulur?

Posted by on







Bu rehberde arka ucu backend klasörü içinde olan taslak bir Mongo.DB-Loopback uygulaması oluşturacağız.

1. Proje Kurulumu ve Gerekli Araçlar

Loopback 4 için Node.js 16 veya daha üst bir sürüm gerekir.

  1. Klasörler:Backend klasörü loopback kurulumu esnasında otomatik oluşturulacaktır.
  2. Node.js: Node.js'in son sürümü ya da projenize uygun sürümünü yükleyin. Eski sürümleri kullanmak için NVM yükleyerek istediğiniz sürüme geçmelisiniz.
    nvm install 18.16.0
    nvm use 18.16.0
  3. Yarn: Gerekli görürseniz Yarn'ı yükleyin
    npm install -g yarn
  4. Git ve GitHub: Git'i kurun ve GitHub hesabınızı oluşturun.
  5. MongoDB: mongodb.com sitesine giderek hesabınız yoksa bir hesap oluşturun.

    Sitenin yönlendirmesiyle "project" ve "clustor" ı kolayca oluşturabilirsiniz.

    Sonrasında "clustor"a bir bağlantı oluşturmanız gerekecektir. Bunu oluştururken ilk adımda "Drivers" ı seçin. İkinci adımda "connection string" URL'sini bir yere kopyalayın. Bu URL'yi uygulamamızdan veritabanına bağlanmak için kullanacağız.


    Sonrasında "e-commerce-sample" isminde bir veritabanı ve "customers" isminde bir collection oluşturun.

    Oluşturacağımız kayıtların alanları şu şekilde olacak: Ad, Soyad, GSM, Firma, Adres. İsterseniz 1-2 kayıt ekleyebilirsiniz.

    MongoDB de id parametresi otomatik verilecek ve _id olarak görünecektir

    Siz isterseniz bunları uygun gördüğünüz şekilde farklı olarak da yapılandırabilirsiniz. Bu durumda proje kurulumu esnasında ve kodda uygun değişiklikleri yapmayı unutmayın.

2. Proje Yapılandırması

Backend: Loopback

  1. Kod editörünüzde projenizi oluşturacağınız klasöre gidin. Loopback yüklemesi sırasında backend klasörü otomatik oluşacaktır.
  2. Loopback CLI: Loopback CLI'yi yükleyin. 
    npm install -g @loopback/cli

    Eski bir sürüm gerekiyorsa:

    npm install -g @loopback/cli@5.0.3
  3. Loopback Projesi Oluşturma: 
    npm create loopback
    lb4 app
    Bu komut ile projenizi oluşturun. İsim ve diğer ayarları belirleyin. 
    
? Project name: backend
? Project description: Loopback örnek proje
? Project root directory: backend
? Application class name: BackendApplication
? Select features to enable in the project: (Hepsini seçin)
❯◉ Enable eslint: add a linter with pre-configured lint rules
 ◉ Enable prettier: install prettier to format code conforming to rules
 ◉ Enable mocha: install mocha to run tests
 ◉ Enable loopbackBuild: use @loopback/build helpers (e.g. lb-eslint)
 ◉ Enable vscode: add VSCode config files
 ◉ Enable docker: include Dockerfile and .dockerignore
 ◉ Enable repositories: include repository imports and RepositoryMixin
 ◉ Enable services: include service-proxy imports and ServiceMixin

    Projenizin oluşan API Explorer taslağını görmek için şu komutları kullanabilirsiniz.

    cd backend
    npm start

    Projenin başlamasıyla http://localhost:3000 adresine giderek Expolerer linkinden otomatik oluşan API Explorer sayfasını görebilirsiniz.

  4. Model, Repository, Datasource ve Controller Oluşturma:
    • Model: Müşteri modelini oluşturun. 
      lb4 model
? Model class name: customer
? Please select the model base class Entity (A persisted model with an ID)
? Allow additional (free-form) properties? No
Model Customer will be created in src/models/customer.model.ts
      Sonraki ekranda veritabanında bulunacak alanlara uygun model alanlarını girin. Örneğin, Customer modeli şu alanları içerebilir: id, Ad, Soyad, Firma, GSM, Adres. Herbiri için type:string ve required:yes olarak girin. 
      
? Enter the property name: Adres
? Property type: string
? Is it required?: Yes
    • MongoDB Bağlantısı:
      • Önce "datasource" oluşturun. 
        
lb4 datasource
? Datasource name: mongodb
? Select the connector for mongodb:  In-memory db (supported by StrongLoop)
? window.localStorage key to use for persistence (browser only): y
? Full path to file for persistence (server only):
   create src\datasources\mongodb.datasource.ts
   update src\datasources\index.ts
      • Şimdi kök dizinde.env dosyasını oluşturarak (backend/.env), daha önce mongodb sitesinden kopyaladığımız "connection string"i MONGODB_HOST olarak yerleştirelim. 
        
MONGODB_HOST=mongodb+srv://username:password@cluster-url/database
      • Projeye dotenv kütüphanesini yükleyin 
        npm install dotenv
      • Oluşturulan datasource dosyasına giderek "dotenv" kütüphanesini ve MongoDB bağlantı ayarlarını ekleyin. Dosya son halinde aşağıdaki gibi görünecektir. 
        
import {inject, lifeCycleObserver, LifeCycleObserver} from '@loopback/core';
import {juggler} from '@loopback/repository';
import * as dotenv from 'dotenv';

dotenv.config();

/* data klasörü içinde bir FAKE DB oluşturup ona bağlayabiliriz.*/
// const config = {
//   name: 'db',
//   connector: 'memory',
//   localStorage: '',
//   file: './data/db.json'
// };

/* ONLINE DB'ye bağlayabiliriz. 
Buradaki "host" bilgisini veritabanına erişim sağladığı
için Github'a yüklemeden önce .env vb. yöntemle
emniyete almayı unutmayalım.*/
const config = {
  name: 'db',
  connector: 'mongodb',
  host: process.env.MONGODB_HOST,
  database: 'e-commerce-sample',
  protocol: 'mongodb+srv',
};

/* LOCAL DB'ye bağlayabiliriz. */
// const config = {
//   name: 'db',
//   connector: 'mongodb',
//   url: '',
//   host: 'localhost',
//   port: 27017,
//   user: '',
//   password: '',
//   database: 'e-commerce-sample',
// };                    

// Observe application's life cycle to disconnect the datasource when
// application is stopped. This allows the application to be shut down
// gracefully. The `stop()` method is inherited from `juggler.DataSource`.
// Learn more at https://loopback.io/doc/en/lb4/Life-cycle.html
@lifeCycleObserver('datasource')
export class MongodbDataSource extends juggler.DataSource
  implements LifeCycleObserver {
  static dataSourceName = 'mongodb';
  static readonly defaultConfig = config;

  constructor(
    @inject('datasources.config.mongodb', {optional: true})
    dsConfig: object = config,
  ) {
    super(dsConfig);
  }
}
      • Şimdi MongoDB için 'Loopback Connector'ü yükleyin. 
        
npm install loopback-connector-mongodb --save
      • MongoDB'de kullanılacak tablo/collection ismini modele tanıtmak için src/models/customer.model.ts dosyasını açarak "@model()" yazan kısmı aşağıdaki kodla değiştirin. 
                        
@model
({
  settings: {
    mongodb: {
      collection: 'customers',
    }
  },
})
    • Repository: Model için repository oluşturun. 
      
lb4 repository
? Select the datasource MongodbDatasource
? Select the model(s) you want to generate a repository for Customer
   create src\repositories\customer.repository.ts
   update src\repositories\index.ts

Repository CustomerRepository was/were created in src\repositories
    • Controller: CRUD işlemleri için controller oluşturun. 
      
lb4 controller
? Controller class name: customer
Controller Customer will be created in src/controllers/customer.controller.ts

? What kind of controller would you like to generate? REST Controller with CRUD functions
? What is the name of the model to use with this CRUD repository? Customer
? What is the name of your CRUD repository? CustomerRepository
? What is the name of ID property? id
? What is the type of your ID? string
? Is the id omitted when creating a new instance? No
? What is the base HTTP path name of the CRUD operations? /customers
   create src\controllers\customer.controller.ts
   update src\controllers\index.ts

Controller Customer was/were created in src\controllers

      Tebrikler. Artık uygulamamızın arka ucu ve API'si hazır. Sonraki adım olarak uygulamayı çalıştırıp API Explorer sayfasında çağrıları test edebilir, uygulamanızın "frontend" tarafını hazırlayarak "backend"e bağlantıyı gerçekleştirebilirsiniz.




Comments

Post a Comment