How-to: Building RESTful API on Ruby on Rails

Halo semua, kembali lagi di Blog Nostra!

Kali ini kami akan membagikan tentang bagaimana cara mengimplementasi RESTful API pada Ruby on Rails. Sebelum memulai, kami akab memberikan beberapa informasi mengenai REST API dan Ruby on Rails itu sendiri.

- What is Ruby on Rails?

Ruby on Rails (disingkat menjadi Rails) adalah framework yang ditulis dengan bahasa pemrograman Ruby, yang diperkenalkan pertama kali pada tahun 2004. Rails termasuk server side, yang berarti semua proses dijalankan pada server, bukan pada client's browser. 

- What is RESTful API?

RESTful API adalah application program interface yang menggunakan HTTP request untuk mengolah data. Pertama kali diperkenalkan pada tahun 2000 oleh Roy Fielding. REST API banyak digunakan oleh web service development.

Kenapa sih menggunakan Rails? Dari segi development, less painful, karena hanya dengan sebuah script, bisa me-generate model dan controller nya. Selain itu, Rails juga mudah dibaca, bahkan oleh orang yang tidak memiliki dasar pemrograman.

Nah langkah-langkah untuk menggunakan Rails adalah:

- Install Ruby

brew install ruby

- Install Rails

brew install rails

- Konfigurasi database (jika diperlukan)

- Run Rails

rails s

note: jika ingin menambahkan dependency pada Gemfile, lakukan `bundle install` untuk me-include dependency yang baru anda masukan

Script untuk membuat Model:

`rails g model {nama model} {nama variable}:{tipe data} {nama variable}:{tipe data} ...`

Script untuk membuat Controller:

`rails g controller {nama controller}`

Setelah men-define apa yang akan dilakukan oleh controller, saatnya mendefinisikan route untuk method-method yang ada di controller. berikut salah satu contoh controller dan route nya:

Wala, sudah jadi deh RESTful API menggunakan Rails! Selamat mencoba!

Keep smart, keep code, and make money!

JMeter dengan Data Dinamis

Pada saat menggunakan JMeter atau melakukan concurrent test ada kebutuhan untuk mensimulasikan data yang berbeda-beda antara pada HTTP Request. JMeter bisa memfasilitasi kebutuhan ini dengan menggunakan CSV Data Set Config. Sesuai dengan namanya configurasi ini hanya bisa membaca file yang berjenis CSV saja.

Kita akan melanjutkan Test Plan dari postingan sebelum nya (Concurrent Test menggunakan JMeter).

CSV Data Set Config

Tambahkan CSV Data Set pada Sampler HTTP Request

Terdapat field-field yang perlu di setting untuk menggunakan sebuah CSV Data Set, diantaranya adalah:

• Filename adalah path file csv yang akan digunakan.
• Delimiter (use '\t' for tab) adalah settingan untuk simbol pemisah kolom data. Untuk csv biasanya kita menggunakan koma ',' sebagai pemisah kolom data.
• Allow quoted data? Kita set False karena pada file csv kita bagian data tidak di quote. 
• Recycle on EOF Kita set False agar proses berhenti jika row data pada file csv sudah habis, dan tidak melakukan looping ke bagian data pertama lagi. 
• Stop thread on EOF Kita set True agar apabila jumlah data pada csv lebih banyak dari pada concurrent user yang kita setting pada Thread Group proses JMeter akan berhenti karena sudah mencapai jumlah concurrent user yang sudah kita setting di Thread Group. 
• Sharing mode set All Thread jika menginginkan csv bisa di baca oleh Thread Group lain. Set Current Thread Group jika menginginkan csv hanya bisa di baca oleh Sampler lain yang berada pada Thread Group yg sama. Set Current Thread jika menginginkan csv hanya bisa di baca oleh Sampler dimana CSV Data Set Config ini berada saja. Direkomendasikan untuk menggunakan Current Thread Group.

