Merhaba 👋🏻

Leaf’e birinci bölümde giriş yaptıktan sonra bu bölümde;

• User & Genre listeleme ve işlemleri
• Song ekleme
• Song güncelleme ve silme

konularına bakacağız. Bunları API oluşturma bölümünde anlattığım şekilde (Rested ile istek atarak) de yapmıştık, farklı olarak burada UI üzerinde yapmış olacağız.

Users & Genres

Üç tane page oluşturacağız; all users page, genre page, all genres page.

All Users page ile başlayalım; ilk önce tüm userları getireceğimiz fonksiyon yapısı ile başlayalım. WebsiteController içerisinde tüm user’ları getirecek fonksiyonu yazıyoruz.

Bu işlemi yaparken context’i oluşturup render etmek için WebsiteController altında bir struct oluşturuyoruz.

Son olarak boot fonksiyonu içerisinde allUserHandler fonksiyonuınu kullanacağımız router’ı tanımlıyoruz.

View kısmı için allUsers.leaf dosyası oluşturuyoruz. İçeriği aşadağı gibi olacak;

#set("content"){

<h1>All Users</h1>

#if(users) {

<table class="table table-bordered table-hover">

<thead class="thead-light">

<tr>

<th>Username</th>

<th>Name</th>

</tr>

</thead>

<tbody>

#for(user in users) {

<tr><td>#(user.username)</td><td><a href="/users/#(user.id)">#(user.name)</a></td></tr>

}

</tbody>

</table>

} else {

<h2>There aren't any users yet!</h2>

}

}

#embed("base")

allUsers.leaf’e base içerisinde de yönlendirme vereceğimiz için base.leaf içerisinde küçük bir ekleme yapıyoruz.

<li class="nav-item #if(title == "All Users"){active}">

<a href="/users" class="nav-link">All Users</a>

</li>

Genre page ile devam ediyoruz. Genre page için kullanacağımız fonksiyonu implemente ediyoruz.

Genre için kullanacağımız context struct’ını WebsiteController.swift altında oluşturuyoruz.

boot fonksiyonu içerisinde route genreHandler’ı kullanacağımız router’ı tanımlıyoruz.

genre.leaf oluşturalım. İçeriği aşağıdaki gibi olacak:

#set("content") {

<h1>#(genre.name)</h1>

#if(songs) {

<table>

<thead>

<tr>

<th>Artist</th>

<th>Title</th>

</tr>

</thead>

<tbody>

#for(song in songs) {

<tr><td>#(song.artist)</td><td><a href="/songs/#(song.id)">#(song.title)</a></td></tr>

}

</tbody>

</table>

} else {

<h2>There aren't any song yet!</h2>

}

}

#embed("base")

Tarayıcıdan kontrol ediyoruz.

Son olarak tüm genre’ları getirmek için kullanacağımız yapıya geçelim. allGenresHandler fonksiyonunu implemente ediyoruz.

allGenresHandler için kullanacağımız context struct’ını WebSiteController altında tanımlıyoruz.

boot fonksiyonu içerisinde route yapısını tanımlıyoruz.

allGenres.leaf dosyasını oluşturuyoruz. İçeriği aşağıdaki gibi olacak:

#set("content"){

<h1>All Genres</h1>

#if(genres) {

<table class="table table-bordered table-hover">

<thead class="thead-light">

<tr>

<th>Name</th>

</tr>

</thead>

<tbody>

#for(genre in genres) {

<tr><td><a href="/genres/#(genre.id)">#(genre.name)</a></td></tr>

}

</tbody>

</table>

} else {

<h2>There aren't any genres yet!</h2>

}

}

#embed("base")

base.leaf içerisinde de all genres’i sekme olarak ekleyelim.

<li class="nav-item #if(title == "All Genres"){active}">

<a href="/genres" class="nav-link">All Genres</a>

</li>

— Her song birden fazla genre’da olabileceği için SongContext struct’ı içerisinde küçük bir değişiklik yapıyoruz.

songHandler fonksiyonu içerisinde de değişiklik yapmamız gerekiyor.

Her song’un ait olduğu genre’yı gösterebilmek için view içerisinde de eklemeleri yapalım. song.leaf sonunda aşağıdaki eklemeyi yapalım.

#if(genres) {

<h3>Genres</h3>

<ul>

#for(genre in genres) {

<li>

<a href="/genres/#(genre.id)">#(genre.name)</a>

</li>

}

</ul>

}

Tarayıcıdan kontrol ediyoruz.

Adding Songs

Song ekleme işlemini web üzerinden yapmak için ilk önce WebsiteController.swift içerisinde fonksiyonlarımızı ve route yapımızı tanımlayacağız. Daha sonra view kısmını tamamlayıp Song ekleme işlemini test edeceğiz.

İlk olarak Song ekleme fonksiyonumuzu yazdık.

