Membangun ChatBot dengan Blazor Hybrid dan Azure Open AI – Part III

Pada latihan sebelumnya, kita telah berhasil membangun sebuah aplikasi chatbot sederhana yang terintegrasi dengan layanan OpenAI dan kemudian mengembangkannya dengan menambahkan fitur penyimpanan riwayat percakapan (chat history-artikel part II). Fitur ini sangat bermanfaat karena pengguna sering kali ingin meninjau kembali jawaban atau informasi yang telah diberikan sebelumnya tanpa harus mengulang pertanyaan yang sama. Dengan adanya history, pengalaman pengguna menjadi lebih efisien dan interaktif.

Namun, muncul permasalahan baru: bagaimana jika pengguna ingin memisahkan percakapan berdasarkan topik atau konteks tertentu? Misalnya, Session 1 digunakan untuk percakapan seputar dunia coding, sedangkan Session 2 digunakan untuk mendiskusikan berita politik. Jika aplikasi tidak memiliki fitur session atau grouping percakapan, maka seluruh riwayat chat akan tercampur menjadi satu alur panjang. Hal ini tentu akan menyulitkan pengguna ketika ingin mencari percakapan tertentu karena topik-topiknya tidak terorganisir dengan baik.

Oleh karena itu, pada artikel ini akan dijelaskan secara lebih mendalam dan sistematis bagaimana cara membuat fitur Session pada chatbot. Dengan menggunakan pendekatan ini, setiap percakapan dapat dikelompokkan berdasarkan topik, waktu, atau kebutuhan pengguna lainnya. Hasil akhirnya, aplikasi chatbot akan menjadi lebih rapi, terstruktur, profesional, dan jauh lebih nyaman digunakan, terutama untuk pengguna yang sering berdiskusi dengan berbagai konteks berbeda dalam satu aplikasi.

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

Membangun ChatBot dengan Blazor Hybrid dan Azure Open AI (Part II)

Pada latihan sebelumnya, kita telah berhasil membangun sebuah aplikasi chatbot sederhana yang memanfaatkan layanan OpenAI. Setiap kali pengguna mengajukan sebuah pertanyaan, chatbot tersebut akan meneruskannya ke model yang telah kita konfigurasi, lalu menampilkan balasan yang dihasilkan oleh model tersebut. Proses ini memberikan gambaran dasar mengenai bagaimana cara berkomunikasi dengan OpenAI melalui aplikasi kita.

Meskipun fungsionalitas dasar tersebut sudah berjalan dengan baik, aplikasi pada artikel sebelumnya masih memiliki beberapa kekurangan penting. Salah satunya adalah tidak adanya fitur untuk menyimpan riwayat percakapan. Sebagian besar chatbot modern baik yang ada di website, aplikasi mobile, maupun platform komunikasi lainnya menyediakan kemampuan untuk melihat kembali percakapan sebelumnya. Fitur ini sangat berguna karena pengguna sering kali ingin meninjau jawaban atau informasi yang telah diberikan sebelumnya tanpa perlu mengulang pertanyaan yang sama.

Sayangnya, aplikasi yang kita buat sebelumnya belum memiliki kemampuan tersebut. Setiap percakapan hanya disimpan sementara dalam memori selama aplikasi berjalan. Ketika aplikasi ditutup dan dibuka kembali, seluruh percakapan akan hilang. Hal ini tentu bisa menjadi masalah, terutama apabila percakapan tersebut berisi informasi penting yang ingin kita simpan atau rujuk kembali di kemudian hari. Bayangkan jika pengguna bertanya sesuatu yang kompleks dan mendapatkan jawaban panjang dari chatbot, lalu setelah aplikasi ditutup, jawaban tersebut tidak bisa dilihat lagi. Ini jelas mengurangi kenyamanan dan efektivitas penggunaan aplikasi.

Oleh karena itu, pada latihan dalam artikel ini kita akan meningkatkan aplikasi chatbot dengan menambahkan fitur penyimpanan percakapan. Dengan adanya fitur ini, setiap pertanyaan dan jawaban akan disimpan secara permanen (misalnya dalam database atau file), sehingga dapat ditampilkan kembali saat aplikasi dibuka. Dengan cara ini, chatbot akan terasa lebih profesional, lebih berguna, dan lebih mendekati standar aplikasi chatbot pada umumnya.

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

