JavaScript Interop Pada Aplikasi Blazor – Part 5
Transcript of JavaScript Interop Pada Aplikasi Blazor – Part 5
JavaScript Interop Pada Aplikasi Blazor – Part 5
Junindar, ST, MCPD, MOS, MCT, MVP .NET
JavaScript Interop Pada Aplikasi
Blazor – Part 5
Junindar, ST, MCPD, MOS, MCT, MVP
http://junindar.blogspot.com
Abstrak
Blazor adalah Web Framework yang bersifat Open Source dimana aplikasi Web yang
bersifat client-side interactive dapat dikembangkan dengan menggunakan .Net (C#) dan
HTML. Pada saat ini C# biasa digunakan untuk melakukan proses back-end dari aplikasi
web. Dengan menggunakan fitur baru dari ASP.NET Core yaitu Blazor, kita dapat
membangun interactive WEB dengan menggunakan C# dan .NET .
Code .Net berjalan pada WebAssembly, yang artinya kita dapat menjalankan “NET“
didalam browser (Client) tanpa harus menginstall plugin seperti Silverlight, Java mapun
Flash.
Lisensi Dokumen: Copyright © 2003 IlmuKomputer.Com
Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan
disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat
tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang
disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang,
kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com.
JavaScript Interop Pada Aplikasi Blazor – Part 5
Junindar, ST, MCPD, MOS, MCT, MVP .NET
Pendahuluan
Untuk membuat aplikasi pada Blazor, kita menggunakan C# dan Razor. Razor
merupakan kombinasi dari HTML dan C#. Dan output dari blazor aplikasi di eksekusi
oleh .Net runtime.
Seperti kita ketahui, terdapat dua model hosting pada aplikasi blazor, yang pertama
WebAssembly dan yang kedua adalah Server.
Untuk WebAssembly aplikasi dan .Net runtime berjalan pada sisi client didalam web
browser. .Net runtime yang digunakan pada browser berdasarkan WebAssembly atau
yang biasa disebut WASM. WASM adalah instruksi berformat binary yang dieksekusi
Javascript runtime didalam browser. Jadi ini merupakan cara kerja dari Client Side
hosting model pada blazor.
JavaScript Interop Pada Aplikasi Blazor – Part 5
Junindar, ST, MCPD, MOS, MCT, MVP .NET
Kita dapat juga menjalankan blazor tanpa menggunakan WebAssembly, yaitu dengan
menggunakan Server-Side hosting model. Yang artinya aplikasi blazor tidak dijalankan
didalam browser, tetapi oleh server. Untuk melakukan render user interface pada
browser, aplikasi berkomunikasi melalui SignalR dengan JavaScript runtime.
Browser juga memiliki browser API yang berbeda-beda, seperti Document Object Model
(DOM). Dengan menggunkan DOM kita dapat mengkases dan mengganti elemen HTML
pada aplikasi web. Browser API, seperti DOM ini dapat diakses dengan menggunakan
JavaScript Runtime. Yang perlu diketahui, tanpa JavaScript Interop kita hanya dapat
menggunakan fungsi yang hanya disediakan oleh Blazor Framework dan .Net. Lalu
bagaimana jika kita ingin mengakses browser API dari code yang tidak disediakan oleh
Blazor Framework? Untuk hal ini kita perlu memanggil code pada JavaScript yang akan
mengakses Browser Api.
Blazor mendukung JavaScript Interoperabality (JavaScript Interop), dimana kita dapat
mengakses code pada JavaScript. Dari sini dapat kita ketahui, kapan kita harus
menggunakan JavaScript pada aplikasi Blazor. Dimana jika aplikasi kita menggunakan
fungsi-fungsi Browser API seperti DOM, Local Storage, Online Status yang tidak
disediakan oleh Blazor Framework.
JavaScript Interop Pada Aplikasi Blazor – Part 5
Junindar, ST, MCPD, MOS, MCT, MVP .NET
Pada artikel sebelumnya telah kita bahas bagaimana melakukan invoke baik dari .Net
maupun Javascript, dan dilanjutkan dengan menggunakan API pada browser. Semuanya
dilakukan didalam satu project. Pada pembahasan kali ini kita akan membuat Razor Class
Library dimana pada Class Library ini kita gunakan invoke pada .Net Method.
Sebelumnya pastikan untuk menyelesaikan latihan-latihan pada artikel sebelumnya (Part
1-4). Razor Class Library adalah ASP.NET Core Library yang berisi page, view, view
component dan fungsi-fungsi web application lainnya dengan kode nya masing-masing.
Seperti library pada umumnya, library tidak berjalan secara independen tetapi digunakan
oleh aplikasi lainya untuk memanfaatkan fungsi-fungsi pada library tersebut. Razor Class
Library memudahkan dalam berbagi funsgi code pada web aplikasi dengan element UI.
Selain itu manfaat dari Razor Class Library kita dapat menggunakannya pada multiple
project, tanpa harus membuat ulang fungsi-fungsinya (Reusable).
Pada artikel ini kita akan membuat sebuah komponen yang berfungsi untuk menampilkan
indikator apakah browser online atau offline, seperti pada gambar dibawah ini.
JavaScript Interop Pada Aplikasi Blazor – Part 5
Junindar, ST, MCPD, MOS, MCT, MVP .NET
Ikuti langkah-langkah dibawah ini untuk memudahkan dalam memahami isi artikel.
- Tambahkan sebuah Razor Class Library dengan cara Add New Project pada solution.
Lalu pilih “Razor Class Library” pada project template
Ganti Project Name menjadi “Blazor.BrowserStatusLibrary”
JavaScript Interop Pada Aplikasi Blazor – Part 5
Junindar, ST, MCPD, MOS, MCT, MVP .NET
Berikut merupakan file-file yang terdapat pada Razor Class Library. Disini kita akan
mengahapus file-file yang tidak digunakan. Seperti “ExampleJsInterop.cs”,
“Component1.razor”, “background.png”. Lalu ganti “exampleJsInterop.js” menjadi
“statusCheck.js” dan hapus seluruh sintaks yang ada pada file tersebut.
- Buka file “_Imports.razor” dan ketikkan sintaks seperti dibawah
@using Microsoft.JSInterop
Disini kita melakukan import “Microsoft.JSInterop”, sehingga kita tidak perlu lagi
melakukannya pada setiap razor component yang ada pada project ini.
- Tambahkan sebuah file css (styles.css) dan ketikkan sintaksnya seperti dibawah ini.
.isOnline { background-color: #23cfa7; color: white; position: absolute; width: 250px; padding: 2px 5px; } .isOffline { background-color: lightcoral; color: white; position: absolute; width: 250px; padding: 2px 5px; }
Disini kita buat dua buah css class (isOnline dan isOffline) sebagai indikator
online/offline, yang akan digunakan pada razor komponen sehingga halaman web
akan menjadi seperti pada gambar diatas.
JavaScript Interop Pada Aplikasi Blazor – Part 5
Junindar, ST, MCPD, MOS, MCT, MVP .NET
- Buka file javascript (statusCheck.js) dan ketikkan sintaks seperti dibawah.
window.browserCheckLib = { registerOnlineHandler: function (dotNetObjectRef) { function onlineHandler() { dotNetObjectRef.invokeMethodAsync("SetOnlineStatus", navigator.onLine); }; // Set up initial values onlineHandler(); // Register event handler window.addEventListener("online", onlineHandler); window.addEventListener("offline", onlineHandler); } };
Pada sintaks javascript diatas, kita telah membuat sebuah global property
(browserCheckLib) yang memiliki objek “registerOnlineHandler”. Didalam
“registerOnlineHandler” terdapat function onlineHandler yang berfungsi untuk
memanggil method pada .Net.. Pada onlineHandler function kita gunakan property
navigator.onLine sebagai paramater yang akan dikirimkan ke .Net method dimana
tipenya adalah boolean.
Untuk setup diawal kita panggil onlineHandler function, dan dilanjutkan dengan
melakukan register onlineHandler function pada event (online dan offline) javascript.
- Tambahkan sebuah razor component dengan nama “BrowserStatusIndicator.razor”.
JavaScript Interop Pada Aplikasi Blazor – Part 5
Junindar, ST, MCPD, MOS, MCT, MVP .NET
@using System.Threading.Tasks @inject IJSRuntime JSRuntime @if (_isOnline) { <div class="isOnline">Online</div> } else { <div class="isOffline">Offline</div> } @code { private bool _isOnline = true; protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { var dotNetObjectReference = DotNetObjectReference.Create(this); await JSRuntime.InvokeVoidAsync("browserCheckLib.registerOnlineHandler", dotNetObjectReference); } } [JSInvokable] public void SetOnlineStatus(bool isOnline) { _isOnline = isOnline; StateHasChanged(); } }
Mari kita lihat sintaks didalam code block, disana terdapat sebuah field _isOnline
dengan default valuenya adalah true. isOnline field ini digunakan didalam statement
pada razor code. Jika true akan menampikan “div” dengan text “Online” dengan css
class “isOnline” dan jika false menampikan “div” dengan text “Offline” dan css class
“isOffline”.
SetOnlineStatus adalah method yang akan dipanggil dari javascript. Pada method ini
nilai dari field _isOnline akan diganti oleh nilai dari paramater isOnline. Lalu
dilanjutkan dengan memanngil method “StateHasChanged” untuk melakukan force
render pada component.
Setelah itu kita akan melakukan overwrite “OnAfterRenderAsync” method. Dimana
pada method ini kita panggil javascript function
(browserCheckLib.registerOnlineHandler) yang telah kita buat sebelumnya dengan
kondisi jika parameter firstRender adalah true.
Setelah mengikuti langkah-langkah diatas, maka kita telah selesai membuat sebuah
Razor Class Library yang akan digunakan pada project di artikel sebelumnya.
- Buka project pada artikel sebelumnya, lalu klik kanan pada project > Add > Project
Reference.
JavaScript Interop Pada Aplikasi Blazor – Part 5
Junindar, ST, MCPD, MOS, MCT, MVP .NET
Lalu pada dialog Reference Manager, pilih class library yang telah kita buat diatas
(Blazor.BrowserStatusLibrary).
Buka file “_import.razor” dan import class library tersebut, seperti pada sintaks
dibawah.
@using Blazor.BrowserStatusLibrary
Pada Razor Class Library diatas, kita memiliki sebuah css dan javascript file. Oleh
karena itu kita perlu menambahkan reference untuk kedua file tersebut pada project
ini.
- Buka file “_Host.cshtml” dan tambahkan reference seperti dibawah.
CSS
<link href="_content/Blazor.BrowserStatusLibrary/styles.css" rel="stylesheet">
Javascript
<script src="_content/Blazor.BrowserStatusLibrary/statusCheck.js"></script>
- Dan yang terakhir adalah dengan menambahkan razor component pada Class Library
di dalam file “NavMenu.razor”.
<BrowserStatusIndicator></BrowserStatusIndicator>
Jalankan program untuk melihat hasilnya, untuk default srazor component akan
berwarna hijau dengan text Online. Lalu tekan F12 untuk membuka developer tools.
Selanjutnya pada tab Network ganti Network Throttling menjadi offline. Pastikan
status pada halaman web berubah juga menjadi offline.
JavaScript Interop Pada Aplikasi Blazor – Part 5
Junindar, ST, MCPD, MOS, MCT, MVP .NET
JavaScript Interop Pada Aplikasi Blazor – Part 5
Junindar, ST, MCPD, MOS, MCT, MVP .NET
Penutup
Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga
menyertakan dengan full source code project latihan ini, dan dapat di download disini
http://junindar.blogspot.com/2021/11/javascript-interop-pada-aplikasi-blazor_15.html
JavaScript Interop Pada Aplikasi Blazor – Part 5
Junindar, ST, MCPD, MOS, MCT, MVP .NET
Referensi
https://play.google.com/store/books/details?id=G4tFDgAAQBAJ
https://play.google.com/store/books/details?id=VSLiDQAAQBAJ
JavaScript Interop Pada Aplikasi Blazor – Part 5
Junindar, ST, MCPD, MOS, MCT, MVP .NET
https://play.google.com/store/books/details/Junindar_Xamarin_Forms?id=6Wg-DwAAQBAJ
https://play.google.com/store/books/details/Junindar_C_dan_Dapper_Membangun_Aplikasi_POS_P
oint?id=6TErDwAAQBAJ
JavaScript Interop Pada Aplikasi Blazor – Part 5
Junindar, ST, MCPD, MOS, MCT, MVP .NET
https://play.google.com/store/books/details/Junindar_ASP_NET_MVC_Membangun_Aplikasi_Web_
Lebih?id=XLlyDwAAQBAJ
https://play.google.com/store/books/details/Junindar_ASP_NET_CORE_MVC?id=x
Ee5DwAAQBAJ
https://play.google.com/store/books/details/Junindar_ASP_NET_CORE?id=COUWEAA
AQBAJ
JavaScript Interop Pada Aplikasi Blazor – Part 5
Junindar, ST, MCPD, MOS, MCT, MVP .NET
Biografi Penulis.
Junindar Lahir di Tanjung Pinang, 21 Juni 1982. Menyelesaikan
Program S1 pada jurusan Teknik Inscreenatika di Sekolah Tinggi
Sains dan Teknologi Indonesia (ST-INTEN-Bandung). Junindar
mendapatkan Award Microsoft MVP VB pertanggal 1 oktober
2009 hingga saat ini. Senang mengutak-atik computer yang
berkaitan dengan bahasa pemrograman. Keahlian, sedikit mengerti
beberapa bahasa pemrograman seperti : VB.Net, C#, SharePoint,
ASP.NET, VBA. Reporting: Crystal Report dan Report Builder.
Database: MS Access, MY SQL dan SQL Server. Simulation /
Modeling Packages: Visio Enterprise, Rational Rose dan Power
Designer. Dan senang bermain gitar, karena untuk bisa menjadi
pemain gitar dan seorang programmer sama-sama membutuhkan
seni. Pada saat ini bekerja di salah satu Perusahaan Consulting
dan Project Management di Malaysia sebagai Senior Consultant.
Memiliki beberapa sertifikasi dari Microsoft yaitu Microsoft
Certified Professional Developer (MCPD – SharePoint 2010),
MOS (Microsoft Office Specialist) dan MCT (Microsoft Certified
Trainer) Mempunyai moto hidup: “Jauh lebih baik menjadi
Orang Bodoh yang giat belajar, dari pada orang Pintar yang
tidak pernah mengimplementasikan ilmunya”.