Fonksiyon üzerindeki yorum satırlarında bahsettiğim gibi, ilgili sayfada kullanmamız gereken bir yapı olacağı için her zaman yaptığımız gibi AddSongContext adında bir struct oluşturduk:

boot fonksiyonu içerisinde fonksiyonumuzun route yapısını tanımlıyoruz:

View kısmına geçiyoruz. Views klasörü altında addSong.leaf adında bir dosya oluşturalım.

Oluşturduğumuz form tag’ı içerisinde method’u post olarak belirttiğimize dikkat ediyoruz.

#set("content") {

<h1>Add Song</h1>

<form method="post">

<div class="form-group">

<label for="songArtist">Artist</label>

<input type="text" name="songArtist" class="form-control" id="songArtist"/>

</div>

<div class="form-group">

<label for="songTitle">Title</label>

<input type="text" name="songTitle" class="form-control" id="songTitle"/ >

</div>

<div class="form-group">

<label for="user">User</label>

<select name="user" class="form-control" id="user">

#for(user in users) {

<option value="#(user.id)">

#(user.name)

</option>

}

</select>

</div>

<button type="submit" class="btn btn-success">Send</button>

</form>

}

#embed("base")

Inputlar ve User’ları listelediğimiz option yapısı yukarıdaki gibi oluşturuldu.

Sonraki aşamada view’da aldığımız bu dataları yine bir fonksiyon aracılığı ile göndermemiz gerekiyor. Bunun için addSongPostHandler fonksiyonu oluşturuyoruz. Fonksiyon içerisinde yorum satırları ile ayrıntılı açıklamayı yaptım:

Data için oluşturduğumuz struct:

Url Encoded Form ile ilgili daha detaylı bilgi için aşağıdaki linki kullanabilirsiniz:

https://docs.vapor.codes/3.0/url-encoded-form/overview/

Fonksiyonun boot içerisinde route yapısını tanımlayalım:

Son olarak anasayfaya Add Song sekmesi ekleyelim. Bu işlemi base.leaf içerisinde nav-bar bloğunda yapıyoruz:

<li class="nav-item #if(title == "Add Song"){active}">

<a href="/add-song" class="nav-link">Add Song</a>

</li>

Değişikliklerimizi kontrol ediyoruz.

Edit & Delete Songs

Bu bölümde edit ve delete işlemlerine bakacağız. Adım adım hangi yolu izlediğimizi anlatıyor olacağım.

Edit sayfamızı render edecek fonksiyonumuzla başlayalım:

Context için her zamanki gibi struct oluşturuyoruz:

editing değişkeni uygulama içerisinde bir flag işlevi görecek. Durum özelinde View üzerinde değişiklikler veya işlemler yapmamızı sağlayacak.

boot fonksiyonu içerisindeki route yapımız:

View kısmında ise yine addSong.leaf’i kullanacağımız için biraz önce bahsettiğim editing değişkeni işimize yarayacak. Örneğin; edit modundaysak label’ları doldurup buton metnini değiştirebileceğiz.

#set("content") {

<h1>#if(editing){Edit Song} else {Add Song}</h1>

<form method="post">

<div class="form-group">

<label for="songArtist">Artist</label>

<input type="text" name="songArtist" class="form-control" id="songArtist" #if(editing){value="#(song.artist)"}/>

</div>

<div class="form-group">

<label for="songTitle">Title</label>

<input type="text" name="songTitle" class="form-control" id="songTitle" #if(editing){value="#(song.title)"}/>

</div>

<div class="form-group">

<label for="user">User</label>

<select name="user" class="form-control" id="user">

#for(user in users) {

<option value="#(user.id)" #if(editing){#if(song.creatorID == user.id){selected}}>

#(user.name)

</option>

}

</select>

</div>

<button type="submit" class="btn btn-success">#if(editing){Update} else {Send}</button>

</form>

}

#embed("base")

addSong.leaf dosyasının güncel hali yukarıdaki gibi olacak. Son halinden farklı olarak yaptığım değişiklikleri bold olarak işaretledim.

Yapılan edit işlemi sonucunda yeni verileri post işlemi ile yeniden sunucuya göndermemiz ve veritabanına kaydetmemiz gerekiyor.

Post işlemini gerçekleştirecek fonksiyonumuz şu şekilde olacak:

boot fonksiyonu içerisinde edit post fonksiyonunun route yapısı:

Song.leaf dosyasında her şarkı altına Edit butonu, Delete butonu bırakalım ve ekstra olarak varsa Genre’ları da görelim. Song.leaf’in güncel hali aşağıdaki gibi olacak:

#set("content") {

<h1>#(song.title)</h1>

<h2>#(song.artist)</h2>

<p> Created by <a href="/users/#(creator.id)/">#(creator.name)</a>

#if(genres) {

<h3>Genres</h3>

<ul>

#for(genre in genres) {

<li>

<a href="/genres/#(genre.id)">#(genre.name)</a>

</li>

}

</ul>

}

<form method="post" action="/songs/#(song.id)/delete">

