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

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

Membuat Datepicker Bootstrap dan Jquery

Membuat Datepicker

Datepicker adalah alat input yang digunakan untuk tanggal dengan bentuk box

dengan desain dalam bentuk kalender.

Membuat Datepicker ada beberapa cara :
1.    Datepicker menggunakan Jquery
2.    Datepicker Bootstrap

Cara Membuat Datepicker Menggunakan Jquery

1.     Masukkan code dibawah ini didalam <head> sintak HTML.

             Code dibawah berfungsi untuk tampilan.

2.   Masukkan code dibawah ini didalam <head> sintak HTML.
       Code dibawah berfungsi untuk perintah.
       

       Untuk poin 1 dan 2 hanya memanggil secara otomatis.
       Apabila koneksi internet tidak ada, Code tersebut tidak akan berfungsi.

3.    Masukkan code dibawah ini didalam <head> sintak HTML.
        
4.    Copy code dibawah ini didalam <body> sintak HTML.
       <p>Date: <input type="text" id="datepicker"></p>

       Pada poin 3 didalam script sudah dibuat ID dengan nama "datepicker", 
        maka pada tampilan di poin 4, ID tersebut kita panggil.


Cara Membuat Datepicker Bootstrap

1.     Masukkan code berikut pada gemfile.
gem 'bootstrap-datepicker-rails'

2.   Lalu install gem tersebut pada dengan memasukkan code dibawah pada terminal. 
   bundle install

3.     Masukkan code dibawah pada file app/assets/stylesheets/application.css 
  *= require bootstrap-datepicker
# kalau memakai bootstrap v3 pakai yang ini :
*= require bootstrap-datepicker3

4.     Masukkan code dibawah pada file app/assets/javascripts/application.js
   //= require bootstrap-datepicker 

5.     Masukkan code dibawah pada folder view didalam file yang akan memakai 
      datepicker.
     

Seri Belajar Ruby on Rails Bagian 9 - Membuat Autentikasi dengan Devise

Setelah pada artikel sebelumya kita telah berhasil membuat validasi, relasi, dan menggunakan scope pada Rails, selanjutnya kita akan membuat fitur autentikasi  dengan menggunakan  Devise.

Devise ? Untuk  apa  ?

Devise  adalah salah satu gem pada  Rails yang berfungsi untuk menangani masalah autentika dengan mudah. Devise memiliki kelebihan sebagai  berikut.

• Rack based
• Lengkap dengan  Model, View, dan Cotroller
• Megizinkan suatu aplikasi untuk memiliki multiple model untuk melakukan  autentikasi
• Dibuat secara modularitas, sehingga memudahkan penggunaan gem ini dengan hanya menggunakan fitur/module yang dibutuhkan.

Gem ?.  Apa itu gem ?. Pada Rails terdapat file konfigurasi yang digunakan untuk me-list gem mana saja yang diguakan. Gem ini seperti library atau perpustakaan yang biasanya dapat ditemukan di RubyGems. 

Cara Menambahkan Gem Devise pada Rails

Untuk menginstall devise ini dapat dilakukan dengan membuka Gemfile pada folder aplikasi. Misalnya, saya akan meggunakan devise untuk aplikasi homework_management. 

Letak Gemfile pada Project

Tambahkan script berikut pada Gemfile.

gem 'devise'

dan pada terminal pindah ke folder project yang digunakan, dan jalankan perintah berikut.

bundle install

Mengatur Gem Devise pada Project

Jalankan perintah berikut pada terminal

rails generate devise:install

Perintah tersebut akan menghasilkan file konfigurasi pada folder config/initializers/devise.rb.

Konfigurasi Devise

Pastikan bahwa konfigurasi default url options pada environtments files telah dibuat. Untuk mengatur default url options, buka file environtment pada folder config/environtments/development.rb. 

config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }
end

sebelum keyword end. 

Lalu buka file application.html.erb yang terletak pada folder app/views/layouts/ dan tambahkan baris berikut.
tepat di atas  

<%= yield %>

Konfigurasi User Model

Selajutnya  kita akan membuat user model,  dimana model ini berfungsi untuk menyimpan data-data user. Untuk pembuatan user model ini akan diintegrasikan dengan devise. Caranya  adalah  pada terminal jalankan perintah berikut.

rails g devise user

Dengan menjalankan perintah tersebut, maka akan menghasilkan file migrasi user dan model user.

Setelah itu jangan lupa untuk menjalankan perintah 

rake db:migrate

untuk memproses file migrasi yang telah dibuat.

Setelah melakukan generate devise maka pada file config/routes.rb akan mengalami perubahan. Perubahan tersebut adalah sebagai berikut.
Coba jalankan perintah berikut pada terminal dan lihat url apa saja yang dihasilkan dari men-generate devise

rails routes

Membuat User untuk Pertama Kali

Langkah selanjutnya, kita akan melakukan modifikasi pada view untuk menampilkan link login dan register ketika pertama kali membuka halaman http://localhost:3000/. 

Untuk membuat user, jika perintah tadi telah dilakukan dengan benar maka untuk mendaftarkan user tinggal buka url http://localhost:3000/users/sign_up. Halaman tersebut adalah halaman untuk membuat/registrasi user.

Halaman Registrasi User

Modifikasi View

Langkah selanjutnya, kita akan melakukan modifikasi pada view untuk menampilkan form login ketika pertama kali membuka halaman http://localhost:3000/. 

