Visual Studio Code & Single Page Applications on ASP.NET Core | M Reza Faisal

reza

full-time(software-developer,lecturer); part-time(traveller, food-tester);

Visual Studio Code & Single Page Applications on ASP.NET Core

Feb 19, 2017 by     No Comments    Posted under: I am Software Developer

Single Page Applications juga dikenal dengan singkatan SPAs.  Apa bedanya antara aplikasi web dengan “teknik” Single Page Applications dengan aplikasi web yang telah umum kita kenal selama ini?

Gambar di bawah ini memperlihatkan bagaimana aplikasi web yang telah umum kita kenal. Pertama, setelah web browser sebagai client melakukan request ke server maka server akan memberikan response dengan berupa halaman web HTML.  Kemudian kita akan menggunakan halaman web HTML tersebut untuk melakukan sesuatu seprti mengisi form, dan setelah tombol kirim diklik maka data akan dikirim ke server, dan kembali server akan memberikan response berupa halaman HTML.

01

Sedangkan Single Page Applications (SPAs) memiliki cara kerja seperti gambar di bawah ini.  Proses pertama sama seperti pada gambar di atas.  Tetapi setelah itu tidak akan ada lagi response dari server berupa halaman HTML, tetapi komunikasi hanya akan dilakukan dengan AJAX dan response berupa data dengan format JSON.

02

Saat ini telah banyak framework yang dapat digunakan untuk membuat SPAs yaitu:

Cuma itu? Lalu apa bedanya SPAs dengan aplikasi web multi page (Multi Page Applications/MPAs) dengan implementasi AJAX yang juga sudah umum digunakan pada aplikasi web saat ini?  Pertanyaan ini akan dijawab nanti di bagian akhir posting ini.

Posting ini bertujuan untuk memberikan untuk membuat agar Visual Studio Code digunakan untuk membuat SPAs pada ASP.NET Core dengan menggunakan fitur terbaru dari .NET Core SDK 1.0 RC 4 yang juga versi terbaru (hehe).  .NET Core SDK 1.0 RC 4 memiliki template yang dapat digunakan untuk membuat SPAs dengan framework-framework seperti yang telah disebutkan di atas.

Untuk dapat menggunakan template tersebut maka terlebih dahulu diinstall software pendukung berikut ini, yaitu:

Setelah keduanya diinstall maka dapat menjalakan perintah ini pada command prompt atau pada integrated terminal pada Visual Studio Code.

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

 

03

Setelah proses installasi berhasil maka akan dapat dilihat daftar template tambahan seperti berikut ini.

04

Selanjutnya adalah membuat project dengan menggunakan template-template tersebut pada Visual Studio Code.  Ada dua cara untuk membuat project SPAs.  Pertama dengan menggunakan perintah “dotnet new” dan yang kedua dengan menggunakan generator Yeoman.

{Perintah dotnet}

Sebagai contoh untuk membuat project SPA dengan framework Knockout.JS dapat dilakukan dengan langkah-langkah berikut.  Misal project ini akan disimpan di dalam folder MVCKnockout, maka terlebih dahulu buat folder tersebut kemudian masuk ke dalam folder tersebut via command prompt atau integrated terminal dan ketikkan perintah-perintah berikut.

dotnet new knockout
dotnet restore

 

Perintah pertama untuk “mengcopy” file-file template Knockout.JS ke folder MVCKnockout.  Kemudian perintah kedua akan “menginstall” hal-hal yang diperlukan oleh project ini.  Setelah itu ketikkan perintah berikut ini untuk menginstall hal-hal yang terkait dengan framework Knockout.JS.

npm install

 

Proses ini akan memakan waktu yang cukup lama, karena akan mengunduh file-file yang ukuran totalnya sekitar 50MB yang akan disimpan pada folder npm_modules.  Ukuran total folder npm_modules ini akan bervariasi tergantung dari template yang digunakan.  Sebagai contoh untuk template yang menggunakan framework Angular akan memiliki total file sekitar 80MB.

Untuk menjalankan aplikasi web ini digunakan perintah berikut.

dotnet run

 

Maka secara default akan digunakan alamat http://localhost:5000 jika ingin mengakses aplikasi web ini.  Hasilnya akan dapat dilihat pada gambar di bawah ini.

05

