Cara menggunakan perintah javascript

Lompati ke konten utama

Browser ini sudah tidak didukung.

Mutakhirkan ke Microsoft Edge untuk memanfaatkan fitur, pembaruan keamanan, dan dukungan teknis terkini.

Mulai cepat: Membuat fungsi JavaScript di Azure menggunakan Visual Studio Code

  • Artikel
  • 09/12/2022
  • 7 menit untuk membaca

Dalam artikel ini

  • C#
  • Java
  • JavaScript
  • PowerShell
  • Python
  • TypeScript
  • Lainnya (Go/Rush)

Gunakan Visual Studio Code untuk membuat fungsi JavaScript yang merespons permintaan HTTP. Uji kode secara lokal, lalu sebarkan ke lingkungan tanpa server Azure Functions.

Menyelesaikan mulai cepat ini dikenakan sedikit biaya sekitar beberapa sen USD atau kurang di akun Azure Anda.

Ada juga versi berbasis CLI dari artikel ini.

Konfigurasikan lingkungan Anda

Sebelum memulai, pastikan Anda memiliki persyaratan berikut:

  • Akun Azure dengan langganan aktif. Buat akun gratis.

  • Node.js 16.x atau Node.js 18.x (pratinjau). Gunakan perintah node --version untuk memeriksa versi Anda.

  • Visual Studio Code pada salah satu platform yang didukung.

  • Ekstensi Azure Functions untuk Visual Studio Code.

  • Alat Azure Functions Core 4.x.

Membuat proyek lokal Anda

Di bagian ini, gunakan Visual Studio Code untuk membuat proyek Azure Functions lokal dalam JavaScript. Nantinya di artikel ini, Anda akan menerbitkan kode fungsi ke Azure.

  1. Pilih ikon Azure di bilah Aktivitas. Lalu di area Ruang Kerja (lokal), klik tombol +, pilih Buat Fungsi di dropdown. Saat diminta, pilih Buat proyek baru.

    Cara menggunakan perintah javascript

  2. Pilih lokasi direktori untuk ruang kerja proyek Anda dan klik Pilih. Anda harus membuat folder baru atau memilih folder kosong untuk ruang kerja proyek. Jangan memilih folder proyek yang merupakan bagian dari ruang kerja.

  3. Berikan informasi berikut saat diminta:

    PerintahPilihan
    Pilih bahasa pemrogram untuk proyek fungsi Anda Pilih JavaScript.
    Pilih templat untuk fungsi pertama proyek Anda Pilih HTTP trigger.
    Menyediakan nama fungsi Ketik HttpExample.
    Tingkat otorisasi Pilih Anonymous, yang memungkinkan siapa saja untuk memanggil titik akhir fungsi Anda. Untuk mempelajari tentang tingkat otorisasi, lihat Kunci otorisasi.
    Pilih bagaimana Anda ingin membuka proyek Anda Pilih Add to workspace.

    Dengan menggunakan informasi ini, Visual Studio Code menghasilkan proyek Azure Functions dengan pemicu HTTP. Anda bisa melihat file proyek lokal di Explorer. Untuk mempelajari selengkapnya tentang file yang dibuat, lihat File proyek yang dihasilkan.

Menjalankan fungsi secara lokal

