Membina GitHub Airlines
Membina GitHub Airlines: Projek Sampingan yang Seronok dalam 2 Jam ✈️
G'day kawan-kawan! Hari ini saya ingin berkongsi projek kecil yang menyeronokkan yang saya siapkan dalam beberapa jam sahaja - GitHub Airlines, apl web yang menukar profil GitHub anda menjadi pas masuk mewah yang sesuai. Kerana mengapa statistik GitHub anda perlu membosankan sedangkan ia boleh bertemakan penerbangan? ?️
Inspirasi ✨
Anda tahu saat-saat anda berlengah-lengah di GitHub, melihat statistik anda buat kali yang kejuta? Nah, saya fikir, "Bukankah lebih baik jika nombor ini kelihatan lebih seperti pas masuk?" Oleh itu, GitHub Airlines dilahirkan!
Apa yang Kami Bina ?️
GitHub Airlines ialah apl React yang:
- Mengambil statistik GitHub anda menggunakan REST API
- Menghasilkan pas masuk yang menarik dengan data anda
- Termasuk tema yang berbeza (atau "kelas tiket" seperti yang kami panggil)
- Berfungsi pada kedua-dua mudah alih dan desktop
- Termasuk kod QR yang betul yang memaut ke profil anda
The Tech Stack ?️
Kami mengekalkannya ringkas tetapi moden:
- Vite React (Kerana tiada siapa yang mempunyai masa untuk binaan perlahan)
- TypeScript (Untuk menangkap pepijat yang menjengkelkan itu)
- Tailwind CSS (Menjadikan sesuatu yang cantik tanpa faff)
- GitHub REST API (Sumber semua data kami yang menarik)
- Lucide React (Untuk ikon yang menarik itu)
Proses Pembinaan?
1. Menubuhkan Yayasan
Perkara pertama dahulu, kami menyediakan projek Vite React TypeScript kami dan berjalan. Vite cemerlang untuk pembangunan pantas - ia pantas pantas!
2. Penyepaduan API GitHub
Kami menjadikannya mudah dengan API REST - tidak memerlukan pengesahan, hanya mengambil data awam secara langsung:
const fetchGitHubData = async (username: string) => { const [userResponse, reposResponse] = await Promise.all([ fetch(`https://api.github.com/users/${username}`), fetch(`https://api.github.com/users/${username}/repos`) ]); // Transform the data into boarding pass format };
3. Reka Bentuk Pas Masuk
Ini adalah perkara yang menyeronokkan! Kami menggunakan Tailwind CSS untuk mencipta rupa tiket penerbangan yang betul:
- Menggerakkan sepanduk di bahagian atas (sebab kenapa tidak?)
- Kod QR memaut ke profil anda
- Bahagian berbeza untuk pelbagai statistik GitHub
- Berbilang tema untuk dipilih
4. Menjadikannya Responsif
Sebab tiada siapa yang suka pas masuk yang tidak muat pada telefon mereka, bukan?
Pelajaran yang dipelajari?
- Kekalkan Mudah: Kami boleh menambahkan lebih banyak ciri, tetapi kadangkala kurang lebih banyak
- Reka Bentuk Didahulukan: Mempunyai visi reka bentuk yang jelas menjadikan pembangunan lebih lancar
- Mudah Alih Didahulukan: Sentiasa fikirkan tentang pengguna mudah alih dari awal
Cubalah Sendiri! ?
Ingin melihat profil GitHub anda sebagai pas masuk? Lihat demo langsung atau ambil kod sumber.
Apa Seterusnya? ?
Ini hanya binaan selama 2 jam, tetapi banyak lagi yang boleh kami tambahkan:
- Lagi kelas tiket (tema)
- Peralihan animasi
- Lencana pencapaian
- Sejarah penerbangan (komit sejarah)
Terlibat! ?
Projek ini adalah sumber terbuka sepenuhnya, dan kami amat menghargai sumbangan anda! Sama ada menambah ciri baharu, membetulkan pepijat atau hanya memberi maklum balas - setiap bit membantu!
Adakah anda membina sebarang projek yang menyeronokkan dengan API GitHub? Atau mendapat sebarang idea untuk menjadikan GitHub Airlines lebih baik? Letakkan ulasan di bawah - Saya ingin mendengar pendapat anda!
Dan ingat, langit bukan had apabila anda mengekod! ✈️
webdev #typescript #react #github #opensource
Atas ialah kandungan terperinci Membina GitHub Airlines. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undress AI Tool
Gambar buka pakaian secara percuma

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Terdapat tiga cara biasa untuk memulakan permintaan HTTP dalam node.js: Gunakan modul terbina dalam, axios, dan nod-fetch. 1. Gunakan modul HTTP/HTTPS terbina dalam tanpa kebergantungan, yang sesuai untuk senario asas, tetapi memerlukan pemprosesan manual jahitan data dan pemantauan ralat, seperti menggunakan https.get () untuk mendapatkan data atau menghantar permintaan pos melalui .write (); 2.AXIOS adalah perpustakaan pihak ketiga berdasarkan janji. Ia mempunyai sintaks ringkas dan fungsi yang kuat, menyokong async/menunggu, penukaran JSON automatik, pemintas, dan lain -lain. Adalah disyorkan untuk memudahkan operasi permintaan tak segerak; 3.Node-Fetch menyediakan gaya yang serupa dengan pengambilan penyemak imbas, berdasarkan janji dan sintaks mudah

Jenis data JavaScript dibahagikan kepada jenis primitif dan jenis rujukan. Jenis primitif termasuk rentetan, nombor, boolean, null, undefined, dan simbol. Nilai -nilai tidak berubah dan salinan disalin apabila memberikan nilai, jadi mereka tidak mempengaruhi satu sama lain; Jenis rujukan seperti objek, tatasusunan dan fungsi menyimpan alamat memori, dan pembolehubah menunjuk objek yang sama akan mempengaruhi satu sama lain. Typeof dan Instanceof boleh digunakan untuk menentukan jenis, tetapi memberi perhatian kepada isu -isu sejarah TypeOfNull. Memahami kedua -dua jenis perbezaan ini dapat membantu menulis kod yang lebih stabil dan boleh dipercayai.

Dalam JavaScript, periksa sama ada array mengandungi nilai tertentu. Kaedah yang paling biasa termasuk (), yang mengembalikan nilai boolean dan sintaks adalah array. termasuk (valueTofind), contohnya buah -buahan. termasuk ('pisang') kembali benar; Sekiranya perlu bersesuaian dengan persekitaran lama, gunakan indexof (), seperti nombor.indexof (20)! ==-1 pulangan benar; Untuk objek atau data yang kompleks, beberapa () kaedah harus digunakan untuk perbandingan mendalam, seperti users.some (user => user.id === 1) pulangan benar.

Skop JavaScript menentukan skop kebolehcapaian pembolehubah, yang dibahagikan kepada skop global, fungsi dan tahap blok; Konteks menentukan arah ini dan bergantung kepada kaedah panggilan fungsi. 1. Skop termasuk skop global (boleh diakses di mana sahaja), skop fungsi (hanya sah dalam fungsi), dan skop peringkat blok (biarkan dan const sah dalam {}). 2. Konteks pelaksanaan mengandungi objek pembolehubah, rantaian skop dan nilai -nilai ini. Ini menunjukkan kepada global atau tidak ditentukan dalam fungsi biasa, kaedah panggilan kaedah ke objek panggilan, pembina menunjuk ke objek baru, dan juga boleh ditentukan secara jelas oleh panggilan/memohon/mengikat. 3. Penutupan merujuk kepada fungsi mengakses dan mengingati pembolehubah skop luaran. Mereka sering digunakan untuk enkapsulasi dan cache, tetapi boleh menyebabkan

Untuk mendapatkan nilai kotak input HTML, terasnya adalah untuk mencari elemen yang sepadan melalui operasi DOM dan membaca atribut nilai. 1. Gunakan document.getelementbyid menjadi cara yang paling langsung. Selepas menambah ID ke input, anda boleh mendapatkan elemen dan membaca nilai melalui kaedah ini; 2. Gunakan QuerySelector untuk menjadi lebih fleksibel, dan anda boleh memilih elemen berdasarkan atribut seperti nama, kelas, jenis, dan lain -lain; 3. Anda boleh menambah input atau menukar pendengar acara untuk mencapai fungsi interaktif, seperti mendapatkan kandungan input dalam masa nyata; 4. Perhatikan masa pelaksanaan skrip, kesilapan ejaan dan penghakiman null, dan pastikan unsur itu wujud sebelum mengakses nilai.

Terdapat dua kaedah teras untuk mendapatkan nilai butang radio yang dipilih. 1. Gunakan QuerySelector untuk mendapatkan item yang dipilih secara langsung, dan gunakan input [NAME = "NAMA-NAMA ANDA"]: Pemilih yang diperiksa untuk mendapatkan elemen yang dipilih dan membaca atribut nilainya. Ia sesuai untuk pelayar moden dan mempunyai kod ringkas; 2. Gunakan Document.GetElementsByName untuk melintasi dan mencari radio yang diperiksa pertama melalui nodelist gelung dan mendapatkan nilainya, yang sesuai untuk senario yang serasi dengan pelayar lama atau memerlukan kawalan manual proses; Di samping itu, anda perlu memberi perhatian kepada ejaan atribut nama, mengendalikan situasi yang tidak dipilih, dan pemuatan kandungan dinamik

Rentetan templat adalah ciri yang diperkenalkan dalam JavaScriptes6, yang membungkus kandungan dengan backticks dan menyokong interpolasi berubah-ubah dan rentetan berbilang baris. 1. Gunakan backticks untuk menentukan rentetan seperti thisisatemplateliteral; 2. Masukkan pembolehubah atau ekspresi melalui sintaks $ {} seperti IAM $ {AGE} tahun; 3. Secara semulajadi menyokong teks berbilang baris tanpa menambahkan garis baru secara manual. Senario biasa termasuk kandungan HTML yang menjana secara dinamik, output rentetan berbilang baris, dan jahitan logik bersyarat yang dipermudahkan. Nota termasuk mengelakkan serangan suntikan, penggunaan templat tag lanjutan, dan menjaga logik mudah.

Untuk menggunakan JavaScript untuk membuat iframe kotak pasir yang selamat, mula-mula gunakan atribut kotak pasir HTML untuk mengehadkan tingkah laku iframe, seperti melarang pelaksanaan skrip, tingkap pop timbul dan penyerahan bentuk; kedua, dengan menambah token tertentu seperti skrip membenarkan untuk melegakan keizinan seperti yang diperlukan; kemudian menggabungkan postmessage () untuk mencapai komunikasi silang domain yang selamat, sambil mengesahkan sumber mesej dan data yang ketat; Akhirnya elakkan kesilapan konfigurasi biasa, seperti tidak mengesahkan sumber, tidak menubuhkan CSP, dan lain -lain, dan melakukan ujian keselamatan sebelum pergi dalam talian.
