Lebih banyak idea projek untuk meningkatkan kemahiran pengekodan anda

Dua minggu yang lalu saya menerbitkan sebuah artikel yang mengandungi 15 idea projek yang boleh anda bina untuk meningkatkan kemahiran pengekodan anda, dan orang sangat gembira dengan sumber itu.

Juga, repositori idea aplikasi telah mendapat hampir 3000 bintang sejak saya menerbitkan artikel itu. Itu tidak waras! ?

Terima kasih semua untuk itu! ?

Dalam catatan ini kita akan membahas beberapa projek baru yang ditambahkan ke repositori sejak itu.

Sebagai peringatan ringkas, semua projek dibahagikan kepada tiga peringkat berdasarkan pengetahuan dan pengalaman yang diperlukan untuk menyelesaikannya. Lihat keterangan peringkat di repositori.

Di bawah ini anda akan dapati 2 idea projek Pemula , 4 Pertengahan dan 3 Lanjutan .

1. KALKULATOR

Tahap: 1 - Permulaan

Kalkulator bukan sahaja salah satu alat yang paling berguna yang tersedia, tetapi juga merupakan kaedah yang baik untuk memahami UI dan pemprosesan peristiwa dalam aplikasi. Dalam masalah ini, anda akan membuat kalkulator yang menyokong pengiraan aritmetik asas pada bilangan bulat.

Gaya bergantung kepada anda, jadi gunakan imaginasi anda dan kreatif! Anda juga mungkin memerlukan masa yang tepat untuk bereksperimen dengan aplikasi kalkulator pada peranti mudah alih anda untuk memahami fungsi asas dan kes tepi dengan lebih baik.

Kekangan

  • Anda mungkin tidak menggunakan eval()fungsi tersebut untuk menjalankan pengiraan

Cerita Pengguna

  • Pengguna dapat melihat paparan yang menunjukkan nombor semasa yang dimasukkan atau hasil operasi terakhir.
  • Pengguna dapat melihat pad masuk yang mengandungi butang untuk angka 0-9, operasi - '+', '-', '/', dan '=', butang 'C' (untuk jelas), dan butang 'AC' (untuk jelas semua).
  • Pengguna boleh memasukkan nombor sebagai urutan hingga 8 digit dengan mengklik angka di pad entri. Kemasukan sebarang digit melebihi 8 akan diabaikan.
  • Pengguna boleh mengklik butang operasi untuk memaparkan hasil operasi tersebut pada: _ hasil operasi sebelumnya dan nombor terakhir dimasukkan ATAU _ dua nombor terakhir dimasukkan ATAU * nombor terakhir dimasukkan
  • Pengguna boleh mengklik butang 'C' untuk membersihkan nombor terakhir atau operasi terakhir. Sekiranya pengguna terakhir adalah operasi, paparan akan diperbaharui ke nilai yang mendahuluinya.
  • Pengguna boleh mengklik butang 'AC' untuk membersihkan semua kawasan kerja dalaman dan untuk menetapkan paparan ke 0.
  • Pengguna dapat melihat 'ERR' yang dipaparkan sekiranya operasi melebihi 8 digit maksimum.

Ciri bonus

  • Pengguna boleh mengklik butang '+/-' untuk mengubah tanda nombor yang sedang dipaparkan.
  • Pengguna dapat melihat butang titik perpuluhan (.) Pada pad masuk yang membolehkan nombor titik terapung hingga 3 tempat dimasukkan dan operasi dapat dilakukan hingga jumlah maksimum tempat perpuluhan yang dimasukkan untuk satu nombor.

Pautan dan sumber yang berguna

  • Kalkulator (Wikipedia)
  • MDN

Contoh projek

2. RECIPE APP

Tahap: 1 - Permulaan

Anda mungkin tidak menyedari ini, tetapi resipi tidak lebih daripada algoritma masakan. Seperti program, resipi adalah serangkaian langkah penting yang, jika diikuti dengan betul, menghasilkan hidangan yang enak.

