Rails Girls App Tutorial

Vesa Vänskä, @vesan tarafından oluşturuldu

Rails’i kurmuş olduğunuzdan emin olun. Kurulum için kurulum rehberini takip edin.

Araçları öğrenin

 

Metin Editörü

  • Atom, Sublime Text, Vim ve Emacs, kod yazmak ve dosyaları değiştirmek için için kullanabileceğiniz metin editörleridir.

 

Terminal (Windows'ta Komut İstemi)

  • Rails sunucusunu başlattığınız ve komutları çalıştırdığınız yer.

 

Web tarayıcısı

  • Uygulamanıza bakabileceğiniz uygulama (Firefox, Safari, Chrome).

Önemli

İşletim sisteminiz için yazılmış yönergeleri seçmeniz önemli - Windows’ta çalıştırmanız gereken komutlar Mac ve Linux’takinden biraz farklı. Eğer problem yaşarsanız komutların altındaki İşletim Sistemi seçicisini kontrol edin. Eğer bir bulut sağlayıcısı (örn. nitrous) kullanıyorsanız, Windows makinada olmanıza rağmen Linux komutlarını kullanmanız gerekir.

1. Uygulama oluşturma

Railsgirls isminde yeni bir Rails uygulaması oluşturuyoruz.

İlk olarak, terminali açalım:

Sonra şu komutları terminalde çalıştırın:

 mkdir projects

projects adında bir dizinin oluşturulduğunu, liste komutu ls i çalıştırarak kontrol edebilirsin. projects dizinini çıktıda görmelisin. İçinde bulunduğun dizini, projects klasörüne değiştirmek için şu komutu çalıştırmalısın: 

 cd projects

Tekrar ls komutunu çalıştırarak, boş bir dizin ya da klasör içinde olduğunu kontrol edebilirsin. Şimdi, railsgirls adında bir uygulama oluşturmak için şu komutu kullanmalısın: 

 rails new railsgirls

Bu; railsgirls klasörü içinde yeni bir uygulama oluşturacak, dolayısıyla, tekrar dizinimizi şu komutu çalıştırarak rails uygulamamızın bulunduğu yere değiştirmek isteriz: 

 cd railsgirls

Eğer ls komutunu klasör içinde çalıştırsanız app veconfig dosyalarını göreceksiniz. Artık Rails sunucunu çalıştırabilirsiniz: 

 rails server 
 mkdir projects

projects adında bir dizinin oluşturulduğunu, liste komutu ls i çalıştırarak kontrol edebilirsin. projects dizinini çıktıda görmelisin. İçinde bulunduğun dizini, projects klasörüne değiştirmek için şu komutu çalıştırmalısın: 

 mkdir projects

Tekrar ls komutunu çalıştırarak, boş bir dizin ya da klasör içinde olduğunu kontrol edebilirsin. Şimdi, railsgirls adında bir uygulama oluşturmak için şu komutu kullanmalısın: 

 rails new railsgirls

Bu; railsgirls klasörü içinde yeni bir uygulama oluşturacak, dolayısıyla, tekrar dizinimizi şu komutu çalıştırarak rails uygulamamızın bulunduğu yere değiştirmek isteriz: 

 cd railsgirls

Eğer ls komutunu klasör içinde çalıştırsanız app veconfig dosyalarını göreceksiniz. Artık Rails sunucunu çalıştırabilirsiniz: 

 rails server

http://localhost:3000u tarayıcınızda açın. Bir bulut Servisi (örneğin azot) kullanıyorsanız, önizleme işlevselliğini kullanın (Ayrıntılar için Yükleme kılavuzuna bakın).

“Welcome aboard” sayfasını görüyor olmalısınız. Bu yeni uygulamanızın oluşturulmasının doğru bir şekilde çalıştığı anlamına gelir.

Bu pencerede komut isteminin görünür olmadığını fark edeceksiniz çünkü artık Rails sunucusundasındasınız, komut istemi şu şekilde görünür:

 $ 
 >

Komut istemi görünür olmadığında yeni komutlar çalıştıramazsınız. Eğer cd ya da başka bir komutu çalıştırmayı denerseniz bu çalışmayacaktır. Normal komut istemine dönmek için:

Sunucuyu kapatmak için terminalde Ctrl+C e basın.

Eğitmen: Her komutun ne işe yaradığını açıklayın. Ne üretildi? Sunucu ne yaptı?

2.Fikir iskelesini oluşturmak

Bize listeleme, ekleme, çıkarma, düzenleme ve bir şeyleri, bizim durumumuzda fikirleri, görüntüleme için bir başlangıç noktası oluşturacak Rails iskele özelliğini kullanacağız.

Eğitmen:Rails iskele yapısı nedir? (Komutu, model ismini ve ilişkili veritabanı tablosunu, isimlendirme düzenlerini, özellikleri ve tipleri vb. açıklayın) Göçler nelerdir ve göçlere neden ihtiyacınız vardır?

 rails generate scaffold idea name:string description:text picture:string

İskele proje dizinimizde yeni dosyalar oluşturacak ama bunları düzgün bir şekilde çalıştırabilmek için veritabanımızı güncelleyecek ve sunucuyu tekrar başlatacak birkaç komut çalıştırmamız gerekiyor.

 bin/rake db:migrate rails server 
 ruby bin/rake db:migrate rails server

Tarayıcınızdan http://localhost:3000/ideas adresini açın. Bulut servisi (örneğin; nitrous) kullanıcıları ön izleme linklerine ‘/ideas’ kısmını eklemelidir. (kurulum klavuzuna bakın).

Etrafa tıklayın ve şu birkaç komut-satırı komutlarını çalıştırarak neler var test edin.

Biraz gezindikten sonra sunucudan çıkmak için Ctrl+C tuşlarına basın.

3.Tasarım

Eğitmen: HTML ve Rails arasındaki ilişki hakkında konuşun. View’lerin hangi kısmı HTML, hangi kısmı Embedded Rubby (ERB)? MVC nedir ve bununla ilişkisi ne? (Modeller ve denetleyiciler HTML view’ları oluşturmaktan sorumludur.)

Uygulama henüz çok hoş görünmüyor. Bu konuda bir şeyler yapalım. Güzel görünümü kolayca sağlamak için Twitter Bootstrap projesini kullanacağız.

app/views/layouts/application.html.erb dosyasını metin editöründe açın ve aşağıdaki satırın üzerine

 <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>

ekleyin

 

<link rel="stylesheet" href="//railsgirls.com/assets/bootstrap.css" />

<link rel="stylesheet" href="//railsgirls.com/assets/bootstrap-theme.css" />

ve aşağıdaki satırı

 <%= yield %>

aşağıdakiyle değiştirin

<div class="container">
  <%= yield %>
</div>

Şimdi de layouta bir gezinti çubuğu ve altbilgi ekleyelim. Aynı dosyada, < body > altında ekle

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 

<div class="container">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Yönlendirmeyi aktifleştir</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/">Fikir uygulaması</a>
  </div>
  
  <div class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="active">
        <a href="/ideas">Fikirler</a>
      </li>
    </ul>
  </div>
</div></nav>

ve </body> den önce aşağıdakini ekleyin

<footer> 

<div class="container">
  Rails Girls 2015
</div></footer>

Şimdi de fikirler tablosunun görünümünü değiştirelim. app/assets/stylesheets/application.css dosyasını açın ve en alta aşağıdakini ekleyin

 body { padding-top: 100px; } footer { margin-top: 100px; } table, td, th { vertical-align: middle; border: none; } th { border-bottom: 1px solid #DDD; }

Şimdi dosyalarınızı kaydettiğinden emin olun ve değişiklikleri görmek için tarayıcınızı yenileyin. HTML & CSS i daha fazla da değiştirebilirsiniz.

Eğer terminaliniz size bir şekilde JavaScript’iniz ya da CoffeeScript’iniz ile ilgili bir hata olduğunu ima ediyorsa nodejs’i yükleyin. Bu sorun RailsInstaller kullandığınızda ortaya çıkmamalıdır (Rails’i şu komut ile kurduysanız ortaya çıkar: gem install rails).

Eğitmen: Biraz CSS ve düzenleri hakkında konuşun.

4.Resim yüklemelerini eklemek

Rails’de dosya yüklemek için bir yazılım yüklememiz gerekiyor.

Metin editörünüzü kullanarak proje dizininiz altında bulunan Gemfile dosyasını açın ve aşağıdaki satırın altına

 gem 'sqlite3'

aşağıdaki satırı ekleyin

 gem 'carrierwave'

Eğitmen:Kütüphanelerin ne olduğunu ve neden kullanışlı olduklarını açıklayın. Açık kaynak yazılımın ne olduğunun tanımını yapın.

Sunucuyu kapatmak için terminalde Ctrl+C e basın.

Terminalde şunu çalıştırın:

 bundle

Şimdi yüklemeleri yapacak kodu üretebiliriz. Terminalde şunu çalıştırın:

 rails generate uploader Picture

Şimdi lütfen rails sunucusunu başlatın.

Not: Bazılarınız rails sunucusunu sürekli çalıştırmak için ikinci bir terminal kullanıyor olabilir. Eğer öyle yapıyorsanız şimdi Rails sunucunun sürecini yeniden başlatmanız gerekiyor. Bu eklenen kütüphanenin uygulamaya yüklenmesi için gereklidir.

app/models/idea.rb dosyasını açın ve aşağıdaki satırın altına

 class Idea < ActiveRecord::Base

şu satırı ekleyin

 mount_uploader :picture, PictureUploader

app/views/ideas/_form.html.erb dosyasını açın ve aşağıdaki satırı

 <%= f.text_field :picture %>

şununla değiştirin

 <%= f.file_field :picture %>

Bazen TypeError: can’t cast ActionDispatch::Http::UploadedFile to string hatasını alabilirsiniz.

Eğer bu hatayı alırsanız, app/views/ideas/_form.html.erb dosyasında şu satırı

 <%= form_for(@idea) do |f| %>

şununla değiştirin

 <%= form_for @idea, :html => {:multipart => true} do |f| %>

Tarayıcınızda resimli bir fikir ekleyin. Şu an bir resim yüklediğinizde güzel görünmüyor çünkü şimdi sadece dosyanın yolunu gösteriyor, o yüzden bunu düzeltelim.

app/views/ideas/show.html.erb dosyasını açın ve şu satırı

 <%= @idea.picture %>

şununla değiştirin

 <%= image_tag(@idea.picture_url, :width => 600) if @idea.picture.present? %>

Şimdi, ne değiştiğini görmek için sayfayı yenileyin.

Eğitmen: Biraz HTML hakkında konuşun.

5.Rotaları Düzenlemek

http://localhost:3000 linkini açın (bulut servisi kullanıyorsanız ön izleme linkinizi açın). Hala “Welcome aboard” sayfasını gösteriyor. Hadi fikirler sayfasına yönlendirmesini sağlayalım.

config/routes.rb dosyasını açın ve ilk satırdan sonra ekleyin

 root :to => redirect('/ideas')

Değişikliği tarayıcınızda başlangıç yolunu (bu http://localhost:3000/ ya da ön izleme linkinizdir) açarak test edin.

Eğitmen:Rotalar hakkında konuşun ve rotaların sıralaması ve statik dosyalarla ilişkilerini anlatın.

Rails 3 kullanıcıları:Bunun çalışması için /public dizininden index.html dosyasını silmeniz gerekmektedir.

Uygulamanızda statik sayfa oluşturma

Hadi uygulamamıza bu uygulamayı yazan kişiyle ilgili - sen! - bilgileri gösterecek statik bir sayfa ekleyelim.

 rails generate controller pages info

Bu komut app/views dizini altına /pages adında yeni bir dizin ve bu dizinin altına sizin bilgi sayfanız olacak info.html.erb adında yeni bir dosya oluşturacaktır.

Ayrıca bu sizin routes.rb dosyanızın altına basit bir yol ekler.

 get "pages/info"

Şimdi app/views/pages/info.html.erb dosyasını açabilir ve HTML’e kendinizle ilgili bilgi ekleyebilirsiniz. Yeni bilgi sayfanızı görebilmek için tarayıcınızda http://localhost:3000/pages/info linkini açın ya da eğer bulut servis kullanıcısı iseniz ön izleme linkinize ‘/pages/info’ yazısını ekleyin.

6+.Sırada ne var?

Ek Kılavuzlar