Untuk bisa menggunakan data dari file csv yang sudah dipilih perlu dilakukan perubahan pada Body Data di Sampler HTTP Request. Berikut adalah isi file csv yang digunakan:

Pada file csv terdapat 2 header kolom yaitu username dan password. Cara pemasangan data csv ke dalam Body Data adalah seperti berikut ${username} dan ${password}.

Test

Selanjutnya kita bisa menjalankan tes dengan klik button Start pada bagian toolbar. Hasil nya bisa dilihat pada View Result Tree.

Karena kita setting concurrent user pada Thread Group adalah 5 maka pada View Result Tree hanya muncul 5 HTTP Request meskipun kita menyediakan 10 data pada file csv.
Kita cek bagian Request dari masing-masing HTTP Request dan akan terlihat bahwa masing-masing request menggunakan username yang berbeda-beda.

Skenario testing concurrent menggunakan data dinamis atau file csv ini lebih menggambarkan kondisi nyata karena benar-benar mensimulasikan banyak user yang berbeda id atau username mengakses REST API secara bersamaan.

Concurrent Test menggunakan JMeter

Pada kali ini kita akan membahas cara menggunakan JMeter untuk melakukan simulasi concurrent user mengakses sebuah REST API. Pengenalan JMeter sudah di bahas pada postingan berikut: Menggunakan JMeter untuk test service REST.

Thread Group

Pertama kita tambahkan Thread Group terlebih dahulu. Thread Group ini yang nanti bisa kita setting untuk keperluan concurrent test. Apabila sudah di tambahkan ke dalam Test Plan kita bisa melihat terdapat Thread Properties yang berisi Number of Thread (User) dan Ramp-Up Period (in seconds).

Number of Thread (User) merupakan jumlah user yang akan kita simulasikan. Jadi jika kita mau mensimulasikan 100 user maka field ini di isi 100. Pada skenario kali ini akan kita simulasikan 5 user concurrent.

Ramp-Up Period (in seconds) merupakan scope atau range waktu untuk concurent user memulai eksekusi thread group. Jadi misal kita memiliki 5 concurent user dan mengisi Ramp-up dengan 1, maka artinya adalah waktu 1 second akan di bagi 5, jadi setiap concurrent user akan memiliki jeda 0.2 second.
user 1 start pada detik 0
user 2 start pada detik 0.2
user 3 start pada detik 0.4
dan seterusnya...

Bila menginginkan simulasi concurrent user berjalan secara serentak pada detik 0, maka tinggal isi bagian Ramp-Up dengan 0. Ramp-Up 0 second ini akan berefek menambah beban pada PC/Laptop yang merunning JMeter karena akan menggenerate banyak HTTP Request pada waktu yg sama.

Sampler HTTP Request

Selanjutnya kita masukan sebuah Sampler HTTP Request pada Thread Group yg ada.

Pada Sampler HTTP Request ada beberapa yang perlu dilengkapi isinya, diantaranya adalah Server Name or IP, Port Number, Implementation, Protocol, Method, Path, dan Body Data. Request Body untuk API Login kali ini adalah username dan password seperti berikut:

HTTP Header Manager

Jangan lupa tambahkan HTTP Header Manager pada Sampler HTTP Request agar kita bisa menambahkan properties pada header HTTP request. 

Pada skenario kali ini yang di perlukan hanya Content-Type application/json saja.

Listener

Bagian akhir adalah menambahkan Listener View Result pada Thread Group agar kita bisa melihat hasil proses. Listener yang paling biasanya dipakai adalah View Result Tree.

Kita bisa menjalankan concurrent test dengan klik button Start pada bagian toolbar. Hasil nya bisa dilihat pada View Result Tree.

Terdapat 5 buah HTTP Request, kita bisa melihat detail Request dan Response dari masing-masing HTTP Response. Simbol pada HTTP Request berwarna hijau merupakan tanda jika respon yang di dapat adalah bukan HTTP Response error. Apabila response yang di terima adalah 401, 503, dll maka simbol pada HTTP Request akan berwarna merah.