Objektif aplikasi Resipi adalah untuk membantu pengguna menguruskan resipi dengan cara yang memudahkan mereka mengikuti.

Kekangan

  • Untuk versi awal aplikasi ini, data resipi mungkin dikodkan sebagai fail JSON. Setelah melaksanakan versi awal aplikasi ini, Anda dapat memperluasnya untuk menyimpan resipi dalam fail atau pangkalan data.

Cerita Pengguna

  • Pengguna dapat melihat senarai tajuk resipi
  • Pengguna boleh mengklik tajuk resipi untuk memaparkan kad resipi yang mengandungi tajuk resipi, jenis makanan (sarapan, makan tengah hari, makan malam, atau makanan ringan), bilangan orang yang dilayaninya, tahap kesukarannya (pemula, pertengahan, lanjutan), senarai ramuan (termasuk jumlahnya), dan langkah-langkah penyediaannya.
  • Pengguna mengklik tajuk resipi baru untuk menggantikan kad semasa dengan resipi baru.

Ciri bonus

  • Pengguna dapat melihat foto yang menunjukkan seperti apa item tersebut setelah disiapkan.
  • Pengguna boleh mencari resipi yang tidak terdapat dalam senarai tajuk resipi dengan memasukkan nama makanan ke dalam kotak carian dan mengklik butang 'Cari'. Apa-apa API resipi sumber terbuka boleh digunakan sebagai sumber resipi (lihat The MealDB di bawah).
  • Pengguna dapat melihat senarai resipi yang sesuai dengan istilah carian
  • Pengguna boleh mengklik nama resipi untuk memaparkan kad resipi.
  • Pengguna dapat melihat mesej amaran jika tidak ada resipi yang sesuai.
  • Pengguna boleh mengklik butang 'Simpan' pada kad untuk resipi yang terdapat melalui API untuk menyimpan salinan ke fail atau pangkalan data resipi aplikasi ini.

Pautan dan sumber yang berguna

  • Menggunakan Pengambilan
  • Axios
  • API MealDB

Contoh projek

3. LUKISAN APLIKASI

Tahap: 2 - Menengah

Buat karya seni digital di kanvas di web untuk dikongsi dalam talian dan juga eksport sebagai gambar.

Cerita Pengguna

  • Pengguna boleh canvasmenggunakan tetikus
  • Pengguna boleh menukar warna
  • Pengguna boleh menukar saiz alat
  • Pengguna boleh menekan butang untuk membersihkan canvas

Ciri bonus

  • Pengguna boleh menyimpan karya seni sebagai gambar ( .png, .jpgdan format dll)
  • Pengguna boleh menarik bentuk yang berbeza ( rectangle, circle, star, dan lain-lain)
  • Pengguna boleh berkongsi karya seni di media sosial

Pautan dan sumber yang berguna

  • Pelajari cara membuat Aplikasi Menggambar menggunakan p5js

Contoh projek

4. PENERBIT EMOJI

Tahap: 2 - Menengah

Emoji telah menjadi lingua franca masyarakat moden. Ini adalah cara yang senang dan pantas untuk berkomunikasi, tetapi juga mekanisme yang sangat ekspresif untuk menyampaikan emosi dan reaksi.

Objektif aplikasi Penterjemah Emoji adalah untuk menerjemahkan teks yang dimasukkan oleh pengguna ke dalam rentetan emoji yang setara, yang diterjemahkan dari satu atau lebih perkataan dalam teks asal, dan perkataan yang tidak ada emoji yang sesuai.

Cerita Pengguna

  • Pengguna dapat memasukkan rentetan kata, angka, dan tanda baca ke dalam kotak teks
  • Pengguna boleh mengklik butang 'Terjemahkan' untuk menterjemahkan kata-kata dalam teks yang dimasukkan ke dalam emoji yang sesuai.
  • Pengguna dapat melihat pesan amaran jika 'Terjemahkan' diklik, tetapi kotak teks input kosong atau tidak berubah dari terjemahan terakhir.
  • Pengguna dapat melihat elemen teks dalam teks yang dimasukkan diterjemahkan ke emoji setara mereka dalam kotak teks output. Elemen teks yang tidak mempunyai emoji tidak akan berubah.
  • Pengguna boleh mengklik butang 'Clear' untuk membersihkan kotak teks input dan output.

