מדריך Rails Girls לבניית אפליקציה

נוצר על-ידי Vesa Vänskä, @vesan

ודאי ש-Rails מותקן אצלך. קראי את מדריך ההתקנה כדי להכין את המחשב שלך.

הכירי את כלי העבודה

 

### עורך טקסט

Sublime Text, Komodo Edit, Vim, Emacs, ו-Gedit הם דוגמאות לעורכי טקסט שאת יכולה להשתמש בהם לכתיבת קוד ועריכת קבצים.

 

### Terminal (נקרא גם Prompt ב-Windows) כאן את מפעילה את שרת ה-Rails ומריצה פקודות.

 

### דפדפן (Firefox, Safari, Chrome) לצפייה באפליקציה שלך.

חשוב!

חשוב שתבחרי בהוראות המתאימות למערכת ההפעלה שלך - ההוראות שאת צריכה להריץ על Windows מעט שונות מאלו של Mac או Linux. אם את נתקלת בבעיות, בדקי את בלינקים שמתחת לכל סט של הוראות, אלו משנים את ההוראות הכתובות בהתאם למערכת ההפעלה שנבחרה.

1.יצירת האפליקציה

אנחנו הולכים ליצור אפליקציית Rails חדשה בשם railsgirls.

ראשית, נפתח את הטרמינל:

לאחר מכן הקלידי את הפקודות הבאות בטרמינל:

mkdir projects
את יכולה לוודא שתיקייה בשם projects אכן נוצרה ע"י הרצת הפקודה: ls. את אמורה לראות את תיקיית ה-projects ב-output. עכשיו את רוצה לשנות את התיקייה שבה את נמצאת כרגע לתיקיית ה-projects ע"י הרצת הפקודה:
cd projects
תוכלי לוודא שאת נמצאת עכשיו בתיקייה ריקה או שוב ע"י שימוש בפקודה ls. עכשיו את רוצה ליצור אפליקצייה חדשה בשם railsgirls ע"י הרצת הפקודה:
rails new railsgirls
זה יצור אפליקציה חדשה בתוך התיקייה railsgirls, ולכן שוב נרצה לשנות את התיקייה הנוכחית להיות בתוך אפליקציית ה-Rails שלנות, ע"י הרצת:
cd railsgirls
אם תריצי את הפקודה ls בתוך התיקייה את תראי תיקיות כדוגמת app ו-config. את יכולה להפעיל את שרת ה-rails ע"י הרצת:
rails server
mkdir projects
את יכולה לוודא שתיקייה בשם projects אכן נוצרה ע"י הרצת הפקודה: dir. את אמורה לראות את תיקיית ה-projects ב-output. עכשיו את רוצה לשנות את התיקייה שבה את נמצאת כרגע לתיקיית ה-projects ע"י הרצת הפקודה:
cd projects
תוכלי לוודא שאת נמצאת עכשיו בתיקייה ריקה או שוב ע"י שימוש בפקודה dir. עכשיו את רוצה ליצור אפליקצייה חדשה בשם railsgirls ע"י הרצת הפקודה:
rails new railsgirls
זה יצור אפליקציה חדשה בתוך התיקייה railsgirls, ולכן שוב נרצה לשנות את התיקייה הנוכחית להיות בתוך אפליקציית ה-Rails שלנות, ע"י הרצת:
cd railsgirls
אם תריצי את הפקודה ls בתוך התיקייה את תראי תיקיות כדוגמת app ו-config. את יכולה להפעיל את שרת ה-rails ע"י הרצת:
ruby bin\rails server

פתחי את הדפדפן שלך וגילשי לכתובת http://localhost:3000. את אמורה לראות עמוד “Welcome aboard”, שאומר שיצירת האפליקציה פעלה כראוי.

שימי לב כי בחלון הזה האופציה להרצת פקודה אינה נראית, מכיוון שאת נמצאת כעת בתוך שרת ה-Rails. כשאפשר להריץ פקודות, הטרמינל אמור להראות כך:

$
>

זה נקרא “command prompt”. כשה-command prompt אינו נראה אינך יכולה להריץ פקודות חדשות. אם תנסי להריץ את הפקודה cd או כל פקודה אחרת, זה לא יעבוד. על מנת לחזור ל-command prompt הרגיל:

לחצי <kbd>Ctrl</kbd>+<kbd>C</kbd> בטרמינל כדי לכבות את השרת.

מדריך/ה: הסבירי מה כל פקודה עושה. מה ג’ונרט? מה עושה השרת?

2.יצירת שלד רעיון

We’re going to use Rails’ scaffold functionality to generate a starting point that allows us to list, add, remove, edit, and view things; in our case ideas.

Coach: What is Rails scaffolding? (Explain the command, the model name and related database table, naming conventions, attributes and types, etc.) What are migrations and why do you need them?

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

The scaffold creates new files in your project directory, but to get it to work properly we need to run a couple of other commands to update our database and restart the server.

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

גלשי לכתובת http://localhost:3000/ideas בדפדפן שלך. לחצי מסביב ובדקי את מה שקיבלת באמצעות הרצת מעט הפקודות האלו.

Click around and test what you got by running these few command-line commands.

לחצי <kbd>Ctrl</kbd>+<kbd>C</kbd> כדי לכבות את השרת שוב אחרי ששיחקת קצת עם האפליקציה.

3.עיצוב

