Не так давно я написал статью о создании SPA на основе Spine.js в качестве front-end-а и «рельсов» в качестве back-end-а. Spine.js очень интересная штука, очень простая и понятная, но для создания не очень сложного приложения. Как только приложение начинает разрастаться, начинаются проблемы. Как по мне, то главная проблема — это роуты, разбросанные по разным файлам, малопонятный substack. Остальное уже как-то по мелочи.

Поигравшись со Spine.js, я переключил свой взор на более обкатанную и несколько более распространённую библиотеку: Backbone.js. Как оказалось, он не на много сложнее Spine.js. Основное неудобство было в том, что все туториалы написаны для javascript-a, а мне уже давно как-то по душе Coffeescript. Именно поэтому я решил написать несколько постов о том, как их подружить друг с другом: Backbone.js, CoffeeScript, Twitter Bootstrap и «рельсы».

Как обычно, весь исходный код доступен на Github-е, а работающее приложение можно увидеть на Heroku.

Данная статья будет вводная, много кода в ней не будет. Все остальные программные изыскания будут несколько позже. На странице работающего примера в разделе «Resources» можно найти несколько полезных ссылок, которые помогут Вам заполнить некоторые пробелы в знаниях по данной теме.

Итак, начнём. Просто создайте новое, пустое приложение «рельсов»:

После этого в Gemfile добавляем следующее:

1. вместо gem ‘sqlite3′ :

В принципе, Вы этого можете не делать, если собираетесь только поиграться на своей локальной машине. Мне же это необходимо было для последующего развёртывания на Heroku.

2. в группу :assets добавляем

3. а в конец файла добавляем самый важный gem для этого приложения:

После всех этих добавлений можно смело установить все необходимые gem-ы:

Теперь создадим каркас нашего приложения для работы с Backbone.js. Для этого, в строгом соответствии с документацией, выполним следующую команду:

По умолчанию, генератор создаст файлы с расширением *.js.coffee, для использования синтаксиса CoffeeScript. Если Вам более привычно и удобно работать с javascript-ом, то укажите от этом генератору, задав опцию --javascript

Данный генератор создаст несколько директорий в /app:

Лично я сразу переименовываю файлы, типа backbone_app.js.coffee, на app.js.coffee. Мне так удобнее. Хотя… лукавлю (-: Это у меня после прочтения вот этой статьи. Кстати, тоже рекомендуется к прочтению.

Рекомендую ознакомиться с содержимым файлов application.js и app.js.coffee после выполнения предыдущей команды.

В принципе, наше приложение готово для дальнейшей работы с Backbone.js. В последующих частях я расскажу у роутерах, моделях, коллекциях и отображениях(views). Как, что и с чем едят.

Всем удачи и работающего кода! (-:

Как говорят у нас в Одессе, и снова здрасте! Именно так, а не здравствуйте (-:

Сегодня я решил предоставить на суд общественности совсем небольшое приложение. Так называемое SPA — Single Page Application. Самым ярким и известным представителем SPA является, пожалуй, Gmail. Ну на такую функциональность никто пока не замахивается, а вот что-то типа системы управления для сайта — а почему бы и нет?! Как это может выглядеть, Вы можете посмотреть на Heroku. Строго не судите, это всего лишь некоторые зарисовки о том, как это может быть.

Я же хочу лишь рассказать, что к чему. Во-первых, как не сложно догадаться, я использовал связку Spine.js и Rails. Spine.js — это отличный маленький фрейморк для создания SPA. Почему пал выбор именно на него, а не на, например, Backbone.js? Ну, во-первых, он написан на Coffeescript. Во-вторых, легко и просто интегрируется с рельсами, следует их философии. В-третьих, простая и понятная документация, которой совсем не много. В общем, когда разберёшься, что к чему, то писать на нём одно удовольствие.

В использовании Spine.js ничего необычного, разве что введено понятие SubStack для использования нескольких Stacks. Чтобы разобраться, что к чему, следует ознакомиться с вот этой статьей(Eng.). Ещё я там использовал так называемую auto download paggination, иными словами, — это автоматическая подгрузка необходимого контента, когда скроллер div-а приближается к нижней части. Это реализовано только на статьях и картинках: когда их достаточно много, то во время  первоначальной загрузки они не все загружаются, а только часть, потом порциями подгружаются при прокрутке.

Для загрузки картинок и музыки я использовал Uploadify и File Ajax Upload соответственно. Работу с ними я уже описывал раньше.

Работа рельс ничем не отличается от указанных выше статей. Единственное, на что стоит обратить внимание, — обмен между Spine.js и рельсами осуществляется при помощи JSON. Никакой разметки, стилей по сети не гоняется, только данные.

Ну вот и всё, если вкратце. Как обычно, исходники можно найти на Github-e.

Единственное, на что хочу обратить внимание, — это то, что на Heroku, как я думаю, не разрешают хранить картинки и музыку, так что не удивляйтесь битым ссылкам, просто удаляйте и пытайтесь загрузить что-то своё. В общем-то, это и не удивительно на бесплатном аккаунте (-:

Ах, да, забыл сказать, что я не стал убирать из кода команды @log(), что все желающие могли в консоли браузера посмотреть, что и когда выполняется.

В прошлой статье я рассказал о том, как подружить Ckeditor и elFinder. Всё работало хорошо, пока я запускал у себя на локальной машине. Проблемы начались, когда я попытался сделать тестовое приложение на Heroku. Скажу прямо: ничего не заработало (-: Пришлось нырнуть в глубины Интернета и найти следующее решение.

1. Перенёс всю директорию Ckeditor в  vendor/assets/javascripts/ckeditor.

2. В файле production.rb добавил следующее: config.assets.precompile += ['ckeditor/*']

3. В application.html.erb добавил var CKEDITOR_BASEPATH = ‘/assets/ckeditor/’; до того, как будет осуществлена загрузка application.js.

4. В application.js добавил *= require ckeditor/ckeditor

После этого всё заработало и у меня на компе, и на сервере Heroku. Единственное, что стоит ещё сделать перед развёртыванием на Heroku, — это поменять sqlite3 на pg в Gemfile.

Результат можно увидеть на http://ckeditor-elfinder.herokuapp.com/

Все благодарности вот сюда.

Как-то давно уже была запись, рассказывающая об установке Ckeditor-а в Rails. Правда в тот раз рассказывалось, как установить его при помощи gem-а. Да, всё прекрасно до тех пор, пока нам не нужно внести какие-то настройки, так сказать, кастомизировать редактор. Слово-то какое (-: Сколько ни читал сайт данного гема — ничего так и не заработало. После этого плюнул, скачал просто архив с официального сайта и добавил в приложение. Это оказалось значительно проще. А вот тут уже как хочу, так и верчу редактор (-:

Впрочем, работающий пример приложения можно посмотреть опять же на Github-e. Вернее исходники приложения (-:

Смысл всего приложения сводится к тому, что когда Вы хотите добавить картинку в поле редактора, то для просмотра доступных файлов на сервере вызывается elFinder. Поэтому всё выглядит вполне прилично.

Честно признаюсь: большинство настроек найдено в безграничных просторах Интернета. Касаются они в основном того, как подружить Ckeditor и elFinder. Вряд ли имеет смысл приводить весь код — это Вы сами можете посмотреть в исходниках. Если будут вопросы — спрашивайте в комментах.

Работающий вариант можно посмотреть на Heroku.

В предыдущих статьях я рассказывал, как интегрировать Uploadify и Ajax-upload в приложения на Rails.

Сегодня я расскажу о том, как подключить в наше приложение ещё один загрузчик файлов: jQuery File Upload.

Подробного описания не будет, всё можно прочитать на странице данного плагина, а так же посмотреть в исходниках тестового приложения на Githab-e.

На самом деле приложение, расположенное на Githab-e, является практически законченным приложением для организации галерей. Оно позволяет создавать галереи, загружать в них изображения, просматривать изображения, а так же производить некоторые манипуляции с ними: добавлять описание, редактировать отображаемую часть картинки при помощи плагина jCrop.

Начну, пожалуй, с jQuery File Upload.

1.  Для начала я несколько изменил графическое представление самого плагина. Другое представление картинок, заимствованное из twitter bootstrap.

2. Во-вторых, искусственно создал ссылки для картинок, которые подгружены  ajax-ом после загрузки. Если все картинки в галереи можно просматривать последовательно, то подгруженные только по одиночке.

3. Загрузка картинок стартует автоматически.

Пожалуй, всё, что касается самого плагина. Всё остальное можно посмотреть в исходниках.

Настройки Carrierwave практически ничем не отличаются от настроек в предыдущих статьях. Разве что там я оставил настройки, которые позволяют делать серые превьюшки. Пользуйтесь.

Больше всего изменений произошло в танцах с «рельсами».

1. Для начала стоит ознакомиться с функцией create контроллера pictures_controller.rb. Обратите внимание, как мы получаем имя картинки, которую мы загрузили:

p_attr = params[:picture]
p_attr[:image] = params[:picture][:image].first if params[:picture][:image].class == Array

2. Так же стоит обратить внимание на ответ данной функции: ответ должен быть json-формате. В частности, отфет формируется так:

render :json => [@picture.to_jq_upload].to_json

3. Обращаю внимание на данный метод - to_jq_upload. Он реализован в модели:

def to_jq_upload
{
«name» => read_attribute(:image),
«size» => image.size,
«url» => image.url,
«thumbnail_url» => image.thumb.url,
«delete_url» => id,
«picture_id» => id,
«delete_type» => «DELETE»
}
end

Что-то кавычки тут неправильные, ну да не смертельно. Этот ответ специально сформирован для плагина jQuery File Upload. Без него приложение будет не функционально. Честно признаться, я его содрал где-то, а где -не помню уже. Немного подправил под свои нужды (-:

4. Обратите внимание на метод crop_image в модели, который вызывается после изменения картинки. Расскажу, для чего он вообще нужен. Дело всё в том, что связка jCrop + Carrierwave по умолчанию использует оригинальное изображение, которое было загружено. Если вы хотите сделать более, чем одно изменение картинки, то ничего у вас не выйдет: вы будите думать, что вырезаете в уже изменённой, а Carriervawe будет делать изменения в исходной картинке. Можете сами попробовать без данного метода. Единственное, что делает данный метод — это заменяет исходное изображение большой версией изменённого. Только и всего.

5. В принципе, как подружить Rails и jCrop хорошо рассказано в этом скринкасте (анг.). Огромная благодарность Райну за наводки на правильное решение.

Вот, в принципе, и всё. Будут вопросы по коду — спрашивайте, постараюсь ответить.