Membangun ChatBot dengan Blazor Hybrid dan Azure Open AI

Chatbot atau chatterbot adalah sebuah layanan obrolan robot/tokoh virtual dengan kecerdasan buatan atau AI (Artificial Intelligent) yang menirukan percakapan manusia melalui pesan suara, obrolan teks ataupun keduanya.

Pada dasarnya bots bekerja dengan cara melihat kata kunci dalam data yang masuk dan membalasnya dengan kata kunci yang paling cocok, atau pola kata-kata yang paling mirip dari basis data tekstual. Artinya, jika pengguna mengirim suatu permintaan maka bots akan membalasnya dengan respon yang spesifik sesuai dengan kata kunci yang dikirim.

Azure OpenAI Services adalah sejumlah layanan yang disediakan oleh Microsoft Azure yang memungkinkan pengembang untuk mengintegrasikan teknologi kecerdasan buatan yang dikembangkan oleh OpenAI ke dalam aplikasi mereka. Ini mencakup layanan seperti Azure Cognitive Services, yang menyediakan berbagai fitur AI dan Machine Learning, serta integrasi khusus dengan model-model canggih yang dikembangkan oleh OpenAI untuk tugas-tugas seperti pemrosesan bahasa alami, pengenalan gambar, dan lainnya.

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

Ebook - Blazor Hybrid: Mudah dan Cepat Membangun Aplikasi Cross Platform

 

Blazor Hybrid: Mudah dan Cepat Membangun Aplikasi Cross Platform

Buku ini membahas bagaimana membangun aplikasi cross platform (lintas platform) dengan menggunakan Microsoft Blazor Hybrid. 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 Blazor Hybrid, Blazor Class Library maupun Authentication dan Authorization pada  Blazor Hybrid, sehingga lebih mudah dalam membagun aplikasi lintas platform menggunakan Blazor Hybrid. 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

Menggunakan Blazor Hybrid pada WPF dan Windows Forms

WPF (Windows Presentation Foundation) adalah sebuah framework dari Microsoft yang digunakan untuk membangun aplikasi desktop berbasis Windows dengan tampilan yang kaya (rich UI). WPF merupakan bagian dari .NET Framework dan .NET Core/ .NET (terbaru), yang memungkinkan pengembang untuk membuat antarmuka pengguna (UI) modern.

Windows Forms (WinForms) Project di Visual Studio adalah jenis project yang digunakan untuk membuat aplikasi desktop berbasis GUI (Graphical User Interface) menggunakan teknologi Windows Forms. WinForms adalah salah satu framework UI di .NET yang memungkinkan pengembang untuk membangun aplikasi dengan antarmuka pengguna berbasis jendela, tombol, kotak teks, dan elemen UI lainnya. 

Fitur Windows Forms Project:

Desainer Visual – Memungkinkan pembuatan UI secara drag-and-drop menggunakan Visual Studio.

Kontrol Bawaan – Seperti tombol, label, textbox, datagridviev dan lain-lain.

Event-Driven Programming – Menggunakan event seperti Click, Load, dan lainnya untuk menangani interaksi pengguna. 

Untuk menggunakan Blazor Hybrid pada WPF dan Windows Forms kita menggunakan Razor Class Library. Pada Bab sebelumnya telah kita bahas bagaimana menggunakan RCL pada Blazor Web maupun MAUI. 

Pada pembahasan sebelumnya kita tidak memindahkan seluruh komponen seperti “Home.razor”, “Routes.razor” maupun Layout. Sehingga jika kita ingin menggunakan RCL ini pada WPF project, kita perlu meng-copy komponen-komponen tersebut kedalam WPF project. Tapi hal ini akan menjadi masalah jika terdapat banyak code dan digunakan dibanyak project seperti .NET MAUI dan WPF. Sehingga jika terjadi perubahan harus dilakukan dimasing-masing project.