Ciri bonus

  • Pembangun akan melaksanakan ciri sinonim emoji untuk membolehkan aplikasi menerjemahkan pelbagai jenis perkataan ke emoji.
  • Pengguna dapat memilih bahasa yang dimasukkan teks input dari daftar bahasa dropdown.

Pautan dan sumber yang berguna

Senarai Emoji Penuh v12.0

Contoh projek

Terjemahan Emoji

5. APLIKASI MEME GENERATOR

Tahap: 2 - Menengah

Benarkan pengguna menghasilkan meme tersuai dengan menambahkan teks di atas gambar.

Cerita Pengguna

  • Pengguna boleh memuat naik gambar yang akan muncul di kanvas
  • Pengguna boleh menambahkan teks di bahagian atas gambar
  • Pengguna boleh menambahkan teks di bahagian bawah gambar
  • Pengguna boleh memilih warna teks
  • Pengguna boleh memilih ukuran teks
  • Pengguna boleh menyimpan meme yang dihasilkan

Ciri bonus

  • Pengguna boleh memilih keluarga fon untuk teks
  • Pengguna boleh berkongsi meme di media sosial (twitter, reddit, facebook, dll)
  • Pengguna boleh menyeret teks ke sekeliling dan meletakkannya di mana sahaja yang dikehendaki di atas gambar
  • Pengguna boleh melukis bentuk di atas gambar (bulatan, segi empat tepat, atau gambar bebas dengan tetikus)

Pautan dan sumber yang berguna

Bekerja dengan kanvas dibuat sangat mudah oleh pustaka p5js.

Contoh projek

Meme Generator oleh imgflip

6. AMALAN MENGATASI

Tahap: 2 - Menengah

Beberapa perkara sangat jelas sehingga mudah dilupakan. Sebagai pembangun, kemampuan anda untuk menaip dengan cepat dan tepat adalah salah satu faktor yang mempengaruhi produktiviti pembangunan anda. Objektif aplikasi Amalan Menaip adalah untuk memberi anda latihan menaip bersama dengan metrik untuk membolehkan anda mengukur kemajuan anda.

Amalan menaip memaparkan perkataan yang mesti anda taipkan dalam selang waktu tertentu. Sekiranya perkataan itu salah diketik, ia akan tetap berada di skrin dan selang waktu tetap sama. Tetapi apabila perkataan itu ditaip dengan betul, perkataan baru akan dipaparkan dan selang waktu sedikit berkurang.

Mudah-mudahan, latihan berulang ini dapat membantu anda meningkatkan kelajuan dan ketepatan menaip anda.

Cerita Pengguna

  • Pengguna dapat melihat kata selang waktu mesti diketik dalam paparan di tetingkap aplikasi.
  • Pengguna dapat melihat jumlah percubaan yang berjaya dan jumlah keseluruhan percubaan dalam kotak skor.
  • Pengguna boleh mengklik butang 'Start Practice' untuk memulakan sesi latihan.
  • Pengguna dapat melihat kata cepat yang dipaparkan di kotak teks.
  • Pengguna boleh mula menaip perkataan di kotak input teks.
  • Pengguna dapat melihat huruf yang telah diketik dengan cepat jika huruf yang salah dimasukkan dan kotak input teks akan dihapus.
  • Pengguna dapat melihat mesej yang bersebelahan dengan kotak input teks yang menunjukkan pengguna harus mencuba lagi jika huruf yang salah dimasukkan.
  • Pengguna dapat melihat jumlah percubaan yang bertambah di kotak skor.
  • Pengguna dapat melihat mesej ucapan tahniah sekiranya perkataan itu ditaip dengan betul.
  • Pengguna dapat melihat selang waktu kata-kata mesti ditaip dikurangkan dengan jumlah yang sedikit jika kata tersebut ditaip dengan betul.
  • Pengguna dapat melihat jumlah percubaan yang berjaya ditingkatkan di kotak skor jika perkataan itu ditaip dengan betul.
  • Pengguna boleh mengklik butang 'Stop Practice' untuk menghentikan sesi latihan.

