Cara Menggunakan Alat Pelaporan Javascript Di Ruby on Rails

ActiveReportsJS adalah alat pelaporan sisi klien 100% dengan nol ketergantungan server. Ini berarti Anda dapat menggunakan ActiveReports JS dengan server web apa pun, termasuk aplikasi Ruby on Rails. Artikel ini berisi tutorial sederhana namun menyeluruh tentang mengintegrasikan ActiveReports JS dengan aplikasi Ruby on Rails Anda.

Prasyarat

Konten berikut mengasumsikan bahwa Anda telah menginstal Ruby on Rails di mesin Anda. Jika Anda tidak memilikinya, Anda bisa mendapatkannya dari situs web Ruby on Rails. Merupakan ide bagus untuk menginstal ActiveReportsJS di mesin Anda juga. Jika Anda tidak memilikinya, Anda bisa mendapatkannya dari situs web ActiveReports JS.

Buat aplikasi Ruby on Rails

Untuk membuat aplikasi Ruby on Rails baru, jalankan perintah berikut dari terminal atau command prompt.

rails new ReportingOnRails --api

Kemudian buka direktori ReportingOnRails yang baru dibuat di editor kode favorit Anda, seperti Visual Studio Code.

Buat model data JSON API

Gunakan set data Penjualan yang dapat Anda unduh dari situs web E for Excel. Ini menyediakan kumpulan data dengan berbagai ukuran, dari 100 catatan hingga 5 juta catatan. Untuk mempermudah, gunakan dataset pertama dengan 100 record.

Kumpulan data memiliki banyak field, tetapi tutorial ini hanya menggunakan beberapa field. Untuk membuat model data JSON API, jalankan perintah berikut dari direktori ReportingOnRails:

rails g model Sale region:string country:string itemType:string unitsSold:float  
rake db:migrate

# or the following for Windows:  
# bin\rails g model Sale region:string country:string itemType:string unitsSold:float  
# ruby bin\rake db:migrate

Inisialisasi data dari file CSV

Unduh dan unzip data dari arsip 100-Sales-Records.zip ke direktori lib\seed aplikasi Anda.

Instal csv gem ke dalam aplikasi Anda.

Kemudian buka file db/seeds.rb dan ganti isinya dengan kode berikut.

require 'csv'

csv_text = File.read(Rails.root.join('lib', 'seeds', '100 Sales Records.csv'))  
csv = CSV.parse(csv_text, :headers => true, :encoding => 'ISO-8859-1')  
# puts csv

csv.each do |row|  
  #puts row.to_hash  
  Sale.create!(region: row['Region'],  
  country: row['Country'],  
  itemType: row['Item Type'],  
  unitsSold: row['Units Sold'])  
end

Terakhir, jalankan perintah berikut dari terminal atau command prompt:

rake db:seed  
# or ruby bin\rake db:seed in Windows

Konfigurasikan titik akhir JSON API

Buka file config/routers.rb dan ganti isinya dengan kode berikut.

Rails.application.routes.draw do  
  get 'api/sales', to: 'application#sales'  
end

Kemudian buka app/controllers/application_controller.rb dan paste snipet kode berikut.

class ApplicationController < ActionController::API  
    def sales  
        @sales = Sale.all  

        render json: @sales  
      end  
end

Kemudian jalankan aplikasi menggunakan perintah berikut:

rails server  
# or ruby bin\rails server for Windows

Juga, buka browser dan buka http://localhost:3000/api/sales untuk melihat data yang dikembalikan oleh JSON API.

Membuat ActiveReports

Selanjutnya, mari buat laporan yang memvisualisasikan data dari JSON API.

Dalam aplikasi Standalone Report Designer, klik menu File dan pilih template Continuous Page Layout untuk laporan yang baru dibuat.

Buka panel Data di Property Inspector dan klik tombol Add.

Pada dialog Data Source Editor, masukkan http://localhost:3000/api/sales pada kolom Endpoint dan klik tombol Save Changes.

Klik ikon + di dekat sumber data di panel data.

Dalam dialog Editor Dataset, masukkan Penjualan di field Nama dan $.* Di field path JSON.

Klik tombol Validate, pastikan teks 7 Items ditampilkan di bagian Database Fields, lalu klik tombol Save Changes.

klik menu hamburger di sisi kiri bilah alat.

Seret dan lepas item bagan dari kotak alat ke sudut kiri atas area halaman laporan. Dialog Panduan Bagan ditampilkan. Pilih jenis bilah dan klik tombol Berikutnya di layar pertama.

Pada layar kedua dialog, konfigurasikan data seperti yang ditunjukkan pada gambar berikut dan klik tombol Berikutnya.

Pada layar ketiga, klik tombol Selesai.

Ubah ukuran item laporan bagan untuk mengisi seluruh lebar halaman laporan. Klik legenda bagan untuk memuat propertinya ke dalam panel Properties dan atur properti Orientation ke Horizontal dan properti Position ke Bottom.

Klik menu File dan simpan laporan yang baru dibuat di folder publik aplikasi Anda sebagai SalesReport.rdlx-json. Buat halaman HTML statis untuk menampilkan laporan

Di folder publik aplikasi Anda, buat file index.html dan ganti isinya dengan kode berikut.


<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Sales Report</title>  
    <link  
    rel="stylesheet"  
    href="https://cdn.grapecity.com/activereportsjs/3.latest/styles/ar-js-ui.css"  
    type="text/css"  
  />  
  <link  
    rel="stylesheet"  
    href="https://cdn.grapecity.com/activereportsjs/3.latest/styles/ar-js-viewer.css"  
    type="text/css"  
  />  
  <script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-core.js"></script></script>  
  <script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-viewer.js"></script>  
  <script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-pdf.js"></script>  
  <style>  
    #viewer-host {  
      width: 100%;  
      height: 100vh;  
    }  
  </style>        
</head>

<body>  
    <div id="viewer-host"></div>  
    <script>  
        var viewer = new ActiveReports.Viewer("#viewer-host");  
        viewer.open('/SalesReport.rdlx-json');  
      </script>    
</body>  
</html>

Pastikan aplikasi berjalan, buka browser Anda dan buka http://localhost:3000/index.html untuk melihat laporan. Jika Anda telah melakukan langkah-langkah dengan benar, Anda akan melihat laporan yang menunjukkan data dari JSON API.

Awalnya diterbitkan pada 25 Mei 2022 di https://www.grapecity.com.