Dengan di lakukan nya Concurrent Test ini kita bisa mengetahui apakah sistem/aplikasi yang kita develop bisa menghandle jumlah concurrent user seberapa banyak dalam satu detik.

Main Idea Using OSB To Handle Convertion From REST to SOAP

Pada beberapa waktu yang lalu kebetulan saya mendapat kesempatan untuk memberikan training kecil tentang OSB khususnya pada part Message Flow. Harapan dari training ini mereka dapat menggunakan melakukan convert dari REST ke SOAP maupun sebaliknya.

Pada dasarnya ada 2 jenis pengelompokan jika kita akan melakukan convert dari REST ke SOAP yaitu :

• Mengirim data melalui Query Param (Method GET)
• Mengirim data melalui Payload (Method POST,PUT)

Jika digambarkan flow untuk method GET kira kira akan seperti ini.

1. Dapatkan HttpHeader yang dikirim.
   
   
   
   
2. Buat Conditional Branch Untuk menghandle beberapa HttpHeader yang didapat.
   
3. Dapatkan Query Param yang dikirim
   
4. Buat payload yang sesuai dengan kebutuhan Business Service dan masukkan value yang didapat dari query param.
   
5. Invoke Business Service
6. Jika sudah mendapatkan response dari Business Service, olah response tersebut dengan melakukan penghilangan SOAP Envelope. Ini dapat dilakukan dengan menggunakan XSLT Resource.
   
7. Jika sudah dihilangkan, lakukan convert menggunakan tools yang biasa dipergunakan, kalau dalam kasus saya, saya menggunakan Java untuk menghandle convert nya.
   
8. Replace isi variable body dengan menggunakan hasil convert tersebut.

Sedangkan untuk flow method POST,PUT kira kira akan seperti berikut.

1. Dapatkan HttpHeader yang dikirim.
   
   
   
   
2. Buat Conditional Branch Untuk menghandle beberapa HttpHeader yang didapat.
   
3. Jangan lupa tambahkan OPTIONS Method untuk menghandle agar service yang kita buat sukses diexecute. Kuncinya tambahkan Transport Header pada flow OPTIONS.
   
4. Karena data ada di dalam payload dan bentuknya sudah JSON, maka kita tinggal lakukan convert dari JSON ke XML. Jika sudah maka kita akan punya payload berbentuk xml.
   
5. Namun sebelum kita mengirim data ke Business Service, terlebih dahulu payload xml nya harus kita manipulasi agar bentuknya sama seperti Business Service yang akan kita invoke. Caranya dengan menambahkan namespace pada payload xml nya.
   
6. Invoke Business Service
7. Jika sudah mendapatkan response dari Business Service, olah response tersebut dengan melakukan penghilangan SOAP Envelope. Ini dapat dilakukan dengan menggunakan XSLT Resource.
   
   
   
   
   
8. Jika sudah dihilangkan, lakukan convert menggunakan tools yang biasa dipergunakan, kalau dalam kasus saya, saya menggunakan Java untuk menghandle convert nya.
   
9. Replace isi variable body dengan menggunakan hasil convert tersebut.

Kira kira seperti itu inti dari convert dari REST ke SOAP menggunakan OSB.
Semoga bermanfaat !

Reference sample file yang dibutuhkan:
- AddNamespace

- RemoveSoapEnvelope

- Java Converter

Metro Carousel, Angular ng-repeat dan REST data Tips n Trick

Carousel merupakan salah satu komponen yang disediakan untuk membuat slider image. Beberapa saat yang lalu saya menggunakan fitur carousel dari Metro UI untuk membuat sebuah slideshow artikel dengan menggunakan ng-repeat angular sebagai data yang akan di gunakan sedangkan data akan di dapat dengan mengambil dari backend menggunakan REST.

Berikut adalah harapan flow data yang akan terjadi : 

Flow Harapan