<a class="btn btn-primary" href="/songs/#(song.id)/edit" role="button">Edit</a>

<input class="btn btn-danger" type="submit" value="Delete" />

</form>

}

#embed("base")

Delete fonksiyonu ve route tanımını yaptıktan sonra işlemleri tamamlamış olacağız.

boot fonksiyonu içerisindeki route yapısı:

Tüm işlemleri tamamladık. Son olarak ekran görüntülerine bakalım:

Leaf ile Templating kısmında anlatacaklarım bu kadardı. Bundan sonraki yazı authentication ile ilgili olacak ve Vapor 3 serisi için şimdilik son yazı olacak 🙄

Leaf ile ilgili daha detaylı bilgi almak isterseniz bu linkten faydalanabilirsiniz.

Projenin güncel hali ile tüm kodlarına github reposundan ulaşabilirsiniz.

İletişim: mehmetkoca@outlook.com

🍻

Server Side Swift: Vapor 3 — Bölüm 3: Leaf ile Templating Part 2/2 was originally published in NSIstanbul on Medium, where people are continuing the conversation by highlighting and responding to this story.

Merhaba🤞🏻,

API oluşturma işlemini Part 1 ve Part 2 ile tamamladıktan sonra, aynı proje üzerinden templating ile devam ediyoruz.

Leaf, Vapor’un yayınladığı bir templating language.

Getting Started with Leaf

Package.swift dosyasını açalım.

dependencies içerisine Leaf’in git url’ini yazdık ve targets içerisindeki App’e Leaf’i ekledik.

Templating dosyalarını tutacağımız Views klasörünü oluşturalım ve projeyi yeniden generate edelim.

configure.swift class’ını açıp Leaf’i import ediyoruz.

import FluentMySQL

import Vapor

import Leaf

Daha sonra LeafProvider’ı services’a register etmemiz gerekiyor.

Artık Leaf’i kullanmaya başlayabiliriz. Konsol üzerinden WebsiteController oluşturalım ve projeyi yeniden generate edelim.

İlk aşamada WebsiteController.swift class’ı aşağıdaki gibi olacak:

Controller’dan devam etmeden önce Routes.swift içerisinde WebsiteController’ı tanıtalım.

WebsiteController’a dönüyoruz ve son hali aşağıdaki gibi olacak. Kod satırları içerisinde gerekli açıklamaları yaptım.

Kullandığınız kod editörünü açarak Resorces/Views altında index.leaf dosyasını oluşturalım ve içerisine aşağıdaki kodu yazalım:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8"/>

<title>Hello World | Songs</title>

</head>

<body>

<h1>Hello World</h1>

</body>

</html>

index.leaf dosyasını kaydettikten sonra uygulamamızı Xcode üzerinden çalıştırıyoruz.

http://localhost:8080'e girdiğimizde yukarıdaki sonucu görmemiz gerekiyor. ✌🏻

Title’da her zaman sabit bir yazı yazsın istemiyorum. Parametre alan bir yapı kullanarak title’ı dinamik hale getireceğiz. Öncelikle index.leaf dosyasında aşağıdaki gibi küçük bir değişiklik yapalım.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8"/>

<title>#(title) | Songs</title>

</head>

<body>

<h1>Hello World</h1>

</body>

</html>

WebsiteController içerisinde aşağıdaki birkaç değişikliği yapacağız. İlk önce yine controller class’ında IndexContent adında Encodable bir yapı oluşturuyoruz. Tek değişkeni olan title’a index() içerisinde atama yaparak render edildiğinde kullanılmasını sağlıyoruz.

Uygulamayı Xcode üzerinden tekrar çalıştırdığımızda title’ın kod içerisinde aradığımız Homepage olarak görünmesi gerekiyor.

Leaf Features

leaf uzantılı dosyamızın body’sinde biraz değişlik yapalım. Leaf’in getirdiği özellikleri de görmüş olacağız.

<body>

<h1>Songs</h1>

#if(songs) { 

<table>

<thead>

<tr>

<th>Artist</th>

<th>Title</th>

</tr>

</thead>

<tbody>

#for(song in songs) {

<tr><td>#(song.artist)</td><td>#(song.title)</td></tr>

}

</tbody>

</table>

} else {

<h2>There aren't any song yet!</h2>

}

</body>

Basit bir html table oluşturduk. Bold olarak işaretlediklerim leaf’in özelliklerini kullandığımız kısımlar. if kontrolü ile herhangi bir song var mı yok mu bunu kontrol ediyoruz; yoksa, bir uyarı mesajı bırakıyoruz. for içerisinde ise var olan song’ları artist ve title’ına göre sıralayacağız.

WebsiteContoller’a dönüyoruz ve daha önceden oluşturduğumuz IndexContent struct’ı içerisine Song tipinde bir dizi oluşturuyoruz.

Şimdi index fonksiyonunu güncelleyelim.

Uygulamayı çalıştırdığımızda veritabanımızda kayıt yoksa şu ekranla karşılaşmamız gerekiyor:

User ve Song ekledikten sonraki ekran görüntümüz de şu şekilde olacak:

Anasayfada gördüğümüz Song’lara link verme konusunu inceleyelim.

<tbody>

#for(song in songs) {

<tr><td>#(song.artist)</td><td><a href="/songs/#(song.id)">#(song.title)</a></td></tr>

}

</tbody>

tbody etiketi içerisinde yukarıdaki değişikliği yapıyoruz. Tekrar WebsiteController’a dönelim.

Song content’i için bir struct oluşturduk.

Song için kullanacağımız fonksiyon bu şekilde. Her zaman yaptığımız gibi boot içerisinde bu fonksiyonu kullanalım.

index.leaf’i aynı path içerisinde kopyalayıp song.leaf dosyasını oluşturalım.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8"/>

<title>#(title) | Songs</title>

</head>

<body>

<h1>#(song.title)</h1>

<h2>#(song.artist)</h2>

<p> Created by #(creator.name)

</body>

</html>

song.leaf dosyasının içeriğini yukarıdaki gibi ayarlıyoruz. Uygulamayı çalıştırıp görelim.

Embedding Templates

Kod tekrarı yapılmasını engellemek için bir leaf dosyası içinde başka bir leaf dosyasının içeriğini gösterebiliriz. Örneğin header ve footer birçok sayfada aynı ise her seferinde ilgili bölümlerin kodlarını yeniden yazmak yerine bir base.leaf dosyası oluşturup içeriğini diğer dosyalardan çekebiliriz.

index.leaf dosyasını kopyalayıp yeni leaf dosyasına base.leaf olarak adlandıralım.

base.leaf body etiketi arasındaki kodları temizleyelim. base.leaf dosyasının en son hali aşağıdaki gibi.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8"/>

<title>#(title) | Songs</title>

</head>

<body>

</body>

</html>

index.leaf dosyası içerisinde sadece if kontrol bloğumuz kalacak ve bu kodları #set(“content”) içerisine alacağız. En altta da #embed(“base”) ile base.leaf içerisinde kullanımını sağlayacağız. index.leaf’in son hali aşağıdaki gibi olacak.

#set("content"){

<h1>Songs</h1>

#if(songs) {

<table>

<thead>

<tr>

<th>Artist</th>

<th>Title</th>

</tr>

</thead>

<tbody>

#for(song in songs) {

<tr><td>#(song.artist)</td><td><a href="/songs/#(song.id)">#(song.title)</a></td></tr>

}

</tbody>

</table>

} else {

<h2>There aren't any song yet!</h2>

}

}

#embed("base")

base.leaf içerisinde index.leaf kodlarını nasıl kullanabildik, bakalım. base.leaf’in son hali aşağıdaki gibi olacak.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8"/>

<title>#(title) | Songs</title>

</head>

<body>

#get(content)

</body>

</html>

Aynı işlemi song.leaf için de yapıyoruz. song.leaf’in son hali aşağıdaki gibi olacak:

#set("content") {

<h1>#(song.title)</h1>

<h2>#(song.artist)</h2>

<p> Created by #(creator.name)

}

#embed("base")

Genel anlamda embeded templates kısmı bu şekilde hallediliyor.

Şimdi Song title’larını linklendirdiğimiz gibi User name’i de linklendirelim ve User sayfasına girdiğimizde eklediği tüm song’ları listeleyelim.

Öncelikle daha önce yaptığımız gibi bu listeleme için bir struct oluşturalım WebsiteController.swift altında.

Kullanacağımız fonksiyon Song için yaptığımıza çok benzer olacak:

Fonksiyonu boot içerisine kaydedelim.

User sayfası için user.leaf dosyasını oluşturalım.

#set("content") {

<h1>#(user.name)</h1>

<h2>#(user.username)</h2>

#if(songs) {

<table>

<thead>

<tr>

<th>Artist</th>

<th>Title</th>

</tr>

</thead>

<tbody>

#for(song in songs) {

<tr><td>#(song.artist)</td><td><a href="/songs/#(song.id)">#(song.title)</a></td></tr>

}

</tbody>

</table>

} else {

<h2>There aren't any song yet!</h2>

}

}

#embed("base")

Son olarak song.leaf içerisinde küçük bir değişiklik yapalım. Song altındaki user’a tıkladığımızda yeni sayfaya yönlendirmesi için.

#set("content") {

<h1>#(song.title)</h1>

<h2>#(song.artist)</h2>

<p> Created by <a href="/users/#(creator.id)/">#(creator.name)</a>

}

#embed("base")

Uygulamayı çalıştırıyoruz.

Try! Bootstrap

Bootstrap’in kullanımı standart html sayfalarındaki gibi olduğu için uzun uzun anlatmayacağım. base.leaf içerisinde bootstrap kullanmak için gerekli css ve javascript kodlarını yerleştirdikten sonra istediğiniz şekilde diğer leaf dosyalarını da class’lar ile şekillendirebilirsiniz.

