Berikut adalah beberapa idea aplikasi yang boleh anda bina untuk meningkatkan kemahiran pengekodan anda

Adakah anda pernah mahu membina sesuatu tetapi anda tidak tahu apa yang harus dilakukan? Sama seperti penulis kadang-kadang mempunyai "blok penulis", ini juga berlaku untuk pembangun.

Bersama rakan saya Jim, kami membuat koleksi idea aplikasi yang bertujuan untuk menyelesaikan masalah ini sekali dan selamanya!

Aplikasi ini adalah:

  • bagus untuk meningkatkan kemahiran pengekodan anda
  • hebat untuk bereksperimen dengan teknologi baru
  • bagus untuk ditambahkan dalam portfolio anda untuk menarik perhatian majikan / pelanggan anda yang seterusnya
  • bagus untuk dijadikan contoh dalam tutorial (artikel atau video)
  • senang dilengkapkan dan juga senang dilanjutkan dengan ciri baru

Ini bukan hanya senarai projek yang mudah, tetapi koleksi yang menerangkan setiap projek dengan cukup terperinci sehingga anda dapat mengembangkannya dari awal!

Setiap spesifikasi projek mengandungi yang berikut:

  1. Objektif yang jelas dan deskriptif
  2. Senarai Stories Pengguna yang perlu dilaksanakan (cerita-cerita ini bertindak lebih sebagai garis panduan daripada senarai paksa To-Do ini . Jangan ragu untuk menambah ciri-ciri anda sendiri jika anda mahu)
  3. Senarai ciri bonus yang meningkatkan bukan sahaja projek asas tetapi juga kemahiran anda pada masa yang sama
  4. Semua sumber dan pautan untuk membantu anda mencari apa yang anda perlukan untuk menyelesaikan projek

Projek

Semua projek dibahagikan kepada tiga peringkat berdasarkan pengetahuan dan pengalaman yang diperlukan untuk menyelesaikannya. Tahap ini adalah:

  1. Pemula - Pembangun pada peringkat awal perjalanan pembelajaran mereka. Mereka yang biasanya fokus membuat aplikasi yang dihadapi pengguna.
  2. Pertengahan - Pembangun pada tahap pembelajaran dan pengalaman pertengahan. Mereka selesa di UI / UX, menggunakan alat pengembangan, dan membina aplikasi yang menggunakan perkhidmatan API.
  3. Lanjutan - Pembangun yang mempunyai semua perkara di atas, dan mempelajari teknik yang lebih maju seperti melaksanakan aplikasi BackEnd dan perkhidmatan Pangkalan Data.

Di bawah ini anda akan dapati 5 projek untuk setiap peringkat ( keseluruhan 15 ), tetapi terdapat lebih dari 30 projek (pada masa ini) di repositori GitHub ini. Pastikan anda memeriksanya kerana kami merancang untuk menambahkan lebih banyak projek pada masa akan datang. Anda dialu-alukan untuk membantu! (Lebih lanjut mengenai ini di bahagian Menyumbang di bawah?)

1. Aplikasi Catatan

Tahap: 1 - Permulaan

Penerangan : Buat dan simpan nota anda untuk tujuan kemudian!

Cerita Pengguna

  • Pengguna boleh membuat nota
  • Pengguna boleh menyunting nota
  • Pengguna boleh memadam nota
  • Semasa menutup tetingkap penyemak imbas, nota akan disimpan dan ketika Pengguna kembali, data akan diambil

Ciri bonus

  • Pengguna boleh membuat dan menyunting nota dalam format Markdown. Apabila disimpan, ia akan menukar Markdown ke HTML
  • Pengguna dapat melihat tarikh ketika dia membuat nota

Pautan dan sumber yang berguna

  • Penyimpanan tempatan
  • Panduan Markdown
  • Ditandai - Pengurai penurunan harga

Contoh projek

2. Lampu Krismas

Tahap: 1 - Permulaan

Penerangan : Aplikasi Lampu Natal bergantung pada bakat pengembangan anda untuk membuat paparan cahaya yang memukau. Tugas anda adalah melukis tujuh bulatan berwarna berturut-turut dan berdasarkan pemasa mengubah intensiti setiap bulatan. Apabila bulatan dicerahkan pendahulunya kembali ke intensiti normalnya.

