Rabu, 14 November 2018

Import CSV atau Excel pada Ruby on Rails


Pada umumnya website memiliki fungsi CRUD (Create, Read, Update, Delete). Create dan Read dapat dilakukan dengan menambahkan / mengupdate data melalui form pada aplikasi website yang dibuat. Bagaimana jika data yang akan diinput sangat banyak seperti 1000 data? Bagaimana jika data harus dimasukkan satu per satu, pusing bukan?

Sebagai solusi, di Ruby on Rails kita dapat memasukkan banyak data dalam satu langkah mudah dengan menambahkan fitur import pada aplikasi yang dibuat. Untuk menambahkan fitur ini, dibutuhkan gem bantuan yaitu gem ROO.

Sebelum ke langkah selanjutnya, sebagai catatan tutorial ini adalah lanjutan dari tutorial Membuat File Export dengan Format CSV & XLS

Bagaimana cara menggunakan gem ROO? Berikut langkah - langkanya :

1. Pada Gemfile, tambahkan baris berikut 
 gem 'roo', '1.13.2'

2. Pada console/terminal, ketikkan baris berikut 
 bundle install

3. Jika Gem ROO sudah terinstall, lalu tambahkan link untuk melakukan import data. Link import akan disimpan pada halaman index. Tambahkan kode berikut pada halaman index.
=< link_to 'Import Item', import_items_items_path

Ketika merefresh halaman index item, akan muncul error sebagai berikut.

   
Hal ini terjadi karena kita belum menambahkan link path tersebut pada route. Pada stores/app/config/routes.rb , tambahkan baris berikut.

4. Buka items_controller.rb, tambahkan method import_form serta import.

5. Biarkan kedua method tersebut, selanjutnya kita membuat tampilan untuk form import data. Pada app/views/items tambahkan file dengan nama import_items.html.slim, serta tambahkan kode berikut. 


6. Kembali ke items_controller.rb, pada method import tambahkan kode berikut.

Pada file config/application.rb, tambahkan baris kode berikut 
require 'roo'

7. Pada model item (app/models/item.rb), tambahkan kode berikut
Pada console akan terlihat proses data saat import data  
Kemudian lakukan testing. Kita akan mencoba untuk memasukkan data dari file .xlsx, seperti berikut


name
unit
price
Product 1
Renceng
1000
Product 2
Botol
2500
Product 3
Pak
10300
Product 4
Renceng
1000
Product 5
Botol
2500
Product 6
Pak
10300
 
Dalam console dapat terlihat proses import data seperti berikut 


Data berhasil diimport, halaman index item pada website akan muncul seperti ini


Kalian akan kembali ke halaman import data dengan message bahwa import gagal dilakukan, jika menekan tombol "import" tanpa memasukkan file data/gambar terlebih dahulu.


Selasa, 06 November 2018

Notification Menggunakan iziToast di Ruby on Rails


Toast adalah sebuah pesan notifikasi yang biasanya ditampilkan sudut bawah layar, dengan umpan balik sederhana agar website terlihat interaktif.

Kali ini kita akan menggunakan iziToast untuk membuat notifikasi tersebut, berikut langkah - langkah pengimplementasiannya : 

Cara Install
1. Tambahkan kode berikut pada Gemfile 
gem 'izitoast'
2. Lalu jalankan di terminal
$ bundle install
3. Tambahkan kode ini pada application.js
//= require iziToast
4. Tambahkan kode ini juga pada application.css (css)
@import "iziToast";

Cara Implementasi 

Untuk mengetes bahwa iziToast telah terinstall, tambahkan kode javascript berikut dan coba jalankan pada browser anda.


Setelah jalan di browser, seharusnya kamu akan melihat notifikasi tersebut pada bagian bawah kanan browser.



Nah kurang lebih seperti ini cara pengimplementasiannya. Selain untuk success notifikasi, kamu juga bisa merubahnya dengan info, error, warning atau bahkan question dengan merubah format pada syntax javascriptnya. Kalian bisa explore lebih jauh di iZiToast Website


