Preparation of ASP.NET Core Development with Visual Studio Code

Pada posting sebelumnya telah dibahas tentang aplikasi ASP.NET Core, yaitu:

• http://www.rezafaisal.net/?p=3077.
• http://www.rezafaisal.net/?p=3087.

Selanjutnya pada posting ini akan membahas tool pengembangan ASP.NET Core.

Visual Studio adalah integrated development environment (IDE) yang dikembangkan oleh Microsoft untuk mempermudah software developer mengembangkan aplikasi pada platform milik Microsoft. Visual Studio 2015 adalah versi stabil terbaru saat buku ini ditulis. Dan sedang dikembangkan Visual Studio 2017. Visual Studio dapat digunakan untuk mengembangkan aplikasi mobille, web, desktop dan cloud. Bahasa yang didukung oleh Visual Studio 2015 adalah Visual Basic, C#, C++, Python, Javascript dan masih banyak lagi. Tetapi Visual Studio 2015 hanya dapat digunakan pada sistem operasi Microsoft Windows.

Tetapi saat ini Microsoft telah mengembangkan Visual Studio Code. Visual Studio Code adalah source code editor multiplatform yang dapat digunakan pada sistem operasi Windows, Linux dan Mac OSX. Visual Studio Code juga mendukung banyak bahasa pemrograman seperti halnya Visual Studio 2015 ditambah bahasa pemrograman PHP, Node.js dan lain-lain.

Fitur-fitur utama dari Visual Studio Code adalah:

• Intelligent code completion, fitur ini akan membantu software developer untuk melengkapi variable, method dan modul yang ditulis.
• Streamlined debugging, fitur ini berfungsi untuk melakukan debug terhadap kode yang ditulis.
• Linters, multi-cursor editing, parameter hints.
• Code navigation.
• Refactoring.
• Dukungan akses Git.

Saat posting ini ditulis, Visual Studio Code telah mencapai versi 1.8. Untuk mengunduh file installer Visual Studio Code dapat mengunjungi link berikut ini https://code.visualstudio.com/.

Dari gambar di atas dapat dilihat Visual Studio Code tersedia untuk:

• macOS.
• Windows yang terdiri atas file installer dan zip.
• Linux x64 dalam format .deb, .rpm, dan .tar.gz.

 

{Antarmuka}

Pada gambar di bawah ini dapat dilihat layout dasar antarmuka Visual Studio Code.

Dari gambar di atas dapat dilihat layout terbagi atas 5 bagian yaitu:

1. View Bar, berisi tombol-tombol yaitu:
   • Explorer yang berfungsi untuk melihat daftar folder dan file-file didalamnya.
   • Search untuk melakukan pencarian.
   • Git untuk melihat daftar folder yang disimpan pada Git repository.
   • Debug.
   • Extension untuk melihat daftar extension yang tersedia pada repository.
2. Side Bar, akan menampilkan view sesuai dengan tombol pada View Bar yang dipilih.
3. Editor Group, akan menampilkan window-window editor dari file yang dibuka. Artinya jika dibuka 2 file maka akan dapat terlihat 2 windows seperti pada gambar di atas.
4. Panel akan memberikan informasi output dari hasil proses debug, error, warning dan dapat juga berfungsi sebagai integrated terminal.
5. Status Bar berfungsi untuk menampilkan informasi dari project dan file yang sedang diedit.

 

{Tool Tambahan untuk ASP.NET Core Development}

Jika bahasa pemrograman yang akan digunakan untuk mengembangkan ASP.NET Core adalah C# maka perlu ditambahkan extension C#. Untuk mengakses daftar extension yang tersedia dapat mengklik tombol Extensions pada View Bar. Berikut adalah tampilan daftar extension.  Untuk mencari extension yang diinginkan dapat mengetikkan keyword pada kolom pencarian.

Extension pertama yang diperlukan untuk mengembangkan aplikasi ASP.NET Core adalah C#.

Ketikkan C# pada kolom pencarian, kemudian pilih extension seperti pada gambar di atas.  Kemudian klik tombol Install. Setelah proses pengunduhan dan installasi selesai, klik tombol Reload.

Extension kedua yang diperlukan adalah yeoman.  Ketik yeoman pada kolom pencarian.

extension ini adalah extension dasar scaffold project.  Setelah extension ini diinstall maka baru dapat diinstall extension “Scaffolding Application using Yeoman”.  Untuk menginstall extension ini digunakan terminal pada Visual Studio Code.  Pilih menu View > Integrated Terminal.  Kemudian ketikkan perintah berikut:

npm install -g yo generator-aspnet bower

 

 

{Membuat Project ASP.NET Core}

Untuk membuat project ASP.NET Core dapat dilakukan pada Integrated Terminal.  Ketikkan perintah berikut ini pada terminal.

yo aspnet

 

Kemudian pada terminal akan dilihat opsi seperti gambar berikut ini.

Tool ini memberikan beberapa pilihan untuk membuat project ASP.NET Core, yaitu:

• Empty Web Application (F#).
• Console Application.
• Console Application (F#).
• Web Application.
• Web Application Basic [ without Membership and Authorization].
• Web Application Basic [ without Membership and Authorization] (F#).
• Web API Application.
• Web API Application (F#).
• Nancy ASP.NET Application.
• Class Library.
• Class Library (F#).
• Unit test project (xUnit.net).
• Unit test project (xUnit.net) (F#).

Selanjutnya opsi yang dipilih adalah Web Application Basic [ without Membership and Authorization] yang secara default akan menggunakan bahasa pemrograman C#. Kemudian tekan tombol Enter dan akan ditampilkan opsi selanjutnya untuk memilih UI Framework yang digunakan.

Kemudian tekan tombol Enter untuk melanjutkan. Kemudian ketikkan nama aplikasi, pada contoh ini nama aplikasi adalah HelloWorldASPNETCore.

Setelah menekan tombol Enter maka akan dilakukan proses pembuatan file seperti pada gambar di bawah ini.

Hasilnya pada folder helloaspnet akan dibuat folder HelloWorldASPNETCore dengan isi berupa file-file yang dapat dilihat pada bagian Explorer.

Setelah itu pilih menu File > Open Folder, kemudian pilih folder HelloWorldASPNETCore.  Untuk menjalankan aplikasi ASP.NET Core ini dari Visual Studio Code dapat dilakukan dengan memilih Debug pada View Bar. Kemudian klik tombol Debug warna hijau yang dilingkari pada gambar di bawah ini.

Kemudian secara otomatis akan dilakukan proses debug dan menjalankan aplikasi ASP.NET Core ini dengan menjalankan Kestrel web server dan kemudian menjalankan web browser default sehingga ditampilkan aplikasi ASP.NET Core ini seperti gambar di bawah.

Semoga informasi bermanfaat