Pada awalnya Saya berpikir system akan memiliki data flow seperti gambar di atas. Pada awal halaman di buka, controller akan langsung melakukan call data pada backend. Yang kemudian setelah data di dapat dari backend, angular mengesetnya pada variable scope dan dengan kemampuan 2-way-data-binding angular akan membuat data image tersedia untuk di gunakan sebagai image yang akan ditampilkan

Sayangnya hal tersebut tidak terjadi seperti harapan. Berikut hal yang terjadi pada sistem : 

Flow Kenyataan

Pada kenyataannya system pada saat controller masih belum mendapatkan data dari backend, carousel sudah mengambil data dan menjalankan fungsinya sebagai image slider, dan dikarenakan pada awal tidak ada kumpulan image yang ada, hal tersebut membuat carousel hanya menyediakan 1 slot image untuk di masukkan kedalam slider. Sehingga ketika data sudah di dapat sekalipun, hanya image pertama yang ditampilkan dan tidak ada efek slider.

Kemudian setelah mengetahui cara kerja carousel maka yang harus dilakukan adalah membuat carousel di diinit setelah mendapatkan data dari REST.

How?
Karena controller yang tahu kapan data datang dan dapat mentrigger untuk menginit carousel, maka terpikir cara untuk membinding html carousel pada saat data datang menggunakan ng-bind-html.

Flow solusi : 

Flow Solusi

Menggunakan cara tersebut, Carousel muncul pada html setelah data lengkap dan memulai fungsinya sendiri(urusan Metro) dengan data image yang lengkap. Sehingga carousel dapat berjalan dengan benar. 

Happy end? Yes!!

Carousel dapat berjalan semestinya dengan tetap mendapat data dari backend. Tetapi itu adalah satu dari seribu jalan menuju roma yang berhasil saya dan team temukan, Saya rasa tentunya masih ada cara lain untuk mensolving masalah ini.  :D

Berikut adalah potongan code apa yang digunakan untuk memperjelas maksud membinding html :

HTML :

<div ng-bind-html="htmlCarouselArticle"> </div>

Angular Controller : 