Ciri bonus

  • Pengguna dapat mendengar nada nada yang unik ketika perkataan baru ditampilkan, kata dimasukkan dengan betul, atau huruf yang salah diketik dalam kata.
  • Pengguna boleh log masuk ke aplikasi
  • Pengguna dapat melihat statistik prestasi kumulatif di semua sesi latihannya.

Pautan dan sumber yang berguna

  • kunci kunci
  • setInterval

Contoh projek

Tutor Menaip Twiddler

7. ELEVATOR

Tahap: 3 - Lanjutan

Sukar untuk memikirkan dunia tanpa lif. Terutama jika anda perlu berjalan naik dan turun 20 tangga tangga setiap hari. Tetapi, jika anda memikirkannya, lif adalah salah satu pelaksanaan asal acara dan pengendali acara jauh sebelum aplikasi web muncul di tempat kejadian.

Objektif aplikasi Elevator adalah untuk mensimulasikan pengoperasian lif dan yang lebih penting lagi, bagaimana menangani peristiwa yang dihasilkan ketika penghuni bangunan menggunakannya. Aplikasi ini mensimulasikan penghuni yang meminta lif dari lantai mana pun dan menekan butang di dalam lif untuk menunjukkan lantai yang ingin mereka lawati.

Kekangan

  • Anda mesti menggunakan pengendali acara tunggal untuk butang atas dan bawah di setiap tingkat. Sebagai contoh, jika terdapat 4 tingkat, pengendali acara tunggal harus dilaksanakan dan bukannya 8 (dua butang per lantai).
  • Begitu juga, pengendali acara tunggal harus dilaksanakan untuk semua butang pada panel kawalan di lif dan bukannya pengendali acara yang unik untuk setiap butang.

Cerita Pengguna

  • Pengguna dapat melihat gambarajah rentas bangunan dengan empat tingkat, poros lif, lif, dan butang atas di tingkat pertama, butang atas dan bawah di tingkat kedua dan ketiga, dan butang bawah di tingkat empat.
  • Pengguna dapat melihat panel kawalan lif dengan butang untuk setiap lantai di sebelah rajah.
  • Pengguna boleh mengklik butang atas dan bawah di mana-mana tingkat untuk memanggil lif.
  • Pengguna boleh mengharapkan bahawa mengklik butang atas dan bawah di lantai mana pun untuk meminta lif akan diatur dalam barisan dan diservis mengikut urutan yang mereka klik.
  • Pengguna dapat melihat lif bergerak ke atas dan ke bawah poros ke lantai tempat ia dipanggil.
  • Pengguna boleh mengklik panel kawalan lif untuk memilih lantai yang mesti dilaluinya.
  • Pengguna boleh mengharapkan lif berhenti selama 5 saat menunggu butang lantai di panel kawalan diklik. Sekiranya butang lantai tidak diklik dalam masa itu, lif akan memproses permintaan panggilan seterusnya.
  • Pengguna boleh mengharapkan lif kembali ke tingkat pertama apabila tidak ada permintaan untuk diproses.

Ciri bonus

  • Pengguna dapat melihat pemberitahuan amaran jika jumlah permintaan lif melebihi jumlah maksimum yang dibenarkan. Had ini diserahkan kepada pembangun.
  • Pengguna dapat mendengar bunyi ketika lif tiba di lantai.
  • Pengguna dapat melihat penghuni secara rawak tiba di lantai untuk menunjukkan bila pengguna harus mengklik butang panggilan lif atas atau bawah di tingkat itu.
  • Pengguna dapat menentukan selang waktu antara penghuni baru yang tiba untuk memanggil lif.

Pautan dan sumber yang berguna