מדריך/ה: דברי על הקשר בין HTML ו-Rails. אלו חלקים מה-views הם HTML ואלו הם Embedded Ruby (ERB)? מה זה MVC ואיך זה מתקשר לעניננו? (Models ו-controllers אחראיים לייצור תצוגות ה-HTML.)

האפליקציה עדיין לא נראית משהו. בואי נעשה עם זה משהו. נוסיף את הפרוייקט Twitter Bootstrap כדי לתת לנו סטייל נחמד יותר בקלות רבה.

פתחי את הקובץ app/views/layouts/application.html.erb בעורך הטקסט שלך, ומעל השורה

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

הוסיפי

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

והחליפי את

<%= yield %>

ב-

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

בואי נוסיף גם בר ניווט ו-footer ל-layout. באותו הקובץ, תחת <body> הוסיפי

<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">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">The Idea app</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/ideas">Ideas</a></li>
      </ul>
    </div>
  </div>
</nav>

ולפני </body> הוסיפי

<footer>
  <div class="container">
    Rails Girls 2015
  </div>
</footer>
<script src="//railsgirls.com/assets/bootstrap.js"></script>

כעת בואי גם נשנה את העיצוב של טבלת הרעיונות. פתחי את הקובץ app/assets/stylesheets/application.css והוסיפי בתחתית

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

כעת רפרשי את הדפדפן כדי לראות מה השתנה. את יכולה גם לשנות את ה-HTML וה-CSS עוד.

In case your Terminal shows you an error message that sort of implies there is something wrong with your JavaScript or CoffeeScript, install nodejs. This issue should not appear when you’ve used the RailsInstaller (but when you’ve installed Rails via gem install rails).

מדריך/ה: דבר/י קצת על CSS ו-layouts.

שלב 4: הוספת אפשרות להעלאת תמונות

אנחנו נצטרך להתקין חתיכת תוכנה שתאפשר לנו להעלות קבצים ב-Rails.

פתחי את הקובץ Gemfile בתיקיית הפרוייקט באמצעות עורך הטקסט ומתחת לשורה

gem 'sqlite3'

הוסיפי

gem 'carrierwave'

מדריך/ה: הסבר/הסבירי מהן ספריות וכיצד הן מועילות. תאר/י מהי תוכנת קוד פתוח.

Hit <kbd>Ctrl</kbd>+<kbd>C</kbd> in the terminal to quit the server.

בטרמינל הריצי:

bundle

כעת אנחנו יכולים לג’נרט את הקוד שמטפל בהעלאות. בטרמינל הריצי:

rails generate uploader Picture

בשלב זה עליך לאתחל את שרת ה-Rails בטרמינל.

לחצי על Ctrl+C בטרמינל כדי לכבות את השרת. ברגע שהוא הפסיק, את יכולה ללחוץ על חץ למעלה כדי לקבל את הפקודה האחרונה שהכנסת, ואז ללחוץ enter כדי להפעיל את השרת שוב.

זה נחוץ על מנת שהאפליקציה תטען את הספרייה שהתווספה.

פתחי את הקובץ app/models/idea.rb ומתחת לשורה

class Idea < ActiveRecord::Base

הוסיפי

mount_uploader :picture, PictureUploader

פתחי את הקובץ app/views/ideas/_form.html.erb ושני את

<%= f.text_field :picture %>

ל-

<%= f.file_field :picture %>

Sometimes, you might get an TypeError: can’t cast ActionDispatch::Http::UploadedFile to string.

If this happens, in file app/views/ideas/_form.html.erb change the line

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

to

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

בדפדפן שלך, הוסיפי רעיון חדש עם תמונה. כשאת מעלה תמונה היא לא נראית כל כך טוב כי היא מציגה רק את הנתיב אל קובץ התמונה, אז בואי נתקן זאת.

פתחי את הקובץ app/views/ideas/show.html.erb ושני את

<%= @idea.picture %>

ל-

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

כעת רפרפשי את הדפדפן שלך כדי לראות מה השתנה.

מדריך/ה: דבר/י מעט על HTML.

שלב 5: שיפורים ו-routes

אם תנסי לגלוש ל-http://localhost:3000 זה יציג לך את מסך ה-“Welcome aboard”. בואי נגרום לו להציג את רשימת הרעיונות.

פתחי את הקובץ config/routes.rb ואחרי השורה הראשונה הוסיפי

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

בדקי את השינוי ע”י גלישה לכתובת הראשית בדפדפן שלך.

מדריך/ה: דבר/י על routes, כולל פרטים על סדר ה-routes והקשר שלהם לקבצים סטטיים.

משתמשות Rails 3: תצטרכו למחוק את הקובץ index.html מתיקיית ה-/public/ כדי שזה יעבוד.

הוסיפי עמודים סטטיים לאפליקציה שלך

בואי נוסיף עמודים סטטיים לאפליקציה שלנו שיכילו מידע על יוצרת האפליקציה - את!

rails generate controller pages info

הפקודה הזאת תיצור תיקיה חדשה תחת /views שנקראת /pages ומתחת לזה קובץ שנקרא info.html.erb שהוא יהיה עמוד המידע שלך.

ה מוסיף גם route פשוט חדש ל-routes.rb.

get "pages/info"

כעת את יכולה לפתוח את הקובץ /views/pages/info.html.erb ולהוסיף מידע אודותיך ב-HTML ואז לגלוש לכתובת http://localhost:3000/pages/info בדפדפן שלך כדי לראות את עמוד המידע החדש שלך.

6+.What next?

מה הלאה?

מדריכים נוספים