GitHub Copilot dengan JavaScript - nurkomarhidaya/pemrograman-AI GitHub Wiki

Gunakan GitHub Copilot, pemrogram pasangan AI yang menawarkan saran gaya pelengkapan otomatis saat Anda membuat kode, untuk bekerja dengan JavaScript

Tujuan pembelajaran

Pada akhir modul ini, Anda akan dapat:

  • Aktifkan ekstensi GitHub Copilot di Visual Studio Code.
  • Buat perintah yang dapat menghasilkan saran berguna dari GitHub Copilot.
  • Gunakan GitHub Copilot untuk meningkatkan proyek JavaScript.

Prasyarat

  • Pemahaman dasar tentang JavaScript, seperti variabel dan kondisional
  • Kemampuan untuk menggunakan Git dan GitHub untuk kontrol versi
  • Layanan GitHub Copilot diaktifkan

Modul ini adalah bagian dari jalur pembelajaran ini

Penilaian modul

Nilai pemahaman Anda tentang modul ini. Masuk dan jawab semua pertanyaan dengan benar untuk mendapatkan penunjukan lulus di profil Anda.

Apa itu GitHub Copilot

Saat menulis kode, Anda sering berkonsultasi dengan dokumentasi atau halaman web untuk mengingat sintaks atau memecahkan masalah. Anda mungkin menghabiskan waktu berjam-jam untuk memperbaiki masalah, menulis tes, dan membuat dokumentasi. Tugas-tugas ini memakan waktu. Menggunakan cuplikan kode atau alat IDE dapat membantu, tetapi apakah ada cara yang lebih baik?

Bagaimana cara kerjanya?

GitHub Copilot adalah asisten AI yang Anda gunakan dari dalam IDE yang mampu menghasilkan kode dan banyak lagi. GitHub Copilot menggunakan prompt, bahasa alami, dan memberikan saran berdasarkan apa yang Anda ketik. Prompt dapat, misalnya, dapat berupa komentar dalam file kode Anda:

// Create a web API using express and JavaScript with routes for products and customers

Copilot kemudian melanjutkan untuk menghasilkan respons yang dapat Anda pilih untuk diterima atau ditolak. Respons terhadap prompt dapat terlihat mirip dengan kode berikut:

const express = require("express");

app = express();
app.path("/products", () => "products");
app.listen(3000, () => "app runs");

Cara mengenali perintah

Copilot dapat mengenali perintah atau instruksi jika Anda:

  • Ketikkan sebagai komentar dalam file kode (misalnya, , )..py.js
  • Ketik teks dalam file markdown dan tunggu beberapa detik hingga Copilot merespons.

Menerima saran

Apa yang Anda dapatkan dari Copilot adalah saran, yang muncul sebagai teks abu-abu jika Anda menggunakan warna hitam sebagai warna teks Anda. Untuk menerima saran, tekan tombol.Tab

Copilot mungkin menyarankan beberapa opsi. Untuk menelusuri saran, gunakan + dan pilih yang paling tepat.CtrlEnter

Cara menyiapkan GitHub Copilot

Untuk menggunakan GitHub Copilot, Anda harus menyelesaikan langkah-langkah berikut:

  1. Akun GitHub:
  • Buat akun GitHub. Karena Copilot adalah layanan GitHub, Anda memerlukan akun GitHub untuk menggunakannya.
  1. Daftar ke Copilot:
  1. Aktifkan Copilot:
  • Di GitHub, buka profil Anda, lalu buka Pengaturan.
  • Di bawah Copilot, aktifkan akses atau daftar GitHub Copilot Gratis atau coba uji coba untuk salah satu paket berjenjang.
  1. Instal ekstensi:
  • Instal ekstensi GitHub Copilot ke IDE Anda.
  • Ekstensi tersedia untuk IDE utama seperti Visual Studio dan Visual Studio Code.

Latihan - Menyiapkan GitHub Copilot untuk bekerja dengan Visual Studio Code

Dalam latihan ini, kami membuat repositori baru menggunakan templat GitHub untuk aplikasi web frontend portofolio pribadi JavaScript.

Mengakses GitHub Copilot

Untuk menggunakan GitHub Copilot, Anda harus menyelesaikan langkah-langkah berikut:

  1. Akun GitHub:
  • Jika perlu, buat akun GitHub.
  • Copilot adalah layanan GitHub, jadi Anda memerlukan akun GitHub untuk menggunakannya.
  1. Periksa Akses Copilot:
  • Periksa paket harga Copilot untuk situasi Anda.
  • Untuk pembelajaran, opsi Copilot Free dengan batas penggunaan sudah cukup. Ini termasuk :
  1. Akses ke penyelesaian kode sebaris
  2. Pengeditan multi-file
  3. Obrolan Copilot
  4. Memilih model multitple
  5. Dukungan di semua editor dan di github.com
  1. Verifikasi Akses Copilot Diaktifkan:
  • Di GitHub, buka profil Anda, lalu buka Pengaturan.
  • Di navigasi kiri, pilih Copilot.
  • Pastikan Copilot aktif dan Obrolan Copilot di IDE diaktifkan.
  1. Instal ekstensi:
  • Ekstensi tersedia untuk IDE utama seperti Visual Studio, Visual Studio Code, JetBrains IDE, VIM, dan XCode.
  • Cukup cari di pasar ekstensi IDE Anda dan instal.GitHub Copilot

Pengaturan lingkungan

Pertama, Anda perlu meluncurkan lingkungan Codespaces, yang telah dikonfigurasi sebelumnya dengan ekstensi GitHub Copilot.

  1. Pilih tombol berikut untuk Membuka Codespace dengan lingkungan yang telah dikonfigurasi sebelumnya. Open in GitHub Codespaces mslearn-copilot-codespaces-javascript
  2. Pada halaman Buat codespace, tinjau pengaturan konfigurasi codespace, lalu pilih Buat codespace baru
  3. Tunggu hingga ruang kode dimulai. Proses startup ini bisa memakan waktu beberapa menit.
  4. Latihan yang tersisa dalam proyek ini berlangsung dalam konteks wadah pengembangan ini.

Penting

Semua akun GitHub dapat menggunakan Codespaces hingga 60 jam gratis setiap bulan dengan 2 instans inti. Untuk informasi selengkapnya, lihat GitHub Codespaces bulanan termasuk penyimpanan dan jam inti.

Portofolio JavaScript

Setelah selesai, Codespaces dimuat dengan bagian terminal di bagian bawah. Codespaces menginstal semua ekstensi dan dependensi yang diperlukan di kontainer Anda. Setelah selesai, templat ini dikonfigurasi untuk digunakan untuk memulai aplikasi web dalam Codespace Anda.npm start

Ketika aplikasi web berhasil dimulai, pesan di terminal menunjukkan bahwa server berjalan pada port 1234 dalam Codespace Anda.

image

Menggunakan GitHub Copilot dengan JavaScript

Di unit sebelumnya, kami menunjukkan cara menyiapkan Copilot dan menyebutkan bagaimana hal itu dapat membuat Anda lebih cepat sebagai pengembang yang mulai menulis kode.

Pada unit ini, mari kita bahas bagaimana Copilot dapat membantu Anda dengan proyek yang ada dan membantu Anda dengan tugas yang lebih rumit.

Mengembangkan dengan GitHub Copilot

Seringkali ketika kita membangun proyek, kita perlu terus memastikan kode kita segar dan diperbarui. Selain itu, kami mungkin perlu memperbaiki bug yang muncul atau menambahkan fitur baru untuk meningkatkan fungsionalitas dan kegunaannya. Mari jelajahi beberapa cara untuk membuat pembaruan dengan GitHub Copilot dan GitHub Copilot Chat, antarmuka obrolan interaktif untuk bertanya dan menerima jawaban atas pertanyaan terkait kode.

Rekayasa yang cepat

Meskipun GitHub Copilot dapat menyarankan kode saat Anda mengetik, Anda juga dapat membuat perintah untuk membuat saran yang berguna. Prompt, yang merupakan masukan kami, adalah kumpulan instruksi atau pedoman yang membantu menghasilkan kode. Prompt berguna untuk menghasilkan respons spesifik dari Copilot. Perintah mungkin berupa komentar atau masukan saat menggunakan GitHub Copilot Chat yang mengarahkan Copilot untuk menghasilkan kode atas nama Anda atau menulis kode yang dilengkapi secara otomatis oleh Copilot.

Kualitas output dari Copilot tergantung pada seberapa baik Anda membuat prompt Anda. Membuat prompt yang efektif sangat penting untuk mencapai hasil yang diinginkan. Misalnya, jika Anda memiliki perintah berikut:

// Create an API endpoint

Karena perintahnya ambigu dan tidak jelas, hasil dari GitHub Copilot mungkin bukan yang Anda butuhkan. Misalnya, dapat menggunakan kerangka kerja yang tidak Anda ketahui, atau titik akhir yang memerlukan data yang tidak Anda kenali. Namun, jika Anda memiliki perintah berikut:

// Create an API endpoint using the React framework that accepts a JSON payload in a POST request

Prompt terakhir ini spesifik, jelas, dan memungkinkan GitHub Copilot memahami tujuan dan ruang lingkup tugas. Meskipun Anda juga dapat memberikan konteks dan contoh ke Copilot menggunakan komentar atau kode, Anda juga dapat menggunakan opsi obrolan dari GitHub Copilot Chat. Memiliki prompt yang baik memastikan bahwa model menghasilkan output berkualitas tinggi.

Praktik terbaik menggunakan GitHub Copilot

Copilot meningkatkan produktivitas Anda tetapi memerlukan beberapa praktik yang baik untuk memastikan kualitas. Beberapa praktik terbaik saat menggunakan Copilot adalah:

  • Jaga agar perintah Anda tetap sederhana lalu tambahkan komponen yang lebih rumit saat Anda melanjutkan, misalnya:
create an HTML form with a text field and button

Selanjutnya, uraikan lebih lanjut tentang prompt untuk mendapatkan saran yang lebih spesifik:

Add an event listen to the button to send a POST request to /generate endpoint and display response in a div with id "result"
  • Beralih di antara saran, Anda dapat melakukannya menggunakan + (atau + di Mac). Anda mendapatkan berbagai saran dari Copilot, dan Anda dapat memilih hasil terbaik. Secara opsional, saat menggunakan GitHub Copilot Chat, Anda dapat menggunakan input obrolan untuk menambahkan prompt dan berinteraksi dengan output.CtrlEnterCmdEnter

Jika Anda macet atau tidak mendapatkan hasil yang diinginkan, Anda dapat menulis ulang perintah atau mulai menulis kode agar Copilot dapat dilengkapi secara otomatis.

  • Nota GitHub Copilot menggunakan file terbuka di editor teks Anda sebagai konteks tambahan. Ini berguna karena memberikan informasi yang berguna selain prompt atau kode yang mungkin Anda tulis. Jika Anda memerlukan GitHub Copilot untuk memberikan saran berdasarkan file lain, Anda dapat membukanya atau menggunakannya dengan perintah Anda saat menggunakan GitHub Copilot Chat.@workspace

Mengalami masalah? Kami dapat membantu!

Latihan - Memperbarui portofolio JavaScript dengan GitHub Copilot

Mari jelajahi bagaimana Anda dapat menggunakan saran kode dari GitHub Copilot. Dalam latihan ini, Anda menambahkan animasi dengan saran langsung dan menggunakan prompt untuk menyesuaikan perilaku gulir dari repositori templat JavaScript yang sudah ada. Dengan GitHub Copilot, Anda dapat dengan cepat bekerja dengan situasi JavaScript kehidupan nyata.

Portofolio JavaScript

Apakah Anda seorang pelajar, lulusan baru, atau profesional berpengalaman, portofolio Anda adalah ruang pribadi Anda untuk memamerkan keterampilan dan pengalaman Anda.

Memiliki portofolio memberikan kredibilitas dan ketenaran pada pengalaman yang Anda sebutkan dalam resume Anda saat melamar pekerjaan. Apakah Anda seorang Ilmuwan Data, Desainer UX, atau pengembang Front-end. Kehadiran online yang kuat dapat membantu Anda mendapatkan pekerjaan dan ditemukan!

