Mengembangkan aplikasi Node.js dengan bantuan Duet AI

Tutorial ini menunjukkan cara menggunakan Duet AI, kolaborator dengan teknologi AI di Google Cloud, untuk menjelajahi, membuat, memodifikasi, menguji, dan men-deploy contoh aplikasi Node.js.

Untuk langkah-langkah berikut, anggaplah Anda seorang developer Node.js dan ingin menulis aplikasi web sederhana dalam JavaScript yang menggunakan bentuk dasar. Dalam skenario ini, Anda akan menggunakan framework Ekspres untuk aplikasi dan template EJS untuk formulir HTML.

Panduan ini ditujukan bagi developer Node.js yang ingin menggunakan Duet AI untuk mempercepat proses pengembangan. Anda dianggap telah memahami konsep-konsep dasar cloud, meskipun belum tentu Google Cloud.

Tujuan

Tutorial ini membantu Anda mempelajari cara menggunakan Duet AI untuk melakukan hal-hal berikut:

  • Mengembangkan aplikasi web Node.js di Cloud Shell.
  • Membuat pengujian unit untuk aplikasi web Node.js Anda.
  • Deploy aplikasi web Node.js Anda ke Cloud Run.

Produk Google Cloud yang digunakan

Tutorial ini menggunakan produk Google Cloud berikut:

  • Duet AI: Kolaborator yang selalu aktif di Google Cloud yang menawarkan bantuan dengan teknologi AI generatif untuk berbagai pengguna, termasuk developer dan data scientist. Untuk memberikan pengalaman bantuan terintegrasi, Duet AI disematkan di banyak produk Google Cloud.
  • Plugin Cloud Code untuk Cloud Shell: Ekstensi plugin IDE yang menyediakan dukungan siklus pengembangan untuk aplikasi yang akan berjalan di Google Cloud.
  • Cloud Run: Layanan terkelola sepenuhnya yang memungkinkan Anda membangun dan men-deploy aplikasi dalam container. Google Cloud menangani tugas penskalaan dan infrastruktur lainnya, sehingga Anda dapat berfokus pada logika bisnis kode Anda. Untuk mengetahui informasi harga, lihat halaman harga Cloud Run dan gunakan Kalkulator Harga untuk membuat perkiraan biaya berdasarkan penggunaan yang Anda proyeksikan.

Sebelum memulai

  1. Buat project Google Cloud jika Anda belum memiliki project Google Cloud yang dapat digunakan untuk tutorial ini.
  2. Aktifkan Cloud Shell.
  3. Pastikan Duet AI sudah disiapkan untuk akun dan project pengguna Google Cloud Anda.
  4. Aktifkan Duet AI untuk Cloud Shell dengan memilih project yang telah diberi akses ke fitur Duet AI.

Minta Duet AI menghasilkan kode Node.js

Duet AI dapat membantu Anda menghasilkan kode Node.js berdasarkan perintah yang Anda berikan dalam chat dan deskripsi yang Anda tulis dalam komentar kode. Semakin banyak kode yang Anda tulis dan semakin banyak konteks yang Anda berikan ke Duet AI, semakin baik Duet AI dalam membantu Anda mengembangkan aplikasi. Perlu diperhatikan bahwa respons dari Duet AI dapat bervariasi bergantung pada cara Anda mengajukan pertanyaan atau menjelaskan konteksnya, jadi sebaiknya tinjau respons Duet AI sebelum menerima saran selama proses pengembangan.

Sebelum meminta Duet AI untuk membantu membuat kode awal, gunakan Terminal Cloud Shell untuk membuat direktori kosong, lalu tambahkan dua file kosong.

mkdir node-js-with-duet
cd node-js-with-duet
touch app.js test.js

Di Cloud Shell Editor, pilih content_copy Explorer dan buka folder yang baru saja Anda buat di Terminal Cloud Shell.

Menginstal paket

