Dinamik Uygulamalar İçin Umut Veren Bir Ruby Çerçevesi olan Volt ile Tanışın

Volt, veri açısından zengin uygulamalar için tasarlanmış bir Ruby çerçevesidir. Hem sunucu hem de istemci tarafı Ruby'de yazılır (daha sonra OPAL kullanılarak JS'ye derlenir), bu nedenle geliştiricinin tek bir Javascript kodu yazmak zorunda kalmadan çok dinamik uygulamalar yazmasına olanak tanır. Benim gibi bir Ruby hayranıysanız, bu çerçeveyi seveceksiniz.

Web uygulamalarını çok daha dinamik hale getirmek için Angular.js, Backbone.js ve Ember.js gibi ön uç Javascript çerçeveleri çok popülerlik kazandı. Ancak, bu çerçeveler genellikle yararlı olması için bir arka uç uygulaması gerektirir, bu nedenle Ruby on Rails ve Django gibi web çerçeveleri ile birlikte kullanılırlar.

Öte yandan, Ruby çerçevesi Volt, arka ucu ve dinamik bir ön ucu yönetme yeteneğine sahiptir. Her iki işlev de çekirdeğine sıkı bir şekilde entegre edildiğinden (aslında Volt, veri bağlamalarının avantajlarından yararlanan bir MVVM mimarisi gibidir), geliştiricinin bu uygulamaları hızlı bir şekilde oluşturmasını sağlar.

Kutudan çıkan çok havalı bir özellik Volt'un gerçek zamanlı özelliği. Gerçek zamanlı uygulamalar yaptıysanız, sürecin zorlayıcı olabileceğini bilirsiniz - muhtemelen AJAX yoklaması, web soketleri, Sunucu Tarafından Gönderilen Olaylar (SSE) uyguladınız veya hatta harici hizmetler kullandınız, uygulamaya karmaşıklık eklediniz ve hatta ek maliyetlere neden oldunuz. . Diğer çerçevelerden farklı olarak Volt, sunucuyla (web soketleri aracılığıyla) bağlantıyı canlı tutar, bu nedenle her eylem için Ajax istekleri yapmak yerine, değişiklikleri anında tüm istemcilere gönderir. Bunun çalışması için herhangi bir yapılandırmaya gerek yoktur.

Bir Sohbet Uygulaması Oluşturmak İçin Volt'u Kullanma

Bu Ruby çerçeve eğitiminde, sizi Volt kullanarak gerçek zamanlı bir uygulama oluşturma sürecinden geçireceğim ve sohbet, gerçek zamanlı uygulamaların bir numaralı kullanım durumu olmaya devam ettiğinden, yeteneklerini göstermek için bir sohbet uygulamasından daha iyi bir yol olabilir.

Öncelikle Volt ve MongoDB kurulumunu yapalım. İkinci süreç ayrıntılı olarak ele alınmayacaktır:

 gem install volt brew install mongodb

 mkdir -p /data/db

(dbpath oluştur)

 chown `id -u` /data/db (change the owner to have the proper dbpath permissions)

Artık ilk uygulamamızı oluşturmaya hazırız, buna 'sohbet' diyelim. Bunu birkaç satırda kolayca yapabiliriz:

 volt new chat cd chat

Belge yapısının Rails ile bazı benzerlikleri vardır. Rails kullanıcılarının fark edeceği temel fark, uygulama içinde varlıklar, denetleyiciler, modeller ve görünümler gibi diğer klasörleri içeren ekstra bir klasörümüz olmasıdır, bu ekstra klasör bir 'Bileşen'dir.

Bileşen, uygulamanın yalıtılmış bir bölümüdür. Bir Bileşen içindeki tüm sayfalar, o bileşen için tüm dosyalar ilk http isteğiyle yüklendiğinden, sayfayı yeniden yüklemeden işlenir, bu nedenle farklı bir bileşenin bir sayfasını ziyaret edersek, yeni bir http isteği yapılır ve sayfa 'yeniden yüklenir' '. Bu örnek için 'main' adlı varsayılan bileşeni kullanalım.

Konsolda 'volt server' komutunu çalıştırarak sunucuyu başlatalım ve localhost:3000'e giderek tarayıcıda nasıl göründüğüne bakalım:

 volt server

Ayrıca konsolda MongoDB'yi başlatmayı da unutmayın:

 mongod

Volt'un 'Ana Sayfa' ve 'Hakkında' da dahil olmak üzere bir dizi varsayılan sayfayla geldiğini görebiliriz. Bunlar hemen özelleştirilebilir.

Bahsetmeye değer bir diğer şey ise sayfanın sağ üst köşesindeki giriş butonu. Volt, kutudan çıktığı andan itibaren kullanıcıları kaydetmek ve doğrulamak için bir yol sağlayan 'volt-user-templates' gem aracılığıyla çerçeveye entegre bir “kullanıcı” işlevine sahiptir.

Başlarken

