Sebelumnya

Berikutnya

Latihan - Membuat proyek Azure Functions

Selesai

Aplikasi web daftar belanja Anda memerlukan API. Dalam latihan ini, Anda membuat dan menjalankan API menggunakan proyek Azure Functions. Dari sana, Anda memperluas API dengan fungsi baru menggunakan ekstensi Azure Functions untuk Visual Studio Code.

Dalam latihan ini, Anda menyelesaikan langkah-langkah berikut:

1. Buat cabang saat Anda bersiap untuk membuat perubahan pada aplikasi web Anda.
2. Jelajahi proyek Azure Function.
3. Buat fungsi HTTP GET.
4. Ganti kode permulaan fungsi dengan logika untuk mendapatkan produk.
5. Konfigurasikan aplikasi web untuk memproksi permintaan HTTP ke API.
6. Jalankan API dan aplikasi web.

Mendapatkan aplikasi Function

Sekarang, tambahkan API dan sambungkan ke aplikasi front-end Anda. Folder api-starter mencakup proyek Azure Functions yang tidak lengkap. Jadi, mari kita lengkapi itu sekarang.

Membuat cabang API

Sebelum membuat perubahan pada aplikasi, ada baiknya Anda membuat cabang baru untuk perubahan. Anda akan menyelesaikan API untuk aplikasi, jadi sekarang saat yang tepat untuk membuat cabang.

1. Di Visual Studio Code, buka palet perintah dengan menekan F1.

2. Masukkan dan pilih Git: Checkout ke...

3. Pilih Buat cabang baru.

4. Masukkan api untuk nama cabang baru, lalu tekan Enter.

Anda baru saja membuat cabang git api.

Menyelesaikan API Azure Functions

Untuk menyelesaikan API, mulailah dengan memindahkan kode API pemula ke folder bernama api. Anda memasukkan nama folder ini untuk api_location saat membuat instans Static Web Apps.

1. Di Visual Studio Code, buka palet perintah dengan menekan F1.

2. Masuk dan pilih Terminal: Buat Terminal Baru (Di Ruang Kerja Aktif).

3. Pastikan Anda berada di folder root proyek.

4. Jalankan perintah git untuk mengganti nama folder api-starter menjadi api.

   git mv api-starter api
   

5. Buka palet perintah dengan menekan F1.

6. Masuk dan pilih Git: Commit All.

7. Masukkan api pesan penerapan lalu tekan Enter.

Sekarang, Anda akan melihat folder api di penjelajah Visual Studio Code. Proyek Api berisi proyek Azure Functions Anda, beserta tiga fungsi.

Folder dan file	Metode	Rute
api/products-post	POST	products
api/products-post	TARUH	products/:id
api/products-post	DELETE	products/:id

Membuat fungsi HTTP GET

API Anda memiliki rute guna memanipulasi produk untuk daftar belanja, tetapi tidak memiliki rute untuk mendapatkan produk. Mari kita tambahkan itu sekarang.

Menginstal ekstensi Azure Functions untuk Visual Studio Code

Anda dapat membuat dan mengelola aplikasi Azure Functions dengan menggunakan ekstensi Azure Functions untuk Visual Studio Code.

1. Buka Visual Studio Marketplace dan instal ekstensi Azure Functions untuk Visual Studio Code.

2. Saat tab ekstensi dimuat di Visual Studio Code, pilih Instal.

3. Setelah penginstalan selesai, pilih Isi Ulang.

Catatan

Pastikan untuk menginstal Azure Functions Core Tools, yang memungkinkan Anda menjalankan Azure Functions secara lokal.

Membuat fungsi

Sekarang Anda memperluas aplikasi Azure Function dengan fungsi untuk mendapatkan produk Anda.

1. Di Visual Studio Code, buka palet perintah dengan menekan F1.

2. Masukkan dan pilih Azure Functions: Buat Fungsi.

3. Saat diminta untuk membuat fungsi, pilih Pemicu HTTP.

4. Masukkan products-get sebagai nama fungsi.

5. Pilih Anonim sebagai tingkat autentikasi.

Catatan

Aplikasi Functions berada di folder api, yang memisahkannya dari masing-masing proyek aplikasi web. Semua aplikasi web yang menggunakan kerangka kerja front-end melakukan panggilan ke API yang sama. Anda dapat memutuskan cara menyusun aplikasi, tetapi untuk contoh ini akan membantu jika melihatnya terpisah.

Mengonfigurasi Metode HTTP dan titik akhir rute

Perhatikan bahwa folder api/products-get berisi file function.json. File ini berisi konfigurasi untuk fungsi Anda.

Titik akhir rute memiliki nama yang sama dengan folder yang berisi fungsi, menurut konvensi. Karena fungsi ini dibuat di folder products-get, endpoint rute dibuat sebagai products-get, secara default. Namun, Anda ingin titik akhir menjadi products.

Mengonfigurasikan fungsi Anda:

1. Buka file api/products-get/function.json.

2. Perhatikan bahwa metode mengizinkan GET dan POST.

3. Ubah array metode menjadi hanya mengizinkan permintaan GET.

4. Tambahkan entri "route": "products" setelah array metode.

Sekarang fungsi Anda dipicu pada permintaan GET HTTP ke produk. Fitur function.json Anda akan terlihat seperti kode berikut:

{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": ["get"],
      "route": "products"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ]
}

Memperbarui logika fungsi