Setup Notifikasi SMS & Panggilan Telepon Menggunakan Twilio di Ruby on Rails

Twilio adalah platform layanan komunikasi yang berbasis di San Francisco, California. Twilio memungkinkan pengembang perangkat lunak untuk secara terprogram membuat dan menerima panggilan telepon, mengirim dan menerima pesan teks, dan melakukan fungsi komunikasi lainnya menggunakan API layanan webnya.


Berikut langkah - langkah untuk mensetup notifikasi SMS & panggilan telepon menggunakan Twilio di Ruby on Rails :

 Cara Install 

 Untuk install menggunakan Bundler
gem ‘twilio-ruby’, ‘~> 5.14.0’

 Untuk install secara manual via Rubygems
gem install twilio-ruby -v 5.14.0 


 Setup Token dan SID

Buat akun di www.twilio.com dan setelah selesai masuk bagian Dashboard, lalu copy ACCOUNT SID dan AUTH TOKEN.
Masukkan Token & SID yang tadi ke dalam method / baris kode ruby anda.

require 'twilio-ruby'

# simpan TOKEN/SID kamu disiniaccount_sid = 'Copy ACCOUNT SID anda disini'auth_token = 'Copy AUTH TOKEN anda disini'


# untuk setup Twilio REST API@client = Twilio::REST::Client.new(account_sid, auth_token)
Note : Untuk penyimpanan credentials (ACCOUNT SID / AUTH TOKEN) sebaiknya gunakan figaro. Kalian dapat melihat contohnya disini Setup SMTP dengan Gem Figaro

Setelah Anda setup ACCOUNT SID dan AUTH TOKEN, Anda harus memiliki nomor telepon yang digunakan untuk melakukan API call / sms. Cara mendapatkan nomor telepon tersebut, anda dapat kembali ke halaman Twilio dan akses Phone Numbers dan klik button 'Get your first twilio number'


Penggunaan API Untuk Telepon

Penggunaan API Untuk SMS / Pesan Text

Sekian tutorial singkat cara mensetup notifikasi SMS & panggilan telepon menggunakan Twilio di Ruby on Rails. Bila ada pertanyaan silahkan komentar dibawah. Untuk full dokumentasi, Kalian bisa akses di The Twilio Ruby Helper Library





Jumat, 28 September 2018

CKeditor Pada Aplikasi Ruby on Rails Lanjutan - Plugins Youtube

Sebelum menambahkan plugins youtube pada ckeditor, kalian bisa mengikuti tutorial pada halaman http://www.belajarrubyonrails.com/2014/02/installasi-ckeditor-pada-aplikasi-ruby.html terlebih dahulu untuk menginstal ckeditor.


Langkah - langkah untuk menambahkan plugins youtube adalah sebagai berikut :

1. Tambahkan require di bawah ini pada file app/assets/javascripts/application.js
//= require ckeditor/init

2. Buatlah file dan tambahkan config dibawah ini pada :
app/assets/javascripts/ckeditor/config.js
CKEDITOR.editorConfig = Function (config) {
  config.extraPlugins = ‘youtube’;
}

3. Buatlah file dan tambahkan icon dibawah ini pada :
app/assets/javascripts/ckeditor/plugins/youtube/images/icon.png



4. Buatlah file dan tambahkan lang dibawah ini untuk bahasa :
Untuk bahasa inggris tambahkan file :

app/assets/javascripts/ckeditor/plugins/youtube/lang/en.js

Code :

