{"id":3480,"date":"2018-03-28T02:59:50","date_gmt":"2018-03-28T02:59:50","guid":{"rendered":"http:\/\/www.rezafaisal.net\/?p=3480"},"modified":"2018-03-28T07:08:20","modified_gmt":"2018-03-28T07:08:20","slug":"asp-net-core-blazor-language-service","status":"publish","type":"post","link":"https:\/\/www.rezafaisal.net\/?p=3480","title":{"rendered":"ASP.NET Core Blazor Language Service"},"content":{"rendered":"<p>Kita tentu sudah kenal Razor.\u00a0 Sekarang diperkenalkan Blazor yang merupakan web UI framework berbasis C#, Razor dan HTML yang berjalan di atas browser via WebAssembly. Nah, apa pula itu WebAssembly? Menurut beberapa cerita yang kami dengar, WebAssembly memungkinkan binary code berjalan di atas web browser.\u00a0 Jadi secara sederhana WebAssembly adalah \u201cmesin\u201d di dalam web browser.\u00a0 Nah sekarang sudah jelas, kenapa C# bisa jalan langsung di sisi client atau browser kan? Itu semua karena WebAssembly (dibaca: wasem).\u00a0 Detail tentang ini mungkin bisa dibaca di sini <a title=\"https:\/\/medium.com\/javascript-scene\/what-is-webassembly-the-dawn-of-a-new-era-61256ec5a8f6\" href=\"https:\/\/medium.com\/javascript-scene\/what-is-webassembly-the-dawn-of-a-new-era-61256ec5a8f6\">https:\/\/medium.com\/javascript-scene\/what-is-webassembly-the-dawn-of-a-new-era-61256ec5a8f6<\/a>. (di posting berikutnya, akan kami bahas lagi secara detail tentang WebAssembly ini).<\/p>\n<p>Tujuan besar Blazor adalah ingin menjalankan kode .NET pada browser.\u00a0 Jadi ingat dulu kala ada Java Appret \u2026 eh Java Applet yang berjalan pada web browser yang telah memasang java applet pluging.\u00a0 Atau Macromedia\/Adobe Flash yang juga berjalan pada web browser, asal telah terpasang flash plugin.\u00a0 Nah di sini yang menjadi \u201cplugin\u201d agar Blazor dapat berjalan di web browser adalah WebAssembly. WebAssembly dibangun oleh consensus oleh \u201cpengembang\u201d 4 web browser besar yaitu FireFox, Chrome, Safari dan MS Edge.<\/p>\n<p>{<strong><em>Blazor<\/em><\/strong>}<\/p>\n<p>Kembali ke Blazor. Untuk mengenal apa itu Blazor maka kita akan langsung praktek menggunakan Blazor.\u00a0 Untuk menggunakan ini perlu mempersiapkan tool berikut ini:<\/p>\n<ul>\n<li>.NET Core 2.1 (<a title=\"https:\/\/www.microsoft.com\/net\/download\/dotnet-core\/sdk-2.1.300-preview1\" href=\"https:\/\/www.microsoft.com\/net\/download\/dotnet-core\/sdk-2.1.300-preview1\">https:\/\/www.microsoft.com\/net\/download\/dotnet-core\/sdk-2.1.300-preview1<\/a>)<\/li>\n<li>Visual Studio 2017 (15.7) (<a title=\"https:\/\/www.visualstudio.com\/vs\/preview\" href=\"https:\/\/www.visualstudio.com\/vs\/preview\">https:\/\/www.visualstudio.com\/vs\/preview<\/a>)<\/li>\n<li>Ekstensi ASP.NET Core Blazor Language Service (<a title=\"https:\/\/go.microsoft.com\/fwlink\/?linkid=870389\" href=\"https:\/\/go.microsoft.com\/fwlink\/?linkid=870389\">https:\/\/go.microsoft.com\/fwlink\/?linkid=870389<\/a>)<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>{<strong><em>Visual Studio 2017 versi 15.7 Preview<\/em><\/strong>}<\/p>\n<p>Blazor saat ini hanya tersedia untuk VS2017 versi preview.\u00a0 Saat ini versi stabil VS2017 adalah versi 15.6.2 (kalau tidak salah hehe). Maka untuk mengecap rasanya Blazor ini terlebih dahulu kami menginstall VS2017 versi 15.7 Preview.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;\" title=\"blog01\" src=\"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2018\/03\/blog01-1.jpg\" alt=\"blog01\" width=\"450\" height=\"249\" border=\"0\" \/><\/p>\n<p>{<strong><em>ASP.NET Core Blazor Language Service<\/em><\/strong>}<\/p>\n<p>Installasi ASP.NET Core Blazor Language Service. Ingat ekstensi ini tidak dapat diinstall pada VS2017 yang stabil saat ini, hanya dapat diinstall pada VS2017 terbaru (yang statusnya masih preview).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;\" title=\"blog02\" src=\"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2018\/03\/blog02-1.jpg\" alt=\"blog02\" width=\"400\" height=\"305\" border=\"0\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;\" title=\"blog03\" src=\"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2018\/03\/blog03-1.jpg\" alt=\"blog03\" width=\"400\" height=\"303\" border=\"0\" \/><\/p>\n<p>Hasilnya adalah kita dapat melihat tempate baru pada project web ASP.NET Core, yaitu seperti gambar di bawah ini.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;\" title=\"blog04\" src=\"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2018\/03\/blog04-1.jpg\" alt=\"blog04\" width=\"450\" height=\"292\" border=\"0\" \/><\/p>\n<p>Saat website dijalankan akan ada permintaan ijin menggunakan node.js seperti terlihat pada gambar di bawah ini.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;\" title=\"blog05\" src=\"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2018\/03\/blog05.jpg\" alt=\"blog05\" width=\"450\" height=\"491\" border=\"0\" \/><\/p>\n<p>{<strong><em>Code Blazor<\/em><\/strong>}<\/p>\n<p>Berikut ini contoh code Blazor pada file *.cshtml.<\/p>\n<div id=\"codeSnippetWrapper\" style=\"font-size: 8pt; overflow: auto; cursor: text; font-family: 'Courier New', courier, monospace; width: 97.5%; direction: ltr; text-align: left; margin: 20px 0px 10px; line-height: 12pt; max-height: 200px; background-color: #f4f4f4; border: silver 1px solid; padding: 4px;\">\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\">@page <span style=\"color: #006080;\">\"\/counter\"<\/span>\r\n&lt;h1&gt;Counter&lt;\/h1&gt;<\/pre>\n<p>&lt;p&gt;Current count: @currentCount&lt;\/p&gt;<\/p>\n<p>&lt;button @onclick(IncrementCount)&gt;Click me&lt;\/button&gt;<\/p>\n<p>@functions {<br \/>\n<span style=\"color: #0000ff;\">int<\/span> currentCount = 0;<\/p>\n<p><span style=\"color: #0000ff;\">void<\/span> IncrementCount()<br \/>\n{<br \/>\ncurrentCount++;<br \/>\n}<br \/>\n}<\/p>\n<p>&nbsp;<\/p>\n<\/div>\n<p>Contoh kode di atas adalah contoh kode untuk increment angka ketika tombol di klik, seperti pada gambar di bawah ini.\u00a0 Pada kode di atas dapat dilihat fungsi IncrementCount() tidak ditulis dengan bahasa JavaScript, tetapi ditulis dengan bahasa C#.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" style=\"background-image: none; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border: 0px;\" title=\"blog07\" src=\"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2018\/03\/blog07-1.jpg\" alt=\"blog07\" width=\"400\" height=\"177\" border=\"0\" \/><\/p>\n<p>Contoh kedua adalah kode berikut ini.<\/p>\n<div id=\"codeSnippetWrapper\" style=\"font-size: 8pt; overflow: auto; cursor: text; font-family: 'Courier New', courier, monospace; width: 97.5%; direction: ltr; text-align: left; margin: 20px 0px 10px; line-height: 12pt; max-height: 200px; background-color: #f4f4f4; border: silver 1px solid; padding: 4px;\">\n<pre style=\"font-size: 8pt; overflow: visible; font-family: 'Courier New', courier, monospace; width: 100%; color: black; direction: ltr; text-align: left; margin: 0em; line-height: 12pt; background-color: #f4f4f4; border-style: none; padding: 0px;\">@page <span style=\"color: #006080;\">\"\/fetchdata\"<\/span>\r\n@inject HttpClient Http<\/pre>\n<p>&lt;h1&gt;Weather forecast&lt;\/h1&gt;<\/p>\n<p>&lt;p&gt;This component demonstrates fetching data from the server.&lt;\/p&gt;<\/p>\n<p>@<span style=\"color: #0000ff;\">if<\/span> (forecasts == <span style=\"color: #0000ff;\">null<\/span>)<br \/>\n{<br \/>\n&lt;p&gt;&lt;em&gt;Loading&#8230;&lt;\/em&gt;&lt;\/p&gt;<br \/>\n}<br \/>\n<span style=\"color: #0000ff;\">else<\/span><br \/>\n{<br \/>\n&lt;table <span style=\"color: #0000ff;\">class<\/span>=<span style=\"color: #006080;\">&#8216;table&#8217;<\/span>&gt;<br \/>\n&lt;thead&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;th&gt;Date&lt;\/th&gt;<br \/>\n&lt;th&gt;Temp. (C)&lt;\/th&gt;<br \/>\n&lt;th&gt;Temp. (F)&lt;\/th&gt;<br \/>\n&lt;th&gt;Summary&lt;\/th&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;\/thead&gt;<br \/>\n&lt;tbody&gt;<br \/>\n@<span style=\"color: #0000ff;\">foreach<\/span> (var forecast <span style=\"color: #0000ff;\">in<\/span> forecasts)<br \/>\n{<br \/>\n&lt;tr&gt;<br \/>\n&lt;td&gt;@forecast.Date.ToShortDateString()&lt;\/td&gt;<br \/>\n&lt;td&gt;@forecast.TemperatureC&lt;\/td&gt;<br \/>\n&lt;td&gt;@forecast.TemperatureF&lt;\/td&gt;<br \/>\n&lt;td&gt;@forecast.Summary&lt;\/td&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n}<br \/>\n&lt;\/tbody&gt;<br \/>\n&lt;\/table&gt;<br \/>\n}<\/p>\n<p>@functions {<br \/>\nWeatherForecast[] forecasts;<\/p>\n<p><span style=\"color: #0000ff;\">protected<\/span> <span style=\"color: #0000ff;\">override<\/span> async Task OnInitAsync()<br \/>\n{<br \/>\nforecasts = await Http.GetJsonAsync&lt;WeatherForecast[]&gt;(<span style=\"color: #006080;\">&#8220;\/sample-data\/weather.json&#8221;<\/span>);<br \/>\n}<\/p>\n<p><span style=\"color: #0000ff;\">class<\/span> WeatherForecast<br \/>\n{<br \/>\n<span style=\"color: #0000ff;\">public<\/span> DateTime Date { get; set; }<br \/>\n<span style=\"color: #0000ff;\">public<\/span> <span style=\"color: #0000ff;\">int<\/span> TemperatureC { get; set; }<br \/>\n<span style=\"color: #0000ff;\">public<\/span> <span style=\"color: #0000ff;\">int<\/span> TemperatureF { get; set; }<br \/>\n<span style=\"color: #0000ff;\">public<\/span> <span style=\"color: #0000ff;\">string<\/span> Summary { get; set; }<br \/>\n}<br \/>\n}<\/p>\n<p>&nbsp;<\/p>\n<\/div>\n<p>Pada contoh di atas, dapat dilihat ditulis class dan method yang ditulis dengan C#.<\/p>\n<p>Sekian dulu posting tentang Blazor ini, masih banyak pertanyaan dan ketidakjelasan. Semoga pada posting berikutnya akan kami kupas tuntas tentang Blazor ini.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Kita tentu sudah kenal Razor.\u00a0 Sekarang diperkenalkan Blazor yang merupakan web UI framework berbasis C#, Razor dan HTML yang berjalan di atas browser via WebAssembly. Nah, apa pula itu WebAssembly? Menurut beberapa cerita yang kami dengar, WebAssembly memungkinkan binary code&hellip;<\/p>\n","protected":false},"author":1,"featured_media":3477,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[6],"tags":[171,170],"class_list":["post-3480","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-softwaredev","tag-blazor","tag-vs-2017"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.rezafaisal.net\/wp-content\/uploads\/2018\/03\/blog04-1.jpg","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p1sNAL-U8","_links":{"self":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/3480","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3480"}],"version-history":[{"count":2,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/3480\/revisions"}],"predecessor-version":[{"id":3486,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/posts\/3480\/revisions\/3486"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=\/wp\/v2\/media\/3477"}],"wp:attachment":[{"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3480"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3480"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rezafaisal.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}