Ini mensimulasikan kesan rentetan lampu bergelombang, serupa dengan yang dipaparkan semasa Cuti Krismas.

Cerita Pengguna

  • Pengguna boleh menekan butang untuk memulakan dan menghentikan paparan
  • Pengguna boleh mengubah selang masa mengawal perubahan intensiti

Ciri bonus

  • Pengguna boleh memilih warna yang digunakan untuk mengisi setiap bulatan
  • Pengguna boleh menentukan nilai intensiti
  • Pengguna boleh mengubah ukuran bulatan dalam barisan
  • Pengguna dapat menentukan jumlah baris yang akan disertakan dalam paparan. Dari satu hingga tujuh baris boleh dipilih

Pautan dan sumber yang berguna

  • Contoh Gambar
  • Matrik LED Adafruit

Contoh projek

3. FlipImage

Tahap: 1 - Permulaan

Penerangan : Penting bagi Pembangun Web untuk memahami asas-asas memanipulasi gambar kerana aplikasi web yang kaya bergantung pada gambar untuk menambah nilai pada antara muka pengguna dan pengalaman pengguna (UI / UX).

FlipImage meneroka satu aspek manipulasi gambar - putaran gambar. Aplikasi ini memaparkan panel persegi yang mengandungi satu gambar yang disajikan dalam matriks 2x2. Dengan menggunakan satu anak panah atas, bawah, kiri, dan kanan yang bersebelahan dengan setiap gambar, pengguna boleh membalikkannya secara menegak atau mendatar.

Anda hanya perlu menggunakan HTML asli, CSS, dan Javascript untuk melaksanakan aplikasi ini. Pakej gambar dan perpustakaan tidak dibenarkan.

Cerita Pengguna

  • Pengguna dapat melihat panel yang mengandungi satu gambar berulang dalam matriks 2x2
  • Pengguna boleh membalikkan salah satu gambar secara menegak atau mendatar menggunakan satu set anak panah atas, bawah, kiri, dan kanan di sebelah gambar

Ciri bonus

  • Pengguna dapat mengubah gambar lalai dengan memasukkan URL gambar yang berbeda di medan input
  • Pengguna dapat memaparkan gambar baru dengan mengklik butang 'Display' di sebelah medan input
  • Pengguna dapat melihat mesej ralat jika URL gambar baru tidak dijumpai

Pautan dan sumber yang berguna

  • Cara Melakarkan Imej
  • Buat Animasi Flipping CSS

Contoh projek

4. Aplikasi Kuiz

Tahap: 1 - Permulaan

Penerangan : Berlatih dan uji pengetahuan anda dengan menjawab soalan dalam aplikasi kuiz.

Sebagai pembangun, anda boleh membuat aplikasi kuiz untuk menguji kemahiran pengekodan pembangun lain. (HTML, CSS, JavaScript, Python, PHP, dll ...)

Cerita Pengguna

  • Pengguna boleh memulakan kuiz dengan menekan a button
  • Pengguna dapat melihat soalan dengan 4 kemungkinan jawapan
  • Setelah memilih jawapan, paparkan soalan seterusnya kepada Pengguna. Lakukan ini sehingga kuiz selesai
  • Pada akhirnya, Pengguna dapat melihat statistik berikut:
  1. Masa yang diperlukan untuk menyelesaikan kuiz
  2. Berapa banyak jawapan yang betul yang dia dapat
  3. Mesej yang menunjukkan sama ada dia passedatau failedkuiz

Ciri bonus

  • Pengguna boleh berkongsi hasil kuiz di media sosial
  • Tambahkan beberapa kuiz ke aplikasi. Pengguna boleh memilih mana yang akan diambil
  • Pengguna boleh membuat akaun dan menyimpan semua skor di papan pemuka. Pengguna boleh menyelesaikan kuiz berkali-kali

Pautan dan sumber yang berguna

  • Buka Pangkalan Data Trivia

Contoh projek

Aplikasi kuiz yang dibina dengan React (tunggu sehingga dimuat kerana dihoskan di Heroku)

5. Penukar Angka Rom ke Nombor Perpuluhan

Tahap: 1 - Permulaan

Huraian : Sistem angka yang diwakili oleh angka Rom berasal dari Rom kuno dan tetap menjadi cara biasa menulis nombor di seluruh Eropah hingga Zaman Pertengahan Akhir. Angka Rom, seperti yang digunakan hari ini, menggunakan tujuh simbol, masing-masing dengan nilai integer tetap.

Lihat jadual di bawah pasangan Simbol - Nilai :

  • Saya - 1
  • V - 5
  • X - 10
  • L - 50
  • C - 100
  • D - 500
  • M - 1000

Cerita Pengguna

  • Pengguna harus dapat memasukkan satu nombor Roman dalam medan input
  • Pengguna dapat melihat hasilnya dalam bidang keluaran tunggal yang mengandungi desimal (pangkalan 10) bersamaan dengan angka rumi yang dimasukkan dengan menekan butang
  • Sekiranya simbol yang salah dimasukkan, Pengguna akan melihat ralat

Ciri bonus

  • Pengguna dapat melihat penukaran dibuat secara automatik semasa saya menaip
  • Pengguna harus dapat menukar dari perpuluhan ke Roman (sebaliknya)

Pautan dan sumber yang berguna

  • Penjelasan mengenai Angka Rom

Contoh projek

Penukar Nombor Rom

6. Aplikasi Pencari Buku

Tahap: 2 - Menengah

Penerangan : Buat aplikasi yang akan membolehkan pengguna mencari buku dengan memasukkan pertanyaan (Tajuk, Pengarang, dll). Paparkan buku yang dihasilkan dalam senarai di halaman dengan semua data yang sesuai.

Cerita Pengguna

  • Pengguna boleh memasukkan pertanyaan carian ke inputmedan
  • Pengguna boleh menghantar pertanyaan. Ini akan memanggil API yang akan mengembalikan pelbagai buku dengan data yang sesuai ( Tajuk , Pengarang , Tarikh Terbitan , Gambar , dll)
  • Pengguna dapat melihat senarai buku yang muncul di halaman

Ciri bonus

  • Untuk setiap item dalam senarai tambahkan pautan yang akan menghantar Pengguna ke laman web luaran yang mempunyai lebih banyak maklumat mengenai buku
  • Laksanakan Reka Bentuk Responsif
  • Tambah memuatkan animasi

Pautan dan sumber yang berguna

Anda boleh menggunakan API Buku Google

Contoh Projek

Pencarian Buku-React

7. Kad-Memori-Permainan

Tahap: 2 - Menengah

Penerangan : Memori kad adalah permainan di mana anda harus mengklik kad untuk melihat gambar apa di bawahnya dan cuba mencari gambar yang sesuai di bawah kad lain.

Cerita Pengguna

  • Pengguna dapat melihat grid dengan kad nxn ( nadalah bilangan bulat). Semua kad menghadap ke bawah pada mulanya ( hiddennyatakan)
  • Pengguna boleh mengklik butang untuk memulakan permainan. Apabila butang ini diklik, pemasa akan bermula
  • Pengguna boleh mengklik mana-mana kad untuk membongkar gambar yang ada di bawahnya (ubah ke visiblekeadaan). Gambar akan dipaparkan sehingga pengguna mengklik kad ke-2

Apabila Pengguna mengklik kad ke-2:

  • Sekiranya ada perlawanan, 2 kad tersebut akan tersingkir dari permainan (baik sembunyikan / hapus atau biarkan mereka berada dalam visiblekeadaan)
  • Sekiranya tidak ada padanan, 2 kad akan kembali ke keadaan semula ( hiddenkeadaan)
  • Setelah semua pertandingan dijumpai, Pengguna dapat melihat kotak dialog yang menunjukkan pesan Selamat dengan penghitung yang menunjukkan waktu yang diperlukan untuk menyelesaikan permainan

Ciri bonus

  • Penggunaan boleh memilih antara pelbagai tahap kesukaran (Mudah, Sederhana, Keras). Kesukaran yang meningkat bermaksud: mengurangkan masa yang ada untuk menyelesaikan dan / atau menambah bilangan kad
  • Pengguna dapat melihat statistik permainan (jumlah kali dia menang / kalah, masa terbaik untuk setiap peringkat)

Pautan dan sumber yang berguna

  • Wikipedia

Contoh projek

Permainan memori kad balik

Permainan Kad Memori SMB3

8. Penjana Jadual Markdown

Tahap: 2 - Menengah

Penerangan : Buat aplikasi yang akan mengubah jadual biasa dengan data yang disediakan oleh Pengguna (secara opsional) menjadi jadual yang diformat Markdown.

