Spine.js и Rails

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

Сегодня я решил предоставить на суд общественности совсем небольшое приложение. Так называемое 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(), что все желающие могли в консоли браузера посмотреть, что и когда выполняется.

Июль 16th, 2012 by none | Один комментарий

Ckeditor на Heroku и вообще на production

В прошлой статье я рассказал о том, как подружить 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/

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

Июнь 19th, 2012 by none | Комментариев нет

Установка Ckeditor и elFinder в Rails 3.2.6

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

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

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

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

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

Июнь 19th, 2012 by none | Комментариев нет

jQuery File Upload + Rails 3.2.3 + Carrierwave + jCrop

В предыдущих статьях я рассказывал, как интегрировать 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 хорошо рассказано в этом скринкасте (анг.). Огромная благодарность Райну за наводки на правильное решение.

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

 

Июнь 15th, 2012 by none | 2 комментария

Ajax-upload + Carrierwave + Rails 3.2.3

Вчера я рассказал как настроить связку Uploadify 3.1 + Carrierwave + Rails 3.2.3.

Сегодня расскажу о другом ajax-аплоадере файлов и как заставить его работать с рельсами. Как и вчера, работающее приложение можно найти на Github-е.

В данном случае в качестве загрузчика я использовал ajax-upload. Работающий пример можете посмотреть на сайте автора. Простенький, без излишеств, аплоадер.

По традиции, начну именно с него.

  1. Так как это, типа, мультимедиа приложение, то я разрешил загружать только mp3 файлы.
  2. Как и в случае с Uploadify, пришлось подшаманить функцию _formatFileName, которая сокращала имена файлов, а это пагубно сказывалось на возможность подгрузки ajax-ом файлов с сервера.

В общем, ничего необычного, после отправки файла на сервер, информация о нём подгружается в уже существующую таблицу, всё просто.

Не много о настройках Carrierwave.

  1. Добавляем возможность нормального оперирования с файлами, содержащими не латинские символы, в частности, кириллицу: CarrierWave::SanitizedFile.sanitize_regexp = /[^a-zA-Zа-яА-ЯёЁ0-9\.\_\-\+\s\:]/
  2. А ещё я заменил директорию , куда будут сохранятся файлы, на «uploads/audio»

Вот и всё, что касается Carrierwave.

Теперь перейдём к махинациям с «рельсами».

  1. Добавьте в Gemfile gem ‘rack-raw-upload’. Это пригодится для работы с ajax-upload.
  2. Обратите внимание на фунцию create нашего контроллера, как получается имя нашего файла, который нужно сохранить в базе: file = params[:qqfile].is_a?(ActionDispatch::Http::UploadedFile) ? params[:qqfile] : params[:file]. Это всё из-за особенностей пересылки файлов нашим аплоадером.
  3. Обращаю Ваше внимание, что ответ от сервера должен быть в json-формате. Обязательно ответ должен содержать success: true, иначе на клиентской части будет выдаваться ошибка. Так же в ответе передаётся некоторая информация, которая необходима нам для обновления списка файлов.
  4. В application.rb необходимо добавить следующее: config.middleware.use ‘Rack::RawUpload’

Ну а в качестве проигрывателя я использовал jQuery Media Plugin. Тут тоже не обошлось без заковырок, так что в самом файле плагина исходную строчку заменил на mp3Player: ‘http://malsup.github.com/mediaplayer.swf’. И всё завертелось (-:

Вот, собственно, опять и всё. Надеюсь, кому-то будет полезным.

Май 24th, 2012 by none | Комментариев нет