Skip to content

Latest commit

 

History

History

No 03 - Photo Feed with Go and Vue.js

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
assets
assets
 
 
lovely-photos
lovely-photos
 
 
README.md
README.md
 
 

README.md

Haber akışına fotoğraf eklemek

Amaç bir haber akışına fotoğraf ekleyebilmek (Sosyal ağların web arayüzlerinde anlık güncellemelerle aşağıya doğru akan akış olarak düşünebiliriz) Tabii haber akışı herkesin görebildiği bir alandır. Yani "Barbarossa" masaüstünden bir fotoğraf seçip yüklediğinde (veya haber akışında görünebilecek bir içerik) bağlı olan diğer kullanıcılar da eklenen içeriği görebilmelidir. Kılavuza göre örnek Go, Vue.js, SQLite ve Pusher Channels isimli uygulama içi bildirim aracı ile gerçeklenmektedir. Vue tarafında hiç tecrübem olmadığı düşünülecek olursa ona merhaba demek adına benim için faydalı bir çalışma.

Tabii sistemimizde Go ve SQLite yüklü olmalıdır diyebilirim. Tabii bu şart değil. Nitekim her ikisi içinde Docker imajları mevcut. Sistemi kirletmek istemezseniz ilgili docker imajlarından da örneği deneyebilirsiniz.

Birinci Hamle

İlk olarak Pusher Channels adresine giderek bir uygulama kaydettirmemiz gerekiyor. Bu ürüne github veya google hesaplarımız ile bağlanabiliyoruz. Uygulamayı oluşturduktan sonra App Keys sayfasından geliştirmemiz için gerekli app_id, key, secret gibi bilgileri alabiliriz. Pusher temel olarak içeriklerin hissedilip abone olan taraflara yollanması ile ilgili bir rol üstleniyor.

credit_1

credit_2

İkinci hamle klasör yapısını oluşturmak

mkdir lovely-photos
cd lovely-photos
mkdir db
mkdir public
mkdir public/uploads

Visual Studio Code, go uzantılı main dosyasını görür görmez bazı eklentileri kurmanızı önerecektir. Onu dinleyin ;)

Go tarafı için gerekli paketlerin yüklenmesi

Web framework, SQLite ve Pusher tarafı için gerekli go paketlerini aşağıdaki terminal komutlarıyla yükleyebiliriz.

go get github.com/labstack/echo
go get github.com/labstack/echo/middleware
go get github.com/mattn/go-sqlite3
go get github.com/pusher/pusher-http-go

Uygulamayı çalıştırmak için,

go run main.go

dememiz yeterli. Sorun çıkmazsa aşağıdakine benzer bir ekran görüntüsü ile karşılaşmamız gerekiyor.

credit_3

Bundan sonra https://localhost:7470 adresine gidebiliriz.

En az iki sayfa açmanızı öneririm. Bir tanesinden yüklenecek dosya içeriği anında diğer tarayıcıdaki haber akışına da yansıyacaktır. index.html sayfasında Vue.js kullanılmıştır. axios kütüphanesi ise XmlHttpRequest tipinden talepleri gerçekleştirmek için kullanılmaktadır (Yani go server'ına göndereceğimiz Post, Get, Put, Delete gibi komutlar için kullanılır) Pusher tarafındaki kanala abone olmak içinse pusher'ın istemci için yazılmış javascript kütüphanesinden yararlanıyoruz. Çok azcık ucundan da olsa bootstrap ile css desteği sağlayıp erkanı biraz da güzelleştirdik :P

credit_4

Denemeler sırasında Pusher üzerinde oluşan hareketlilikleri Dashboard üzerinden de gözlemleyebiliriz.

credit_5

index.html dosyasında pusher nesnesi için gerekli application key ve cluster bilgisi sizin uygulamanızınkine ait olmalıdır

Daha iyi olması için

Örneği iyileştirmek sizin elinizde. Şunları deneyebilirsiniz;

  • Fotoğraf kalite ve boyutlarının kontrolü sağlanmalı
  • Sadece izin verilen formatların yüklenmesi garanti edilmeli
  • Zararlı içerik yüklenemeyeceğinden emin olunmalı
  • Arayüz tasarımı daha şık hale getirilmeli

Neler Öğrendim?

  • Go ile sqlLite'ı nasıl konuşturabileceğimi,
  • Go'yu web sunucusu olarak nasıl ele alabileceğimi (echo),
  • Basit bir Vue.js kodlamasının nasıl yapıldığını,
  • axios ile XmlHttpRequest'leri nasıl yapabileceğimi,
  • pusher'ın ne işe yaradığını,