Yang pertama akan kita lakukan adalah membuat navigasi yang akan muncul di setiap halaman. Navigasi ini untuk mengetahui informasi mengenai user login dan link untuk logout. Navigasi ini akan dibuat secara parsial. Perlu diingat, penamaan untuk file parsial harus diawali dengan tanda "_" (underscore).

Lalu, pada bagian atas pada tipa view yang membutuhkan login kita tambahkan script berikut. Contohnya pada halaman tambah data homework.

Modifikasi Controller

Selanjutnya, kita perlu melakukan modifikasi pada controller. Yang harus dilakukan adalah tambahkan script berikut pada application_controller.rb yang terletak pada folder app/controllers.

Sekarang coba jalankan kembali project dengan cara menjalankan perintah berikut pada terminal. lalu lakukan restart terhadap server terminal

Langkah-langkah di atas adalah salah satu cara untuk penggunaan gem devise pada project Rails. Gem "DEVISE" ini sangat berguna untuk menangani autentikasi di Rails dengan segala kemudahan yang diberikannya.

Sekian untuk pembelajaran kali ini mengenai penggunaan "DEVISE". Diharapkan tutorial ini menjadi salah satu pembelajaran yang mudah dimengerti bagi kita semua.

Fathara Annisa Azka | C-aio Indonesia

Seri Belajar Ruby on Rails Bagian 2 - Cara install Ruby on Rails di Windows

Install Ruby on Rails di Windows dengan Rails Installer 

Untuk menggunakan framework Ruby on Rails versi 3 ke atas, seminimalnya inilah yang harus anda install:

1. Ruby 
2. RubyGems
3. Rails Gem
4. Bundler Gem
5. Devkit
6. Database ( Mysql / Sqlite / Sql Server / Postgree / dll )

Anda bisa install semua software tersebut secara terpisah dengan download installer nya satu persatu. Jika anda pertama kali install Ruby on Rails, Kami sarankan untuk menggunakan package dari RailsInstaller karena sangat mudah dan praktis dan tentu saja gratis :-) . Selain untuk windows, Rails Installer ini juga tersedia untuk OS X.

Langkah - langkah installasinya sebagai berikut:

1. Download Source Rails Installer

Download railsinstaller dari: http://railsinstaller.org/en  

 

2. Jalankan Rails Installer

    
Klik 2x pada source Rails Installer yang sudah Anda download. 

Baca Aggrement dengan seksama, kemudian jika Anda setuju, klik pilihan 

I accept all of the lincenses dan klik tombol Next >

3. Atur Path untuk Rails Installer

Rails Installer akan menanyakan lokasi penyimpananhasil installasi Rails Installer.

Jika Anda sudah setuju untuk menyimpan hasil installasi sesuai

dengan default pada windows diatas, maka klik tombil Install, 

jika ingin merubah lokasinya silakan ubah pada text box yang disediakan.

 

 Tunggu proses instalasi hingga selesai.

4. Testing Installasi

Setelah intallasi selesai, maka pastikan untuk cek hasil installasi anda benar dengan membuka Command Prompt dan menjalankan perintah: 

ruby -v

rails -v

gem -v

 Notes: 

Versi Rails Installer yang kami gunakan mungkin berbeda dengan Anda, karena itu

             versi yang akan muncul di command prompt Anda mungkin berbeda.

Jika hasil di cek installasi tidak ada error, maka sekarang Anda sudah bisa belajar ruby on rails lebih mendalam dan dapat mencobanya langsung.

Jika kamu mendapat error "the system cannot find the path specified" ikuti langkah - langkah berikut :

 
1. Cobalah buka pada folder/path dimana Rails telah terinstal. Pada tutorial proses instalasi dilakukan di C:/RailsInstaller/Ruby2.3.3, buka folder tersebut. 
   
        Cari batch file bernama rails dan bundle
   
   
    
   penunjukan file rails.bat

   

    penunjukan file bundle.bat
   
   
2. Lalu rubah baris code @"C:\Users\emachnic\GitRepos\railsinstaller-windows\stage\Ruby2.3.3\bin\ruby.exe" menjadi @"%~dp0ruby.exe" seperti di bawah ini.
   Pada file rails.bat
   

   @ECHO OFF
   IF NOT "%~f0" == "~f0" GOTO :WinNT
   @"%~dp0ruby.exe" 
   "C:/Users/emachnic/GitRepos/railsinstaller-windows/stage/Ruby2.3.3/bin/rails" 
   %1 %2 %3 %4 %5 %6 %7 %8 %9
   GOTO :EOF
   :WinNT
   @"%~dp0ruby.exe" "%~dpn0" %* 

   Pada file bundle.bat

   @ECHO OFF
   IF NOT "%~f0" == "~f0" GOTO :WinNT
   @"%~dp0ruby.exe" 
   "C:/Users/emachnic/GitRepos/railsinstaller-windows/stage/Ruby2.3.3/bin/bundle" 
   %1 %2 %3 %4 %5 %6 %7 %8 %9
   GOTO :EOF
   :WinNT
   @"%~dp0ruby.exe" "%~dpn0" %* 

3. Setelah langkah di atas dilakukan, lakukan pengecekan ulang dengan menjalankan perintah ruby -v, rails -v, dan gem -v pada Command Prompt.

Fathara Annisa Azka | C-aio Indonesia