Cerita Pengguna

  • Pengguna boleh membuat HTML tabledengan sejumlah Baris dan Lajur
  • Pengguna boleh memasukkan teks di setiap sel HTML table
  • Pengguna boleh menghasilkan Markdown formatted tableyang akan mengandungi data dariHTML table
  • Pengguna boleh melihat pratonton Markdown formatted table

Ciri bonus

  • Pengguna boleh menyalin Markdown formatted tableke papan keratan dengan menekan butang
  • Pengguna boleh memasukkan Baris atau Lajur baru ke lokasi yang ditentukan
  • Pengguna boleh menghapus Baris atau Lajur sepenuhnya
  • Pengguna dapat menyelaraskan (ke kiri , kanan atau tengah ) sel , lajur , baris , atau keseluruhan jadual

Pautan dan sumber yang berguna

  • Panduan Markdown
  • Ditandai - Pengurai penurunan harga
  • Cara Salin ke Papan Keratan

Contoh projek

Jadual Penjana Jadual / Markdown

9. Seni Rentetan

Tahap: 2 - Menengah

Huraian : Tujuan String Art adalah untuk memberi latihan kepada pengembang untuk membuat grafik animasi sederhana, menggunakan geometri dalam algoritma animasi, dan membuat sesuatu yang menyenangkan untuk ditonton.

String Art melukis garis tunggal berwarna-warni yang bergerak dengan lancar sehingga satu hujung menyentuh sisi tetingkap tertutup. Pada titik itu, ia menyentuh kesan "lantunan" yang diterapkan untuk mengubah arahnya.

Kesan riak dibuat dengan hanya mengekalkan 10-20 gambar garis ketika bergerak. Gambar lama semakin pudar sehingga hilang.

Perpustakaan animasi tidak dibenarkan. Gunakan hanya HTML / CSS / JavaScript Vanilla.

Cerita Pengguna

  • Mulakan dengan melukis garis pelbagai warna pada kedudukan rawak di dalam batas tetingkapnya
  • Setiap 20 ms melukis salinan baris baru pada kedudukan baru berdasarkan lintasan - jarak kenaikan dari garis sebelumnya berdasarkan titik akhir
  • Apabila kedua-dua titik akhir garis menyentuh sempadan tetingkap yang menutup, ia berubah arah dan mengubah sudut secara rawak
  • Memudarkan intensiti garis lama secara beransur-ansur sehingga hanya 10-20 garisan terbaru yang dapat dilihat untuk mewujudkan rasa pergerakan atau "riak"

Ciri bonus

  • Pengguna boleh menentukan panjang garisan dan halaju
  • Pengguna boleh menentukan beberapa baris di dalam tetingkap, semuanya bergerak di sepanjang lintasan dan halaju yang berbeza

Pautan dan sumber yang berguna

  • Menggunakan Animasi & Peralihan Pelbagai Langkah
  • Asas Animasi

Contoh projek

Projek ini sangat dekat, tetapi mempunyai tingkap kecil dan monokromatik. Daniel Cortes

10. Aplikasi Yang Perlu Dilakukan

Tahap: 2 - Menengah

Penerangan : Aplikasi Perkara Yang Harus Dilakukan di mana pengguna dapat menuliskan semua perkara yang ingin dicapai.

Cerita Pengguna

  • Pengguna dapat melihat inputbidang di mana dia dapat mengetik item yang harus dilakukan
  • Dengan menekan enter (atau butang), Pengguna dapat menyerahkan item yang harus dilakukan dan dapat melihatnya ditambahkan ke daftar tugas yang harus dilakukan
  • Pengguna boleh menandakan perkara yang harus dilakukan sebagai completed
  • Pengguna boleh membuang item yang harus dilakukan dengan menekan butang (atau pada item yang harus dilakukan sendiri)

Ciri bonus

  • Pengguna boleh mengedit perkara yang harus dilakukan
  • Pengguna dapat melihat senarai dengan semua perkara yang harus dilakukan
  • Pengguna dapat melihat senarai dengan semua aktiviti aktif
  • Pengguna dapat melihat tarikh ketika dia membuat tugasan
  • Semasa menutup tetingkap penyemak imbas, perkara yang harus dilakukan akan disimpan dan ketika Pengguna kembali, data akan diambil

Pautan dan sumber yang berguna

  • Penyimpanan tempatan

Contoh projek

Aplikasi Todo dibina dengan React

11. Enjin Permainan Battleship

Tahap: 3 - Lanjutan

Penerangan : Battleship Game Engine (BGE) menerapkan permainan papan berasaskan giliran klasik sebagai pakej yang terpisah dari lapisan persembahan. Ini adalah jenis corak seni bina yang berguna dalam banyak aplikasi kerana membolehkan sebilangan aplikasi menggunakan perkhidmatan yang sama.

BGE itu sendiri dipanggil melalui serangkaian panggilan fungsi dan bukan melalui tindakan pengguna akhir yang digabungkan secara langsung. Dalam hal ini, menggunakan BGE mirip dengan menggunakan API atau rangkaian rute yang didedahkan oleh pelayan web.

Cabaran ini mengharuskan anda mengembangkan BGE dan lapisan persembahan teks yang sangat tipis untuk ujian yang terpisah dari mesin itu sendiri. Oleh kerana itu, Kisah Pengguna di bawah dibahagi dua set - satu untuk BGE dan satu untuk lapisan persembahan berasaskan teks.

BGE bertanggungjawab untuk mengekalkan keadaan permainan.

Cerita Pengguna

BGE

  • Pemanggil boleh menggunakan startGame()fungsi untuk memulakan permainan 1 pemain. Fungsi ini akan menghasilkan papan permainan 8x8 yang terdiri dari 3 kapal dengan lebar satu persegi dan panjang:
  1. Pemusnah: 2 petak
  2. Penjelajah: 3 petak
  3. Kapal perang: 4 petak

startGame() secara rawak akan meletakkan kapal-kapal ini di papan ke arah mana pun dan akan mengembalikan array yang mewakili penempatan kapal.

  • Pemanggil dapat memanggil shoot()fungsi melewati baris sasaran dan koordinat lajur sel yang disasarkan di papan permainan. shoot()akan mengembalikan indikator yang menunjukkan jika tembakan tersebut menghasilkan hit atau miss, jumlah kapal yang tersisa (iaitu belum tenggelam), susunan penempatan kapal, dan susunan hits dan misses yang dikemas kini.

Sel dalam susunan hits dan misses akan berisi ruang jika belum disasarkan, Ojika mereka disasarkan tetapi tidak ada bahagian kapal yang berada di lokasi itu, atau Xjika sel tersebut ditempati oleh sebahagian kapal.

Lapisan Pembentangan berasaskan teks

  • Pengguna dapat melihat hits dan misses array ditampilkan sebagai perwakilan watak 2 dimensi dari papan permainan yang dikembalikan oleh startGame()fungsi.
  • Pengguna boleh diminta memasukkan koordinat petak sasaran di papan permainan.
  • Pengguna dapat melihat paparan hit dan miss array yang diperbaharui setelah mengambil gambar.
  • Pengguna dapat melihat mesej selepas setiap tembakan yang menunjukkan sama ada tembakan tersebut menghasilkan hantaman atau ketinggalan.
  • Pengguna dapat melihat mesej ucapan selamat setelah tembakan yang menenggelamkan kapal yang terakhir.
  • Pengguna boleh diminta untuk bermain lagi pada akhir setiap permainan. Menolak untuk bermain lagi menghentikan permainan.

Ciri bonus

BGE

  • Pemanggil dapat menentukan bilangan baris dan lajur di papan permainan sebagai parameter startGame()fungsi.
  • Pemanggil dapat memanggil gameStats()fungsi yang mengembalikan objek Javascript yang mengandungi metrik untuk permainan semasa. Contohnya, jumlah giliran yang dimainkan, jumlah hits dan ketinggalan semasa, dll.
  • Pemanggil dapat menentukan jumlah pemain (1 atau 2) ketika memanggil startGame()yang akan menghasilkan satu papan untuk setiap pemain yang diisi secara rawak dengan kapal.

shoot()akan menerima nombor pemain yang dibuat untuk tembakan bersama dengan koordinat pukulan. Data yang dikembalikannya adalah untuk pemain itu.

