Training Azure DevOps

Posted on by
Reply

Pada tanggal 20-22 September 2021, saya mendapat kesempatan untuk mendeliver online training dengan topik Azure DevOps, pelatihan ini diikuti oleh developer, dan kepala bagian IT Dept dari Universitas Unika AtmaJaya Jakarta.

Pada pelatihan ini dibahas beberapa topik seperti:

  • Apa itu DevOps
  • Pengenalan Azure DevOps
  • Memilih pendekatan agile yg akan digunakan
  • Bekerja dengan Azure Boards
  • Apa itu Delivery Plan
  • Pengaturan environment yg akan digunakan
  • Merencanakan sprint menggunakan Delivery Plans
  • Apa itu Azure Pipeline
  • Membuat Pipeline
  • Multiple konfigurasi pipeline
  • Memilih code workflow strategy
  • Bagaimana membuat pull request pada github
  • Push change dan mentrigger pipeline
  • Pelacakan build history
  • Penambahan rule review pada saat pull request
  • Apa itu Automated Testing?
  • Menambahkan unit testing pada aplikasi
  • Menjalankan unit testing pada pipeline
  • Menambahkan testing widget pada dashboard
  • Menjalankan code coverage testing
  • Memperbaiki failed test
  • Apa itu Azure Artifacts
  • Membuat package pada Azure Artifacts
  • Membuat Release pipeline stage
  • Apa itu continuous delivery
  • Deploy app to Azure App Services
  • Monitor health pipeline
  • Membuat multistages pipeline (dev, staging)

imageimage

Xamarin Forms 5.0: Apa yang baru??

Posted on by
Reply

Versi yang paling stabil dari Xamarin Forms sudah rilis yaitu Xamarin Forms 5.

Rilis utama ini memberikan ratusan peningkatan kualitas dan menghadirkan fitur-fitur baru yang stabil termasuk App Theme, Brushes, CarouselView, RadioButton, Shapes and Paths, dan SwipeView.

Bagaimana cara upgrade ke Xamarin Forms 5.0?

  • Pastikan andamenggunakan Visual Studio 2019. Ini adalah versi minimum yang diperlukan.
  • UIWebView telah dihapus untuk penyesuaian dengan guidelines dari Apple yang diperbarui.
  • Ekstensi markup MediaElement, Expander, dan C # UI telah dipindahkan ke pustaka Xamarin Community Toolkit. Anda dapat menginstal Xamarin Community Toolkit melalui NuGET package manager.
  • Package DataPages dan Theme harus dihapus dari solusi anda. Paket eksperimental ini tidak lagi dirilis.
  • (Opsional) MasterDetailPage dan tipe terkait telah diubah namanya menjadi FlyoutPage. Tipe lama sudah deprecated, biarpun anda masih dapat menggunakannya pada project namun disarankan menggunakan FlyoutPage untuk memudahkan migrasi ke MAUI nantinya.

Perbarui project Xamarin Forms anda ke versi 5.0 melalui NuGet Package Manager, clean, restart Visual Studio, dan terakhir rebuild projectnya.

Berikut langkah upgrade ke Xamarin Forms 5.0

1. Buat project Mobile App (Xamarin Forms) baru dengan nama SampleForm5

2. Kemudian pilih Flyout sebagai template dari aplikasi yang dibuat.

image

3. Klik kanan pada solution explorer, kemudian pilih manage Nuget Package Manager

4. Pada tab update akan muncul package Xamarin Forms. Pilih versi yang paling baru saat ini yaitu versi 5 dan tekan tombol install.

image

5. Kemudian update juga library Xamarin Essentials

6. Clean solution, restart visual studio, buka kembali project-nya, kemudian langkah terakhir lakukan rebuild.

7. Untuk android pastikan anda menggunakan target platform Android sdk 10 (Q).

image

8. Setelah solution berhasil di rebuild tanpa pesan error, jalankan aplikasi untuk memastikan tidak ada masalah pada proses upgrade.

Pada blog selanjutnya akan dibahas juga beberapa fitur yang baru pada Xamarin Forms 5, termasuk penggunaan Xamarin Community Toolkit.



[Seri Tutorial Blazor] Pengenalan Blazor Server Side

Posted on by
Reply

Pada blog sebelumnya kita sudah membahas apa itu Blazor, dan kita juga sudah tahu bahwa blazor memiliki 2 arsitektur yg berbeda yaitu Blazor Server dan Blazor Client.

Pada artikel kali ini kita akan membahas arsitektur dari Blazor Server dan membuat aplikasi Blazor Server baru.

Arsitektur Blazor Server

Aplikasi Blazor Server berjalan pada backend ASP.NET Core dan dapat diakses menggunakan browser. Aplikasi ASP.NET Core dapat dihosting sendiri atau berjalan di IIS. Di sisi client, browser apa pun dapat digunakan untuk mengakses aplikasi web. Blazor Server menggunakan file JavaScript yang berukuran kecil untuk menjalankan dan HTML dan CSS untuk menampilkan antarmuka penggunanya. Berbeda dengan Blazor Client, Blazor Server tidak menggunakan WebAssembly.

Di sisi server, aplikasi Blazor berisi kode .NET dan menangani salinan Dokumen Objek Model (DOM) untuk setiap client. Kita bisa memanggil .NET API kita tanpa pulang pergi jaringan tambahan, dan kita bisa langsung mengakses kode bisnis logic dari antarmuka pengguna tanpa harus membuat backend API terlebih dahulu.