Baris pertama, keluar (Wikipedia)

Contoh projek

8. APLIKASI SIMULATOR MAKANAN CEPAT

Tahap: 3 - Lanjutan

Aplikasi Makanan Segera mensimulasikan pengoperasian restoran bawa pulang yang ringkas dan direka untuk membantu pemaju membuat pengetahuan mengenai prinsip rekaan Janji dan SOLID berfungsi.

Aplikasi ini mensimulasikan pelanggan restoran yang mengambil pesanan dan menunggu mereka disiapkan dan dihantar ke kaunter pengambilan. Setelah membuat pesanan, pelanggan menunggu pesanan yang akan diumumkan sebelum mengambilnya dan meneruskan perjalanan ke ruang makan.

Kisah pengguna yang membentuk pusat aplikasi ini mempunyai empat peranan berbeza:

  • Pengguna - pengguna akhir yang menggunakan aplikasi
  • Pelanggan - Pelanggan yang disimulasikan
  • Pengambil Pesanan - Pengambil Pesanan yang disimulasikan
  • Masak - Masak yang disimulasikan
  • Pelayan - Pelayan yang disimulasikan

Aplikasi ini mempunyai beberapa Cerita Pengguna. Jangan terlalu terharu. Luangkan masa untuk membuat sketsa bukan hanya UI, tetapi bagaimana pelakon (peranan) yang berbeza berinteraksi dan secara bertahap membina aplikasi mengikut prinsip Agile.

Kekangan

  • Tiket pesanan boleh ditunjukkan sebagai dua jenis Janji - satu yang ditunggu oleh Pelayan sementara Masak menyiapkan pesanan dan satu lagi yang ditunggu oleh Pelanggan semasa berada di barisan perkhidmatan.
  • Gunakan JS Promises yang setara dalam bahasa apa sahaja yang anda pilih untuk dikembangkan. Pembangun JS harus menggunakan Janji asli dan tidak async/await.
  • Buat aplikasi ini menggunakan ciri bahasa ibunda. Anda TIDAK boleh menggunakan pakej simulasi atau perpustakaan.
  • Pelanggan baru tiba di barisan pesanan pada selang waktu yang tetap. Dengan kata lain, pelanggan baru tiba pada kadar tetap.
  • Tiket pesanan dipenuhi pada selang waktu yang tetap juga. Mereka diselesaikan dengan kadar tetap.

Cerita Pengguna

Operasi Aplikasi

  • Pengguna dapat melihat kawasan input yang memungkinkan masuknya selang waktu untuk kedatangan pelanggan dan selang waktu untuk pemenuhan tiket pesanan oleh tukang masak.
  • Pengguna dapat melihat pesanan amaran yang disesuaikan jika selang kedatangan pelanggan atau selang pemenuhan pesanan dimasukkan dengan salah.
  • Pengguna boleh memulakan simulasi dengan mengklik butang Mula.
  • Pengguna dapat melihat kawasan baris pesanan yang mengandungi kotak teks yang menunjukkan jumlah pelanggan yang menunggu untuk membuat pesanan.
  • Pengguna dapat melihat kawasan pesanan yang mengandungi kotak teks yang menunjukkan nombor pesanan yang sedang diambil.
  • Pengguna dapat melihat kawasan dapur yang berisi kotak teks yang menunjukkan nombor pesanan yang sedang disiapkan dan kotak teks yang menyenaraikan pesanan menunggu secara berurutan, bersama dengan jumlah pesanan yang menunggu.
  • Pengguna dapat melihat kawasan Pickup yang berisi kotak teks yang menunjukkan nombor pesanan yang saat ini tersedia untuk diambil oleh Pelanggan dan kotak teks yang menunjukkan jumlah Pelanggan yang menunggu di baris perkhidmatan.
  • Pengguna boleh menghentikan simulasi pada bila-bila masa dengan mengklik butang Berhenti.

