![\"01\"](\"http:\/\/www.rezafaisal.net\/wp-content\/uploads\/2017\/02\/01-3.jpg\" "\\"01\\"")
<\/a><\/p>\nSedangkan Single Page Applications (SPAs) memiliki cara kerja seperti gambar di bawah ini.\u00a0 Proses pertama sama seperti pada gambar di atas.\u00a0 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.<\/p>\n
Saat ini telah banyak framework yang dapat digunakan untuk membuat SPAs yaitu:<\/p>\n 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?\u00a0 Pertanyaan ini akan dijawab nanti di bagian akhir posting ini.<\/p>\n 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).\u00a0 .NET Core SDK 1.0 RC 4 memiliki template yang dapat digunakan untuk membuat SPAs dengan framework-framework seperti yang telah disebutkan di atas.<\/p>\n Untuk dapat menggunakan template tersebut maka terlebih dahulu diinstall software pendukung berikut ini, yaitu:<\/p>\n Setelah keduanya diinstall maka dapat menjalakan perintah ini pada command prompt atau pada integrated terminal pada Visual Studio Code.<\/p>\n <\/p>\n<\/div>\n Setelah proses installasi berhasil maka akan dapat dilihat daftar template tambahan seperti berikut ini.<\/p>\n Selanjutnya adalah membuat project dengan menggunakan template-template tersebut pada Visual Studio Code.\u00a0 Ada dua cara untuk membuat project SPAs.\u00a0 Pertama dengan menggunakan perintah \u201cdotnet new\u201d dan yang kedua dengan menggunakan generator Yeoman.<\/p>\n {Perintah dotnet<\/em><\/strong>}<\/p>\n Sebagai contoh untuk membuat project SPA dengan framework Knockout.JS dapat dilakukan dengan langkah-langkah berikut.\u00a0 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.<\/p>\n <\/p>\n<\/div>\n Perintah pertama untuk \u201cmengcopy\u201d file-file template Knockout.JS ke folder MVCKnockout.\u00a0 Kemudian perintah kedua akan \u201cmenginstall\u201d hal-hal yang diperlukan oleh project ini.\u00a0 Setelah itu ketikkan perintah berikut ini untuk menginstall hal-hal yang terkait dengan framework Knockout.JS.<\/p>\n <\/p>\n<\/div>\n 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.\u00a0 Ukuran total folder npm_modules ini akan bervariasi tergantung dari template yang digunakan.\u00a0 Sebagai contoh untuk template yang menggunakan framework Angular akan memiliki total file sekitar 80MB.<\/p>\n Untuk menjalankan aplikasi web ini digunakan perintah berikut.<\/p>\n <\/p>\n<\/div>\n Maka secara default akan digunakan alamat http:\/\/localhost:5000<\/a> jika ingin mengakses aplikasi web ini.\u00a0 Hasilnya akan dapat dilihat pada gambar di bawah ini.<\/p>\n {Yeoman Generator<\/em><\/strong>}<\/p>\n Cara kedua akan diberikan contoh membuat project SPAs dengan menggunakan bantuan Yeoman Generator.\u00a0 Tool ini dapat digunakan bagi pengguna yang masih belum menggunakan SDK .NET Core di atas.\u00a0 Untuk menginstall template SPAs digunakan perintah berikut ini.<\/p>\n <\/p>\n<\/div>\n Gambar di atas adalah contoh penulisan perintah pada integrated terminal pada Visual Studio Code.\u00a0 Setelah proses installasi berhasil dan selesai, maka dapat dibuat project SPAs.\u00a0 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.\u00a0 Selanjutnya akan di-generate template project dengan dengan perintah berikut.<\/p>\n <\/p>\n<\/div>\n Pada gambar dapat dilihat pilihan framework SPAs yang tersedia.\u00a0 Misal dipilih Angular 2.0.2 kemudian Enter.\u00a0 Kemudian akan ada pilihan type proyek yang akan digunakan.\u00a0 Untuk pilihan ini sebagai contoh dipilih project.json (compatible with .NET Core tooling preview 2 and Visual Studio 2015).\u00a0 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.<\/p>\n Setelah proses pembuatan project berhasil maka dijalankan aplikasi web dari Visual Studio Code dari fitur Debug.\u00a0 Mungkin akan ditemui window konfirmasi seperti gambar di bawah ini, karena akan dijalankan Node.js sebagai runtime untuk menjalankan Server Side Javascript.<\/p>\n Dan akan dapat dilihat antarmuka yang sama seperti antarmuka aplikasi web yang digenerate dengan menggunakan perintah \u201cdotnet new\u201d.<\/p>\n {SPAs<\/em><\/strong>}<\/p>\n Kembali ke pertanyaan di atas tentang bedanya SPAs dan aplikasi web multi page (MPAs) dengan AJAX.\u00a0 Mari kita lihat cara kerja aplikasi AngularCore yang telah kita buat di atas.\u00a0 Setelah aplikasi web dari project AngularCore, maka pertama kali akan dilihat tampilan web seperti berikut ini.<\/p>\n Halaman di atas dapat dilihat dapat dilihat alamat http:\/\/localhost:5001\/home<\/a> pada address bar.\u00a0 Kemudian ketika menu Counter dilik maka akan dapat dilihat halaman berikut.<\/p>\n Pada halaman di atas dapat dilihat alamat http:\/\/localhost:5001\/counter<\/a>. Kemudian ketika menu Fetch data diklik makan akan dapat dilihat halaman berikut.<\/p>\n<\/a><\/p>\n\n
\n
dotnet new<\/span> --install Microsoft.AspNetCore.SpaTemplates::*<\/pre>\n<\/a><\/p>\n<\/a><\/p>\ndotnet new<\/span> knockout\r\ndotnet restore<\/pre>\nnpm install<\/pre>\n
dotnet run<\/pre>\n
<\/a><\/p>\nnpm install -g yo generator-aspnetcore-spa<\/pre>\n
<\/a><\/p>\nyo aspnetcore-spa<\/pre>\n
<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n