Yaptığım birkaç değişiklik ile birlikte uygulamanın son halinin sadece ekran görüntüsünü atıyorum. Github reposu içinde kodları inceleyebilirsiniz.

Fazla uzatmamak adına bu bölümü burada tamamlıyorum. Leaf ile Templating’in ikinci bölümünde görüşmek üzere 👋🏻

Github repo: https://github.com/mehmetkoca/PlaylistApp-Vapor3-Tutorial

İletişim: mehmetkoca@outlook.com

Server Side Swift: Vapor 3 — Bölüm 3: Leaf ile Templating Part 1/2 was originally published in NSIstanbul on Medium, where people are continuing the conversation by highlighting and responding to this story.

Merhaba 👋🏻,

Part 1'de oluşturmaya başladığımız API uygulamasına devam ediyoruz. Parent-child ilişkilerine ve Fluent query’lerine geçmeden önce uygulamaya User ve Genre ekleyelim.

User ve Genre sınıfları ile bu sınıfların controller’larını da ekledikten sonra uygulamamızı yeniden çalıştırıyoruz.

vapor xcode -y

User sınıfını implemente edelim.

Extension’ları User sınıfına ekledikten sonra configure.swift sınıfı içerisinde SQLite’in User’ı kullanacağını belirtiyoruz.

UsersController’ı oluşturmaya başlayalım. Daha önceden yaptığım gibi yorum satırlarında açıklamaları ekledim.

UsersController’ı kullanabilmek için Routes.swift içerisinde kaydetmeyi unutmuyoruz.

routes.swift sınıfının son hali şu şekilde olacak:

Genre sınıfını implemente edelim.

configure.swift sınıfı içerisinde SQLite’in Genre’yı kullanacağını belirtiyoruz.

GenresController’ı implemente edelim.

GenresController’ı kullanabilmek için routes.swift içerisinde kaydediyoruz. routes.swift’in son hali şu şekilde olacak;

Parent Child Relationships

Elimizde Song, User ve Genre modelleri var. Doğru çalışan bir sistem için bunlar arasında anlamlı bir ilişki kurulması gerekiyor. One to one, one to many gibi modeller arasında bir ilişki kurup implemente edeceğiz.

Örneğin, User birden fazla Song oluşturabilir. Ama her Song’un bir creator (User)’ı vardır. Fluent ile bu ilişki çok basit bir şekilde tanımlanabiliyor.

İlk olarak Song sınıfından başlayalım. Her Song için onu oluşturan bir User olduğu için User.ID tipinde creatorID değişkeni yaratıyoruz ve bunu init() içerisine de ekliyoruz. Daha sonra Song’ için bir computed property yaratıyoruz. Bu property’nin type’ı (Parent<>) ilişkiyi belirtiyor, ve kod bloğu içerisinde parent’ın id’sini geri döndürüyoruz. Daha açıklayıcı olması için yorum satırları ile birlikte Song sınıfının son hali aşağıda görüldüğü gibi olacak.

Child olan Song için parent’ını tanımlama işlemini tamamladık. Şimdi User sınıfı içerisinde Song’ların User’ın child’ı olacağını tanımlayalım.

User sınıfının son hali şu şekilde olacak;

SongsController içerisinde daha işlevsel fonksiyon ekleyelim. Herhangi bir Song’u ekleyen User’ı bulalım. Bunun için aşağıdaki fonksiyonu kullanacağız;

Bu fonksiyonu boot kod bloğu içerisine kaydedelim.

Şimdi bir User’ın eklediği tüm Song’ları getiren fonksiyonu yazalım. UsersController’ı açıyoruz. Geriye Song array’i döndüren aşağıdaki fonksiyonu yazıyoruz.

Fonksiyonu boot kod bloğu içerisine kaydedelim.

Şimdi uygulamamızı çalıştırıp test edelim. İlk önce User oluşturuyorum.

Fluent’in oluşturduğumuz User için verdiği id’yi kopyalayalım. Bu id’yi Song eklerken creatorID parametresi ile göndereceğiz.

creatorID’miz ile Song’u ekledik. Response Body içerisinde ayrıntılı olarak görüyoruz. Bir Song daha ekleyelim.

Şimdi User’ın eklediği tüm Song’ları get isteği ile alalım. Burada kullanacağımız url yapısı;

http://localhost:8080/api/users/CREATOR_ID/songs

Son olarak Song’u ekleyen User’ı getiren fonksiyonumuzu test edelim. Kullanacağımız route yapısı;

http://localhost:8080/api/songs/1/creator

Parent child ilişkilerinde bahsetmem gereken kısımlar şimdilik bu kadar. Fluent ile modeller arasında ilişki kurmak kolay bir şekilde gerçekleştirilebiliyor.

Sibling Relationships

