JavaScript Interop Pada Aplikasi Blazor – Part 5

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.

Untuk artikel selengkapnya dapat di download disini. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download disini.

Terima kasih

Wassalam

JavaScript Interop Pada Aplikasi Blazor – Part 4

Pada artikel sebelumnya telah dibahas bagaimana melakukan invoke .Net method dari javascript. Untuk artikel ini akan dilanjutkan dengan integrasi browser API pada Blazor APP. Salah satu browser API yang akan menjadi studi kasus kita adalah web storage.

Apa itu web storage? Web Storage adalah tempat penyimpanan data pada local browser. Sebelum adanya HTML5,  data pada aplikasi yang disimpan pada local browser menggunakan cookie. Dengan menggunkan Web Storage, kita dapat menyimpan data lebih besar dan lebih aman tanpa mempengaruhi kinerja dari aplikasi. Terdapat dua tipe dari web storage, yang pertama localStorage dan yang kedua adalah sessionStorage.

Untuk localStorage data yang disimpan tidak memiliki expiry date, dan data tidak akan dihapus walaupun browser telah ditutup.  

Untuk artikel selengkapnya dapat di download disini. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download disini.

Terima kasih

Wassalam

Invoking JavaScript Dari .NET Pada Blazor – Part 3

Pada dua artikel sebelumnya telah kita bahas bagaimana memanggil fungsi pada javascript dari .Net. Lalu bagaimana jika dibalik yaitu memanggil .Net Method dari Javascript, apakah bisa ? Nah, artikel kali ini akan membahas pertanyaan tersebut.

Terdapat dua pembahasan pada artikel ini, yang pertama adalah cara memanggil .Net static method sedangkan yang kedua memanggil .Net Instance method dari JavaScript.

-        Memanggil .Net Static Method

Untuk memanggil static method dari javascript, kita gunakan fungsi DotNet.invokeMethod atau DotNet.invokeMethodAsync. Nilai dari   DotNet.invokeMethod adalah hasil dari operasi pada static method. Sedangkan nilai dari DotNet.invokeMethodAsync adalah JavaScript Promise yang merepresentasikan hasil dari operasi.

-        Memanggil .Net Instance Method

Apa itu instance method? Instance method biasa juga dikenal dengan non-static method.  

Untuk artikel selengkapnya dapat di download disini. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download disini.

Terima kasih

Wassalam

Invoking JavaScript Dari .NET Pada Blazor – Part 2

Pada artikel sebelumnya telah dibahas, bagaimana memanggil fungsi pada javascript baik yang memiliki return value maupun yang tidak memilikinya. Artikel ini akan melanjutkan beberapa latihan bagaimana melakukan Invoke JavaScript dari .Net. Pastikan selesaikan latihan-latihan pada artikel sebelumnya sebelum melanjutkan latihan-latihan pada artikel ini.

Pada latihan pertama kita akan membuat fungsi untuk mengirimkan HTML Element ke Javascript. Sebagai contoh bagaimana jika sebuah button di klik, maka salah satu textbox pada halaman web menjadi focus. 

Untuk artikel selengkapnya dapat di download disini. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download disini.

Terima kasih

Wassalam

Invoking JavaScript Dari .NET Pada Blazor – Part 1

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.

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. 

Untuk artikel selengkapnya dapat di download disini. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download disini.

Terima kasih

Wassalam

Mengakses Web Api Dari Blazor

 

API adalah kepanjangan dari Application Programming Interface yang digunakan perangkat lunak untuk mengakses data, perangkat lunak server atau aplikasi lain dan telah ada selama beberapa waktu.

Sederhananya, API adalah perantara perangkat lunak yang menjembatani dua aplikasi untuk berbicara satu sama lain. Katakanlah API sebagai penerjemah antara dua orang yang tidak berbicara dengan bahasa yang sama, tetapi dapat berkomunikasi menggunakan perantara API.

API dapat digunakan pada sistem berbasis web, sistem operasi, sistem basis data, dan perangkat keras komputer.

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.

Artikel ini akan membahas bagaimana melakukan request pada Web API dari blazor.

Untuk artikel selengkapnya dapat di download disini. Sedangkan untuk memudahkan dalam memahami isi artikel, maka penulis juga menyertakan dengan full source code project latihan ini, dan dapat di download disini.

Terima kasih

Wassalam

Ebook - ASP.NET CORE: Membangun Web API Lebih Mudah dan Cepat

 

Buku ini membahas bagaimana membangun Web API dengan menggunakan ASP.NET Core. Dimana metode yang digunakan untuk menjelaskan pembahasan pada setiap bagian disertakan file pendukung untuk memudahkan dalam pemahaman para pembaca

Topik-topik yang dipilih dalam pembahasan, cocok baik untuk pemula maupun yang sudah berkecimpung lama dalam dunia pemograman. Penjelasan meliputi dari awal dimulai dari pengenalan ASP.NET Core, Entity Framework Core (EF Core) dan cara membangun Web API. 

Salah satu kelebihan buku ini adalah, setiap topik akan disertai dengan latihan, sehingga pembaca akan seperti dibimbing secara langsung oleh seorang Trainner. 

Buku ini bisa didapatkan disini 

Terima kasih

Wassalam