Bagikan melalui

Membangun API RESTful dengan API Web ASP.NET

  • Artikel

oleh Tim Perkemahan Web

Tangan di lab: Gunakan API Web di ASP.NET 4.x untuk membangun REST API sederhana untuk aplikasi manajer kontak. Anda juga akan membangun klien untuk menggunakan API.

Dalam beberapa tahun terakhir, menjadi jelas bahwa HTTP bukan hanya untuk menyajikan halaman HTML. Ini juga merupakan platform yang kuat untuk membangun API Web, menggunakan beberapa kata kerja (GET, POST, dan sebagainya) ditambah beberapa konsep sederhana seperti URI dan header. ASP.NET Web API adalah sekumpulan komponen yang menyederhanakan pemrograman HTTP. Karena dibangun di atas runtime ASP.NET MVC, Web API secara otomatis menangani detail transportasi tingkat rendah HTTP. Pada saat yang sama, Web API secara alami mengekspos model pemrograman HTTP. Bahkan, salah satu tujuan Api Web adalah untuk tidak mengabstraksi realitas HTTP. Akibatnya, Web API fleksibel dan mudah diperluas. Gaya arsitektur REST telah terbukti menjadi cara yang efektif untuk memanfaatkan HTTP - meskipun tentu saja bukan satu-satunya pendekatan yang valid untuk HTTP. Manajer kontak akan mengekspos RESTful untuk mencantumkan, menambahkan, dan menghapus kontak, antara lain.

Lab ini memerlukan pemahaman dasar tentang HTTP, REST, dan mengasumsikan Anda memiliki pengetahuan kerja dasar tentang HTML, JavaScript, dan jQuery.

Catatan

Situs web ASP.NET memiliki area yang didedikasikan untuk kerangka kerja ASP.NET Web API di https://asp.net/web-api. Situs ini akan terus memberikan informasi, sampel, dan berita terbaru yang terkait dengan WEB API, jadi sering periksa apakah Anda ingin mempelajari lebih dalam seni pembuatan API Web kustom yang tersedia untuk hampir semua perangkat atau kerangka kerja pengembangan.

ASP.NET Web API, mirip dengan ASP.NET MVC 4, memiliki fleksibilitas besar dalam hal memisahkan lapisan layanan dari pengontrol yang memungkinkan Anda menggunakan beberapa kerangka kerja Injeksi Dependensi yang tersedia cukup mudah.

Semua kode sampel dan cuplikan disertakan dalam Kit Pelatihan Kamp Web, tersedia di https://github.com/Microsoft-Web/WebCampTrainingKit/releases.

Tujuan

Di lab langsung ini, Anda akan mempelajari cara:

  • Menerapkan RESTful Web API
  • Memanggil API dari klien HTML

Prasyarat

Berikut ini diperlukan untuk menyelesaikan lab langsung ini:

Siapkan

Menginstal Cuplikan Kode

Untuk kenyamanan, banyak kode yang akan Anda kelola di sepanjang lab ini tersedia sebagai cuplikan kode Visual Studio. Untuk menginstal cuplikan kode, jalankan file .\Source\Setup\CodeSnippets.vsi .

Jika Anda tidak terbiasa dengan cuplikan Visual Studio Code, dan ingin mempelajari cara menggunakannya, Anda dapat merujuk ke lampiran dari dokumen ini "Lampiran A: Menggunakan Cuplikan Kode".

Latihan

Lab langsung ini mencakup latihan berikut:

  1. Latihan 1: Membuat API Web Read-Only
  2. Latihan 2: Membuat API Web Baca/Tulis
  3. Latihan 3: Menggunakan API Web dari Klien HTML

Catatan

Setiap latihan disertai dengan folder Akhir yang berisi solusi yang dihasilkan yang harus Anda peroleh setelah menyelesaikan latihan. Anda dapat menggunakan solusi ini sebagai panduan jika Anda memerlukan bantuan tambahan untuk mengerjakan latihan.

Estimasi waktu untuk menyelesaikan lab ini: 60 menit.

Latihan 1: Membuat API Web Read-Only

Dalam latihan ini, Anda akan menerapkan metode GET baca-saja untuk manajer kontak.

Tugas 1 - Membuat Proyek API

Dalam tugas ini, Anda akan menggunakan templat proyek web ASP.NET baru untuk membuat aplikasi web WEB API.

  1. Jalankan Visual Studio 2012 Express for Web, untuk melakukan ini, buka Mulai dan ketik VS Express untuk Web lalu tekan Enter.

  2. Dari menu File , pilih Proyek Baru. Pilih Visual C# | Jenis proyek web dari tampilan pohon jenis proyek, lalu pilih jenis proyek Aplikasi Web ASP.NET MVC 4 . Atur Nama proyek ke ContactManager dan Nama solusi ke Mulai, lalu klik OK.

    Membuat Proyek Aplikasi Web ASP.NET MVC 4.0

    Membuat Proyek Aplikasi Web ASP.NET MVC 4.0 baru

  3. Dalam dialog jenis proyek ASP.NET MVC 4, pilih jenis proyek API Web . Klik OK.

    Menentukan jenis proyek API Web

    Menentukan jenis proyek API Web

Tugas 2 - Membuat Pengontrol API Contact Manager

Dalam tugas ini, Anda akan membuat kelas pengontrol tempat metode API akan berada.

  1. Hapus file bernama ValuesController.cs dalam folder Controllers dari proyek.

  2. Klik kanan folder Pengontrol di proyek dan pilih Tambahkan | Pengontrol dari menu konteks.

    Menambahkan pengontrol baru ke proyek

    Menambahkan pengontrol baru ke proyek

  3. Dalam dialog Tambahkan Pengontrol yang muncul, pilih Pengontrol API Kosong dari menu Templat. Beri nama kelas pengontrol ContactController. Lalu, klik Tambahkan.

    Menggunakan dialog Tambahkan Pengontrol untuk membuat pengontrol API Web baru

    Menggunakan dialog Tambahkan Pengontrol untuk membuat pengontrol Api Web baru

  4. Tambahkan kode berikut ke ContactController.

    (Cuplikan Kode - Lab API Web - Ex01 - Dapatkan Metode API)

    public string[] Get()
{
    return new string[]
    {
        "Hello",
        "World"
    };
}

  5. Tekan F5 untuk men-debug dan menjalankan aplikasi. Beranda default untuk proyek API Web akan muncul.

    Beranda default aplikasi ASP.NET Web API

    Beranda default aplikasi API Web ASP.NET

  6. Di jendela Internet Explorer, tekan tombol F12 untuk membuka jendela Alat Pengembang . Klik tab Jaringan , lalu klik tombol Mulai Menangkap untuk mulai menangkap lalu lintas jaringan ke jendela.

    Membuka tab jaringan dan memulai tangkapan jaringan

    Membuka tab jaringan dan memulai pengambilan jaringan

  7. Tambahkan URL di bilah alamat browser dengan /api/contact dan tekan enter. Detail transmisi akan muncul di jendela tangkapan jaringan. Perhatikan bahwa jenis MIME respons adalah aplikasi/json. Ini menunjukkan bagaimana format output default adalah JSON.

    Melihat output permintaan API Web dalam tampilan Jaringan

    Melihat output permintaan API Web dalam tampilan Jaringan

    Catatan

    Perilaku default Internet Explorer 10 pada saat ini adalah menanyakan apakah pengguna ingin menyimpan atau membuka aliran yang dihasilkan dari panggilan API Web. Output akan menjadi file teks yang berisi hasil JSON dari panggilan URL API Web. Jangan batalkan dialog agar dapat watch konten respons melalui jendela Alat Pengembang.

  8. Klik tombol Buka tampilan terperinci untuk melihat detail selengkapnya tentang respons panggilan API ini.

    Beralih ke Tampilan Terperinci

    Beralih ke Tampilan Terperinci

  9. Klik tab Isi respons untuk melihat teks respons JSON yang sebenarnya.

    Melihat teks output JSON di monitor jaringan

    Menampilkan teks output JSON di monitor jaringan

Tugas 3 - Membuat Model Kontak dan Menambah Pengontrol Kontak

Dalam tugas ini, Anda akan membuat kelas pengontrol tempat metode API akan berada.

  1. Klik kanan folder Model dan pilih Tambahkan | Kelas... dari menu konteks.

    Menambahkan model baru ke aplikasi web

    Menambahkan model baru ke aplikasi web

  2. Dalam dialog Tambahkan Item Baru , beri nama file baru Contact.cs dan klik Tambahkan.

    Membuat file kelas Kontak baru

    Membuat file kelas Kontak baru

  3. Tambahkan kode yang disorot berikut ke kelas Kontak .

    (Cuplikan Kode - Lab API Web - Ex01 - Kelas Kontak)

    public class Contact
{
    public int Id { get; set; }

    public string Name { get; set; }
}

  4. Di kelas ContactController , pilih string kata dalam definisi metode metode Get , dan ketik kata Contact. Setelah kata diketik, indikator akan muncul di awal kata Kontak. Tahan tombol Ctrl dan tekan tombol titik (.) atau klik ikon menggunakan mouse Anda untuk membuka dialog bantuan di editor kode, untuk mengisi secara otomatis menggunakan direktif untuk namespace layanan Model.

    Menggunakan bantuan Intellisense untuk deklarasi namespace

    Menggunakan bantuan Intellisense untuk deklarasi namespace

  5. Ubah kode untuk metode Get sehingga mengembalikan array instans model Kontak.

    (Cuplikan Kode - Lab API Web - Ex01 - Mengembalikan daftar kontak)

    public Contact[] Get()
{
    return new Contact[]
    {
        new Contact
        {
            Id = 1,
            Name = "Glenn Block"
        },
        new Contact
        {
            Id = 2,
            Name = "Dan Roth"
        }
    };
}

  6. Tekan F5 untuk men-debug aplikasi web di browser. Untuk melihat perubahan yang dilakukan pada output respons API, lakukan langkah-langkah berikut.

    1. Setelah browser terbuka, tekan F12 jika alat pengembang belum terbuka.

    2. Klik tab Jaringan .

    3. Tekan tombol Mulai Menangkap .

    4. Tambahkan akhiran URL /api/contact ke URL di bilah alamat dan tekan tombol Enter .

    5. Tekan tombol Buka tampilan terperinci .

    6. Pilih tab Isi respons . Anda akan melihat string JSON yang mewakili bentuk serial dari array instans Kontak.

      Output berseri JSON dari metode WEB API kompleks memanggil

      Output berseri JSON dari panggilan metode API Web yang kompleks

Tugas 4 - Mengekstrak Fungsionalitas ke Dalam Lapisan Layanan

Tugas ini akan menunjukkan cara mengekstrak fungsionalitas ke dalam lapisan Layanan untuk memudahkan pengembang memisahkan fungsionalitas layanan mereka dari lapisan pengontrol, sehingga memungkinkan penggunaan kembali layanan yang benar-benar melakukan pekerjaan.

  1. Buat folder baru di akar solusi dan beri nama Layanan. Untuk melakukan ini, klik kanan proyek ContactManager , pilih Tambahkan | Folder Baru, beri nama Layanan.

    Membuat folder Layanan

    Membuat folder Layanan

  2. Klik kanan folder Layanan dan pilih Tambahkan | Kelas... dari menu konteks.

    Menambahkan kelas baru ke folder Layanan

    Menambahkan kelas baru ke folder Layanan

  3. Saat dialog Tambahkan Item Baru muncul, beri nama kelas Baru ContactRepository dan klik Tambahkan.

    Membuat file kelas untuk berisi kode untuk lapisan layanan Repositori Kontak

    Membuat file kelas untuk berisi kode untuk lapisan layanan Repositori Kontak

  4. Tambahkan direktif menggunakan ke file ContactRepository.cs untuk menyertakan namespace layanan model.

    using ContactManager.Models;

  5. Tambahkan kode yang disorot berikut ke file ContactRepository.cs untuk menerapkan metode GetAllContacts.

    (Cuplikan Kode - Lab API Web - Ex01 - Repositori Kontak)

    public class ContactRepository
{
    public Contact[] GetAllContacts()
    {
        return new Contact[]
        {
            new Contact
            {
                Id = 1,
                Name = "Glenn Block"
            },
            new Contact
            {
                Id = 2,
                Name = "Dan Roth"
            }
        };
    }
}

  6. Buka file ContactController.cs jika belum dibuka.

  7. Tambahkan pernyataan penggunaan berikut ke bagian deklarasi namespace file.

    using ContactManager.Services;

  8. Tambahkan kode yang disorot berikut ke kelas ContactController.cs untuk menambahkan bidang privat untuk mewakili instans repositori, sehingga anggota kelas lainnya dapat menggunakan implementasi layanan.

    (Cuplikan Kode - Lab API Web - Ex01 - Pengontrol Kontak)

    public class ContactController : ApiController
{
    private ContactRepository contactRepository;

    public ContactController()
    {
        this.contactRepository = new ContactRepository();
    } 
    ...
}

  9. Ubah metode Get sehingga menggunakan layanan repositori kontak.

    (Cuplikan Kode - Lab API Web - Ex01 - Mengembalikan daftar kontak melalui repositori)

    public Contact[] Get()
{
    return contactRepository.GetAllContacts();
}

  10. Letakkan titik henti pada definisi metode GetContactController.

Menambahkan titik henti ke pengontrol kontak

Menambahkan titik henti ke pengontrol kontak 11. Tekan F5 untuk menjalankan aplikasi. 12. Ketika browser terbuka, tekan F12 untuk membuka alat pengembang. 13. Klik tab Jaringan . 14. Klik tombol Mulai Menangkap . 15. Tambahkan URL di bilah alamat dengan akhiran /api/contact dan tekan Enter untuk memuat pengontrol API. 16. Visual Studio 2012 harus berhenti setelah metode Get memulai eksekusi.

Melanggar dalam metode Get

Melanggar dalam metode Get 17. Tekan F5 untuk melanjutkan. 18. Kembali ke Internet Explorer jika belum dalam fokus. Perhatikan jendela pengambilan jaringan.

Tampilan jaringan di Internet Explorer memperlihatkan hasil tampilan Jaringan panggilan API Web

Tampilan jaringan di Internet Explorer memperlihatkan hasil panggilan API Web 19. Klik tombol Buka tampilan terperinci . 20. Klik tab Isi respons . Perhatikan output JSON dari panggilan API, dan bagaimana ia mewakili dua kontak yang diambil oleh lapisan layanan.

Melihat output JSON dari API Web di jendela alat pengembang

Melihat output JSON dari API Web di jendela alat pengembang

Latihan 2: Membuat API Web Baca/Tulis

Dalam latihan ini, Anda akan menerapkan metode POST dan PUT untuk manajer kontak untuk mengaktifkannya dengan fitur pengeditan data.

Tugas 1 - Membuka Proyek API Web

Dalam tugas ini, Anda akan bersiap untuk meningkatkan proyek WEB API yang dibuat di Latihan 1 sehingga dapat menerima input pengguna.

  1. Jalankan Visual Studio 2012 Express for Web, untuk melakukan ini, buka Mulai dan ketik VS Express untuk Web lalu tekan Enter.

  2. Buka folder Mulai solusi yang terletak di Folder Sumber/Ex02-ReadWriteWebAPI/Begin/ . Jika tidak, Anda dapat terus menggunakan solusi Akhir yang diperoleh dengan menyelesaikan latihan sebelumnya.

    1. Jika Anda membuka solusi Mulai yang disediakan, Anda harus mengunduh beberapa paket NuGet yang hilang sebelum melanjutkan. Untuk melakukan ini, klik menu Proyek dan pilih Kelola Paket NuGet.

    2. Dalam dialog Kelola Paket NuGet , klik Pulihkan untuk mengunduh paket yang hilang.

    3. Terakhir, buat solusi dengan mengklik Build | Build Solution.

      Catatan

      Salah satu keuntungan menggunakan NuGet adalah Anda tidak perlu mengirim semua pustaka dalam proyek Anda, mengurangi ukuran proyek. Dengan NuGet Power Tools, dengan menentukan versi paket dalam file Packages.config, Anda akan dapat mengunduh semua pustaka yang diperlukan saat pertama kali menjalankan proyek. Inilah sebabnya mengapa Anda harus menjalankan langkah-langkah ini setelah Anda membuka solusi yang ada dari lab ini.

  3. Buka file Services/ContactRepository.cs .

Tugas 2 - Menambahkan Fitur Data-Persistence ke Implementasi Repositori Kontak

Dalam tugas ini, Anda akan menambah kelas ContactRepository dari proyek API Web yang dibuat di Latihan 1 sehingga dapat bertahan dan menerima input pengguna dan instans Kontak baru.

  1. Tambahkan konstanta berikut ke kelas ContactRepository untuk mewakili nama nama kunci item cache server web nanti dalam latihan ini.

    private const string CacheKey = "ContactStore";

  2. Tambahkan konstruktor ke ContactRepository yang berisi kode berikut.

    (Cuplikan Kode - Lab API Web - Ex02 - Konstruktor Repositori Kontak)

    public ContactRepository()
{
    var ctx = HttpContext.Current;

    if (ctx != null)
    {
        if (ctx.Cache[CacheKey] == null)
        {
            var contacts = new Contact[]
            {
                new Contact
                {
                    Id = 1, Name = "Glenn Block"
                },
                new Contact
                {
                    Id = 2, Name = "Dan Roth"
                }
            };

            ctx.Cache[CacheKey] = contacts;
        }
    }
}

  3. Ubah kode untuk metode GetAllContacts seperti yang ditunjukkan di bawah ini.

    (Cuplikan Kode - Lab API Web - Ex02 - Dapatkan Semua Kontak)

    public Contact[] GetAllContacts()
{
    var ctx = HttpContext.Current;

    if (ctx != null)
    {
        return (Contact[])ctx.Cache[CacheKey];
    }

    return new Contact[]
        {
            new Contact
            {
                Id = 0,
                Name = "Placeholder"
            }
        };
}

    Catatan

    Contoh ini untuk tujuan demonstrasi dan akan menggunakan cache server web sebagai media penyimpanan, sehingga nilai akan tersedia untuk beberapa klien secara bersamaan, daripada menggunakan mekanisme penyimpanan Sesi atau masa pakai penyimpanan Permintaan. Seseorang dapat menggunakan Kerangka Kerja Entitas, penyimpanan XML, atau variasi lainnya sebagai pengganti cache server web.

  4. Terapkan metode baru bernama SaveContact ke kelas ContactRepository untuk melakukan pekerjaan menyimpan kontak. Metode SaveContact harus mengambil satu parameter Kontak dan mengembalikan nilai Boolean yang menunjukkan keberhasilan atau kegagalan.

    (Cuplikan Kode - Lab API Web - Ex02 - Menerapkan Metode SaveContact)

    public bool SaveContact(Contact contact)
{
    var ctx = HttpContext.Current;

    if (ctx != null)
    {
         try
         {
              var currentData = ((Contact[])ctx.Cache[CacheKey]).ToList();
              currentData.Add(contact);
              ctx.Cache[CacheKey] = currentData.ToArray();

              return true;
         }
         catch (Exception ex)
         {
              Console.WriteLine(ex.ToString());
              return false;
         }
    }

    return false;
}

Latihan 3: Menggunakan API Web dari Klien HTML

Dalam latihan ini, Anda akan membuat klien HTML untuk memanggil API Web. Klien ini akan memfasilitasi pertukaran data dengan API Web menggunakan JavaScript dan akan menampilkan hasilnya di browser web menggunakan markup HTML.

Tugas 1 - Memodifikasi Tampilan Indeks untuk Menyediakan GUI untuk Menampilkan Kontak

Dalam tugas ini, Anda akan mengubah tampilan Indeks default aplikasi web untuk mendukung persyaratan menampilkan daftar kontak yang ada di browser HTML.

  1. Buka Visual Studio 2012 Express untuk Web jika belum dibuka.

  2. Buka folder Mulai solusi yang terletak di Folder Sumber/Ex03-ConsumingWebAPI/Begin/ . Jika tidak, Anda dapat terus menggunakan solusi Akhir yang diperoleh dengan menyelesaikan latihan sebelumnya.

    1. Jika Anda membuka solusi Mulai yang disediakan, Anda harus mengunduh beberapa paket NuGet yang hilang sebelum melanjutkan. Untuk melakukan ini, klik menu Proyek dan pilih Kelola Paket NuGet.

    2. Dalam dialog Kelola Paket NuGet , klik Pulihkan untuk mengunduh paket yang hilang.

    3. Terakhir, buat solusi dengan mengklik Build | Build Solution.

      Catatan

      Salah satu keuntungan menggunakan NuGet adalah Anda tidak perlu mengirim semua pustaka dalam proyek Anda, mengurangi ukuran proyek. Dengan NuGet Power Tools, dengan menentukan versi paket dalam file Packages.config, Anda akan dapat mengunduh semua pustaka yang diperlukan saat pertama kali menjalankan proyek. Inilah sebabnya mengapa Anda harus menjalankan langkah-langkah ini setelah Anda membuka solusi yang ada dari lab ini.

  3. Buka file Index.cshtml yang terletak di folder Views/Home .

  4. Ganti kode HTML dalam elemen div dengan isi id sehingga terlihat seperti kode berikut.

    <div id="body">
    <ul id="contacts"></ul>
</div>

  5. Tambahkan kode Javascript berikut di bagian bawah file untuk melakukan permintaan HTTP ke API Web.

    @section scripts{
<script type="text/javascript">
$(function()
{
        $.getJSON('/api/contact', function(contactsJsonPayload)
        {
            $(contactsJsonPayload).each(function(i, item)
            {
                $('#contacts').append('<li>' + item.Name + '</li>');
            });
        });
});
</script>
}

  6. Buka file ContactController.cs jika belum dibuka.

  7. Tempatkan titik henti pada metode Dapatkan kelas ContactController .

    Menempatkan titik henti pada metode Get pengontrol API

    Menempatkan titik henti pada metode Get pengontrol API

  8. Tekan F5 untuk menjalankan proyek. Browser akan memuat dokumen HTML.

    Catatan

    Pastikan Anda menjelajah ke URL akar aplikasi Anda.

  9. Setelah halaman dimuat dan JavaScript dijalankan, titik henti akan terpukul dan eksekusi kode akan dijeda di pengontrol.

    Men-debug ke panggilan API Web menggunakan VS Express untuk

    Penelusuran kesalahan ke panggilan API Web menggunakan Visual Studio 2012 Express for Web

  10. Hapus titik henti dan tekan F5 atau tombol Lanjutkan toolbar penelusuran kesalahan untuk terus memuat tampilan di browser. Setelah panggilan API Web selesai, Anda akan melihat kontak yang dikembalikan dari panggilan API Web ditampilkan sebagai item daftar di browser.

    Hasil panggilan API ditampilkan di browser sebagai item daftar

    Hasil panggilan API ditampilkan di browser sebagai item daftar

  11. Hentikan penelusuran kesalahan.

Tugas 2 - Memodifikasi Tampilan Indeks untuk Menyediakan GUI untuk Membuat Kontak

Dalam tugas ini, Anda akan terus mengubah tampilan Indeks aplikasi MVC. Formulir akan ditambahkan ke halaman HTML yang akan mengambil input pengguna dan mengirimkannya ke API Web untuk membuat Kontak baru, dan metode pengontrol API Web baru akan dibuat untuk mengumpulkan tanggal dari GUI.

  1. Buka file ContactController.cs .

  2. Tambahkan metode baru ke kelas pengontrol bernama Post seperti yang ditunjukkan dalam kode berikut.

    (Cuplikan Kode - Lab API Web - Ex03 - Metode Pos)

    public HttpResponseMessage Post(Contact contact)
{
    this.contactRepository.SaveContact(contact);

    var response = Request.CreateResponse<Contact>(System.Net.HttpStatusCode.Created, contact);

    return response;
}

  3. Buka file Index.cshtml di Visual Studio jika belum dibuka.

  4. Tambahkan kode HTML di bawah ini ke file tepat setelah daftar yang tidak diurutkan yang Anda tambahkan di tugas sebelumnya.

    <form id="saveContactForm" method="post">
<h3>Create a new Contact</h3>
<p>
    <label for="contactId">Contact Id:</label>
    <input type="text" name="Id" />
</p>
<p>
    <label for="contactName">Contact Name:</label>
    <input type="text" name="Name" />
</p>
<input type="button" id="saveContact" value="Save" />
</form>

  5. Dalam elemen skrip di bagian bawah dokumen, tambahkan kode yang disorot berikut untuk menangani peristiwa klik tombol, yang akan memposting data ke API Web menggunakan panggilan HTTP POST.

    <script type="text/javascript">
... 
$('#saveContact').click(function()
         {
              $.post("api/contact",
                    $("#saveContactForm").serialize(),
                    function(value)
                    {
                         $('#contacts').append('<li>' + value.Name + '</li>');
                    },
                    "json"
              );
         });
</script>

  6. Di ContactController.cs, tempatkan titik henti pada metode Post .

  7. Tekan F5 untuk menjalankan aplikasi di browser.

  8. Setelah halaman dimuat di browser, ketik nama kontak dan Id baru dan klik tombol Simpan .

    Dokumen HTML klien dimuat di browser

    Dokumen HTML klien dimuat di browser

  9. Saat jendela debugger berhenti dalam metode Post , lihat properti parameter kontak . Nilai harus cocok dengan data yang Anda masukkan dalam formulir.

    Objek Kontak dikirim ke API Web dari klien

    Objek Kontak dikirim ke API Web dari klien

  10. Langkah melalui metode dalam debugger sampai variabel respons telah dibuat. Setelah inspeksi di jendela Lokal di debugger, Anda akan melihat bahwa semua properti telah diatur.

Respons berikut dibuat di debugger

Respons berikut dibuat di debugger 11. Jika Anda menekan F5 atau mengklik Lanjutkan di debugger, permintaan akan selesai. Setelah Anda beralih kembali ke browser, kontak baru telah ditambahkan ke daftar kontak yang disimpan oleh implementasi ContactRepository .

Browser mencerminkan keberhasilan pembuatan instans kontak baru

Browser mencerminkan keberhasilan pembuatan instans kontak baru

Catatan

Selain itu, Anda dapat menyebarkan aplikasi ini ke Lampiran C berikut Azure : Menerbitkan Aplikasi MVC 4 ASP.NET menggunakan Web Deploy.

Ringkasan

Lab ini telah memperkenalkan Anda ke kerangka ASP.NET Web API baru dan implementasi API Web RESTful menggunakan kerangka kerja. Dari sini, Anda dapat membuat repositori baru yang memfasilitasi persistensi data menggunakan sejumlah mekanisme dan kawat layanan tersebut daripada yang sederhana yang disediakan sebagai contoh di lab ini. WEB API mendukung sejumlah fitur tambahan, seperti mengaktifkan komunikasi dari klien non-HTML yang ditulis dalam bahasa apa pun yang mendukung HTTP dan JSON atau XML. Kemampuan untuk menghosting API Web di luar aplikasi web biasa juga dimungkinkan, serta kemampuan untuk membuat format serialisasi Anda sendiri.

Situs Web ASP.NET memiliki area yang didedikasikan untuk kerangka kerja ASP.NET Web API di [https://asp.net/web-api](https://asp.net/web-api). Situs ini akan terus memberikan informasi, sampel, dan berita yang terlambat terkait api Web, jadi periksa secara sering apakah Anda ingin mempelajari lebih dalam seni membuat API Web kustom yang tersedia untuk hampir semua perangkat atau kerangka kerja pengembangan.

Lampiran A: Menggunakan Cuplikan Kode

Dengan cuplikan kode, Anda memiliki semua kode yang Anda butuhkan di ujung jari Anda. Dokumen lab akan memberi tahu Anda kapan tepatnya Anda bisa menggunakannya, seperti yang ditunjukkan pada gambar berikut.

Menggunakan cuplikan kode Visual Studio untuk menyisipkan kode ke dalam proyek Anda

Menggunakan cuplikan kode Visual Studio untuk menyisipkan kode ke dalam proyek Anda

Untuk menambahkan cuplikan kode menggunakan keyboard (hanya C#)

  1. Tempatkan kursor di mana Anda ingin menyisipkan kode.

  2. Mulai ketik nama cuplikan (tanpa spasi atau tanda hubung).

  3. Tonton saat IntelliSense menampilkan nama cuplikan yang cocok.

  4. Pilih cuplikan yang benar (atau terus ketik hingga seluruh nama cuplikan dipilih).

  5. Tekan tombol Tab dua kali untuk menyisipkan cuplikan di lokasi kursor.

    Mulai ketik nama cuplikan

    Mulai ketik nama cuplikan

    Tekan Tab untuk memilih cuplikan yang disorot

    Tekan Tab untuk memilih cuplikan yang disorot

    Tekan Tab lagi dan cuplikan akan memperluas

    Tekan Tab lagi dan cuplikan akan diperluas

Untuk menambahkan cuplikan kode menggunakan mouse (C#, Visual Basic dan XML)

  1. Klik kanan tempat Anda ingin menyisipkan cuplikan kode.

  2. Pilih Sisipkan Cuplikan diikuti dengan Cuplikan Kode Saya.

  3. Pilih cuplikan yang relevan dari daftar, dengan mengkliknya.

    Klik kanan tempat Anda ingin menyisipkan cuplikan kode dan pilih Sisipkan Cuplikan

    Klik kanan tempat Anda ingin menyisipkan cuplikan kode dan pilih Sisipkan Cuplikan

    Pilih cuplikan yang relevan dari daftar, dengan mengkliknya

    Pilih cuplikan yang relevan dari daftar, dengan mengkliknya

Lampiran B: Menginstal Visual Studio Express 2012 untuk Web

Anda dapat menginstal Microsoft Visual Studio Express 2012 untuk Web atau versi "Ekspres" lainnya menggunakan Alat Penginstal Platform Web Microsoft. Instruksi berikut memandu Anda melalui langkah-langkah yang diperlukan untuk menginstal Visual studio Express 2012 untuk Web menggunakan Alat Penginstal Platform Web Microsoft.

  1. Buka [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). Atau, jika Anda sudah menginstal Penginstal Platform Web, Anda dapat membukanya dan mencari produk "Visual Studio Express 2012 untuk Web dengan Azure SDK".

  2. Klik Instal Sekarang. Jika Anda tidak memiliki Alat Penginstal Platform Web , Anda akan diarahkan untuk mengunduh dan menginstalnya terlebih dahulu.

  3. Setelah Penginstal Platform Web terbuka, klik Instal untuk memulai penyiapan.

    Menginstal Visual Studio Express

    Menginstal Visual Studio Express

  4. Baca semua lisensi dan persyaratan produk dan klik Saya Terima untuk melanjutkan.

    Menerima ketentuan lisensi

    Menerima ketentuan lisensi

  5. Tunggu hingga proses pengunduhan dan penginstalan selesai.

    Kemajuan penginstalan

    Kemajuan penginstalan

  6. Setelah penginstalan selesai, klik Selesai.

    Penginstalan selesai

    Penginstalan selesai

  7. Klik Keluar untuk menutup Alat Penginstal Platform Web.

  8. Untuk membuka Visual Studio Express for Web, buka layar Mulai dan mulai menulis "VS Express", lalu klik petak VS Express for Web .

    Petak PETA VS Express for Web

    Petak PETA VS Express for Web

Lampiran C: Menerbitkan Aplikasi MVC 4 ASP.NET menggunakan Web Deploy

Lampiran ini akan menunjukkan kepada Anda cara membuat situs web baru dari Portal Microsoft Azure dan menerbitkan aplikasi yang Anda peroleh dengan mengikuti lab, memanfaatkan fitur penerbitan Web Deploy yang disediakan oleh Azure.

Tugas 1 - Membuat Situs Web Baru dari Portal Microsoft Azure

  1. Buka Portal Manajemen Azure dan masuk menggunakan kredensial Microsoft yang terkait dengan langganan Anda.

    Catatan

    Dengan Azure, Anda dapat menghosting 10 ASP.NET Web Sites secara gratis lalu menskalakan seiring pertumbuhan lalu lintas Anda. Anda dapat mendaftar di sini.

    Masuk ke Windows portal Azure

    Masuk ke Portal

  2. Klik Baru pada bilah perintah.

    Membuat Situs Web baru

    Membuat Situs Web baru

  3. KlikSitus WebKomputasi | . Lalu pilih opsi Buat Cepat . Sediakan URL yang tersedia untuk situs web baru dan klik Buat Situs Web.

    Catatan

    Azure adalah host untuk aplikasi web yang berjalan di cloud yang dapat Anda kontrol dan kelola. Opsi Buat Cepat memungkinkan Anda menyebarkan aplikasi web yang telah selesai ke Azure dari luar portal. Ini tidak termasuk langkah-langkah untuk menyiapkan database.

    Membuat Situs Web baru menggunakan Buat Cepat

    Membuat Situs Web baru menggunakan Buat Cepat

  4. Tunggu hingga Situs Web baru dibuat.

  5. Setelah Situs Web dibuat, klik tautan di bawah kolom URL . Periksa apakah Situs Web baru berfungsi.

    Menjelajah ke situs web baru

    Menjelajah ke situs web baru

    Situs web yang menjalankan

    Situs web berjalan

  6. Kembali ke portal dan klik nama situs web di bawah kolom Nama untuk menampilkan halaman manajemen.

    Membuka halaman manajemen situs web

    Membuka halaman manajemen Situs Web

  7. Di halaman Dasbor , di bawah bagian sekilas , klik tautan Unduh profil terbitkan .

    Catatan

    Profil penerbitan berisi semua informasi yang diperlukan untuk menerbitkan aplikasi web ke Azure untuk setiap metode publikasi yang diaktifkan. Profil penerbitan berisi URL, kredensial pengguna, dan string database yang diperlukan untuk menyambungkan dan mengautentikasi terhadap setiap titik akhir yang metode publikasinya diaktifkan. Microsoft WebMatrix 2, Microsoft Visual Studio Express untuk Web dan Microsoft Visual Studio 2012 mendukung pembacaan profil penerbitan untuk mengotomatiskan konfigurasi program ini untuk menerbitkan aplikasi web ke Azure.

    Mengunduh profil penerbitan situs web

    Mengunduh profil penerbitan Situs Web

  8. Unduh file profil publikasi ke lokasi yang diketahui. Selanjutnya dalam latihan ini Anda akan melihat cara menggunakan file ini untuk menerbitkan aplikasi web ke Azure dari Visual Studio.

    Menyimpan file profil publikasi

    Menyimpan file profil penerbitan

Tugas 2 - Mengonfigurasi Server Database

Jika aplikasi Anda menggunakan database SQL Server, Anda harus membuat server SQL Database. Jika Anda ingin menyebarkan aplikasi sederhana yang tidak menggunakan SQL Server Anda mungkin melewati tugas ini.

  1. Anda akan memerlukan server SQL Database untuk menyimpan database aplikasi. Anda dapat melihat server SQL Database dari langganan Anda di portal Manajemen Azure diDasbor | | Server Server Sql Database. Jika Anda tidak memiliki server yang dibuat, Anda dapat membuatnya menggunakan tombol Tambahkan pada bilah perintah. Perhatikan nama server dan URL, nama masuk administrator dan kata sandi, karena Anda akan menggunakannya di tugas berikutnya. Jangan membuat database, karena akan dibuat di tahap selanjutnya.

    Dasbor Server SQL Database

    Dasbor Server SQL Database

  2. Dalam tugas berikutnya Anda akan menguji koneksi database dari Visual Studio, karena alasan itu Anda perlu menyertakan alamat IP lokal Anda dalam daftar Alamat IP yang Diizinkan di server. Untuk melakukannya, klik Konfigurasikan, pilih alamat IP dari Alamat IP Klien Saat Ini dan tempelkan pada kotak teks Alamat IP Mulai dan Alamat IP Akhir dan klik tombol add-client-ip-address-ok-button .

    Menambahkan Alamat IP Klien

    Menambahkan Alamat IP Klien

  3. Setelah Alamat IP Klien ditambahkan ke daftar alamat IP yang diizinkan, klik Simpan untuk mengonfirmasi perubahan.

    Konfirmasi Perubahan

    Konfirmasi Perubahan

Tugas 3 - Menerbitkan Aplikasi ASP.NET MVC 4 menggunakan Web Deploy

  1. Kembali ke solusi ASP.NET MVC 4. Di Penjelajah Solusi, klik kanan proyek situs web dan pilih Terbitkan.

    Menerbitkan Aplikasi

    Menerbitkan situs web

  2. Impor profil penerbitan yang Anda simpan di tugas pertama.

    Mengimpor profil penerbitan

    Mengimpor profil penerbitan

  3. Klik Validasi Koneksi. Setelah Validasi selesai, klik Berikutnya.

    Catatan

    Validasi selesai setelah Anda melihat tanda centang hijau muncul di samping tombol Validasi Koneksi.

    Memvalidasi koneksi

    Memvalidasi koneksi

  4. Di halaman Pengaturan , di bawah bagian Database , klik tombol di samping kotak teks koneksi database Anda (yaitu DefaultConnection).

    Konfigurasi penyebaran web Konfigurasi

    Konfigurasi penyebaran web

  5. Konfigurasikan koneksi database sebagai berikut:

    • Di Nama server ketik URL server SQL Database Anda menggunakan awalan tcp: .

    • Di Nama pengguna ketik nama masuk administrator server Anda.

    • Di Kata Sandi ketik kata sandi masuk administrator server Anda.

    • Ketik nama database baru, misalnya: MVC4SampleDB.

      Mengonfigurasi string koneksi tujuan

      Mengonfigurasi string koneksi tujuan

  6. Lalu klik OK. Ketika diminta untuk membuat database, klik Ya.

    Membuat database

    Membuat database

  7. String koneksi yang akan Anda gunakan untuk menyambungkan ke SQL Database di Windows Azure ditampilkan dalam kotak teks Koneksi Default. Lalu, klik Berikutnya.

    String koneksi menunjuk ke string SQL Database

    String koneksi menunjuk ke SQL Database

  8. Di halaman Pratinjau , klik Terbitkan.

    Menerbitkan aplikasi web

    Menerbitkan aplikasi web

  9. Setelah proses penerbitan selesai, browser default Anda akan membuka situs web yang diterbitkan.

    Aplikasi yang diterbitkan ke Aplikasi Windows Azure

    Aplikasi yang diterbitkan ke Azure