Ciri bonus

  • Pengguna boleh menentukan berapa lama masa yang diperlukan oleh Pembawa Pesanan untuk membuat tiket pesanan .
  • Pengguna dapat menentukan berapa lama masa yang diperlukan bagi Pelayan untuk menyampaikan pesanan kepada pelanggan.
  • Pengguna dapat menentukan jumlah masa simulasi dijalankan setelah butang Mula diklik.
  • Pengguna dapat melihat pandangan animasi Pelanggan dan pesanan ketika mereka bergerak melalui aliran kerja.

Pautan dan sumber yang berguna

  • Simulator Makanan Segera - Aliran Kerja Logik
  • Manifesto Agile & 12 Prinsip Perisian Agile
  • Prinsip SOLID Setiap Pengembang Perlu Tahu
  • Menggunakan Janji
  • Janji

9. PERMAINAN SHELL

Tahap: 3 - Lanjutan

Permainan Shell adalah permainan perjudian klasik yang berasal dari Yunani kuno. Memainkannya memerlukan tiga cengkerang, kacang, ketangkasan tangan oleh pengendali, dan kemahiran pemerhatian yang tajam dari pihak pemain. Ini juga permainan con klasik kerana mudah bagi pengendali untuk menipu pemain. Syukurlah yang terakhir ini bukan niat kami dengan aplikasi ini.

Permainan Shell ini bertujuan untuk menyediakan antara muka grafik ke permainan shell klasik dan untuk memberikan pemain permainan jujur ​​untuk dimainkan. Permainan kami menarik tiga cengkerang di kanvas bersama dengan kacang, menggerakkan kacang ke bawah satu, dari cangkang, dan mengacak cangkang untuk selang waktu tertentu. Pengguna kemudian mesti mengklik shell yang mereka rasa kacang itu tersembunyi di bawah. Pengguna dibenarkan terus meneka sehingga kacang itu berada.

Cerita Pengguna

  • Pengguna dapat melihat kanvas dengan tiga cengkerang dan kacang.
  • Pengguna boleh mengklik cangkang kacang yang akan disembunyikan.
  • Pengguna dapat melihat kacang bergerak di bawah cangkang yang telah diklik.
  • Pengguna boleh mengklik butang 'Shuffle' untuk memulakan penggulungan cengkerang animasi selama 5 saat.
  • Pengguna boleh mengklik cengkerang yang dia yakin kacang itu tersembunyi ketika animasi berhenti.
  • Pengguna dapat melihat cengkerang yang telah diklik naik untuk mengetahui apakah kacang itu tersembunyi di bawahnya.
  • Pengguna boleh terus mengklik kerang sehingga kacang itu dijumpai.
  • Pengguna dapat melihat mesej tahniah ketika kacang itu berada
  • Pengguna boleh memulakan permainan baru dengan mengklik cangkang kacang yang akan disembunyikan di bawah (langkah # 2 di atas). Langkah di atas kemudian diulang.

Ciri bonus

  • Pengguna dapat melihat panel skor yang mengandungi jumlah kemenangan dan jumlah permainan yang dimainkan.
  • Pengguna dapat melihat jumlah permainan yang dimainkan meningkat apabila kacang tersembunyi di bawah cangkang
  • Pengguna dapat melihat jumlah kemenangan bertambah apabila kacang didapati pada tekaan pertama.
  • Pengguna dapat melihat cengkerang menyembunyikan kacang untuk dianimasikan (warna, ukuran, atau kesan lain) ketika diklik (tekaan yang betul).

Pautan dan sumber yang berguna

  • Permainan Shell (Wikipedia)
  • Animasi DOM HTML Javascript
  • Perpustakaan Animasi p5js

Contoh projek

Kesimpulannya

Jangan lupa untuk melihat artikel sebelumnya dan repositori jika anda ingin mencari lebih banyak idea aplikasi / projek.

Juga, jika 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! Terima kasih!

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

Anda dialu-alukan untuk menyumbang dengan idea anda sendiri! Kita boleh menjadikan repositori ini sebagai sumber utama untuk idea aplikasi.

Asalnya diterbitkan di www.florin-pop.com.