{Yeoman Generator}

Cara kedua akan diberikan contoh membuat project SPAs dengan menggunakan bantuan Yeoman Generator.  Tool ini dapat digunakan bagi pengguna yang masih belum menggunakan SDK .NET Core di atas.  Untuk menginstall template SPAs digunakan perintah berikut ini.

npm install -g yo generator-aspnetcore-spa

 

06

Gambar di atas adalah contoh penulisan perintah pada integrated terminal pada Visual Studio Code.  Setelah proses installasi berhasil dan selesai, maka dapat dibuat project SPAs.  Sebagai contoh akan dibuat project SPAs dengan framework Angular yang akan disimpan pada folder AngularCore, maka terlebih dahulu buat folder tersebut, kemudian masuk ke folder tersebut.  Selanjutnya akan di-generate template project dengan dengan perintah berikut.

yo aspnetcore-spa

 

07

Pada gambar dapat dilihat pilihan framework SPAs yang tersedia.  Misal dipilih Angular 2.0.2 kemudian Enter.  Kemudian akan ada pilihan type proyek yang akan digunakan.  Untuk pilihan ini sebagai contoh dipilih project.json (compatible with .NET Core tooling preview 2 and Visual Studio 2015).  Pertanyaan selanjutnya adalah apakah akan digunakan Unit Testing atau tidak, untuk opsi ini akan dipilih n (tidak). Dan selanjutnya akan menentukan nama project yang secara default akan sesuai dengan folder aktif.

Setelah proses pembuatan project berhasil maka dijalankan aplikasi web dari Visual Studio Code dari fitur Debug.  Mungkin akan ditemui window konfirmasi seperti gambar di bawah ini, karena akan dijalankan Node.js sebagai runtime untuk menjalankan Server Side Javascript.

08

Dan akan dapat dilihat antarmuka yang sama seperti antarmuka aplikasi web yang digenerate dengan menggunakan perintah “dotnet new”.

{SPAs}

Kembali ke pertanyaan di atas tentang bedanya SPAs dan aplikasi web multi page (MPAs) dengan AJAX.  Mari kita lihat cara kerja aplikasi AngularCore yang telah kita buat di atas.  Setelah aplikasi web dari project AngularCore, maka pertama kali akan dilihat tampilan web seperti berikut ini.

09

Halaman di atas dapat dilihat dapat dilihat alamat http://localhost:5001/home pada address bar.  Kemudian ketika menu Counter dilik maka akan dapat dilihat halaman berikut.

10

Pada halaman di atas dapat dilihat alamat http://localhost:5001/counter. Kemudian ketika menu Fetch data diklik makan akan dapat dilihat halaman berikut.

11

Maka dapat dilihat alamat http://localhost:5001/fetch-data pada address bar.

Dengan melihat alamat-alamat tersebut, jika aplikasi web dibangun dengan framework ASP.NET MVC maka seharusnya akan terdapat 3 class controller yaitu:

  • Class controller home.
  • Class controller counter.
  • Class controller fetch-data (tetapi cara penamaan ini tidak akan bisa digunakan untuk nama class).

Artinya untuk setiap controller memerlukan sebuah komponen view berupa file *.cshtml, artinya total 3 halaman web.  Tetapi jika diperhatikan pada project AngularCore  pada folder Views hanya terdapat sebuah folder untuk folder view untuk sebuah class controler HomeController, yaitu folder Home. Dan di dalam folder tersebut hanya terdapat 1 file view Index.cshtml.  Ini artinya aplikasi web ini hanya memiliki sebuah halaman web saja. Tetapi dengan sebuah halaman web tersebut dapat memiliki antarmuka yang berbeda-beda seperti pada gambar di atas.

Sebenarnya dengan ASP.NET Web Form hal seperti itu juga bisa dibuat, tetapi perubahan antarmuka dilakukan pada server side.  Nah dengan menggunakan framework SPAs, antarmuka dan data dilakukan pada client side.  Framework seperti Angular, Knockout dll lah yang dapat digunakan untuk keperluan itu.

Semoga penjelasan di atas dapat memberikan perbedaan antara SPAs dan MPAs.

Got anything to say? Go ahead and leave a comment!

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Fotolia

Fotolia

ShutterStock


Fotolia
© 2013 eSevens
%d bloggers like this: