Pengekodan Vibe · Pelajaran

Berbual dengan API

Dapatkan data daripada web dengan bantuan kecerdasan buatan.

Pelajaran 1 daripada 413 langkah

Berbual dengan API ialah pelajaran Pengekodan Vibe percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pengekodan Vibe, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pengekodan Vibe merangkumi sejumlah 4 pelajaran.

Aplikasi Berkomunikasi dengan Aplikasi Lain

Aplikasi sebenar jarang berfungsi sendirian. Aplikasi cuaca meminta data daripada perkhidmatan cuaca. Penjejak kripto meminta data daripada perkhidmatan harga. Cara aplikasi meminta data antara satu sama lain dipanggil API — antara muka pengaturcaraan aplikasi.

Bayangkan API seperti pelayan restoran: anda tidak masuk ke dapur, sebaliknya hanya meminta perkara yang diingini dan pelayan membawanya kepada anda. Sebagai pembina aplikasi secara intuitif, anda biasanya hanya menerangkan data yang diperlukan, dan AI menulis kod yang berkomunikasi dengan API bagi pihak anda.

Maksud 'Mengambil Data'

Apabila aplikasi anda mendapatkan data daripada internet, kami mengatakan bahawa aplikasi itu mengambil data tersebut. Aplikasi menghantar permintaan kepada URL, kemudian perkhidmatan menghantar semula data — biasanya sebagai JSON, iaitu format teks ringkas yang kelihatan seperti kotak nilai berlabel.

Anda tidak perlu menghafal cara perkara ini berfungsi. Anda hanya perlu mengetahui istilahnya supaya anda boleh memberitahu AI: 'ambil data itu dan paparkan pada halaman.'

{
  "city": "Tokyo",
  "temperature": 21,
  "condition": "Sunny"
}

Arahan API Pertama Anda

Mari minta AI mengambil data sebenar. Caranya ialah dengan menamakan data yang anda inginkan dan tempat untuk memaparkannya. Berikut ialah arahan yang boleh anda tampalkan ke dalam Cursor, Claude Code, Bolt atau v0.

Perhatikan bahawa arahan itu menamakan API percuma yang khusus dan perkara yang perlu dipaparkan dengan tepat. Arahan yang khusus menghasilkan kod yang berfungsi pada percubaan pertama.

