Добро пожаловать в последнюю часть этой серии. Целью этой серии руководств было отвести человека, который никогда не использовал Sinatra, от создания приложения до его развертывания. Вы можете найти другие части серии по следующим ссылкам:
После этих трех частей мы завершили большинство основных функций нашего списка дел. В этой заключительной части мы рассмотрим использование Sass для CSS перед развертыванием приложения в облачном хостинге Heroku .
Логотип
Каждое уважающее себя приложение нуждается в логотипе, поэтому я создал простой «тиковый» логотип, который вы можете найти на Github . Мы можем использовать это в приложении, установив его в качестве фонового изображения основного заголовка. Откройте файл styles.css и добавьте следующий CSS:
h1.logo{
font-family: helvetica,arial,sans-serif;
font-size: 24px;
color: white;
padding: 64px 0 0;
margin: 0 auto;
text-transform: uppercase;
text-align: center;
font-weight: normal;
letter-spacing: 0.3em;
background: transparent url(/logo.png) 50% 0 no-repeat;
}(Примечание: если вы не заметили, вам нужно добавить класс ‘logo’ к элементу h1 в layout.slim, чтобы это работало)
Я также использовал логотип, чтобы создать значок, который вы также можете найти на Github . Чтобы отобразить это, вам нужно будет добавить ссылку на него в HTML. Это означает, что layout.slim теперь должен выглядеть так:
doctype html
html
head
meta charset="utf-8"
title Just Do It!
link rel="shortcut icon" href="/favicon.ico"
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.logo Just Do It!
== yield
Нахальный
Sass (Syntaxically Awesome Stylesheets) — это язык шаблонов CSS, который означает, что вы пишете свои стили в Sass, который затем компилируется на стороне сервера в CSS, который отправляется в браузер. Это очень круто и это в основном все, чем должен был быть CSS. Существует два вида Sass — оригинальный «Indented Sass» и более поздний «SCSS» (Sassy CSS). Я собираюсь использовать SCSS, так как это больше похоже на обычный CSS, но определенно стоит попробовать оба варианта и посмотреть, какой вы предпочитаете.
Чтобы включить Sass в ваш проект Sinatra, нам нужно установить камень Sass:
gem install sass
Далее мы должны добавить следующий обработчик в конец main.rb:
get '/styles.css' do
scss :styles
end
Это в основном берет ссылку на файл styles.css, который у нас уже есть в нашем файле макета, и загружает файл Sass с именем ‘styles.scss’. Этот файл еще не существует, поэтому создайте его. Он должен быть сохранен в каталоге ‘views’. Скопируйте содержимое файла styles.css (в общей папке) в файл styles.scss, а затем удалите файл styles.css.
Если вы посмотрите, как приложение выглядит в браузере, ничего не должно было измениться. Это связано с тем, что SCSS является надмножеством CSS, поэтому любой обычный CSS будет работать как положено, поэтому все, что мы только что сделали, это перешли от использования стандартного CSS к Scss. Но теперь мы готовы начать турбо-зарядку наших стилей.
Переменные CSS
Одним из наиболее востребованных элементов в списках пожеланий CSS являются переменные. Sass дает нам возможность использовать переменные. Например, мы можем установить цвета, используя переменные, на которые есть ссылки в разметке.
$orange:#D78123;
$blue:#1E1641;
$green:#02d330;
$grey: #999;
Теперь мы можем ссылаться на эти цвета в остальной части таблицы стилей. Например, чтобы заголовки в каждом списке были оранжевыми, я могу написать следующее в styles.scss:
.list h1{
color: $orange;
}
Это значительно упрощает обслуживание, как если бы ряд элементов использовал этот цвет, и тогда я решил сделать его немного темнее, мне нужно всего лишь изменить его в одном месте. Вы можете многое сделать с переменными, включая арифметику, — обязательно ознакомьтесь с документацией .
CSS Mixins
Миксины — это действительно классная особенность Sass, которая позволяет вам создавать модульные и многократно используемые CSS. Например, мы создадим миксин под названием button, который содержит все соответствующие CSS, чтобы превратить стандартную ссылку в кнопку:
@mixin button($color){
background:$color;
border: 2px solid darken($color,15%);
cursor: pointer;
color: #fff;
width: 150px;
margin-left:4px;
}
Теперь я могу добавить эти общие стили к любому другому объявлению CSS в моей таблице стилей, используя @include
.button{
@include button($orange);
}
Это добавит весь CSS из кнопки mixin к любому элементу с классом кнопки. Конечно, мы могли бы просто написать CSS непосредственно в классе ‘button’, но использование миксина позволяет нам добавить его в любое другое объявление CSS без повторения какого-либо кода. Также обратите внимание, что миксин включает в себя цветовой аргумент, который позволяет использовать разноцветные кнопки без необходимости повторять код. Также обратите внимание, что мы смогли использовать оранжевый цвет, который содержался в переменной $orange
Вложенный CSS
Еще одна интересная особенность Sass — это возможность вложить ваши объявления. Это может сэкономить много печатать и добавить больше структуры в ваш файл CSS.
Например, следующий CSS был использован для стилизации списков и заголовков в каждом списке:
.list{
float: left;
background: #fff;
}
.list h1{
color:$orange;
}
Это можно написать более эффективно, вложив объявление h1 в объявление .list, например так:
.list{
float: left;
background: #fff;
h1{
color:$orange;
}
}
Приведенный выше Scss скомпилируется с тем же CSS, что и в приведенном выше примере, но имеет преимущество в том, что показывает вложенную структуру. Это также может сэкономить много текста, если вы начнете использовать глубоко вложенный CSS.
Sass — это настолько мощный инструмент, который делает написание CSS намного проще, и его так просто внедрить в Sinatra, что на самом деле нет никаких причин не использовать его во всех ваших проектах. Тем более, что вы можете просто написать стандартный CSS и включить дополнительные «нахальные» функции по мере необходимости. Я привел здесь несколько примеров, которые только начинают касаться поверхности, на которую способен Sass. Я бы посоветовал вам ознакомиться с этим, прочитать документацию и, самое главное, поиграть с собственным кодом. Я обещаю, что как только вы начнете использовать Sass, вы не вернетесь к обычному CSS!
Недостаточно места для отображения полного файла Scss, но вы можете увидеть полный код на Github . Теперь, когда мы закончили работу над приложением, пришло время его развернуть.
Heroku
Heroku — это отличный сервис, который можно использовать для размещения приложений Sinatra в облаке. Это бесплатно для базовых сайтов, включает в себя хранилище базы данных и будет масштабироваться по мере того, как ваше приложение становится все более популярным Он снимает все хлопоты с хостинговых сайтов и может использоваться для крупномасштабных производственных сайтов. Они также имеют отличную документацию и поддержку.
Первое, что вам нужно сделать, если у вас его еще нет, это получить учетную запись Heroku . Затем убедитесь, что в вашей системе установлен Git . Если нет, есть полезное руководство по Github . Обязательно обратите особое внимание на раздел о настройке ключей SSH, поскольку они понадобятся вам для доступа к Heroku.
Далее вам нужно установить гем Heroku, который позволит вам взаимодействовать с вашими приложениями на Heroku:
gem install heroku
Если вы впервые пользуетесь Heroku, вам нужно добавить только что созданные SSH-ключи (вам нужно сделать это только один раз):
heroku keys:add
Теперь мы можем создать приложение на Heroku:
heroku create justdoit
(Обратите внимание, что вам придется использовать другое имя для вашего приложения, так как justdoit уже занят мной!)
Теперь вы настроили Heroku, пришло время подготовить ваше приложение к развертыванию.
Bundler
Прежде чем мы развернем приложение в Heorku, нам нужно использовать Bundler для управления всеми зависимостями, которые есть в нашем приложении. К ним относятся все драгоценные камни, которые мы использовали, а также драгоценные камни, от которых они зависят. Bundler устанавливает все эти драгоценные камни прямо в каталог приложения. Это означает, что ваше приложение поставляется «в комплекте» со всеми его зависимостями, поэтому вы не полагаетесь на то, что что-либо установлено на сервере по умолчанию (в любом случае Heroku по умолчанию буквально не имеет никаких самоцветов). Вы также можете управлять номером версии любых драгоценных камней, чтобы гарантировать, что версии, используемые в производстве, совпадают с версиями, используемыми в разработке.
Для начала нам нужно установить гем Bundler:
gem install bundler
Теперь нам нужно создать два новых файла в главной папке приложения. Прежде всего, нам нужен Gemfile, который перечисляет все драгоценные камни, которые мы использовали. Сохраните следующий код в файле с именем Gemfile (без расширения) в корневом каталоге вашего приложения:
source :rubygems
gem "sinatra"
gem "datamapper"
gem "slim"
gem "sass"
gem "dm-postgres-adapter", :group => :production
gem "dm-sqlite-adapter", :group => :development
Последние две строки указывают адаптеры базы данных, которые Datamapper использует для подключения к базе данных. До сих пор мы использовали Sqlite на нашей машине для разработки, но Heroku использует PostgreSQL . Использование разных баз данных в разных средах осуществляется путем помещения гемов адаптера базы данных в то, что Bundler называет группами.
Нам также нужен файл Rackup. Откройте ваш текстовый редактор и сохраните следующее как config.ru:
require 'bundler'
Bundler.require
require './main'
DataMapper.setup(:default, ENV['DATABASE_URL'] || "sqlite3://#{Dir.pwd}/development.db")
run Sinatra::Application
Обратите внимание, что я разместил строку подключения к базе данных в этом файле — в этот файл обычно помещают код конфигурации. Это означает, что теперь эту строку нужно удалить из main.rb.
И наконец, вам нужно проверить это локально, поэтому мы запускаем команду bundle install
bundle install --without production
Флаг --without production
Нет необходимости запускать эту команду в рабочем режиме — Heroku запустит ее автоматически, если обнаружит Gemfile. Однако мы должны сказать Heroku избегать использования каких-либо драгоценных камней в группе «разработка». Это делается с помощью простой команды:
heroku config:add BUNDLE_WITHOUT="development:test" --app justdoit
(обратите внимание, что вам придется использовать имя вашего приложения вместо justdoit)
Прежде чем мы перейдем к развертыванию приложения, мы должны просто убедиться, что на нашей локальной машине все работает нормально. Это делается по-другому, теперь, когда у нас есть файл стойки. Откройте окно командной строки и введите следующее:
rackup
Это запустит сервер на порту 9292. Перейдите по адресу http: // localhost: 9292 /, чтобы посмотреть, как это выглядит.
развертывание
Осталось только развернуть приложение в Heroku. Прежде всего нам нужно создать файл с именем .gitignore, который сохраняется в корневом каталоге и содержит следующие 2 строки:
development.db
.bundle
Это остановит все ненужные файлы, добавляемые в репозиторий git. Мы не хотим, чтобы файл базы данных Sqlite находился в репозитории git, потому что Heroku его не использует. Мы также не хотим, чтобы каталог .bundle отправлялся на рабочий сервер (поскольку он будет иметь свою собственную версию).
Следующая задача — инициализировать репозиторий Git:
git init
git add .
git commit -m 'initial deployment'
И наконец, мы добавляем приложение в Heroku
git push heroku master
По мере разработки приложения очень легко обновлять код в Heroku. Это просто случай передачи кода в репозиторий Git, а затем отправки их в Heroku с помощью следующих команд:
git add .
git commit -m 'some message about the updates'
git push heroku master
Осталось только настроить базу данных на сервере, выполнив миграцию. Интерфейс командной строки Heroku позволяет получить доступ к консоли irb, которая позволяет взаимодействовать с вашим приложением:
heroku console
Ruby console for justdoit.heroku.com
>> DataMapper.auto_migrate!
Вы можете открыть сайт из командной строки, используя следующую команду:
heroku open
Это должно привести вас к вашему живому приложению. Вы можете увидеть мою готовую версию Just Do It! — не стесняйтесь играть с ним. Я также разместил весь исходный код на github, чтобы вы могли просмотреть все файлы целиком.
Это все люди
И это завершает эту серию из четырех частей. Я надеюсь, что он дал вам достаточно информации для начала работы с Синатрой, а также желание узнать больше. Конечно, лучший способ научиться — это экспериментировать самостоятельно, и у Sinatra такой низкий барьер для входа, что позволяет невероятно легко запускать новые приложения и играть с кодом. Я хотел бы знать, если кто-то из вас хочет больше статей о Sinatra и что вы хотели бы видеть покрытыми — оставьте любой отзыв в комментариях.