В этой серии из четырех частей я расскажу вам о процессе создания полнофункционального приложения To Do List под названием «Просто сделай это» с использованием Sinatra и DataMapper. Надеюсь, это поможет продемонстрировать, насколько быстро и легко использовать Sinatra. Начнем с основ Синатры.
Установка Синатры
Чтобы начать работать с Sinatra, вам нужно установить Ruby. Я бы рекомендовал использовать RVM для этого (вы можете следовать этому замечательному руководству Гленна Гудрича, если вам нужна помощь). После успешной установки Ruby и Rubygems пришло время установить Sinatra. Это делается с помощью Rubygems и представляет собой просто случай открытия командной строки и ввода:
$> gem install sinatra Основное приложение
Для начала откройте ваш любимый текстовый редактор и сохраните следующее как main.rb. Теперь введите следующие строки.
require 'sinatra' get '/' do "Just Do It" end
Примечание. Если вы используете версию Ruby менее 1.9, вам нужно будет поставить строку с require 'rubygems' в верхней части этого файла.
Это примерно так же просто, как может получить приложение Sinatra: вам нужно потребовать гем sinatra вверху, тогда реальное действие начинается в строке 3. Это называется обработчиком, потому что он обрабатывает маршруты и действия. Первая часть (get) указывает, какой метод HTTP используется, в данном случае HTTP GET, потому что мы «получаем» страницу. Следующая часть представляет собой строку, которая соответствует маршруту, который является ‘/’ — корневой URL-адрес приложения. Блок кода определяет, что происходит, когда пользователь посещает этот URL. В этом случае мы возвращаем простую текстовую строку («Just Do It»), которая будет отображаться на странице. Последняя строка блока кода обработчика всегда соответствует тому, что будет отображаться браузером.
Чтобы убедиться, что он работает, нам нужно запустить сервер Sinatra. Откройте командную строку, перейдите к месту сохранения файла и введите:
$> ruby main.rb
Через пару секунд вы должны увидеть следующее сообщение:
== Sinatra/1.2.6 has taken the stage on 4567 for development with backup from Thin
Откройте браузер и перейдите по адресу http: // localhost: 4567 . Вы должны увидеть вдохновляющую фразу «Просто сделай это». Отлично, вы успешно создали свое первое приложение Sinatra. Видишь, я же говорил, это было легко!
Встроенные шаблоны
Разумеется, приложение Just Do It не слишком далеко уйдет, просто отображая короткие строки текста. Нам нужно будет создать несколько файлов шаблонов, которые будут содержать HTML, а также динамический контент, используя Ruby. Slim — фантастический шаблонизатор, который делает эту задачу намного проще. Прежде чем мы продолжим, нам нужно установить slim gem:
gem install slim
Теперь вернитесь к main.rb и добавьте следующие строки:
require 'sinatra' require 'slim' get '/' do slim :index end __END__ @@layout doctype html html head meta charset="utf-8" title Just Do It link rel="stylesheet" media="screen, projection" href="/styles.css" /[if lt IE 9] script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" body h1 Just Do It == yield @@index h2 My Tasks ul.tasks li Get Milk
Сначала мы удостоверимся, что нам нужен slim gem, а затем внесем несколько изменений в обработчик, чтобы последняя строка теперь возвращала представление под названием «index», которое генерируется slim. Это представление можно увидеть в нижней части файла, после ‘@@ index’. Это пример встроенных шаблонов Sinatra, что я считаю убойной функцией, так как она позволяет вам хранить весь код в одном файле — идеально подходит для быстрой сборки. Встроенные шаблоны всегда идут после объявления __END__ , и каждый шаблон начинается с @@ .
Я также включил шаблон под названием «@@ layout». Он будет автоматически отображаться при каждом просмотре и предоставляет базовые леса HTML5. Ключевая строка в шаблоне макета находится в самом конце ( ==yield ). Оператор yield отображает содержимое из любого шаблона, запрошенного обработчиком (в данном случае, «index»).
Оба эти представления используют минимальный синтаксис Slim. Я считаю, что это делает написание HTML гораздо более приятным, но будьте осторожны — Slim чувствителен к пробелам. Отступы в 2 пробела используются для вложения элементов друг в друга, и Слим очень строги в том, чтобы быть последовательным. Если вам не нравится Slim, есть множество других шаблонных языков, которые можно использовать с Sinatra, включая ERB, Haml и Markaby.
Давайте посмотрим, как это выглядит: убить сервер, нажав Ctrl + C, и перезапустить его снова, набрав ruby main.rb Сервер нужно будет перезапускать каждый раз, когда вы вносите какие-либо изменения в свой код (если это станет проблемой, вы можете попробовать использовать Shotgun ). Перезагрузите страницу по адресу http: // localhost: 4567, чтобы увидеть наш новый макет.
Внешние представления
Теперь, когда вы знакомы с тем, как Sinatra использует обработчики для визуализации представлений, давайте отойдем от встроенных шаблонов и рассмотрим организацию наших представлений в папки.
Прежде чем мы сделаем это, нам нужно удалить встроенные шаблоны: откройте main.rb и удалите объявление __END__ и все последующие шаблоны.
В том же каталоге, в котором вы сохранили файл main.rb, создайте две папки, одну с именем public, а другую с именем views. Общая папка будет использоваться для хранения любых общедоступных ресурсов, таких как изображения и таблицы стилей. В папке views будут храниться все наши шаблоны Slim. Наши существующие представления необходимо перенести в отдельные файлы. Сохраните следующее в папке представлений как layout.slim:
doctype html html head meta charset="utf-8" title Just Do It link rel="stylesheet" media="screen, projection" href="/styles.css" /[if lt IE 9] script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" body h1 Just Do It == yield
А также сохраните следующее как index.slim:
h2 My Tasks ul.tasks li Get Milk
Рекомендуется перезапустить сервер Sinatra и убедиться, что наши представления по-прежнему отображаются.
Динамический контент
Теперь, когда мы немного более организованы, мы можем взглянуть на еще несколько особенностей Синатры. Давайте создадим новый обработчик, который принимает некоторый динамический ввод (в main.rb ):
get '/:task' do @task = params[:task] slim :task end
Возможно, вы заметили, что маршрут содержит строку «: task» — это именованный параметр , идентифицируемый по двоеточию (‘:’). Именованные параметры — это значения, взятые из URL, которые доступны через хэш ‘params’. В первой строке блока кода я установил переменную экземпляра с именем ‘@task’ равной значению params [: task], которое будет тем, что записано после косой черты в URL. Переменные экземпляра полезны, так как на них можно ссылаться в представлениях.
Говоря о представлениях, новый маршрут определяет представление «задачи», которого не существует. Скопируйте следующий код в новый текстовый файл и сохраните его в папке представлений как «task.slim»:
h2 My Tasks = @task
Здесь используется знак ‘=’ для оценки переменной Ruby. Slim выводит результат того, что Ruby будет помещено после знака «=». В этом случае это значение переменной экземпляра @task, которая должна соответствовать URL. Проверьте это — убейте и перезапустите сервер, затем перейдите в ‘/ http: // localhost: 4567 / get-milk’. Вы должны увидеть следующее:
Простой маршрут задачи
Это нормально, но мы можем сделать лучше. Давайте добавим немного логики в обработчик, чтобы он выглядел лучше:
get '/:task' do @task = params[:task].split('-').join(' ').capitalize slim :task end
Теперь, когда вы переходите к ‘/ http: // localhost: 4567 / get-milk’, вы должны увидеть следующее:
Наша лучшая страница задач
формы
Прежде чем мы закончим первую часть руководства, давайте взглянем на добавление задачи с помощью формы. Откройте index.slim и замените содержимое следующим:
form action="/" method="POST" input type="text" name="task" input.button type="submit" value="New Task >>"
Теперь нам нужен обработчик для работы с формой после ее публикации. Если вы посмотрите на код, атрибут действия указывает форме отправлять себя в URL ‘/’, а атрибут метода указывает ему использовать метод POST. Это очень хорошо приводит к тому, что я считаю еще одной из убойных возможностей Синатры — способ, которым метод запроса указан в обработчике. Добавьте следующий обработчик в main.rb:
post '/' do @task = params[:task] slim :task end
Этот код очень похож на обработчик, который мы использовали ранее для перечисления задач, но теперь мы используем ввод формы для получения задачи. Новый обработчик определяется как POST-маршрут, то есть он реагирует только на HTTP-запросы POST. Таким образом, мы можем определить два обработчика для одного и того же маршрута — ‘/’ — но дать разные блоки кода в зависимости от типа запроса.
Когда форма отправляется, она устанавливает значение params [: task] равным тому, что было введено при вводе текста task формы. Вы можете получить доступ к любым значениям, установленным в формах, аналогичным образом ссылаясь на хэш параметров.
Перейдите по адресу http: // localhost: 4567 / и попробуйте добавить некоторые задачи в форму. Это только начало, но мы не можем создать список задач, и, конечно, нет способа их завершить и удалить. Нам нужен способ хранения задач, и это то, что мы рассмотрим во второй части !