Lapisan Pembentangan berasaskan teks

  • Pengguna dapat melihat statistik permainan semasa pada bila-bila masa dengan memasukkan frasa statssebagai ganti koordinat sasaran. (Perhatikan bahawa ini memerlukan gameStats()fungsi di BGE)
  • Pengguna dapat menentukan permainan dua pemain yang akan dimainkan, dengan setiap pemain bergilir-gilir dalam sesi terminal yang sama (Perhatikan bahawa ini memerlukan Fitur Bonus yang sesuai di BGE)
  • Pengguna dapat melihat nombor pemain dalam arahan yang berkaitan dengan input pada setiap giliran.
  • Pengguna dapat melihat kedua-dua pemain bermain di akhir setiap giliran.

Pautan dan sumber yang berguna

  • Permainan Kapal Perang (Wikipedia)
  • Peraturan Permainan Battleship (Hasbro)

Contoh projek

Video YouTube ini menunjukkan bagaimana Permainan Battleship berdasarkan teks dimainkan.

Contoh berikut diberikan sebagai demonstrasi permainan Battleship jika tidak dikenali oleh anda. Ingat bahawa anda harus melaksanakan lapisan persembahan berasaskan teks untuk ujian. Permainan Battleship oleh Chris Brody

12. Aplikasi Berbual

Tahap: 3 - Lanjutan

Penerangan : Antara muka sembang masa nyata di mana beberapa pengguna dapat berinteraksi antara satu sama lain dengan menghantar mesej.

Sebagai MVP (Minimum Viable Product) anda boleh fokus membina antara muka Chat. Fungsi masa nyata boleh ditambah kemudian (ciri bonus).

Cerita Pengguna

  • Pengguna diminta memasukkan nama pengguna ketika dia mengunjungi aplikasi sembang. Nama pengguna akan disimpan dalam aplikasi
  • Pengguna dapat melihat tempat input fielddia boleh menaip mesej baru
  • Dengan menekan enterkekunci atau dengan mengklik pada sendbutang teks akan dipaparkan di chat boxsebelah nama pengguna (mis. John Doe: Hello World!)

Ciri bonus

  • Mesej akan dapat dilihat oleh semua Pengguna yang ada di aplikasi sembang (menggunakan WebSockets)
  • Apabila Pengguna baru menyertai sembang, mesej akan dipaparkan kepada semua Pengguna yang ada
  • Mesej disimpan dalam pangkalan data
  • Pengguna dapat mengirim gambar, video, dan pautan yang akan ditampilkan dengan baik
  • Pengguna boleh memilih dan menghantar emoji
  • Pengguna boleh berbual secara tertutup
  • Pengguna boleh menyertai channelstopik tertentu

Pautan dan sumber yang berguna

  • Socket.io
  • Cara membina aplikasi sembang React.js dalam 10 minit - artikel

Contoh projek

Berbual2

13. Garis Masa GitHub

Tahap: 3 - Lanjutan

Huraian : Perwakilan API dan grafik maklumat adalah ciri khas aplikasi web moden. Garis Masa GitHub menggabungkan keduanya untuk membuat sejarah visual aktiviti GitHub pengguna.

Matlamat Garis Masa GitHub adalah untuk menerima nama pengguna GitHub dan menghasilkan garis masa yang mengandungi setiap repo dan diberi catatan dengan nama repo, tarikh ia dibuat, dan keterangannya. Garis masa harus sesuai dengan calon majikan. Ia mesti mudah dibaca dan memanfaatkan warna dan tipografi dengan berkesan.

Hanya repos GitHub awam yang harus dipaparkan.

Cerita Pengguna

  • Pengguna boleh memasukkan nama pengguna GitHub
  • Pengguna boleh mengklik butang 'Hasilkan' untuk membuat dan memaparkan garis masa repo pengguna bernama
  • Pengguna dapat melihat mesej amaran jika nama pengguna GitHub bukan nama pengguna GitHub yang sah.

Ciri bonus

  • Pengguna dapat melihat ringkasan jumlah repos yang dihitung pada tahun ia dibuat

Pautan dan sumber yang berguna

GitHub menawarkan dua API yang mungkin anda gunakan untuk mengakses data repo. Anda juga boleh memilih untuk menggunakan paket NPM untuk mengakses API GitHub.

Dokumentasi untuk API GitHub boleh didapati di:

  • GitHub REST API V3
  • API GitHub GraphQL V4

Contoh kod yang menunjukkan cara menggunakan API GitHub adalah:

Anda boleh menggunakan perintah CURL ini untuk melihat JSON yang dikembalikan oleh V3 REST API untuk repos anda:

curl -u "user-id" //api.github.com/users/user-id/repos

Contoh projek

14. Eja-It

Tahap: 3 - Lanjutan

Perihalan : Mengetahui ejaan adalah bahagian asas untuk fasih berbahasa. Sama ada anda seorang remaja yang belajar bagaimana mengeja atau individu yang mempelajari bahasa baru yang dapat dipraktikkan dapat membantu memantapkan kemahiran bahasa anda.

Aplikasi Spell-It membantu pengguna mempraktikkan ejaan mereka dengan memainkan rakaman audio perkataan yang kemudian pengguna mesti mengeja menggunakan papan kekunci komputer.

Cerita Pengguna

  • Pengguna boleh mengklik butang 'Main' untuk mendengar kata yang hendak dimasukkan
  • Pengguna dapat melihat huruf yang dipaparkan di kotak teks input kata ketika dimasukkan pada papan kekunci
  • Pengguna boleh mengklik butang 'Enter' untuk mengirimkan kata yang telah ditaip di kotak teks input kata
  • Pengguna dapat melihat mesej pengesahan apabila perkataan yang betul ditaip
  • Pengguna dapat melihat mesej yang meminta perkataan itu ditaip lagi apabila ejaannya tidak betul
  • Pengguna dapat melihat penghitungan jumlah ejaan yang betul, jumlah kata yang dicuba, dan peratusan entri yang berjaya.

Ciri bonus

  • Pengguna dapat mendengar bunyi pengesahan apabila perkataan dieja dengan betul
  • Pengguna dapat mendengar bunyi amaran apabila ejaannya salah
  • Pengguna boleh mengklik butang 'Petunjuk' untuk menyoroti huruf yang salah di kotak teks input perkataan
  • Pengguna dapat menekan kekunci 'Enter' pada papan kekunci untuk mengirimkan kata yang diketik atau mengklik butang 'Enter' di tetingkap aplikasi

Pautan dan sumber yang berguna

  • Instrumen Texas Bercakap dan Eja
  • API Audio Web
  • Klik dan Cakap

Contoh projek

Word Wizard untuk iOS

Ucapkan N Eja di Google Play

15. Aplikasi Tinjauan

Tahap: 3 - Lanjutan

Penerangan : Tinjauan adalah bahagian yang berharga dari kotak alat pemaju mana pun. Mereka berguna untuk mendapatkan maklum balas dari pengguna anda mengenai berbagai topik termasuk kepuasan aplikasi, keperluan, keperluan mendatang, masalah, keutamaan, dan hanya penjelasan yang jelas.

Aplikasi Survei memberi anda peluang untuk belajar dengan mengembangkan aplikasi berfitur lengkap yang dapat Anda tambahkan ke kotak alat anda. Ini memberikan kemampuan untuk menentukan survei, memungkinkan pengguna untuk merespon dalam jangka waktu yang telah ditentukan, dan membuat tabel dan menyajikan hasil.

Pengguna aplikasi ini dibahagikan kepada dua peranan yang berbeza, masing-masing mempunyai keperluan yang berbeza:

  • Penyelaras Tinjauan menentukan dan menjalankan tinjauan. Ini adalah fungsi pentadbiran yang tidak tersedia untuk pengguna biasa.
  • Responden Tinjauan Melengkapkan tinjauan dan melihat hasilnya. Mereka tidak mempunyai hak pentadbiran dalam aplikasi.

Alat tinjauan komersial merangkumi fungsi sebaran yang menghantar e-mel tinjauan kepada responden kajian. Untuk kesederhanaan, aplikasi ini menganggap bahawa tinjauan yang terbuka untuk respons akan dapat diakses dari laman web aplikasi.

Cerita Pengguna

Am

  • Penyelaras Tinjauan dan Responden Kaji Selidik dapat menentukan, melakukan, dan melihat tinjauan dan hasil tinjauan dari laman web umum
  • Penyelaras Tinjauan boleh log masuk ke aplikasi untuk mengakses fungsi pentadbiran, seperti menentukan tinjauan.

Menentukan Kajian

  • Penyelaras Tinjauan boleh menentukan tinjauan yang mengandungi 1-10 soalan pilihan ganda.
  • Penyelaras Tinjauan dapat menentukan 1-5 pilihan yang saling eksklusif untuk setiap soalan.
  • Penyelaras Tinjauan boleh memasukkan tajuk untuk tinjauan.
  • Penyelaras Tinjauan boleh mengklik butang 'Batal' untuk kembali ke laman utama tanpa menyimpan tinjauan.
  • Penyelaras Tinjauan boleh mengklik butang 'Simpan' untuk menyimpan tinjauan.