Şimdi uygulamamız üzerinde çalışmaya başlayalım. Her şeyden önce 'Hakkında' sayfasına ihtiyacımız yok, böylece devam edip aşağıdakileri silebiliriz: app/main/views/main/about.html dosyası, app/main/controllers/main_controller.rb içindeki yaklaşık eylem , app/main/config/routes.rb içindeki /about yolunu ve app app/main/views/main/main.html içindeki gezinme bağlantısını kaldırın.

 <ul class="nav nav-pills pull-right"> <:nav href="/" text="Home" /> <:user-templates:menu /> </ul>

Şimdi işe başlayalım ve tüm kayıtlı kullanıcıları listeleyerek başlayalım:

 <:Body> <h1>Home</h1> <div class="row"> <div class="col-md-4"> {{ _users.each do |user| }} <div class="contact"> {{user._name}} </div> {{ end }} </div> </div>

Artık tüm kayıtlı kullanıcılar ana sayfada listeleniyor. {{ }} içinde yazılan kodun, çalıştırılan Ruby kodu olduğunu unutmayın. Bu şekilde, kullanıcı koleksiyonunu yineleyebilir ve her birini yazdırabiliriz.

Fark etmiş olabileceğiniz gibi, 'users' tüm kullanıcıların depolandığı koleksiyonun adıdır; Akılda tutulması gereken bir şey, niteliklere, nitelik adının başına eklenen bir alt çizgi '' ile erişilmesidir. Bunun çalışması için önce main_controller.rb dosyasının üstüne bir kod satırı eklememiz gerekiyor:

 model :store