Bir Song birden fazla Genre’ye dahil olabilir. Bir Genre içerisinde de birden fazla Song olabilir. Bu ilişki many to many şeklindedir. Bu ilişkiyi implemente etmek için aralarında “Pivot” oluşturmamız gerekir.

Uygulamaya SongGenrePivot.swift dosyasını ekleyelim ve projeyi yeniden başlatalım.

Fluent’in iki model arasında ilişki kuracağını anlaması için gerekli olan iki typealias oluşturmamız gerekiyor. Böylece Fluent pivot’un sol ve sağının ne olduğunu bilecek.

configure.swift içerisinde modelimizi ekliyoruz.

Parent child ilişkisinde yaptığımız gibi sibling ilişkisi içinde Modellerimiz içinde computed property oluşturmamız gerekecek.

Contoller’lar içerisinde yeni route yapıları tanımlayalım. SongsController ile başlayalım.

bu fonksiyonu boot kod bloğu içerisinde tanımlayalım.

GenreController içerisinde Song’ları alacağımız fonksiyonu tanımlayalım.

fonksiyonu boot kod bloğu içerisinde route işlemi için kullanalım.

Şimdi bir Song’u bir Genre’ya ekleme işlevini implemente edelim. Bu fonksiyon geriye HTTPStatus dönecek.

boot içerisinde fonksiyonu route için kullanalım.

Son değişiklikleri uygulamamızı çalıştırıp deneyelim. Yeniden çalıştırdığım için önceki veriler elimde yok. User oluşturarak başlayalım.

User id’yi kopyalayıp Song eklemek için parametre olarak kullanıyorum.

Genre oluşturalım.

Id’si 1 olan Song’u id’si 1 olan Genre’ya ekleyelim.

Response header içerisinde 200 OK’u gördük; işlem başarılı. Şimdi id’si 1 olan Song’un hangi Genre’da olduğunu test edelim.

Son olarak id’si 1 olan Genre’da bulunan Song’ları getirelim.

Böylelikle yazdığımız tüm fonksiyonları test etmiş olduk. Modeller arasındaki ilişkiler tamamlanmış oldu.

Fluent Queries

Şimdiye kadar yaptığımız işlemlerde bir Song’u kaydetme, tüm Genre’ları getirme gibi işlemleri yaptık. Bu bölümde Fluent ile filtreleme işlemlerine bakalım.

SongController içerisine searchSong() fonksiyonu ekleyeceğiz. Fluent query’lerini kullanacağımız için class içerisine Fluent’i import ediyoruz.

Fonksiyonu boot içerisinde kullanalım.

Buraya kadar her şey güzel. Sadece artist üzerinden değil de title üzerinden de arama yapmak istiyorum. Bunun için filter group kullanacağız. Fluent ile iki parametre için de ayrı search işlemi tanımlamak çok kolay. Tekrar seachSong() fonksiyonuna geri dönüyorum.

Fonksiyonumuzun son hali yukarıdaki gibi olacak. Syntax yeterince temiz olduğu için kolayca anlaşılabiliyor.

Şimdi uygulamayı çalıştırıp deneyelim;

Song ekleyelim.

Şimdi search işlemini title üzerinden deneyelim.

URL’e dikkat edelim ve Response Body içerisinde bize dönen değeri kontrol edelim.

Şimdi artist üzerinden arama yapalım.

Görüldüğü gibi fonksiyon iki parametre için de arama sonuçlarını getirdi. Burada dikkat edilmesi gereken nokta, URL içerisinde space karakteri ile istek atamayız. Rested’ın space’leri ‘%20’ ile otomatik değiştirdiğini görüyoruz sağ üst tarafta. Bu yapı kullanılırken space karakterleri için kontrol yapmayı unutmamanız gerekir.

MySQL ile Fluent Kullanımı

İster Docker üzerinden ister kendi bilgisayarınız üzerindeki MySQL üzerinden bağlantı işlemini gerçekleştirebilirsiniz.

Package.swift dosyasını açıyoruz ve içerisini aşağıdaki gibi değiştiriyoruz.

vapor xcode -y

Projeyi yeniden başlatalım.İlk önce configure.swift içerisinde birtakım değişiklikler yapmamız gerekiyor. Proje içerisinde FluentSQLite geçen her import’u FluentMySQL ile değiştiriyoruz. Aynı şekilde herhangi bir keyword SQLite içeriyorsa onları da ‘SQLite’ yerine ‘MySQL’ versiyonu ile değiştiriyoruz.

MySQL database’i tanıttık. Ben localde “vapor” adında bir database yaratmıştım. Sonraki aşamada ,aynı class içerisinde, “configure migrations” bölümünde “.sqlite” olarak seçtiğimiz kısımları da “.mysql” olarak değiştirelim.

Ek olarak vapor projesini ilk oluşturduğumuzda default gelen Todo.swift ve TodoController.swift dosyalarını silelim. Onlara ihtiyacımız yok. routes.swift içerisinde de Todo ile ilgili kısmı tamamen silelim.