Menjalankan Kajian

  • Penyelaras Tinjauan boleh membuka tinjauan dengan memilih tinjauan dari senarai tinjauan yang telah ditentukan sebelumnya
  • Penyelaras Tinjauan boleh menutup tinjauan dengan memilihnya dari senarai tinjauan terbuka
  • Responden Tinjauan boleh menyelesaikan tinjauan dengan memilihnya dari senarai tinjauan terbuka
  • Responden Tinjauan boleh memilih jawapan untuk pertanyaan tinjauan dengan mengklik kotak centang
  • Responden Tinjauan dapat melihat bahawa respons yang dipilih sebelumnya secara automatik tidak akan dicentang jika respons yang berbeza diklik.
  • Responden Tinjauan dapat mengklik butang 'Batal' untuk kembali ke laman utama tanpa menghantar tinjauan.
  • Responden Kaji Selidik boleh mengklik butang 'Kirim' untuk menghantar respons mereka terhadap tinjauan.
  • Responden Tinjauan dapat melihat mesej ralat jika 'Kirim' diklik, tetapi tidak semua pertanyaan telah dijawab.

Melihat Hasil Tinjauan

  • Penyelaras Tinjauan dan Responden Tinjauan boleh memilih tinjauan untuk dipaparkan dari senarai tinjauan tertutup
  • Penyelaras Kaji Selidik dan Responden Kaji Selidik dapat melihat hasil tinjauan seperti dalam format tabel yang menunjukkan jumlah respons untuk setiap kemungkinan pilihan terhadap pertanyaan.

Ciri bonus

  • Responden Kaji Selidik dapat membuat akaun unik di aplikasi
  • Responden Tinjauan boleh log masuk ke aplikasi
  • Responden Tinjauan tidak dapat menyelesaikan tinjauan yang sama lebih dari sekali
  • Penyelaras Kaji Selidik dan Responden Kaji Selidik dapat melihat gambaran grafik hasil tinjauan (seperti carta pai, bar, lajur, dll.)

Pautan dan sumber yang berguna

Perpustakaan untuk membina tinjauan: SurveyJS

Beberapa perkhidmatan tinjauan komersial merangkumi: Survey Monkey dan Typeform

Contoh projek

Menyumbang

Anda dipersilakan untuk menyumbang dalam projek di repositori GitHub! Sebarang sumbangan amat dihargai.

Anda boleh menyumbang dengan dua cara:

  1. buat masalah dan beritahu idea anda kepada kami. Pastikan bahawa anda menggunakan label idea baru dalam kes ini;
  2. garpu projek dan hantarkan PR. Sebelum melakukannya, pastikan anda membaca dan mengikuti Panduan Sumbangan (anda boleh mendapatkannya di repositori);

Tambahkan contoh anda sendiri

Anda juga boleh menambahkan contoh anda sendiri ke projek-projek setelah anda menyelesaikannya. Saya sangat mendorong anda untuk melakukan ini kerana ini akan menunjukkan kepada orang lain apa yang menakjubkan yang telah anda bina! ?

Sebarkan!

Sekiranya maklumat dari artikel ini dan dari repo berguna untuk anda dengan cara apa pun, pastikan anda memberikannya bintang ?, dengan cara ini orang lain dapat menemuinya dan juga mendapat faedah! Bersama kita dapat berkembang dan menjadikan komuniti kita lebih baik!

Adakah anda mempunyai cadangan bagaimana kami dapat memperbaiki projek ini secara keseluruhan? Beritahu kami! Kami ingin mendengar maklum balas anda!

Penyumbang Utama ??

Florin Pop : Twitter dan laman web.

Jim Medlock : Twitter dan Medium

Cabaran Pengekodan Mingguan?

Sebagai bonus, ada Cabaran Pengekodan Mingguan di mana anda boleh belajar lebih banyak dengan mempraktikkan kemahiran anda dalam projek dunia nyata. Baca Panduan Lengkap untuk mengetahui bagaimana anda boleh mengambil bahagian! ?

Asalnya diterbitkan di www.florin-pop.com.