Pada pembahasan ini kita akan membuat RCL yang dapat digunakan dibanyak platform atau project Dimana jika terjadi perubahan code kita tidak perlu untuk mengganti code pada setiap project. 

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

Authentication and Authorization pada Blazor Hybrid

Dalam hal keamanan, kita harus mengetahui apa itu otentikasi dan otorisasi. Autentikasi pada aplikasi adalah proses verifikasi identitas pengguna untuk memastikan bahwa mereka adalah pemilik akun yang sah. Proses ini biasanya melibatkan penggunaan credential seperti username dan password. Autentikasi sangat penting untuk menjaga keamanan data dan mencegah akses tidak sah ke sistem atau aplikasi.

Otorisasi pada aplikasi adalah proses yang menentukan hak akses pengguna terhadap informasi tertentu setelah berhasil diautentikasi. Ini memastikan bahwa hanya pengguna yang memiliki izin yang tepat yang dapat mengakses atau memodifikasi data dan fungsi dalam aplikasi.

pada Blazor Hybrid, autentikasi ditangani oleh native platform library. Ini berarti dalam mengautentikasi pengguna, proses yang dilakukan sama seperti yang kita lakukan di aplikasi .NET MAUI, WPF, atau Windows Forms lainnya. Tidak ada yang spesifik tentang Blazor Hybrid. Kita dapat menggunakan, misalnya, OpenID Connect dengan Identity Provider. Atau di WPF dan Windows Forms, kita bisa menggunakan Windows otentikasi. Sekarang pertanyaannya adalah bagaimana proses otentikasi ini dapat diakses dari aplikasi Blazor yang berjalan dalam elemen BlazorWebView. Dengan Blazor Hybrid, kita harus menerapkan custom AuthenticationStateProvider. Ini adalah Class yang sesuai dengan namanya yaitu menyediakan status otentikasi. Dalam class ini, kita dapat menulis kode khusus platform untuk mengautentikasi pengguna. Kemudian kita register class ini ke service provide pada aplikasi, sehingga kita dapat memasukkan sebuah instance ke dalam komponen aplikasi Blazor. Pada artikel ini akan dipelajari cara menerapkan autentikasi yang memiliki metode untuk login dan logout. 

Kita dapat menggunakan komponen AuthorizeView pada aplikasi Blazor. Berdasarkan status autentikasi, ini memungkinkan untuk menampilkan hanya bagian antarmuka pengguna yang dipilih. Penting untuk diketahui bahwa komponen AuthorizeView tidak spesifik untuk Blazor Hybrid. Dapat juga menggunakannya di aplikasi web Blazor untuk menerapkan otorisasi. Satu-satunya bagian khusus Blazor Hybrid adalah kita harus menulis AuthenticationStateProvider khusus yang terhubung dengan native platform library untuk mengautentikasi pengguna. Untuk menggunakan komponen AuthorizeView dan mengimplementasikan penyedia status autentikasi khusus

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

Razor Class Library pada Blazor Hybrid

Razor Class Library (RCL) adalah Library di ASP.NET Core yang memungkinkan kita untuk membuat dan mendistribusikan komponen UI yang dapat digunakan kembali dalam aplikasi web. RCL dapat berisi halaman, tampilan, komponen tampilan, pengontrol, dan model data.

Berikut adalah beberapa poin penting tentang Razor Class Library (RCL):

Reusable: RCL memungkinkan kita untuk membuat komponen UI yang dapat digunakan kembali di berbagai proyek. Ini sangat berguna untuk menghindari duplikasi kode dan mempermudah maintenance aplikasi.

Distribusi: Kita dapat mengemas RCL sebagai paket NuGet, sehingga dapat dengan mudah didistribusikan dan digunakan di proyek lain.

Struktur: RCL biasanya berisi folder wwwroot untuk aset statis seperti CSS dan JavaScript, serta folder Pages atau Views untuk Razor Pages atau MVC Views.

Integrasi: RCL dapat diintegrasikan ke dalam aplikasi ASP.NET Core dengan menambahkan referensi ke proyek RCL. Aplikasi yang menggunakan RCL dapat mengakses komponen dan aset yang disediakan oleh RCL.

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