Volt, kontrolörden erişilebilen çoklu koleksiyon modelleri ile birlikte gelir ve bunların her biri bilgiyi farklı bir yerde saklar. Mağaza koleksiyonu modeli, verileri veri deposunda saklar ve burada, bunu kullanacak denetleyiciyi belirtiyoruz (şu anda desteklenen tek veri deposu MongoDB'dir). Nasıl göründüğünü görmek için birkaç kullanıcı oluşturalım.

Şu anda bu sayfada heyecan verici bir şey yok, sadece kayıtlı kullanıcıları listeliyoruz. Şimdi mesaj göndermek için bir kullanıcı seçebilmek, o anda oturum açmış olan kullanıcının adını listeden kaldırabilmek (kendisine mesaj gönderememesi gerektiği için), listeyi yalnızca kimliği doğrulanmış olarak gösterebilmek istiyorum. kullanıcıları ve kimliği doğrulanmamış kullanıcılara bir 'açılış' sayfası göster:

 <:Body> <h1>Home</h1> {{ if Volt.user }} <div class="row"> <div class="col-md-4"> {{ _users.each do |user| }} {{ if user._id != Volt.user._id }} <div class="contact {{ if params._user_id == user._id }} active {{ end }}" e-click="select_conversation(user)"> {{user._name}} </div> {{ end }} {{ end }} </div> </div> {{ else }} <p>This is a sample application built with Volt to demonstrate its real-time capabilities. Please log in to access it.</p> {{ end }}

Volt.user mevcut (oturum açmış) kullanıcıyı veya sıfırı döndürür.

e-click niteliği, o öğeye tıklandığında çağrılacak denetleyiciden bir yöntem seçmemize izin verir.

Nitelikler ve CSS

Aslında, tüm 'e-' öznitelikleri Volt'ta olay bağlayıcılarıdır, bu nedenle örneğin, denetleyicide çağrılacak eylemi seçmek için bir forma e-gönderme ekleyebiliriz. Hangisinin seçildiğini öğrenebilmek için parametrelere 'seçili' kullanıcının kimliğini ekleyeceğiz ve daha sonra stil verebileceğimiz 'active' adlı bir sınıf ekleyeceğiz.

Şimdi denetleyicide select_conversation yöntemini oluşturalım:

 def select_conversation(user) params._user_id = user._id end

İşte bu kadar – sayfayı tekrar kontrol ederseniz, bir kullanıcı adına her tıkladığınızda URL'nin değiştiğini görebilirsiniz. Ayrıca, bu öğeye 'active' sınıfı ekleniyor, bu yüzden onu görünür kılmak için biraz CSS ekleyelim (devam edeceğim ve daha sonra ekleyeceğim öğeler için CSS'yi ekleyeceğim):

 .conversation{ form{ input{ margin: 10px 0 5px 0; } } }

 .contact{ width:100%; padding:5px; margin: 4px 0; font-size:15px; cursor:pointer; &:hover{ background-color: #FAFAFA; } &.active{ background-color: #337ab7; color: #FFF; } .badge{ background-color: #900; } }

 .message{ max-width: 80%; padding:10px 15px; margin: 5px 0; background-color: #FEFEFE; border: 1px solid #E7E7E7; border-radius: 5px; float: left; clear:both; &.sent{ background-color: #E4F3DB; border: 1px solid #B7D0A7; float: right; } p{ margin:0; } }

Şimdi her kullanıcıya mesaj göndermek için sağ tarafta bir form oluşturalım:

 <:Body> <h1>Home</h1> {{ if Volt.user }} <div class="row"> <div class="col-md-4"> {{ _users.each do |user| }} {{ if user._id != Volt.user._id }} <div class="contact {{ if params._user_id == user._id }} active {{ end }}" e-click="select_conversation(user)"> {{user._name}} </div> {{ end }} {{ end }} </div> {{ if params._user_id }} <div class="col-md-8 well conversation"> {{ current_conversation.each do |message| }} <div class="message {{ if message._sender_id == Volt.user._id }} sent {{ end }}"> <p>{{ message._text }}</p> </div> {{ end }} {{ if current_conversation.count == 0 }} <p>You have no messages yet. Start chatting!</p> {{ else }} <div class="clearfix"></div> {{ end }} <form e-submit="send_message" role="form"> <div class="form-group"> <input class="form-control" type="text" placeholder="Write a message" value="{{ page._new_message }}" /> <button type="submit" class="btn btn-primary pull-right">Submit</button> </div> </form> </div> {{ end }} </div> {{ else }} <p>This is a sample application built with Volt to demonstrate its real-time capabilities. Please log in to access it.</p> {{ end }}

İlk olarak, formu görüntülemeden önce seçilmiş bir kullanıcı olup olmadığını kontrol ediyoruz, ardından mevcut konuşmadan (seçilen kullanıcı ile konuşma) gelen tüm mesajları, birazda tanımlayacağımız controller içindeki bir metoddan ekrana getiriyoruz, ve altta yeni mesajlar göndermek için bir form görüntülüyoruz.

Girdinin değerinin, veri deposunda depolanmasını istemediğimiz için sayfa toplama modelinde oluşturduğumuz bir öznitelik olduğuna dikkat edin. Şimdi kontrolörde current_conversation ve send_message yöntemlerini tanımlayalım:

 def send_message unless page._new_message.strip.empty? _messages << { sender_id: Volt.user._id, receiver_id: params._user_id, text: page._new_message } page._new_message = '' end end def current_conversation _messages.find({ "$or" => [{ sender_id: Volt.user._id, receiver_id: params._user_id }, { sender_id: params._user_id, receiver_id: Volt.user._id }] }) end

send_message yönteminde, eğer mesaj boş değilse koleksiyona yeni bir mesaj ekliyoruz (şu anda doğrulamalarla uğraşmamak için satır içi kontrol ediyoruz), ardından ._new_message to '' ayarladık. giriş alanını boşaltıyoruz.

Bu satırı select_conversation yönteminin sonuna da eklemek isteyebiliriz. Geçerli konuşma yöntemi, seçilen kullanıcı ile geçerli kullanıcı arasındaki iletiler için yalnızca _messages koleksiyonunu sorgular.

Gerçek Zamanlı Bildirimlerle Tamamlayın

Bitirmek için, bir tür bildirim sistemine sahip olmak istiyorum, böylece kullanıcılar diğer kullanıcıların kendilerine ne zaman mesaj gönderdiğini görebilir.

_notifications adında yeni bir koleksiyon ekleyelim ve her mesaj gönderildikten sonra yeni bir tane oluşturalım:

 def send_message unless page._new_message.strip.empty? _messages << { sender_id: Volt.user._id, receiver_id: params._user_id, text: page._new_message } _notifications << { sender_id: Volt.user._id, receiver_id: params._user_id } page._new_message = '' end end def select_conversation(user) params._user_id = user._id unread_notifications_from(user).then do |results| results.each do |notification| _notifications.delete(notification) end end page._new_message = '' end def unread_notifications_from(user) _notifications.find({ sender_id: user._id, receiver_id: Volt.user._id }) end

Ayrıca, bir kullanıcı konuşmayı seçtikten ve yeni mesajları gördükten sonra gelen bildirimleri silmemiz gerekiyor, bu yüzden o kısmı select_conversation yöntemine ekledim.

Kullanıcı adının hemen yanına bir bildirim sayacı ekleyelim:

 <div class="contact {{ if params._user_id == user._id }} active {{ end }}" e-click="select_conversation(user)"> {{user._name}} {{ if unread_notifications_from(user).count > 0 }} <span class="badge"> {{ unread_notifications_from(user).count }} </span> {{ end }} </div>

Artık uygulama hazır, birkaç tarayıcı açabilir ve Volt'un gerçek zamanlı özelliklerini test etmeye başlayabilirsiniz.

Volt Kesinlikle Denemeye Değer

Volt çerçevesi, yıllardır var olan popüler Ruby çerçevelerinin çoğu kadar olgun ve sağlam olmasa da (şu anda Volt hala beta aşamasındadır), düşünmeye ve incelemeye değer.

İlgileniyorsanız, Volt'u bir tur atmak için bu Ruby çerçeve eğitimini kullanın. Volt, geliştirmenin bu erken aşamasında bile çok umut verici bir Ruby çerçevesi gibi göründüğünden, daha sonraki gelişmelere göz atın.

Sırada pek çok harika yeni özellik var ve daha fazla insan denemeye başladıkça Volt'un önümüzdeki birkaç yıl içinde daha alakalı hale geleceğinden oldukça eminim. Bir dizi yenilikçi özellik nedeniyle, birçok geliştirici Volt'a aşık olabilir ve onu bir sonraki Ruby projesi için kullanabilir.