Create a single HTML page that fetches a random
activity from the Bored API
(https://www.boredapi.com/api/activity) when the
page loads, and displays the activity text in a
big centered card. Add a "Give me another" button
that fetches a new one. Use plain JavaScript, no
frameworks.

Rupa fetch()

Apabila AI menulis kod, anda akan sering melihat panggilan fetch(). Anda tidak perlu menulisnya secara manual, tetapi mengenalinya membantu anda membaca perkara yang diberikan oleh AI.

Contoh kecil ini mengambil pengguna palsu dan mencatat namanya. Jalankannya untuk melihat data kembali daripada internet.

fetch('https://jsonplaceholder.typicode.com/users/1')
  .then(response => response.json())
  .then(user => {
    console.log('Name:', user.name);
    console.log('Email:', user.email);
  });

Membaca Respons JSON

Data API kembali sebagai JSON. Untuk menggunakan sesuatu nilai, anda mencapainya berdasarkan nama dengan titik, seperti user.name. Data bersarang menggunakan lebih banyak titik: user.address.city.

Apabila anda tidak pasti tentang kandungan sesuatu respons, tanyakan kepada AI: 'catat respons penuh supaya saya dapat melihat strukturnya, kemudian tunjukkan cara membaca medan yang saya perlukan.'

const user = {
  name: 'Ada',
  address: { city: 'London' }
};

console.log(user.name);
console.log(user.address.city);

Mengendalikan Permintaan yang Perlahan atau Gagal

Internet tidak sentiasa boleh dipercayai. Sesuatu permintaan mungkin lambat, atau perkhidmatan mungkin tidak tersedia. Aplikasi yang baik memaparkan mesej sedang dimuatkan sementara menunggu dan mesej ralat yang mesra jika berlaku masalah.

Sentiasa ingatkan AI untuk mengendalikan perkara ini. Arahan seperti contoh di bawah menghasilkan aplikasi yang jauh lebih kukuh berbanding sekadar 'ambil data'.

Add a loading spinner while the data is being
fetched, and if the request fails, show a friendly
message like "Couldn't load data, try again" with
a retry button. Don't let the app crash on errors.

API Percuma untuk Berlatih

Anda boleh membina banyak perkara dengan API percuma tanpa perlu mendaftar. Antara yang bagus untuk pembelajaran:

JSONPlaceholder — pengguna, catatan dan tugasan palsu
Open-Meteo — cuaca sebenar tanpa memerlukan kunci
REST Countries — maklumat negara dan bendera
The Cat / Dog API — gambar haiwan peliharaan secara rawak

Beritahu AI API yang hendak digunakan dan perkara yang hendak dipaparkan, lalu anda akan mempunyai aplikasi yang berfungsi dalam beberapa minit.

Build a country explorer page using the REST
Countries API (https://restcountries.com/v3.1/all).
Show each country's flag, name, and population in a
grid of cards. Add a search box that filters
countries by name as I type.

Kunci API: Mengapa Sesetengah API Memerlukannya

Sesetengah perkhidmatan perlu mengetahui siapa yang membuat permintaan, jadi mereka memberikan anda kunci API — kata laluan rahsia untuk aplikasi anda. Anda menyertakannya dalam setiap permintaan.

Kunci menghalang perkhidmatan daripada disalahgunakan, tetapi kunci mesti dirahsiakan. Buat masa ini, fahami sahaja bahawa 'API ini memerlukan kunci' bermaksud terdapat langkah persediaan tambahan. Kami akan menerangkan cara menyimpan kunci dengan selamat dalam pelajaran akan datang.

Meminta AI Menyambungkan API

Apabila anda mempunyai dokumentasi API, anda boleh menyerahkannya terus kepada AI. Tampalkan URL contoh dan respons sampel, kemudian biarkan AI memadankannya dengan skrin anda.

Inilah salah satu kelebihan terbesar pengekodan berasaskan AI: anda tidak perlu membaca dokumentasi secara mendalam; sebaliknya, biarkan AI menterjemahkannya menjadi kod yang berfungsi.

Here is an example API response from the weather
service:
{"current":{"temperature_2m":18.4,"wind_speed_10m":7}}

Fetch from
https://api.open-meteo.com/v1/forecast?latitude=52.5&longitude=13.4&current=temperature_2m,wind_speed_10m
and display the temperature and wind speed in two
labeled boxes on the page.

Menggabungkan Beberapa API

Aplikasi yang berkuasa menggabungkan data daripada beberapa sumber. Aplikasi pelancongan mungkin menggabungkan API negara untuk fakta, API cuaca untuk ramalan, dan API imej untuk foto.

Anda boleh meminta AI menggabungkannya langkah demi langkah. Bina satu API dahulu dan sahkan bahawa ia berfungsi, kemudian katakan 'sekarang tambahkan juga cuaca untuk negara itu.' Langkah kecil membantu AI kekal tepat.

Now extend the country page: when I click a
country card, fetch that country's current weather
from Open-Meteo using its capital coordinates and
show it in a popup. Keep the existing search
feature working.

Anda Tidak Perlu Menghafal API

Terdapat ribuan API dan anda tidak akan dapat menghafal semuanya. Kemahiran pengekodan berasaskan AI ialah mengetahui kosa kata — ambil, permintaan, respons, JSON, kunci — supaya anda boleh menerangkan perkara yang dikehendaki dengan jelas.

Apabila menggunakan API baharu, tampalkan dokumentasinya kepada AI dan nyatakan data yang diperlukan serta tempat untuk memaparkannya. Tabiat tunggal ini membuka akses kepada hampir semua sumber data di web.

Semakan Pantas

API menghantar data kembali kepada aplikasi anda, biasanya dalam format teks ringkas dengan nilai berlabel. Apakah nama yang paling biasa bagi format itu?

Jawab dalam pelajaran interaktif

Imbas Kembali: Berkomunikasi dengan API

Anda telah mempelajari bahawa aplikasi mengambil data daripada perkhidmatan lain melalui API, biasanya menerima JSON. Anda telah melihat fetch() digunakan, cara membaca medan respons dengan titik, serta sebab aplikasi memerlukan keadaan pemuatan dan keadaan ralat.

Yang paling penting: anda tidak perlu menghafal API — terangkan data yang dikehendaki dan biarkan AI menyambungkannya, dengan menampalkan dokumentasi serta respons contoh apabila diperlukan. Seterusnya, anda akan meminta AI membaca dan menyimpan fail untuk aplikasi anda.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 25
Pelajaran: 100

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Berbual dengan API” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Pengekodan Vibe, termasuk “Berbual dengan API”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Pengekodan Vibe merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Berbual dengan API”?

Dapatkan data daripada web dengan bantuan kecerdasan buatan. Anda berlatih Pengekodan Vibe menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Pengekodan Vibe?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pengekodan Vibe di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Berbual dengan API” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pengekodan Vibe ini?

Ya. Setiap pelajaran Pengekodan Vibe menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Pengekodan Vibe