CKEDITOR.plugins.setLang('youtube', 'en', {
  button : 'Embed Youtube Video',
  title : 'Embed Youtube Video',
  txtEmbed : 'Paste Embed Code Here',
  txtUrl : 'Paste Youtube Video URL',
  txtWidth : 'Width',
  txtHeight : 'Height',
  chkRelated : 'Show suggested videos at the video\'s end',
  txtStartAt : 'Start at (ss or mm:ss or hh:mm:ss)',
  chkPrivacy : 'Enable privacy-enhanced mode',
  chkOlderCode : 'Use old embed code',
  noCode : 'You must input an embed code or URL',
  invalidEmbed : 'The embed code you\'ve entered doesn\'t appear to be valid',
  invalidUrl : 'The URL you\'ve entered doesn\'t appear to be valid',
  or : 'or',
  noWidth : 'You must inform the width',
  invalidWidth : 'Inform a valid width',
  noHeight : 'You must inform the height',
  invalidTime : 'Inform a valid start time'
});

Untuk bahasa jepang tambahkan file :

app/assets/javascripts/ckeditor/plugins/youtube/lang/ja.js

Code :

CKEDITOR.plugins.setLang('youtube', 'ja', {
  button : 'Youtube動画埋め込み',
  title : 'Youtube動画埋め込み',
  txtEmbed : '埋め込みコードを貼り付けてください',
  txtUrl : 'URLを貼り付けてください',
  txtWidth : '幅',
  txtHeight : '高さ',
  chkRelated : '動画が終わったら関連動画を表示する',
  txtStartAt : 'Start at',
  chkPrivacy : 'プライバシー強化モードを有効にする',
  chkOlderCode : '以前の埋め込みコードを使用する',
  noCode : '埋め込みコードまたはURLを入力してください',
  invalidEmbed : '不適切な埋め込みコードが入力されました',
  invalidUrl : '不適切なURLが入力されました',
  or : 'または',
  noWidth : '幅を指定してください',
  invalidWidth : '幅指定に誤りがあります',
  noHeight : '高さを指定してください',
  invalidHeight : '高さ指定に誤りがあります',
  invalidTime : 'Inform a valid start time'
});

Untuk bahasa portugis tambahkan file :

app/assets/javascripts/ckeditor/plugins/youtube/lang/pt.js

Code :

CKEDITOR.plugins.setLang('youtube', 'pt', {
  button : 'Inserir Vídeo do Youtube',
  title : 'Inserir Vídeo do Youtube',
  txtEmbed : 'Cole aqui o código embed de um vídeo do Youtube',
  txtUrl : 'Cole aqui uma URL de um vídeo do Youtube',
  txtWidth : 'Largura',
  txtHeight : 'Altura',
  chkRelated : 'Mostrar vídeos sugeridos ao final do vídeo',
  txtStartAt : 'Iniciar em (ss ou mm:ss ou hh:mm:ss)',
  chkPrivacy : 'Ativar o modo de privacidade aprimorada',
  chkOlderCode : 'Usar código de incorporação antigo',
  noCode : 'Você precisa informar um código embed ou uma URL',
  invalidEmbed : 'O código informado não parece ser válido',
  invalidUrl : 'A URL informada não parece ser válida',
  or : 'ou',
  noWidth : 'Você deve informar a largura do vídeo',
  invalidWidth : 'Informe uma largura válida',
  noHeight : 'Você deve informar a altura do vídeo',
  invalidHeight : 'Informe uma altura válida',
  invalidTime : 'O tempo informado é inválido'
});

5. Buatlah file dan tambahkan plugins dibawah ini pada : 
app/assets/javascripts/ckeditor/plugins/youtube/plugins.js 


6. Tambahkan ckeditor pada file assets config/initializers/assets.rb
Rails.application.config.assets.precompile +=%w(ckeditor/* )

7. Tampilan pada ckeditor 

8. Pada saat icon 'youtube' di click akan tampil seperti dibawah ini. 

Untuk menampilkan video pada website kita, diperlukan URL video youtube dan paste pada column 'Paste Youtube Video URL'.
Cari tahu lebih banyak tentang tutorial Ruby on Rails di Belajar Ruby on Rails