Visual Studio Code terintegrasi dengan alat Azure Functions Core untuk memungkinkan Anda menjalankan proyek ini di komputer pengembangan lokal sebelum Anda menerbitkan ke Azure.

  1. Untuk memulai fungsi secara lokal, tekan F5 atau ikon putar. Panel Terminal menampilkan Output dari Core Tools. Aplikasi Anda dimulai di panel Terminal. Anda dapat melihat titik akhir URL dari fungsi yang dipicu HTTP berjalan secara lokal.

    Cara menggunakan perintah javascript

    Jika Anda mengalami masalah saat menjalankan fungsi di Windows, pastikan bahwa terminal default untuk Visual Studio Code tidak diatur ke WSL Bash.

  2. Dengan Core Tools yang masih berjalan di Terminal, pilih ikon Azure di bilah aktivitas. Di area Ruang Kerja, luaskan Proyek Lokal>Functions. Klik kanan (Windows) atau Ctrl -klik (macOS) fungsi HttpExample dan pilih Jalankan Fungsi Sekarang... .

    Cara menggunakan perintah javascript

  3. Di Masukkan isi permintaan Anda akan melihat nilai isi pesan permintaan, yaitu { "name": "Azure" }. Tekan Enter untuk mengirim pesan permintaan ini ke fungsi Anda.

  4. Saat fungsi dijalankan secara lokal dan mengembalikan respons, pemberitahuan akan dimunculkan dalam Visual Studio Code. Informasi tentang eksekusi fungsi ditampilkan di panel Terminal.

  5. Dengan panel Terminal terfokus, tekan Ctrl + C untuk menghentikan Core Tools dan memutuskan sambungan debugger.

Setelah memverifikasi bahwa fungsinya berjalan dengan benar di komputer lokal Anda, saatnya menggunakan Visual Studio Code untuk menerbitkan proyek langsung ke Azure.

Masuk ke Azure

Sebelum dapat memublikasikan aplikasi, Anda harus masuk ke Azure.

  1. Jika Anda belum masuk, pilih ikon Azure di bilah Aktivitas. Lalu, di area Sumber Daya, pilih Masuk ke Azure...

    Cara menggunakan perintah javascript

    Jika Anda sudah masuk dan dapat melihat langganan yang ada, buka bagian berikutnya. Jika Anda belum memiliki akun Azure, pilih Buat Akun Azure.... Siswa dapat memilih Buat Akun Azure untuk Siswa....

  2. Saat diminta di browser, pilih akun Azure Anda dan masuk menggunakan kredensial akun Azure Anda. Jika membuat akun baru, Anda dapat masuk setelah akun berhasil dibuat.

  3. Setelah berhasil masuk, Anda dapat menutup jendela browser baru. Langganan milik akun Azure Anda ditampilkan di bilah sisi.

Membuat aplikasi fungsi di Azure

Di bagian ini, Anda membuat aplikasi fungsi dan sumber daya terkait di langganan Azure Anda.

  1. Pilih ikon Azure di bilah Aktivitas. Lalu, di area Sumber Daya, pilih ikon + dan pilih opsi Buat Aplikasi Fungsi di Azure.

    Cara menggunakan perintah javascript

  2. Berikan informasi berikut saat diminta:

    PerintahPilihan
    Pilih langganan Pilih langganan yang akan digunakan. Anda tidak akan melihat permintaan ini jika Anda hanya memiliki satu langganan yang terlihat di bawah Sumber Daya.
    Masukkan nama unik global untuk aplikasi fungsi Ketik nama yang valid di jalur URL. Nama yang Anda ketik akan divalidasi untuk memastikan bahwa nama tersebut unik di Azure Functions.
    Pilih tumpukan runtime Pilih versi bahasa pemrogram yang telah Anda jalankan secara lokal.
    Pilih lokasi untuk sumber daya baru Pilih wilayah yang lebih dekat dengan Anda untuk kinerja yang lebih baik.

    Ekstensi tersebut menampilkan status sumber daya individual saat dibuat di Azure pada panel Azure: Log Aktivitas.

    Cara menggunakan perintah javascript

  3. Setelah pembuatan selesai, sumber daya Azure berikut dibuat di langganan Anda. Sumber daya tersebut dinamai berdasarkan nama aplikasi fungsi Anda:

    • Grup sumber daya, merupakan kontainer logis untuk sumber daya terkait.
    • Akun Azure Storage standar, memelihara status dan informasi lain tentang proyek Anda.
    • Aplikasi fungsi, yang menyediakan lingkungan untuk menjalankan kode fungsi Anda. Aplikasi fungsi memungkinkan Anda mengelompokkan fungsi sebagai unit logis untuk memudahkan pengelolaan, penerapan, dan berbagi sumber daya dalam paket hosting yang sama.
    • Paket App Service, menentukan host yang mendasari aplikasi fungsi Anda.
    • Instans Application Insights tersambung ke aplikasi fungsi, yang melacak penggunaan fungsi Anda di aplikasi.

    Notifikasi ditampilkan setelah aplikasi fungsi Anda dibuat dan paket penyebaran diterapkan.

    Tip

    Secara default, sumber daya Azure yang diperlukan oleh aplikasi fungsi Anda dibuat berdasarkan nama aplikasi fungsi yang Anda berikan. Secara default, sumber daya ini juga dibuat di grup sumber daya baru yang sama dengan aplikasi fungsi. Jika ingin menyesuaikan nama sumber daya ini atau menggunakan kembali sumber daya yang sudah ada, Anda harus menerbitkan proyek dengan opsi pembuatan lanjutan.

Menyebarkan proyek ke Azure

Penting

Penyebaran ke aplikasi fungsi yang ada selalu menimpa konten aplikasi tersebut di Azure.

  1. Pilih ikon Azure di bilah Aktivitas, lalu di area Ruang Kerja, pilih folder proyek Anda dan pilih tombol Sebarkan....

    Cara menggunakan perintah javascript

  2. Pilih Menyebarkan ke Aplikasi Fungsi..., pilih aplikasi fungsi yang baru saja Anda buat, dan pilih Sebarkan.

  3. Setelah penyebaran selesai, pilih Tampilkan Output untuk melihat hasil pembuatan dan penyebaran, termasuk sumber daya Azure yang Anda buat. Jika melewatkan pemberitahuan, pilih ikon bel di sudut kanan bawah untuk melihatnya lagi.

    Cara menggunakan perintah javascript

Menjalankan fungsi di Azure

  1. Kembali di area Sumber Daya di bilah sisi, perluas langganan, aplikasi fungsi baru, dan Functions Anda. Klik kanan (Windows) atau Ctrl -klik (macOS) fungsi HttpExample dan pilih Jalankan Fungsi Sekarang... .

    Cara menggunakan perintah javascript

  2. Di Masukkan isi permintaan Anda akan melihat nilai isi pesan permintaan, yaitu { "name": "Azure" }. Tekan Enter untuk mengirim pesan permintaan ini ke fungsi Anda.

  3. Saat fungsi dijalankan di Azure dan mengembalikan respons, pemberitahuan akan dimunculkan dalam Visual Studio Code.

Mengubah kode dan sebarkan ulang ke Azure

  1. Di Visual Studio Code dalam tampilan Explorer, pilih file ./HttpExample/index.js.

  2. Ganti file dengan kode berikut untuk membuat objek JSON dan mengembalikannya.

    module.exports = async function (context, req) {
    
        try {
            context.log('JavaScript HTTP trigger function processed a request.');
    
            // Read incoming data
            const name = (req.query.name || (req.body && req.body.name));
            const sport = (req.query.sport || (req.body && req.body.sport));
    
            // fail if incoming data is required
            if (!name || !sport) {
    
                context.res = {
                    status: 400
                };
                return;
            }
    
            // Add or change code here
            const message = `${name} likes ${sport}`;
    
            // Construct response
            const responseJSON = {
                "name": name,
                "sport": sport,
                "message": message,
                "success": true
            }
    
            context.res = {
                // status: 200, /* Defaults to 200 */
                body: responseJSON,
                contentType: 'application/json'
            };
        } catch(err) {
            context.res = {
                status: 500
            };
        }
    }
    
  3. Jalankan ulang aplikasi fungsi secara lokal.

  4. Di prompt, Masukkan isi permintaan ubah isi pesan permintaan menjadi { "name": "Tom","sport":"basketball" }. Tekan Masukkan untuk mengirim pesan permintaan ini ke fungsi Anda.

  5. Lihat respons di pemberitahuan:

    {
      "name": "Tom",
      "sport": "basketball",
      "message": "Tom likes basketball",
      "success": true
    }
    
  6. Menyebarkan ulang fungsi ke Azure.

Pemecahan Masalah

Gunakan tabel di bawah untuk mengatasi masalah paling umum saat menggunakan mulai cepat ini.

MasalahSolusi
Tidak dapat membuat proyek fungsi? Pastikan Anda telah memasang ekstensi Azure Functions.
Tidak dapat menjalankan fungsi secara lokal? Pastikan Anda telah memasang Azure Functions Core Tools.
Saat menjalankan fungsi di Windows, pastikan bahwa shell terminal default untuk Visual Studio Code tidak diatur ke WSL Bash.
Tidak dapat menyebarkan fungsi ke Azure? Tinjau Output untuk informasi kesalahan. Ikon bel di sudut kanan bawah adalah cara lain untuk melihat output. Apakah Anda menerbitkan ke aplikasi fungsi yang sudah ada? Tindakan itu menimpa konten aplikasi tersebut di Azure.
Tidak dapat menjalankan aplikasi fungsi berbasis cloud? Ingatlah untuk menggunakan untai (karakter) kueri untuk mengirim parameter.

Menghapus sumber daya

Saat melanjutkan ke langkah berikutnya dan menambahkan antrean Azure Storage yang mengikat ke fungsi, Anda harus menyimpan semua sumber daya untuk membangun apa yang telah Anda lakukan.

Jika tidak, Anda dapat menggunakan langkah-langkah berikut untuk menghapus aplikasi fungsi dan sumber daya terkait untuk menghindari timbulnya biaya lebih lanjut.

  1. Di Visual Studio Code, pilih ikon Azure untuk membuka penjelajah Azure.
  2. Di bagian Grup Sumber Daya, temukan grup sumber daya Anda.
  3. Klik kanan grup sumber daya dan pilih Hapus.

Untuk mempelajari selengkapnya tentang biaya Azure Functions, lihat Memperkirakan biaya rencana Konsumsi.

Langkah berikutnya

Anda telah menggunakan Visual Studio Code untuk membuat aplikasi fungsi dengan fungsi sederhana yang dipicu HTTP. Di artikel berikutnya, perluas fungsi tersebut dengan menyambungkan ke Azure Cosmos DB atau Azure Storage. Untuk mempelajari selengkapnya tentang menyambungkan ke layanan Azure lainnya, lihat Menambahkan pengikatan ke fungsi yang sudah ada di Azure Functions. Jika Anda ingin mempelajari selengkapnya tentang keamanan, lihat Mengamankan Azure Functions.

Bagaimana cara menjalankan JavaScript?

Mengaktifkan JavaScript di browser Anda.
Buka Chrome di komputer Anda..
Klik. Setelan..
Klik Keamanan dan Privasi..
Klik Setelan situs..
Klik JavaScript..
Pilih Situs dapat menggunakan JavaScript..

Bagaimana cara yang benar untuk menggunakan file JavaScript di HTML?

Cara membuat JavaScript di HTML secara langsung Anda bisa langsung menambahkan JavaScript di HTML dengan menggunakan tag <script></script> yang mencakup semua kode JS yang Anda tulis. Kode JS yang bisa ditambahkan: di antara tag <head>

Bagaimana cara membuat fungsi di JavaScript?

Berikut ini contoh cara membuat function di javascript dalam bentu pseudo-code..
function namaFungsi(parameter1, parameter2) { // Kode yang ingin dieksekusi } ... .
<html> <head> <script type="text/javascript"> function hitung(p1, p2) { return p1+p2; } console.log(hitung(5,5)); </script> </head> </html>.

JavaScript bisa digunakan untuk apa saja?

Javascript bisa digunakan untuk membuat fitur beragam seperti drag, drop komponen yang semuanya bisa bermanfaat untuk meningkatkan tampilan (interface) dan pengalaman menggunakan web. Selain itu, programmer juga bisa memperluas fungsi halaman web dengan menulis snippet Javascript untuk add-on pihak ketiga, contohnya ...