Jika pengguna berinteraksi dengan aplikasi, Blazor akan mengirim event ke server menggunakan koneksi SignalR WebSocket yang persisten. Server akan mengembalikan DOM yang sudah diupdate untuk dirender di client.

Setiap interaksi memicu komunikasi jaringan antara client dan server. Berbeda dengan javacript framework yang memproses interaksi user di client, maka Blazor Server melakukannya di sisi server-side.

Membuat Project Blazor Server

Untuk membuat project Blazor anda dapat menggunakan editor Visual Studio Community 2019 atau Visual Studio Code. Berikut adalah tautan untuk mengunduh .NET SDK dan IDE yang akan digunakan.

Pada tutorial kali ini kita akan menggunakan VS 2019 Community untuk membuat project Blazor Server yang baru

1. Pada Visual Studio 2019 pilih create new Project

image

2. Kemudian pilih Blazor App, masukan BlazorAppSample sebagai nama project

image

3. Kemudian pilih Blazor Server, dan pilih .NET Core 3.1

image

4. Pada solution explorer dapat dilihat struktur project yang sudah dibuat adalah sebagai berikut:

image

5. Tekan tombol F5 untuk menjalankan aplikasinya.

image

Struktur Project dan File Folder

Jika dilihat pada Solution Explorer terdapat beberapa macam folder yang sudah dibuatkan ketika kita menggunakan template yang disediakan oleh VS 2019.

  • Program.cs adalah entry point ketika aplikasi kita dijalankan. Ketika app dijalankan maka akan menjalankan web host instance.
  • Folder Page digunakan untuk menyimpan razor comopent (file yang berekstensi .razor).
  • Static files: semua file yang ada di dalam folder wwwroot. Folder ini digunakan untuk menyimpan semua static files spt css, image, dll
  • Configuration: ada pada file appSettings.json sama seperti konfigurasi pada ASP.NET Core.
  • Folder Data: berisi file yang berhubungan dengan pengaksesan database
  • Folder Shared: berisi komponen tambahan yang dapat digunakan kembali pada komponen lain.

[Seri Tutorial Blazor] Pengenalan Blazor

Posted on by
Reply

Blazor adalah client-side web UI framework yang mirip dengan Javascript front-end framework seperti Angular,React, atau Vue. Sama seperti Javascript, Blazor dapat dijalankan pada langsung pada browser via WebAssembly. Blazor juga tidak membutihkan plugin apapun pada browser.

Aplikasi Blazor terdiri dari komponen yang dibangun menggunakan bahasa C#, HTML, Razor, dan CSS. Blazor menangani interaksi pengguna dan merender UI yang sudah diupdate. Blazor tidak berbasis pada request-reply model. Interaksi pengguna ditangani sebagai event yang tidak dalam konteks Http Request seperti pada web pada umumnya.

Blazor terdapat pada bundle instalasi .NET Core SDK 3.1. Blazor sendiri memiliki fitur sebagai berikut:

  • Forms dan Validation
  • Dependency Injection
  • Client-side routing
  • Layouts
  • In-browser debugging
  • Javascript interopt

Blazor sendiri banyak memiliki kesamaan dengan teknologi microsoft sebelumnya yaitu ASP.NET Web Form, kedua framework mempunyai programming model yang mirip yaitu component-based, event-driven, dan stateful UI. Yang membedakan secara arsitektur adalah Web Form hanya berjalan pada sisi server saja, sedangkan Blazor dapat berjalan di sisi client (browser).

Blazor memiliki dua mode runtime yang berbeda, Blazor sisi server dan Blazor sisi client, juga dikenal sebagai Blazor WebAssembly. Kedua mode tersebut berjalan di semua browser web modern, termasuk browser web di ponsel.

Arsitektur Blazor Server Side

image

Server-side Blazor merender komponen Razor di server dan memperbarui halaman web menggunakan koneksi SignalR. Framework Blazor mengirimkan event dari web browser, seperti klik tombol dan gerakan mouse, ke server. Blazor runtime akan mengecek perubahan pada komponen di server dan mengirimkan perubahannya ke halaman web pada browser.


Blazor Client-side (WebAssembly)

Client-side Blazor terdiri dari kode yang sama dengan Blazor sisi server. Namun komponennya berjalan seluruhnya di browser web menggunakan teknologi yang dikenal sebagai WebAssembly.

image

Perbedaan utama dalam aplikasi Blazor yang dibuat di sisi server versus Blazor sisi klien adalah bahwa aplikasi Blazor sisi klien perlu melakukan web call (biasanya mengakses API di sisi server) untuk mengakses data server, sedangkan aplikasi Blazor sisi server dapat mengabaikan langkah ini, karena semua kodenya dijalankan di server (mirip aplikasi server side biasa).

Salah satu cara untuk memahami Blazor adalah bahwa Blazor adalah framework untuk membuat halaman web SPA (Single Page Application) interaktif yang menyediakan dua pilihan arsitektur (sisi klien dan sisi server) menggunakan teknologi Razor yang ditulis dengan bahasa C#.

Pada blog selanjutnya akan dibahas bagaimana cara membuat aplikasi Blazor Server Side untuk pertama kali