Latihan - Menyiapkan proyek

  • 8 menit

Anda adalah pengembang baru di Tailwind Traders. Sebelum dapat memulai, Anda harus mengonfigurasi lingkungan pengembangan Anda. Jangan khawatir, Tailwind Traders telah membuat proses onboarding menjadi mudah. Hanya ada beberapa langkah kecil yang perlu Anda ikuti untuk bangun dan berjalan.

Membuat scaffold sumber daya proyek

  1. Aktifkan kotak pasir dan masuk ke Azure Cloud Shell (juga dikenal sebagai Lingkungan Produksi Tailwind Traders) seperti yang ditunjukkan di bagian atas halaman ini.

  2. Salin baris berikut dan tempelkan ke terminal Azure Cloud Shell di sebelah kanan.

    git clone https://github.com/MicrosoftDocs/mslearn-build-api-azure-functions && ./mslearn-build-api-azure-functions/DB_SETUP/CREATE_DATABASE.sh

    Perintah ini membuat database baru dengan data produk. Proses ini dapat memakan waktu hingga 10 menit. Jangan ragu untuk melanjutkan modul. Proses terus berjalan meskipun Anda meninggalkan halaman ini.

Mengkloning proyek di Visual Studio Code

  1. Buka Visual Studio Code.

  2. Di bilah menu atas, pilih Lihat>Palet Perintah.

  3. Di perintah, masukkan Kloning.

  4. Di Palet Perintah, pilih Git: Klon.

  5. Masukkan URL repositori berikut:

    https://github.com/MicrosoftDocs/mslearn-build-api-azure-functions

  6. Pilih folder di drive lokal tempat Anda ingin proyek dikloning.

  7. Saat diminta untuk membuka repositori yang dikloning, pilih Buka.

  8. Visual Studio Code mendeteksi file ruang kerja dalam proyek ini, dan menanyakan apakah Anda ingin membukanya. Pilih Buka Ruang Kerja.

    Cuplikan layar permintaan pemberitahuan Visual Studio Code untuk membuka ruang kerja.

Saat ruang kerja terbuka, dua proyek muncul di Visual Studio Code: frontend dan api. Proyek "frontend" berisi aplikasi web. Proyek ini api adalah tempat Anda membangun API tanpa server dengan Azure Functions.

Jalankan proyek front-end

  1. Untuk membuka terminal terintegrasi di Visual Studio Code, tekan Ctrl + Shift + `.

  2. Pilih frontend.

  3. Untuk menjalankan proyek front-end di browser, di terminal terintegrasi, jalankan npm start perintah .

    npm start

    Server web kecil yang disebut melayani berjalan di jendela terminal Visual Studio Code. Ini menampilkan URL tempat aplikasi front-end berjalan.

    Cuplikan layar terminal Visual Studio Code dengan callout yang menyoroti url dan port aplikasi yang sedang berjalan.

  4. Untuk membuka aplikasi di browser, pilih URL tersebut di jendela terminal.

    Aplikasi dimuat, tetapi tidak ada data yang ada karena Anda belum membuat API untuk aplikasi ini.

    Cuplikan layar aplikasi yang berjalan di browser. Tidak ada data yang ditampilkan dan pesan kesalahan yang menjelaskan bahwa operasi get gagal.

Bagus! Anda berhasil mengonfigurasi lingkungan Anda untuk menjadi pengembang produktif di Tailwind Traders. Itu berarti bahwa sudah waktunya untuk membuat proyek Azure Functions yang akan berfungsi sebagai API untuk aplikasi Pengelola Produk.