Mar 22, 2019

4 min read

MEVN Stack ile basit bir To-Do App yapılması [Bölüm 2/2]

Tekrar merhaba! Yazının ilk bölümünü özetlemek gerekirse;

Vue app oluşturduk
Express server oluşturduk
Axios kullanarak client ve server arasındaki iletişimi sağladık
Axios kullanarak server’dan gelen veriyi ziyaretçilerimize sunduk

Bunları yaparken yapılacaklar listemizdeki maddeleri backend’den çektik ama backend’in bu verileri dinamik olarak çekmesini göz ardı ettik. Artık tüm yapımız sağlam bir şekilde çalıştığına göre backend’e odaklanabiliriz.

MongoAtlas kullanarak MongoDB’ye giriş yapalım

Bu projede MongoDB kullanırken ama amacımız kolay erişilebilirlik olmalı. Bunun için Free Tier sunan Mongo Atlas hizmetini vue projemizde nasıl kullanacağmızı aktarmak istedim.

Daha önce kullanmadınız ise kendinize bir hesap açmalısınız. Hesap açtıktan sonra ilk veritabanınızı yaratmak için Free Tier Available yazan bir M0 cluster seçerseniz herhangi bir ücret ödemeniz gerekmeyecek.

Cluster’ı oluşturduysak şimdi de yeni bir kullanıcı ekleyelim. Bunun için Security > Add New User bağlantısını kullanalım.

Kullanıcı ekledikten sonra Security tab’ın peşini bırakmıyoruz ve IP Whitelist’e her yerden erişebilmek için gereken ayarı çekiyoruz. Add IP Address butonuna tıklayıp Allow Acces From Anywhere seçeneğini seçiyoruz.

Biz bu işlemler ile uğraşırken Cluster’ımız hazırlandı. Connect > Connect Your Application seçtikten sonra Driver için Node.js ve version seçerek bağlantı için kullanacağımız adresi elde ediyoruz. Bunun bir kenara kopyalayalım, az sonra gerekecek.

MongoDB bağlantısı kuralım

Mongo Atlas’ın ayarlarını bitirdiğimize göre backend ile MongoDB iletişimini kuracak olan paketimizi eklemek ile işe başlayalım. server klasörünün içine girip şu komutu çalıştıralım

npm install --save mongodb

Paketimiz yüklendikten sonra server/src/app.js dosyasına geçerek mongodb’yi projemize ekleyelim ve bağlantı için gerekli kodları ekleyelim.

const mongo = require('mongodb')
const MongoClient = mongo.MongoClient
const uri = YOUR_CONNECTION_STRING
var client;var mongoClient = new MongoClient(uri, { reconnectTries : 
Number.MAX_VALUE, autoReconnect : true, useNewUrlParser : true })mongoClient.connect((err, db) => { // returns db connection
  if (err != null) {
    console.log(err)
    return
  }
  client = db
})

Veritabanımızı dolduralım

MongoDB Atlas’ı açalım ve Collections sayfasından deneme adında bir veritabanı oluşturup, todosadında bir collections yaratalım. Insert Document tuşuna basarak bu collection’a hemen veri ekleyebiliriz.

Sunucumuzdan MongoDB verilerine ulaşalım

Şimdi sıra geldiserver/src/app.js dosyasını düzenleyerek collection’a ulaşma işine. Aşağıdaki kod dilimi sayesinde collection’dan gelen verileri bir array içinde tutacağız.

Hali hazırda bu dosyada bulunan satırlar:

app.get('/todo', (req, res) => {
 res.send([
  'Yapılacak 1',
  'Yapılacak 2'
 ])
})

ve yerine yazılacak satırlar

app.get('/todo', (req, res) => {
  const cols = client.db("deneme").collection("todos")cols.find().toArray(function (err, results) {
    if (err) {
      console.log(err)
      res.send([])
      return
    }
    
    res.send(results)
  })
})

Bu işlem sonrasında localhost:8080/todos adresine gittiğinizde şuna benzer bir sayfa sizi karşılayacak.

Bunu hemen düzeltelim. client/src/components/ToDo.vue dosyasına gidip li altındaki span içinde sadece title’ı bastıracağımızı tanımlayalım.

<li v-for='todo in todos'>
  <span>{{todo.title}}</span>
</li>

Veritabanına ToDo eklenmesi

Güzelce ToDo’larımızı okuyabiliyoruz ama MongoDB Atlas’a girmeden buraya veri ekleyebilmemizin bir yolu henüz yok. O zaman ToDo.vue dosyamızda değişiklikler yapmaya devam edelim ve bir input aracılığı ile ToDo’ları veritabanına yollama işini halledelim.

ekleToDo metodu içinde ToDoAPI.addTodo servisine bir istek attık, bunun karşılık görebilmesi için services/ToDoAPI.js dosyamızı da düzenlememiz gerekli.

getToDos() {
  return API().get('todo')
},
addTodo (todo) {
  return API().push('addTodo', {
    todo: todo
  })
}

Tabi ki aynı işlemi sunucu tarafında da yapmamız lazım, bunun için server/src/app.js dosyasını düzenleyelim.

app.post('/addTodo', (req, res) => {
  const col = client.db('deneme').collection('todos')
  var todo = req.body.todo;
  col.insertOne({title: todo}, function (err, results) {
    if (err) {
      console.log(err);
      res.send('');
      return
    }
    res.send(results.ops[0]);
  })
})

ToDo’ları yapıldı olarak işaretlemek

Daha önceden düzenleme yaptığımız Todo.vue dosyasına bir kez daha düzenleme yapıyoruz ve yapılanları silmek için bir checkbox ekliyoruz.

<li v-for='todo in todos' :key='todo._id'>
  <input type='checkbox' @click='silToDo(todo._id)'> {{todo.title}}
</li>

yine aynı dosyay aşağıdaki metodu ekliyoruz.

silToDo (todoID) {
  ToDoAPI.deleteTodo(todoID)
  this.todos = this.todos.filter(function (obj) {
    return obj._id !== todoID
  })
}

axios iletişimi kuracak olan servisimiz için services/ToDoAPI.js dosyasına ToDo’yu silecek kod bloğunu ekliyoruz.

deleteTodo (todoID) {
  return API().post('deleteTodo', {
    todoID: todoID
  })
}

Ve son olarak sunucumuzu MongoDB’den kaydı silecek şekilde yapılandırıyoruz.

app.post(‘/deleteTodo’, (req, res) => {
  const collection = client.db(‘deneme’).collection(‘todos’)
  collection.removeOne({‘_id’: mongo.ObjectID(req.body.todoID)},
    function (err, results) {
      if (err) {
        console.log(err)
        res.send('')
        return 
      } 
      res.send() 
   }) 
})

Voila!

Görünüşte çirkin fakat işlevli bir uygulamaya sahip olduk.

artık yapılacaklar listemden bu iki maddeyi silebilirim :)

Amacım ufak da olsa vue komünitesine yeni bireyler kazandırmaktı. Yıllarca jQuery ileçalıştıktan sonra vuejs’in basitliği beni oldukça heyecanlandırdı ve öğrenme sürecinde de kaynak yeterliliği ile hızlıca yol alabildim. Umarım aklında basit bazı soruları olanlara başlangıç için bir yol gösterebilirim.

Yazıda kodladığım projeyi github repolarım arasında bulabilirsiniz.