Sign in

Зарегистрируйтесь, чтобы стать полноправным участником сообщества Masterpro.ws.

Снова Rails и Twitter API, а также materialize и webpacker

Продолжаем разработку rails-app, умеющего постить твиты в любой из наших твиттер-аккаунтов, разрешения для приложения которого это позволяет, а ключи и токены введены в базу данных нашей новой web-консоли.

 

 

Gemfile нашего проекта на данный момент содержит, помимо обычных дефолтных, следующие гемы:

 

gem 'twitter'
gem 'jquery-rails'
gem 'materialize-sass', github: "mkhairi/materialize-sass"
gem 'webpacker'

 

Рабочий пример описанного в статье кода, в числе других Rails Examples - всегда возможно найти в тестовом блоге автора на herokuapp.com, welcome.

 

Установку materialize и webpacker опишу очень кратко, в виде последовательности введенных команд; прежде всего - вписываем два этих гема в Gemfile и затем, разумеется - bundle install, ну а дальше от меня, на Fedora 26, потребовались следующие действия:

 

bundle install
sudo wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.repos.d/yarn.repo
curl --silent --location https://rpm.nodesource.com/setup_6.x | sudo bash -  #optional
sudo dnf install yarn
bundle exec rails webpacker:install

 

Не забудьте загрузить стили, js и fonts со страницы проекта Materialize: "Структура проекта: После загрузки распакуйте файлы в папку, где размещен сайт. Структура файлов выглядит следующим образом", и т. д., см. по ссылке.

Если деплоить приложение собираетесь на Heroku, рекомендую перед этим:

bundle exec rake assets:precompile

 

Обычно не мешает добавить в application.scss эту строчку:

app/assets/stylesheets/application.scss:

@import "materialize";

 

, но на данном этапе для нас с вами это необязательно, все и так заработает. Впрочем, попробуйте: возможно, увидите некоторые изменения в облике странички... да, и теперь нам осталось лишь добавить в index.html.erb - preloader:

  

<div class="progress" style="display:none;">
<div class="indeterminate"></div>
</div>

 

и прикрутить ajax:

 

<script type="text/javascript" language="javascript">
 	function call() {
 	  var msg   = $('#twitsform').serialize();
        $.ajax({
          type: 'GET',
          url: '/tweets',
          data: msg,
          beforeSend: function(){
       $('.progress').show()
   },
          success: function(data) {
            alert('Твиты опубликованы!'),
            $('.progress').hide();
          },
          error:  function(xhr, str){
	    alert('Что-то пошло не так: ' + xhr.responseCode),
	    $('.progress').hide();
          }
        });
 
    }
</script>

 

, также для работы select теперь понадобится совсем небольшой скрипт:

 

<script>
$(document).ready(function() {
$('select').material_select();
});
</script>

 

Вьюха, таким образом, полностью выглядит теперь так, как показано на форуме, и засим позвольте на сегодня откланяться.

Оставить комментарий

Добавьте ваш комментарий