File index.js di folder api/products-get berisi logika yang berjalan ketika Anda membuat permintaan HTTP ke rute.

Anda perlu memperbarui logika untuk mendapatkan produk Anda. Ada logika akses data di modul JavaScript /shared/product-data.js. product-dataModul ini memaparkan fungsigetProducts guna mendapatkan produk untuk daftar belanja.

Sekarang, ubah titik akhir fungsi untuk menampilkan produk:

1. Buka file api/products-get/index.js.

2. Ganti kontennya dengan kode berikut:

   const data = require('../shared/product-data');
   
   module.exports = async function (context, req) {
     try {
       const products = data.getProducts();
       context.res.status(200).json(products);
     } catch (error) {
       context.res.status(500).send(error);
     }
   };
   

Fungsi Anda mendapatkan produk dan mengembalikannya dengan kode status 200, jika berhasil.

Mengonfigurasi Berbagi Sumber Daya Lintas Asal (CORS) secara lokal

Anda tidak perlu khawatir tentang CORS saat menerbitkan ke Azure Static Web Apps. Azure Static Web Apps otomatis mengonfigurasi aplikasi Anda sehingga dapat berkomunikasi dengan API di Azure menggunakan proksi terbalik. Tetapi saat berjalan secara lokal, Anda perlu mengonfigurasi CORS untuk memungkinkan aplikasi web dan API berkomunikasi.

Sekarang, beri tahu Azure Functions agar mengizinkan aplikasi web Anda membuat permintaan HTTP ke API, di komputer.

1. Buat file bernama api/local.settings.json.

2. Tambahkan konten berikut ke file:

   {
     "Host": {
       "CORS": "http://localhost:4200"
     }
   }
   

   {
     "Host": {
       "CORS": "http://localhost:3000"
     }
   }
   

   {
     "Host": {
       "CORS": "http://localhost:5000"
     }
   }
   

   {
     "Host": {
       "CORS": "http://localhost:8080"
     }
   }
   

Catatan

File local.settings.json yang ada tercantum dalam file .gitignore, yang mencegah file ini didorong ke GitHub. Ini karena Anda dapat menyimpan rahasia yang tidak Anda inginkan di GitHub dalam file ini. Inilah alasan Anda harus membuat file saat membuat repo dari templat.

Menjalankan API

Sekarang saatnya untuk melihat aplikasi web Anda dan proyek Azure Functions bekerja sama. Mulailah dengan menjalankan proyek Azure Functions secara lokal dengan mengikuti langkah berikut:

Catatan

Pastikan untuk menginstal Azure Functions Core Tools, yang memungkinkan Anda menjalankan Azure Functions secara lokal.

1. Buka terminal git dan buka folder api :

   cd api
   

2. Jalankan aplikasi Azure Functions secara lokal:

   npm install
   

   npm start
   

Jalankan aplikasi web

API Anda sedang berjalan. Sekarang Anda perlu mengonfigurasi aplikasi front-end untuk membuat permintaan HTTP-nya ke API Anda. Aplikasi front-end berjalan pada satu port, dan API berjalan pada port yang berbeda (7071). Setiap kerangka kerja front-end dapat dikonfigurasi untuk memproksi permintaan HTTP ke port dengan aman.

Mengonfigurasi port proksi Anda

Konfigurasikan proksi untuk aplikasi front-end dengan langkah berikut:

1. Buka file angular-app/proxy.conf.json.

2. Cari pengaturan target: 'http://localhost:7071'.

3. Perhatikan bahwa port target menunjuk ke 7071.

1. Buka file react-app/package.json.

2. Cari pengaturan "proxy": "http://localhost:7071/",.

3. Perhatikan bahwa port proksi menunjuk ke 7071.

1. Buka file svelte-app/rollup.config.js.

2. Cari baris kode const api = 'http://localhost:7071/api';.

3. Perhatikan bahwa port API menunjuk ke 7071.

1. Buka file vue-app/vue.config.js.

2. Cari pengaturan target: 'http://localhost:7071',.

3. Perhatikan bahwa port target menunjuk ke 7071.

Jalankan aplikasi web front-end Anda

API Anda sudah berjalan pada port 7071. Sekarang, saat Anda menjalankan aplikasi web, aplikasi web tersebut membuat permintaan HTTP-nya ke API Anda. Jalankan aplikasi web Anda dengan mengikuti langkah berikut:

1. Buka instans terminal git kedua.

2. Selanjutnya, masukkan perintah ini untuk masuk ke folder kerangka kerja front-end pilihan Anda:

   cd angular-app
   

   cd react-app
   

   cd svelte-app
   

   cd vue-app
   

3. Jalankan aplikasi klien front-end:

   npm start
   

   npm start
   

   npm run dev
   

   npm run serve
   

Telusuri aplikasi Anda

Saatnya melihat aplikasi Anda berjalan secara lokal terhadap API Azure Functions.

1. Telusuri http://localhost:4200.

1. Telusuri http://localhost:3000.

1. Telusuri http://localhost:5000.

1. Telusuri http://localhost:8080.

2. Anda membangun aplikasi Anda, dan sekarang berjalan secara lokal membuat permintaan HTTP GET ke API Anda. Sekarang, hentikan aplikasi dan API yang berjalan dengan menekan Ctrl-C di terminal.

Langkah berikutnya

Aplikasi Anda berfungsi secara lokal, dan langkah Anda selanjutnya adalah menerbitkan aplikasi dengan API.

Lanjutkan