GITHUB
Github merupakan platfrom yang di mana di gunakan untuk menyimpan sebuah projek pemrograman dan bukan itu saja github ini merupakan tempat berkumpulnya para pengembang dan pemrogram untuk saling diskusi, bekerja sama dengan orang lain, membahas issue repository, saling berkontribusi mengenai projek dan juga masih banyak lagi. Penulis menggunakan github untuk menyimpan sebuah projek pemrograman dan untuk dokumentasi pribadi penulis ketika penulis lupa.
Mengenai judul artikel ini penulis akan memberikan contoh bagaimana cara mengambil data repository github seperti jumlah star yang di miliki, jumlah fork, lisensi pada sebuah repository, tag pada repository dan masih banyak lagi. Nah, penulis akan mengambil beberapa data sebuah repository dan kita akan membuat kode HTML sederhana dan juga script javascript. Kamu bisa buat dulu kode HTML nya dengan nama index.html dan bisa lihat kode HTML nya di bawah ini :
<!doctype html>
<html>
<head>
<title>Repository Github</title>
</head>
<body>
<!-- Untuk menampilkan data repository -->
<h1 style="display: inline-block;">Judul Repo : </h1> <div class="data-repository" style="display: inline-block;"></div>
<br>
<h1 style="display: inline-block;">Star : </h1> <div class="data-repository" style="display: inline-block;"></div>
<br>
<h1 style="display: inline-block;">Tag : </h1> <div class="data-repository" style="display: inline-block;"></div>
<br>
<h1 style="display: inline-block;">Forks : </h1> <div class="data-repository" style="display: inline-block;"></div>
<!-- Javascript-->
<script src="script.js"></script>
</body>
</html>
Untuk file javascript beri nama script.js dan kode javascript nya bisa lihat di bawah ini :
//buat variabel
let URL = 'https://api.github.com/repos/galihap76/text-to-speech-python'
let data_repository = document.getElementsByClassName('data-repository')
//ambil variabel URL
//di mana ini akan menangkap endpoint nya
fetch(URL)
//parsing data JSON
.then(res => res.json())
//tampilkan data ke dokumen HTML
.then(data => {
for (let i = 0; i < data_repository.length; i++) {
data_repository[0].innerHTML = `<h1>${data.description}</h1>`
data_repository[1].innerHTML = `<h1>${data.stargazers_count}</h1>`
data_repository[2].innerHTML = `<h1>${data.topics}</h1>`
data_repository[3].innerHTML = `<h1>${data.forks}</h1>`
}
})Hasil ketika di tampilkan pada dokumen HTML bisa lihat di bawah ini :
Pada variabel URL kamu bisa ganti nama repo dan nama pengguna github nya seperti ini :
https://api.github.com/repos/[nama pengguna]/[nama repo]Yaps, itu saja yang penulis sampaikan. Di atas penulis sudah memberikan komentar kode nya untuk bisa memahami cara kerja kode yang telah penulis buat.
0 Komentar