Anda tahu bahwa Anda ingin menginstal paket express dan ejs untuk aplikasi Node.js. Untuk meminta bantuan Duet AI dalam menginstal paket ini, ikuti langkah-langkah berikut:

  1. Pada panel sebelah kiri di Cloud Shell Editor, klik chat_spark Duet AI.

  2. Di panel Duet AI, masukkan perintah seperti:

    What is the command to install express and ejs packages for node.js?

  3. Klik kirim Kirim.

    Duet AI menampilkan respons yang serupa dengan berikut:

    Untuk menginstal paket Express dan ejs untuk Node.js, Anda dapat menggunakan perintah berikut:

    npm install express ejs

  4. Salin perintah yang diberikan oleh Duet AI dan jalankan di Terminal Cloud Shell Anda.

File aplikasi penulis

Setelah menginstal paket, gunakan Duet AI untuk mendapatkan panduan tentang cara menambahkan paket yang diinstal di file app.js Anda.

  1. Buka file app.js Anda di Cloud Shell Editor.

  2. Di chat Duet AI, masukkan perintah seperti:

    How do I add these packages to my app.js file?

    Respons Duet AI akan mirip dengan berikut ini:

    Untuk menambahkan paket ekspres dan ejs ke file app.js, Anda dapat menggunakan kode berikut:

    const express = require('express');
const ejs = require('ejs');

    Ini akan memerlukan paket Express dan ejs serta menyediakannya untuk digunakan di file app.js.

  3. Tambahkan kode yang diberikan oleh Duet AI ke file app.js Anda.

Buat kode dengan komentar

Plugin Cloud Code memiliki fitur yang memungkinkan Duet AI menggunakan komentar file untuk membuat kode. Misalnya, saat menambahkan komentar sebagai placeholder di file, Anda dapat meminta Duet AI untuk membuat kode seperti yang dijelaskan dalam komentar.

Untuk menggunakan fitur ini di file app.js, pastikan Duet AI diaktifkan di Cloud Shell Editor.

  1. Di akhir file, tambahkan placeholder komentar untuk menginisialisasi aplikasi web. Misalnya:

    // Initialize express web app using ejs templating engine

  2. Pindahkan kursor teks Anda ke akhir komentar, lalu tekan Control+Enter (untuk Windows dan Linux) atau Control+Return (untuk MacOS), lalu tekan tab untuk menggunakan kemampuan pembuatan kode Duet AI untuk menghasilkan kode.

    Respons Duet AI akan memiliki dua baris kode di bawah komentar, seperti berikut:

    // Initialize express web app using ejs templating engine

const app = express();
app.set('view engine', 'ejs');

    Jika output pembuatan kode berbeda dari yang Anda harapkan, ubah atau hapus konten tambahan sesuai kebutuhan.

Selanjutnya, tambahkan lebih banyak komentar untuk menghasilkan kemampuan dasar untuk aplikasi web Express Anda.

  1. Buka bagian bawah file app.js, lalu tambahkan komentar berikut:

    // add urlencoded middleware to parse form data

// define the home route

// create a /greeting POST route with a `name` parameter

// create a /greeting route that accepts a name parameter

// start the server on port 8080

  2. Buat kode untuk setiap komentar file, mirip dengan cara Anda membuat kode sebelumnya.

  3. Tinjau kode yang dihasilkan dan tentukan apakah respons Duet akurat sebelum menerima saran.

    Komentar dalam file app.js Anda kini harus disertai dengan kode yang sesuai, mirip dengan yang berikut ini:

    // add urlencoded middleware to parse form data
app.use(express.urlencoded({ extended: true }));

// define the home route
app.get('/', (req, res) => {
  res.render('index');
});

// create a /greeting POST route with a `name` parameter
app.post('/greeting', (req, res) => {
  const name = req.body.name || 'World';
  res.render('greeting', { name });
});

// start the server
const port = process.env.PORT || 8080;
app.listen(port, () => {
  console.log(`App listening on port ${port}`);
  console.log('Press Ctrl+C to quit.');
});

// create a /greeting route that accepts a name parameter
app.get('/greeting/:name', (req, res) => {
  res.render('greeting', { name: req.params.name });
});

Membuat file package.json

Setelah kode dibuat untuk aplikasi dasar Anda, buat dan tambahkan konten ke file package.json.

  1. Buat file package.json di direktori yang sama dengan file app.js Anda.

  2. Di Cloud Shell Editor, pilih chat_spark Duet AI dan masukkan perintah seperti:

    Based on my app.js file, can you create a package.json file?

    Respons Duet AI akan menyarankan skrip awal dan dependensi yang akan ditentukan, dan akan mirip dengan hal berikut:

    Tentu. Berikut adalah file package.json yang dapat Anda gunakan bersama file app.js:

    {
  "name": "my-app",
  "version": "1.0.0",
  "description": "A simple Node.js web app using Express and EJS.",
  "main": "app.js",
  "scripts": {
    "start": "node app.js"
  },

  "dependencies": {
    "express": "^4.17.1",
    "ejs": "^3.1.6"
  }
}

    File package.json ini mencakup informasi berikut:

    Nama aplikasi (my-app)
    Versi aplikasi (1.0.0)
    Deskripsi aplikasi (Aplikasi web Node.js sederhana menggunakan Express dan EJS.)
    File utama aplikasi (app.js)
    Skrip yang dapat dijalankan di aplikasi (mulai)
    Dependensi aplikasi (ekspresi dan ejs)

  3. Salin dan tempel konten yang disediakan oleh Duet AI saja ke dalam file package.json Anda.

Membuat template ejs

Untuk menyelesaikan aplikasi web Anda, buat direktori views untuk template ejs Anda di direktori yang sama dengan file app.js dan package.json Anda.

  1. Di terminal Anda, masukkan perintah berikut:

    mkdir views
touch views/index.ejs views/greeting.ejs

  2. Buka file index.ejs di editor dan tempelkan berikut ini:

    <html>
<body>
    <form action="/greeting" method="post">
    <label for="name">What's your name?</label>
    <input type="text" id="name" name="name" autofocus />
    <button type="submit">Submit</button>
    </form>
</body>
</html>

  3. Buka file greeting.ejs di editor dan tempelkan berikut ini:

    <html>
<body>
    <a href="/">Home</a>
    <p>Hello <%= name %>~</p>
</body>
</html>

Melihat pratinjau aplikasi di browser

Setelah kode aplikasi, template, dan persyaratan selesai, sekarang Anda dapat mengonfirmasi apakah aplikasi Anda berfungsi.

  1. Jalankan perintah berikut untuk menginstal dependensi.

    npm install

  2. Jalankan perintah berikut untuk memulai aplikasi:

    npm start

  3. Pastikan aplikasi berfungsi. Pilih tombol Web Preview yang terletak di kanan atas taskbar Cloud Shell. Kemudian, pilih nomor porta dari menu yang ditampilkan. Cloud Shell akan membuka URL pratinjau di jendela browser baru.

Menulis pengujian unit

Setelah mengonfirmasi bahwa aplikasi Node.js berfungsi, Anda dapat menulis pengujian unit di file test.js sebelum men-deploy aplikasi ke Cloud Run. Pada contoh berikut, Anda akan meminta bantuan Duet AI dalam membuat pengujian unit jika kode respons HTTP 200.

  1. Di bagian bawah file app.js, tambahkan baris berikut untuk mengekspor file aplikasi Anda.

    module.exports = app;

  2. Buka file test.js.

  3. Untuk menguji kapan respons menampilkan kode status HTTP 200, buka panel chat Duet AI, lalu masukkan perintah seperti:

    Can you generate a unit test for my home route in app.js to assert that the response code is 200?

    Duet AI akan merespons dengan sesuatu yang mirip dengan berikut:

    Tentu. Berikut adalah pengujian unit untuk rute beranda di app.js yang memastikan kode responsnya adalah 200:

    const assert = require('assert');
const request = require('supertest');

const app = require('./app.js');
describe('GET /', () => {
  it('should return a 200 response code', async () => {
    const response = await request(app).get('/');
    assert.equal(response.status, 200);
  });
});

    Pengujian ini memeriksa apakah rute asal menampilkan kode status 200.

    Tambahkan blok kode yang disarankan ke file test.js Anda.

  4. Instal paket uji mocha dan supertest dengan menjalankan perintah berikut di terminal Anda:

    npm i mocha supertest

  5. Update file package.json untuk menyertakan skrip pengujian baru dan paketnya. Contoh:

    {
  "name": "my-app",
  "version": "1.0.0",
  "description": "A simple Node.js web app using Express and EJS.",
  "main": "app.js",
  "scripts": {
    "start": "node app.js",
    "test": "mocha"
  },
  "dependencies": {
  "express": "^4.17.1",
  "ejs": "^3.1.6",
  "mocha": "^10.2.0",
  "supertest": "^6.3.3"
  }
}

  6. Jalankan perintah berikut untuk menjalankan pengujian:

    npm test

Pengujian Anda akan ditampilkan sebagai lulus jika tidak ada error. Jika ingin menambahkan pengujian tambahan untuk rute Anda yang lain, terus minta saran kepada Duet AI untuk ditambahkan ke file test.js Anda.

Men-deploy ke Cloud Run

Setelah aplikasi Anda berjalan secara lokal, Anda dapat melanjutkan deployment ke Google Cloud. Cloud Run berfungsi dengan baik untuk skenario ini karena Anda dapat men-deploy dari kode sumber dan tidak perlu mengelola infrastruktur apa pun saat menjalankan aplikasi.

  1. Dalam chat Duet AI, tanyakan kepada Duet AI cara men-deploy ke Cloud Run langsung dari kode sumber Anda menggunakan gcloud:

    What is the gcloud command for deploying a Cloud Run service from source code?

    Duet AI harus merespons dengan sesuatu yang mirip dengan:

    Anda dapat melakukan deployment langsung ke Cloud Run dari kode sumber di direktori Anda saat ini menggunakan gcloud. Untuk melakukannya, Anda dapat menggunakan perintah gcloud run deploy dengan --source flag. Flag ini memberi tahu gcloud untuk menggunakan kode sumber guna membangun image container dan men-deploy-nya ke Cloud Run.

    Misalnya, untuk men-deploy kode di file app.js ke Cloud Run, Anda harus menggunakan perintah berikut:

    gcloud run deploy app --source .

    Perintah ini akan mem-build image container dari file app.js Anda dan men-deploy-nya ke Cloud Run.

    Anda juga dapat menggunakan tanda --region untuk menentukan region tempat aplikasi di-deploy. Misalnya, untuk men-deploy aplikasi ke region us-central1, Anda harus menggunakan perintah berikut:

    gcloud run deploy app --source . --region us-central1

    Untuk mengetahui informasi selengkapnya tentang cara men-deploy ke Cloud Run dari kode sumber, Anda dapat melihat dokumentasi Cloud Run.

  2. Gunakan perintah gcloud yang disediakan Duet AI dalam respons.

  3. Ikuti petunjuk untuk memilih region, lalu pilih opsi untuk mengizinkan pemanggilan tanpa autentikasi untuk aplikasi uji coba Anda. Setelah aplikasi berhasil di-deploy, output akan menampilkan URL Layanan.

Pembersihan

Agar tidak menimbulkan biaya pada akun Google Cloud Anda untuk resource yang digunakan dalam tutorial ini, Anda dapat menghapus project Google Cloud yang dibuat untuk tutorial ini. Atau, Anda dapat menghapus resource satu per satu.

  1. Perhatian: Menghapus project memiliki efek berikut:
    • Semua hal dalam project akan dihapus. Jika Anda menggunakan project yang sudah ada untuk tugas dalam dokumen ini, saat menghapusnya, Anda juga akan menghapus semua pekerjaan lain yang telah Anda lakukan dalam project tersebut.
    • Project ID kustom hilang. Saat membuat project ini, Anda mungkin telah membuat project ID kustom yang ingin digunakan di masa mendatang. Untuk mempertahankan URL yang menggunakan project ID, seperti URL appspot.com, hapus resource yang dipilih di dalam project, bukan menghapus seluruh project.

  2. Jika Anda berencana mempelajari berbagai arsitektur, tutorial, atau panduan memulai, menggunakan kembali project dapat membantu Anda agar tidak melampaui batas kuota project.Di Google Cloud Console, buka halaman Mengelola resource.

    Buka Kelola resource

  3. Dalam daftar project, pilih project yang ingin Anda hapus, lalu klik Delete.

  4. Pada dialog, ketik project ID, lalu klik Shut down untuk menghapus project.

Langkah selanjutnya