Nota

Untuk latihan ini, gunakan Codespace dengan lingkungan yang telah dikonfigurasi sebelumnya di browser Anda.

Sesuaikan portofolio JavaScript Anda

Dalam portofolio template ini, kami memiliki aplikasi web berbasis React yang siap bagi Anda untuk menyesuaikan dan menerapkan dengan mudah hanya menggunakan browser web Anda.

Sebelum memulai, Anda dapat menyesuaikan portofolio dengan tautan Anda sendiri. Buka dan perbarui dengan informasi Anda. Variabel adalah objek JavaScript yang menyimpan pasangan nilai kunci yang digunakan untuk menyesuaikan situs, seharusnya terlihat seperti ini:src/App.jsxsitePropssiteProps

const siteProps = {
  name: "Alexandrie Grenier",
  title: "Web Designer & Content Creator",
  email: "[email protected]",
  gitHub: "microsoft",
  instagram: "microsoft",
  linkedIn: "satyanadella",
  medium: "",
  twitter: "microsoft",
  youTube: "Code",
};

Animasikan ikon media sosial Anda dengan prompt

Sebuah animasi dapat membuat bagian media sosial lebih menarik. Mintalah bantuan Copilot untuk menganimasikan ikon. Anda dapat menggunakan GitHub Copilot Chat untuk bertanya kepada Copilot atau menulis komentar prompt berikut dalam file:src/styles.css

/* add an amazing animation to the social icons */

Saran dari Copilot akan terlihat mirip dengan berikut ini:

img.socialIcon:hover {
  animation: bounce 0.5s;
  animation-iteration-count: infinite;
}

@keyframes bounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

Terima saran dengan menekan tombol tab. Jika Anda tidak menerima saran yang sama persis, maka Anda dapat bereksperimen dengan saran yang diberikan atau terus mengetik kode CSS hingga cocok.

Situs Anda seharusnya sudah berjalan di Codespace Anda, dan perubahan akan dimuat ulang ke halaman secara otomatis. Untuk melihatnya, arahkan kursor ke salah satu ikon media sosial Anda di footer untuk melihat keajaibannya!

Selamat, melalui latihan, kamu tidak hanya menggunakan Copilot untuk menghasilkan kode tetapi juga melakukannya dengan cara yang interaktif dan menyenangkan! Anda dapat menggunakan GitHub Copilot untuk tidak hanya menghasilkan kode, tetapi juga menulis dokumentasi, menguji aplikasi Anda, dan banyak lagi.

Setelah Anda menyelesaikan latihan di GitHub, kembali ke sini untuk:

  • Pemeriksaan pengetahuan cepat
  • Ringkasan dari apa yang telah Anda pelajari
  • Lencana untuk menyelesaikan modul ini

image image

Ringkasan

Dari membuat repositori dari templat GitHub hingga menambahkan animasi dengan saran langsung, GitHub Codespaces memungkinkan Anda menyesuaikan pengalaman pengkodean dan GitHub Copilot memandu Anda di setiap langkah, meningkatkan siklus hidup pengembangan perangkat lunak secara signifikan.

Sekarang setelah Anda menyelesaikan modul ini, Anda harus dapat:

  • Pahami bagaimana GitHub Copilot dapat membantu Anda membuat kode dengan menawarkan saran bergaya pelengkapan otomatis.
  • Terapkan rekayasa cepat ke berbagai proyek dengan menggunakan praktik yang baik.
  • Gunakan GitHub Copilot Chat untuk mengajukan dan menerima pertanyaan terkait pengkodean.

Menghapus sumber daya Codespaces Anda

Untuk menghindari menghabiskan semua waktu GitHub Codespaces bulanan Anda, penting untuk menghapus semua sumber daya Anda setelah Anda mengunggah perubahan ke repositori Anda. Ikuti langkah-langkah ini untuk menghapus sumber daya Anda sebagai berikut:

  1. Buka tautan ini https://github.com/codespaces
  2. Temukan instans Codespace Anda dari daftar dan pilih menu tiga titik untuk menampilkan opsi Anda.
  3. Pilih "hapus" untuk menghapus instans Codespace Anda.

Referensi