Geliştirici Senaryoları-1: Projeyi Lokale Alarak Başlatma

Posted by on

Senaryo

Yeni bir şirkette geliştirici olarak işe başladınız. Dahil olduğunuz "eticaretvadisi" isimli projeyi lokalinize indirip çalıştırmanız istendi. Sonraki adım olarak, size verilen görevleri yerine getirmeye başlayacaksınız.

Proje Yapısı

"Eticaretvadisi" isimli proje, frontend (client) ve backend (server) için ayrı iki proje halinde GitHub'da tutuluyor.

Bu proje bir MERN Stack (MongoDB, Express.js (veya Loopback 4), Node.js ve React) projesidir.

Biz kolaylık olması açısından proje dosyalarını masaüstünde "Eticaretvadisi" isimli bir klasör içinde bulundurmak istiyoruz.

Uygulama Adımları

Adım 1: Masaüstünde "eticaretvadisi" Klasörünü Oluştur

Adım 2: Gerekli Uygulama ve Bağımlılıkları Yükle

  1. VS Code Yükleyin: Henüz yüklemediyseniz, VS Code’u bilgisayarınıza indirin.

    Yüklemeden sonra şunları unutmayın:

    1. Otomatik Kaydetme özelliğini etkinleştirmeyi unutmayın.
    2. Ön yüz ve arka yüz projeleri için ayrı pencerelerde açarak çalışın.
    3. Şirketinizin ya da Proje sorumlusunun sizden istediği proje standartlarına uygun ayarları (örneğin tab indent değerinin 2 olması gibi) VS Code içinde yapmayı unutmayın.

  2. Uzantıları Yükleyin: VS Code için GitLens ve Live Server uzantılarını yükleyin.
  3. Node.js Yükleyin: Node.js’in resmi web sitesinden en son LTS sürümünü indirin ve yükleyin. Yüklemenin başarılı olduğunu doğrulamak için VS Code’u açın ve terminalde şu komutları çalıştırın: 
    node -v
npm -v
  4. Yarn Yükleyin: Eğer proje Yarn kullanıyorsa, Yarn paketini yüklemek için terminalde aşağıdaki komutu çalıştırın: 
    npm install --global yarn
    Yarn’ın yüklü olup olmadığını kontrol etmek için: 
    yarn -v
  5. MongoDB Yükleyin: MongoDB’yi internetten indirerek bilgisayarınıza yükleyin. MongoDBCompass bu yüklemeyle yüklenmediyse, bu uygulamayı da ayrıca aratarak yükleyin.

  6. Mongoose Kütüphanesini Yükleyin: Proje dizininde terminali açın ve aşağıdaki komutu çalıştırarak Mongoose’u yükleyin: 
    npm install mongoose
    veya Yarn kullanıyorsanız: 
    yarn add mongoose
  7. MongoDB Bağlantı URI'si:



    MongoDBCompass uygulamasını açarak yeni bir Connection oluşturun. Buna projenin ismini verin.

    Size yardım etmekle sorumlu geliştiriciden ya da koda bakarak uygulamanın hangi portta çalışması için ayarlandığını öğrenin. Default port: 27017 ise herhangi bir değişiklik yapmadan ayarlarda uygulamanın sizin için oluşturduğu URL'yi alarak projenizin server kodunda ilgili yere yapıştırın.

    Eğer projeniz farklı bir portta çalışıyorsa, bu durumda MongoDBCompass'ta bu port için bazı ayarlar yapmanız gerekecektir. Fakat bu senaryo için default portta çalıştığını varsayalım.

    Projede veritabanı bağlantısının yapıldığı kod aşağıdakine benzer bir kod olacaktır.
    const mongoose = require('mongoose');

const uri = 'mongodb://localhost:27017/eticaretvadisi'; // 'eticaretvadisi' veritabanı adı.

mongoose.connect(uri, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
})
.then(() => {
    console.log('MongoDB bağlantısı başarılı!');
})
.catch((err) => {
    console.error('MongoDB bağlantısı başarısız:', err);
});

Adım 3: Visual Studio Code'da Projenin Ana Dosyasını Aç

  1. Visual Studio Code uygulamasını başlatın.
  2. Sol üst köşeden File (Dosya) menüsüne tıklayın.
  3. Open Folder... (Klasör Aç...) seçeneğini seçin.
  4. "eticaretvadisi" klasörünü masaüstünde bulup seçin ve Select Folder (Klasörü Seç) butonuna tıklayın.

Adım 4: Terminali Aç

VS Code'da, üst menüden Terminal > New Terminal seçeneğine tıklayın. Böylece yeni bir terminal penceresi açılacaktır.

Adım 5: Client Projesini Klonla

Terminalde Client Projesini Klonla:

git clone https://github.com/kullanici_adi/eticaretvadisi-client.git

Adım 6: Server Projesini Klonla

Terminalde Server Projesini Klonla:

git clone https://github.com/kullanici_adi/eticaretvadisi-server.git

Adım 7: Client Projesini Başlat

  1. Aşağıdaki komut ile client projesine geçin: 
    cd eticaretvadisi-client
  2. Gerekli Bağımlılıkları Yükleyin:
    • Proje NPM projesi ise: 
      npm install
    • Proje Yarn projesi ise: 
      yarn veya yarn install
  3. Client Projesini Başlatın:
    • NPM: 
      npm start
    • Yarn: 
      yarn start veya yarn dev

Adım 8: Server Projesini Başlat


  1. Yeni bir VS Code penceresi açın. Bu pencerede server projesinin klasörünü açın.
  2. Gerekli Bağımlılıkları Yükleyin:
    • Proje NPM projesi ise: 
      npm install
    • Proje Yarn projesi ise: 
      yarn veya yarn install
  3. Server Projesini Başlatın:
    • NPM: 
      npm start
    • Yarn: 
      yarn start veya yarn dev

Server Projesini Debug Modda Başlat

Server tarafını debug modda başlatmak çoğunlukla daha tercih edilen bir durumdur. Geliştirme esnasında gerçek zamanlı olarak hata ayıklama ve düzeltmenize yardımcı olur.


Sonuç

Artık her iki proje de farklı VS Code pencerelerinde açık ve çalışır durumda. Tarayıcınızda açılan uygulamayı inceleyebilir, test edebilir ve geliştirme için gerekli hazırlıklarınıza başlayabilirsiniz. Bu süreç boyunca herhangi bir sorunla karşılaşırsanız proje sorumlunuza sormaktan çekinmeyin.

Comments

Post a Comment