Şimdi projeyi çalıştırdığımızda oluşturulacak olan User, Song vb. yapılar MySQL üzerinde kaydolacak. Ben konfigurasyonu tamamlayıp bir adet User oluşturdum.

MySQL içerisinde Fluent bizim için table’ları oluşturuyor.

User oluşturduktan sonra users table’ı içerisinde kayıtları görebiliyoruz.

Not: Vapor hala beta aşamasında olduğu için MySQL bağlantı aşamasında “No such module FluentMySQL” hatası alıyorsanız Swift 4.1'in en son snapshot’ını indirip Xcode üzerinden seçmeniz gerekiyor. Konu ile ilgili link: https://gist.github.com/tanner0101/cdb77c7f58d53af2ba2da5d39415389a

API oluşturma bölümünü tamamlamış olduk. 🤓 Sonraki bölümde Leaf ile Templating konusunu anlatmaya çalışacağım.

İletişim için: mehmetkoca@outlook.com

Github reposuna ulaşmak için: https://github.com/mehmetkoca/PlaylistApp-Vapor3-Tutorial

🍻

Server Side Swift: Vapor 3 — Bölüm 2: API Oluşturma Part 2/2 was originally published in NSIstanbul on Medium, where people are continuing the conversation by highlighting and responding to this story.

Merhaba 🙋🏻‍♂️,

Bu bölümde API oluşturmaya başlıyoruz. ORM aracı olarak Fluent kullanacağım. Fluent Vapor’un yayınladığı bir araç; veritabanı işlemlerinde kolaylık sağlayacak. Fluent, PostgreSQL, MySQL, SQLite ve MongoDB ile beraber çalışabiliyor. Fluent 3'ün getirdiği yenilikler için aşağıdaki linki inceleyebilirsiniz;

https://geeks.brokenhands.io/blog/posts/whats-new-in-vapor-3/

Model Oluşturma ve Fluent

PlaylistApp adında yeni bir proje açarak başlıyorum.

vapor new PlaylistApp --branch=beta

Proje dizinine girip Sources/App altındaki Models klasöründe Song.swift dosyasını yaratalım.

vapor xcode -y

Song.swift sınıfını yarattıktan sonra yukarıdaki komut ile projeyi Xcode ile açalım. Song sınıfına id, artist ve title değişkenlerini tanımlıyoruz.

Vapor’u ve SQLite’ı geliştirme ortamında kullanabilmek için 1. ve 2. satırda görüldüğü gibi import ediyoruz.

En altta görülen extensionlar Song sınıfını kullanabilmemiz için özellikler sunuyor.

SQLiteModel, Fluent’in Song sınıfını veritabanı işlemlerinde model olarak tanımasını sağlayacak.

Content, Song sınıfının HTTP mesajları için decode ve encode edilmesine izin vermesini sağlıyor.

Migration, Song sınıfının veritabanı işlemlerinde dinamik geçiş ve taşıma işlemlerinin yapılmasını sağlayacak.

Song sınıfını hazırladıktan sonra configure.swift sınıfı içerisindeki Configure migrations altında default gelen Todo sınıfının kullanılmasını sağlayan kodu silip yerine Song sınıfını tanımlayalım.

Command+B ile build edip hata olup olmadığını kontrol edin.

Controller Oluşturma ve CRUD İşlemleri

Fluent ile model entegrasyonunu tamamladıktan sonra create, retrieve, update ve delete fonksiyonlarını implemente edeceğiz.

SongsController.swift dosyasını oluşturalım.

vapor xcode -y ile projeyi yeniden başlatıyoruz.

SongsController sınıfı aşağıdaki gibi olacak. Daha anlaşılır olması için yorum satırlarında neyin ne işe yaradığını anlatmaya çalıştım.

SongsContoller’a Song ekleme ve var olan Song’ları geri döndürecek iki fonksiyon tanımladık. SongsController’ı routes.swift içerisinde de tanımlayıp kullanılabilir hale getireceğiz. routes.swift içerisinde default olarak gelen kodları siliyoruz.

routes.swift sınıfının son hali yukarıdaki gibi olacak. Oluşturduğumuz controller’ı register ettik ve şu an kullanılabilir durumda.

Uygulamayı çalıştıralım ve request atarak deneme yapalım. Ben Rested uygulamasını kullanacağım. Postman veya Imsomnia gibi rest client uygulamarını da kullanabilirsiniz.

http://localhost:8080/api/songs adresine get isteği atıp HTTP 200'ü response headers içerisinde gördük.

Aynı URL’e post isteği atıyoruz. Bu sefer parametre değerlerini giriyoruz. Parametlerimiz Song sınıfını init ederken kullandığımız değişkenler olacak. Response body’de gördüğümüz gibi Fluent, id’yi otomatik olarak algılıyor ve post işlemini tamamlıyor.

Tekrar get isteği atıyoruz ve array içerisinde biraz önce girdiğimiz Song’u geri döndürüyor.

CRUD İşlemlerini Tamamlayalım