var renderCarousel = function (listObject) {

    var contentHtml = '';
    angular.forEach(listObject, function (object) {

        var body = "<div class='slide' > 
             <div style='background-size: cover; 
             background-position: center center; 
              background-image: url("+
            object.urlPic            +"); width: 100%; height: 100%;' > </div> </div>";
        contentHtml = contentHtml + body;    });
    var header = "<div class='carousel' data-role='carousel' data-effect='slide' 
    data-controls='false' data-markers='false' >";
    var footer = "</div>";
    contentHtml = header + contentHtml + footer;
    $scope.htmlCarouselArticle = $sce.trustAsHtml(contentHtml);};

Pada html Saya menggunaka ng-bind-html untuk membind sebuah scope pada html. Pada controller saya memanggil function renderCarousel setelah API mendapatkan kembalian data. Function renderCarousel akan melooping data dari api dan mengconstruct html yang dibutuhkan untuk carousel.

Solusi ini tentunya tidak hanya dapat digunakan untuk masalah carousel pada Metro ui, tetapi dapat digunakan di banyak hal yang membutuhkan trigger setelah suatu event. 

Semoga solusi ini dapat membantu, sampai berjumpa kembali lain waktu
Happy Coding~ :D

Rapid development bersama Django Rest

Iseng iseng googling baca - baca artikel teknologi macam apa yang digunakan oleh aplikasi terkenal seperti Instagram dan jawabannya adalah Django Framework. Apa itu django ? web framework yang menggunakan python (no python no django) untuk info lebih lanjut bisa baca blog saya yang sebelumnya klik disini.

Apakah cuma Instagram ? kalian bisa cek link dibawah:
https://www.quora.com/What-are-some-well-known-sites-running-on-Django

Untuk story-nya tentang django Instagram
http://instagram-engineering.tumblr.com/post/13649370142/what-powers-instagram-hundreds-of-instances

Oke, langsung aja..
Pada kali ini saya akan membahas membuat aplikasi rest service menggunakan module django-rest-framework. Pertama - tama harus mempunya basic pengetahuan tentang struktur project di django dan melakukan konfigurasi django admin site tutorial kalian bisa baca tutorial-django-administration-site.

Install

pip install djangorestframework

Lanjut ke intinya dan pastikan kalian sudah berhasil konfigurasi django admin site. Lalu buat new file /projectname/appname/serializer.py

serializer.py

from django.contrib.auth.models import User, Group
from rest_framework import serializers
class UserSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = User
        fields = ('url', 'username', 'email', 'groups')
class GroupSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = Group
        fields = ('url', 'name')

Buka file /projectname/appname/view.py dan tambahkan kode dibawah:

from django.contrib.auth.models import User, Group
from rest_framework import viewsets
from donate.serializers import UserSerializer, GroupSerializer
class UserViewSet(viewsets.ModelViewSet):
    """
    API endpoint that allows users to be viewed or edited.
    """
    queryset = User.objects.all().order_by('-date_joined')
    serializer_class = UserSerializer
class GroupViewSet(viewsets.ModelViewSet):
    """
    API endpoint that allows groups to be viewed or edited.
    """
    queryset = Group.objects.all()
    serializer_class = GroupSerializer

Register ke /projectname/url.py

from django.conf.urls import url, include
from rest_framework import routers
from projectname.appname import views

router = routers.DefaultRouter()
router.register(r'users', views.UserViewSet)
router.register(r'groups', views.GroupViewSet)

# Wire up our API using automatic URL routing.
# Additionally, we include login URLs for the browsable API.
urlpatterns = [
    url(r'^', include(router.urls)),
    url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework'))
]

Langkah terakhir register ke setting.py

INSTALLED_APPS = (
    ...
    'rest_framework',
)

REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': ('rest_framework.permissions.IsAdminUser',),
    'PAGE_SIZE': 10
}

Selesai!. Run server

python manage.py runserver

Buka aplikasi dan login menggunakan user admin site:

List API

Testing Api

List User halaman admin

Kesimpulanya django adalah:

• Sudah ada success story-nya
• Rapid Development
• Banyak community-nya (https://www.djangopackages.com/)
• No python no Django :D

Sekian blog dari saya! Semoga bermanfaat

Sumber:

http://www.django-rest-framework.org/

Implement Restful API In Oracle Service Bus 12c Part 2

Pada part 1 kita sudah membuat Proxy Service & Business Service, maka selanjutnya kita akan membuat pipeline untuk memproses data dari Proxy ke Business kemudian dikembalikan ke Proxy lagi. Untuk membuat Pipeline, kita tinggal mendrag component Pipeline ke bagian Pipeline/Split Joins. Kemduan beri nama Pipeline tersebut, lalu klik Next.

Uncheck bagian Expose as a Proxy Service, kemudian pilih Service Typenya WSDL, kemudian browse WSDL yang tadi telah tergenerate dari Proxy Service yang telah kita buat.

Berikut tampilan nya jika sudah selesai. Kemudia klik Finish.

Pipeline sudah berhasil kita buat, langkah selanjutnya adalah menyambungkan Proxy Service ke Pipeline lalu Pipeline ke Business Service.

Jika sudah, langkah selanjutnya adalah kita akan membuat XQuery untuk memproses aliran data dari Proxy ke Business serta dari Business ke Proxy. Caranya adalah dengan mengklik kanan pada Folder Resources, kemudian pilih New lalu pilih XQuery File ver 1.0

Beri nama file XQuery nya dengan format :

• XqueryName_PS2BS untuk Xquery yang menggunakan Resources dari Proxy Service menuju ke Business Service
• XqueryName_BS2PS untuk Xquery yang menggunakan Resources dari Business Service menuju ke Proxy Service.

Sekarang kita akan membuat yang XqueryName_PS2BS terlebih dahulu, jika sudah memberi nama, pada bagian Sources klik tanda tambah.

Pada window Function Paramenter, isi nama paramenternya sesuai dengan keinginan anda, kalau saya akan memakai nama input. Kemudian pada Sequence Type, klik icon pensil untuk menspesifikan schema yang akan digunakan.

Klik browse file, kemudian pilih Proxy Schema yang telah kita buat dari Native Schema pada part 1. Lalu pilih Root Element nya Request.

Jika sudah klik Ok.

Jika sudah klik Ok.

Jika sudah, Klik icon pensil pada bagian Target.

Browse Schema yang akan kita target yaitu Schema yang telah kita import ketika akan membuat Business Service. Jika sudah pilih Root Element Request. Kemudian klik Ok.

 

Jika sudah bisa klik Ok. Maka akan muncul XQuery Mapper.

Tarik element dari Resource ke Target sesuai dengan keinginan mapping. Pada kasus ini, kita akan memapping dengan nama element yang sama.

Jika sudah bisa di save. Maka Xquery pertama yaitu XqueryName_PS2BS telah berhasil dibuat. Selanjutnya kita akan membuat XQueryName_BS2PS.

Caranya mirip seperti yang telah kita lakukan tadi, hanya berbeda pada penamaan serti pemilihan Resource Schema & Target. Kali ini Resource Schema yang akan kita pakai adalah Schema dari Business Service yang telah kita import tadi & Root Elemen nya Response. Sedangkan Targetnya adalah Native Schema yang telah kita buat tadi dan Root Element nya adalah Response.

Jika sudah selesai, maka Xquery Mapper akan muncul, lakukan mapping seperti yang telah kita lakukan tadi, namun kali ini jangan lupa mapping induk array elemen ke induk array element.

Dengan ini Xquery yang kita butuhkan sudah selesai dibuat. Selanjutnya kita akan memakai Xquery yang sudah dibuat itu di dalam Pipeline untuk memproses data. Buka pipeline, maka tampilan nya akan seperti dibawah.

Drag and drop komponen Replace pada bagian Request Action & Response Action. Klik Replace yang ada dibagian Request Action, kemudian isi Propertinya sebagai berikut.
Location : body
Value : pilih Xquery Resource kemudian pilih Xquery yang ada initial PS2BS
Replace Options : Replace Node Contents

Jika sudah memilih XQuery nya, klik bagian function. Kemudian pilih tab Namespace.

Tambahkan namespace mulai dari namespace Proxy Service yang sudah dibuat, maupun namespace Business Service yang telah ada.
Contoh :
Namespace Proxy Service
Prefix : type
URI : http://www.nostratech.com/demo/getDoctorListProxyService/type
Namespace Business Service
Prefix : xmnls
URI : http://www.nostratech.org/hie/uorder/getDoctorList/type

Jika sudah menambah namespace nya. Maka pada kolom binding awal kita bisa isi dengan $body/type:request Maksud dari kode ini adalah, kita mendefinisikan inputan dari variable body yang memiliki namespace type dengan elemen request.

Jika sudah, maka kita lanjut pada Replace yang berada pada Response Action. Lakukan hal yang sama seperti pada Replace sebelum nya, namun XQuery yang kita gunakan sekarang adalah Xquery yang memiliki initial BS2PS.

Pada kolom binding, kita isi dengan $body/xmnls:response Maksud dari kode disamping adalah, kita mendefinisikan inputan dari variable body yang memiliki namespace xmnls dengan elemen response.

Jika sudah, kalian bisa deploy ke OSB Server dan bisa test dengan menggunakan OSB Console maupun dengan langsung URL seperti contoh dibawah.

Dengan ini kita sudah berhasil mengimplement REST Service pada OSB dengan menggunakan Method GET. Sekian dulu dari saya, semoga membantu dan selamat mencoba !

Resource : http://www.ateam-oracle.com/creating-a-mobile-optimized-rest-api-using-oracle-service-bus-part-1/