Bangun alat mirip github Anda sendiri dalam satu jam – Beragampengetahuan

GitHub adalah platform yang banyak digunakan untuk kontrol versi dan kolaborasi, memungkinkan pengembang untuk menyimpan, mengelola, dan berbagi repositori kode. Ini mendukung Git, sistem kontrol versi terdistribusi yang memungkinkan banyak kontributor mengerjakan proyek secara bersamaan. Dengan fitur seperti permintaan tarik, pelacakan masalah, dan komentar kode, GitHub telah menjadi alat penting untuk pengembangan perangkat lunak sumber terbuka dan profesional.

memperkenalkan

Halo! Saya Maulik Suchak, pembuat proyek ini, dan dengan senang hati saya memperkenalkan Anda pada GitHub Web Apps. Mygithub adalah aplikasi web publik yang dirancang untuk menelusuri repositori di bawah organisasi tertentu dan mendalami riwayat penerapannya.

Panduan ini dirancang untuk membantu teknisi front-end belajar dari proyek ini dengan menjelaskan fungsionalitas, desain teknis, dan proses penyiapannya. Saya juga akan berbagi wawasan tentang cara membangunnya dan beberapa potensi peningkatan di masa depan.

Fungsionalitas diimplementasikan sebagai MVP

• Daftar repositori:Menampilkan repositori yang diurutkan berdasarkan nomor fork. Misalnya, “Elasticsearch” memiliki cabang terbanyak di bawah Yelp.
• gulir tak terbatas: Memuat repositori tambahan dengan lancar saat menggulir.
• Pencarian Organisasi Dinamis: Memuat repositori untuk organisasi default (“Yelp”), tetapi memungkinkan pengguna menentukan organisasi lain melalui URL, misalnya. /Yelp.
• Penampil riwayat pengiriman: Menampilkan komit terbaru dari repositori.
• Paging yang didelegasikan: Memungkinkan pengguna menelusuri komitmen lama dan baru menggunakan tombol di bagian bawah.

Kemungkinan peningkatan

• Pengujian yang ditingkatkan:Tambahkan lebih banyak pengujian unit dan integrasi untuk meningkatkan stabilitas.
• Kompatibilitas peramban: Menerapkan fallback yang anggun untuk mendukung browser lama.
• Organisasi pencarian: Mengganti masukan berbasis URL dengan kotak pencarian yang mudah digunakan di header.
• Peningkatan SCSS: Meningkatkan organisasi SCSS dengan menggunakan mixin, variabel, dan komponen yang dapat digunakan kembali.

Cara kerja kodenya

mygithub dibangun dengan React dan SCSS untuk menciptakan antarmuka pengguna responsif yang modern. Ini terintegrasi dengan REST API GitHub untuk mengambil repositori dan melakukan data secara dinamis.

alur kerja utama

1. Dapatkan datanya

• Panggilan untuk mendapatkan repositori dan melakukan secara dinamis.
• Defaultnya adalah organisasi “Yelp”, tetapi memungkinkan pengguna menentukan organisasi lain.

2. Merender repositori

• Tampilkan repositori dengan metadata seperti bintang dan garpu.
• Tautan untuk melakukan riwayat disediakan.

3. membuat nomor halaman

4. Penanganan URL dinamis

5. UI responsif

Struktur kode repositori

Berikut rincian struktur direktori repositori:

src
├── index.js
├── App.css
├── App.js
├── Components
|   └── Commits
|       ├── Commits.scss
|       ├── CommitGroup.jsx
|       ├── CommitRow.jsx
|       ├── CommitHead.jsx
|       ├── index.jsx
|   └── Error
|       ├── Error.scss
|       ├── index.jsx
|   └── Footer
|       ├── Footer.scss
|       ├── index.jsx
|   └── Header
|       ├── Header.scss
|       ├── index.jsx
|   └── Loading
|       ├── Loading.scss
|       ├── index.jsx
|   └── NoMatch
|       ├── index.jsx
|       ├── NoMatch.scss
|   └── Projects
|       ├── index.jsx
|       ├── ProjectRow.jsx
|       ├── Projects.scss
|       ├── ProjectTop.jsx
public
├── index.html

Pengaturan dan pengembangan

Prasyarat

• Node.js versi 6.4.1 atau lebih tinggi
• NPM yang diinstal untuk manajemen ketergantungan

Memesan

1. Repositori kloning

git clone 
cd MyGitHub

2. Instal dependensi

3. Mulai server pengembangan

4. Konstruksi dan produksi

5. Jalankan tes

rincian teknis

Aplikasi ini menggunakan React dan SCSS untuk pengembangan cepat dan desain responsif. Ini mengambil data dari GitHub API untuk memperbarui konten secara dinamis berdasarkan masukan pengguna.

Aliran data dan penggunaan API

gudang

• Gunakan API pencarian github untuk mendapatkan repositori yang dipesan secara fork. Titik akhir ini memungkinkan pemfilteran berdasarkan parameter seperti bintang, fork, dan stempel waktu yang diperbarui, memastikan pengambilan repositori populer atau aktif secara efisien. Ini mendukung penomoran halaman dan memungkinkan akuisisi data berkelanjutan saat pengguna menelusuri hasil, yang ideal untuk implementasi gulir tanpa batas.

Detail organisasi

kirim

metode

• Buat Aplikasi React dengan autostart untuk pengembangan MVP yang cepat.
• Gunakan SCSS untuk gaya organisasi yang lebih baik.
• Perutean URL dinamis memungkinkan pengguna berpindah organisasi dengan mudah.

Kasus uji manual

Proyek/Halaman Beranda

• Mengunjungi / Muat repositori di bawah Yelp.

• Mengunjungi /Yelp Menampilkan repositori Yelp.

• Mengklik item akan menampilkan komitmennya.

• Menggulirkan banyak repositori lainnya.

Kirim halaman

Tinjauan Fitur Utama

1. Pencarian Organisasi Dinamis: Beralih secara dinamis antar organisasi.
2. gulir tak terbatas: Pemuatan repositori yang lancar.
3. Penampil riwayat pengiriman: Telusuri riwayat pengiriman.
4. Desain responsif: Pastikan kompatibilitas dengan semua perangkat.
5. gaya SCSS: CSS terstruktur dan dapat diperluas.
6. Integrasi API: Memanfaatkan API GitHub secara efektif.

lihat