Spesifik bir Song’u getirme, güncelleme ve silme işlemlerine bakalım.

Daha iyi anlaşılması için yeniden yorum satırları içerisinde açıklamalar bulunuyor.

Yazdığımız CRUD fonksiyonlarını daha önce yaptığımız gibi SongsController içerisindeki boot fonksiyonunda register edelim.

Artık tüm CRUD fonksiyonlarını kullanabilir durumdayız. Rested uygulaması ile her birini deniyorum. Hatırlatma: Bu aşamada gördüğümüz veriler memory içerisinde saklandığı için uygulamayı her run ettiğimizde veriler sıfırlanacak. Bir sonraki yazıda MySQL yapılandırmasını anlatıp API uygulamasını tamamlayacağız.

Id’si 1 olan veriyi getirmek için get isteği attığımızda response body içerisinde sonucu görüyoruz.

Yine id’si 1 olan veriyi güncellemek istediğimizde, görmek istediğimiz yeni bilgileri parametre olarak ekliyoruz ve put isteği atıyoruz. Güncellenmiş veri response body içerisinde görünüyor.

Son olarak id’si 1 olan veriyi silmek istediğimizde, delete isteği atıyoruz. Kod içerisindeki yorum satırında bahsettiğimiz No Content uyarısı Response Headers içerisinde görülüyor.

Fazla uzun olmaması için bu bölümü iki parçaya ayırdım. Sonraki bölümde modeller arasındaki ilişkileri, Fluent querylerini ve MySQL ile bağlayıp çalıştırmayı anlatacağım.

Uygulamanın kodlarına github üzerinden erişmek isterseniz; https://github.com/mehmetkoca/PlaylistApp-Vapor3-Tutorial

İletişim için: mehmetkoca@outlook.com

🍻

Server Side Swift: Vapor 3 — Bölüm 2: API Oluşturma Part 1/2 was originally published in NSIstanbul on Medium, where people are continuing the conversation by highlighting and responding to this story.

Vapor, -şu an için- Github’da en çok star toplayan server side swift framework’ü. MacOS ve Ubuntu üzerinde çalışabiliyor. Henüz beta aşamasında ve 2018 Mart ortasında release olması bekleniyor. Başlangıç aşamasında ve devam eden API örneğinde Vapor 3 ile Swift 4.1 versiyonları kullanılacak.

İlk Vapor uygulamasını oluşturmak için gerekli araçlar:

• Vapor Toolbox
• Swift 4.1
• Xcode 9

Vapor Toolbox kurulumunu Homebrew ile yapılacak. Homebrew bilgisayarınızda yüklü değilse aşağıdaki kod parçacığını Terminal’de çalıştırarak yükleyebilirsiniz.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Daha sonra Vapor Toolbox kurulumu için Terminal ekranında

brew install vapor/tap/vapor

komutu ile vapor toolbox kurulumunu yapıyoruz. Son versiyona ulaşmak için

brew upgrade vapor/tap/vapor

komutu ile kontrol edebilirsiniz.

Yeni proje oluşturmak için istediğiniz path’e terminal üzerinden erişip aşağıdaki kodu kullanmanız gerekir. HelloVapor adında bir proje oluşturuyorum.

vapor new HelloVapor --branch=beta

İşlem başarıyla tamamlandığında ekran görüntüsündeki Vapor’un karşılama mesajını göreceksiniz. Vapor Swift 4.1 ile kullanıldığı için Xcode üzerinde 4.1 ile çalışmanız gerekiyor. (Xcode > Toolchains > Swift 4.1 Snapshot)

Proje oluşturma aşamasını geçtikten sonra, Xcode ile projeyi açalım.

vapor xcode -y

Projeyi açtıktan sonra Vapor’un dosya sistemini görüyoruz.

Projeyi başarılı bir şekilde çalıştırmak veya build etmek için Run > My Mac şeklinde seçili olması gerekli.

Run ettikten sonra konsolda, Server starting on http://localhost:8080 mesajını görüyoruz.

Tarayıcıdan http://localhost:8080/hello adresine girildiğinde default gelen Hello World! görünür. Bu routing işlemi routes.swift içerisinde yapılmış. Başlangıç için routes.swift içerisinde iki örnek oluşturacağım.

Bu kod http://localhost:8080/hello/mehmet üzerinden erişmemizi sağlayacak. Tarayıcıdan girildiğinde Hello Mehmet! görünecek.

Son örnek parametre alarak geriye String bir mesaj dönmeyi sağlayan router işlemi. http:///localhost:8080/user/YourFavoriteUserName adresinde istediğiniz kullanıcı adı ile denediğinizde User YourFavoriteUserName mesajı ile karşılacaksınız.

🔜

İletişim için; mehmetkoca@outlook.com

Server Side Swift: Vapor 3 — Bölüm 1: Başlangıç was originally published in NSIstanbul on Medium, where people are continuing the conversation by highlighting and responding to this story.