Rohkem projektiideid oma kodeerimisoskuste parandamiseks

Kaks nädalat tagasi avaldasin artikli, mis sisaldas 15 projektiideed, mida saate kodeerimisoskuste taseme tõstmiseks üles ehitada, ja inimesed olid sellest ressursist väga põnevil.

Samuti on rakenduse ideede hoidla saanud peaaegu 3000 tärni pärast selle artikli avaldamist. See on hullumeelne! ?

Tänan teid kõiki selle eest! ?

Selles postituses käsitleme mõnda uut projekti, mis on sellest ajast alates hoidlasse lisatud.

Kiire meeldetuletusena on kõik projektid jagatud kolme tasemeni, lähtudes nende lõpuleviimiseks vajalikest teadmistest ja kogemustest. Tutvuge hoidlas olevate tasandite kirjeldusega.

Allpool leiate 2 algaja , 4 kesktaseme ja 3 edasijõudnutele mõeldud projektiideed.

1. Kalkulaator

Tase: 1 - algaja

Kalkulaatorid pole mitte ainult üks kõige kasulikumaid saadaolevaid tööriistu, vaid on ka suurepärane viis kasutajaliidese ja rakenduste sündmuste töötlemise mõistmiseks. Selles ülesandes loote kalkulaatori, mis toetab täisarvude põhilisi aritmeetilisi arvutusi.

Stiil sõltub sinust, nii et kasuta oma kujutlusvõimet ja ole loov! Samuti võiksite oma aega väärt proovida oma mobiilseadmes olevat kalkulaatorirakendust, et paremini mõista põhifunktsionaalsust ja servakohvreid.

Piirangud

  • eval()Funktsiooni ei tohi kasutada arvutuste tegemiseks

Kasutaja lood

  • Kasutaja näeb ekraani, mis näitab praegust sisestatud numbrit või viimase toimingu tulemust.
  • Kasutaja näeb sisestusklahvi, mis sisaldab nuppe numbritele 0–9, toiminguid - „+”, „-”, „/” ja „=”, nuppu „C” (kustutamiseks) ja nuppu „AC” (kõigi kustutamiseks).
  • Kasutaja saab sisestada numbreid kuni 8-kohalise järjestusena, klõpsates sisestusklahvil numbritel. Üle 8 numbri sisestamist eiratakse.
  • Kasutaja võib klõpsata toimingunupul, et kuvada selle toimingu tulemus: _ eelmise toimingu tulemus ja viimane sisestatud number VÕI _ kaks viimast sisestatud numbrit VÕI * viimane sisestatud number
  • Kasutaja võib viimase numbri või viimase toimingu tühjendamiseks klõpsata nupul „C”. Kui kasutajate viimane sisestus oli toiming, värskendatakse kuva sellele eelnenud väärtusele.
  • Kasutaja saab klõpsata nupul „AC”, et kustutada kõik sisemised tööpiirkonnad ja seada kuva 0-le.
  • Kui mõni toiming ületaks maksimaalse 8-kohalise numbri, kuvatakse ekraanil teade „ERR”.

Boonuse funktsioonid

  • Kasutaja saab klõpsata nupul +/-, et muuta parajasti kuvatava numbri märki.
  • Kasutaja näeb sisestuspaneelil kümnendkoha (.) Nuppu, mis võimaldab sisestada ujukomaarvu kuni 3 kohta ja teha toiminguid ühe numbri jaoks sisestatud maksimaalse kümnendkohtade arvuni.

Kasulikud lingid ja ressursid

  • Kalkulaator (Vikipeedia)
  • MDN

Näidisprojektid

2. RETSEPTI RAKENDAMINE

Tase: 1 - algaja

Võib-olla pole te sellest aru saanud, kuid retseptid pole midagi muud kui kulinaarsed algoritmid. Sarnaselt programmidega on retseptid rida hädavajalikke samme, mille õigel järgimisel saadakse maitsev roog.

Rakenduse Retsept eesmärk on aidata kasutajal retsepte hallata viisil, mis muudab nende järgimise lihtsaks.

Piirangud

  • Selle rakenduse algversiooni jaoks võidakse retseptiandmed kodeerida JSON-failina. Pärast selle rakenduse esialgse versiooni juurutamist saate seda laiendada, et retsepte failis või andmebaasis säilitada.

Kasutaja lood

  • Kasutaja näeb retseptide pealkirjade loendit
  • Kasutaja saab klõpsata retsepti pealkirjal, et kuvada retseptikaart, mis sisaldab retsepti pealkirja, söögi tüüpi (hommikusöök, lõunasöök, õhtusöök või suupiste), inimeste arvu, mida see pakub, raskusastet (algaja, kesktase, edasijõudnutele), koostisosade loendit (sealhulgas nende kogused) ja ettevalmistusetapid.
  • Kasutaja klõpsake uue retsepti pealkirja, et asendada praegune kaart uue retseptiga.

Boonuse funktsioonid

  • Kasutaja saab pärast selle ettevalmistamist näha fotot, mis näitab üksuse välimust.
  • Kasutaja saab otsida retsepti, mis pole retseptide pealkirjade loendis, sisestades söögikoha nime otsingukasti ja klõpsates nuppu 'Otsi'. Retseptide allikana võib kasutada mis tahes avatud lähtekoodiga retseptide API-d (vt allpool The MealDB).
  • Kasutaja näeb otsinguterminitele vastavate retseptide loendit
  • Kasutaja saab retseptikaardi kuvamiseks klõpsata retsepti nimel.
  • Kui ühtki sobivat retsepti ei leitud, näeb kasutaja hoiatusteadet.
  • Kasutaja saab API kaudu asuvate retseptide kaartidel klõpsata nuppu „Salvesta”, et koopia sellesse rakenduste retseptifaili või andmebaasi salvestada.

Kasulikud lingid ja ressursid

  • Fetchi kasutamine
  • Aksios
  • MealDB API

Näidisprojektid

3. JOONISTUSRAKENDUS

Tase: 2 - kesktase

Looge veebis lõuendile digitaalne kunstiteos võrgus jagamiseks ja ka piltidena eksportimiseks.

Kasutaja lood

  • Kasutaja saab canvashiire abil sisse joonistada
  • Kasutaja saab värvi muuta
  • Kasutaja saab tööriista suurust muuta
  • Kasutaja saab nupu tühjendamiseks vajutada canvas

Boonuse funktsioonid

  • Kasutaja saab salvestada kunsti pildina ( .png, .jpgjne formaadis)
  • Kasutaja saab juhtida erineva kujuga ( rectangle, circle, starjne)
  • Kasutaja saab kunstiteost sotsiaalmeedias jagada

Kasulikud lingid ja ressursid

  • Siit saate teada, kuidas joonistamisrakendust p5js abil luua

Näidisprojektid

4. EMOJI TÕLGE

Tase: 2 - kesktase

Emotikatest on saanud moodsa ühiskonna lingua franca . Need on lõbus ja kiire suhtlemisviis, aga ka äärmiselt väljendusrikas mehhanism emotsioonide ja reaktsioonide edastamiseks.

Rakenduse Emoji Translator eesmärk on tõlkida kasutaja sisestatud tekst ekvivalentseks emotikonide stringiks, mis on tõlgitud ühest või mitmest sõnast originaaltekstis, ja sõnadest, millele vastavat emotikoni pole.

Kasutaja lood

  • Kasutaja saab tekstiväljale sisestada sõnade, numbrite ja kirjavahemärkide stringi
  • Kasutaja võib klõpsata nupul Tõlgi, et tõlkida sisestatud tekstis olevad sõnad vastavatesse emotikonidesse.
  • Kasutajal on hoiatusteade, kui klõpsati nupul „Tõlgi”, kuid sisendtekst oli eelmises tõlkes tühi või muutmata.
  • Kasutaja näeb sisestatud tekstis tekstielemente, mis on tõlgitud samaväärsetesse emotikonidesse väljundtekstis. Tekstielemendid, mille jaoks emotikonid puuduvad, jäävad muutmata.
  • Kasutaja saab sisend- ja väljundväljade tühjendamiseks klõpsata nupul „Kustuta”.

Boonuse funktsioonid

  • Arendaja rakendab emotikonide sünonüümifunktsiooni, mis võimaldab rakendusel tõlkida emotikonideks mitmesuguseid sõnu.
  • Kasutaja saab keelte rippmenüüst valida sisestatava teksti sisestamise keele.

Kasulikud lingid ja ressursid

Täielik emotikonide loend v12.0

Näidisprojektid

Emotikon Tõlgi

5. MEME GENERATOR APP

Tase: 2 - kesktase

Lubage kasutajatel luua kohandatud meeme, lisades pildile teksti.

Kasutaja lood

  • Kasutaja saab üles laadida pildi, mis ilmub lõuendil
  • Kasutaja saab pildi ülaossa teksti lisada
  • Kasutaja saab teksti lisada pildi alaossa
  • Kasutaja saab valida teksti värvi
  • Kasutaja saab valida teksti suuruse
  • Kasutaja saab saadud meemi salvestada

Boonuse funktsioonid

  • Kasutaja saab valida teksti fondipere
  • Kasutaja saab meemi sotsiaalmeedias jagada (twitter, reddit, facebook jne)
  • Kasutaja saab teksti lohistada ja pildi peale asetada kuhu iganes soovib
  • Kasutaja saab joonistada pildi peale kujundeid (ringid, ristkülikud või hiirega tasuta joonistamine)

Kasulikud lingid ja ressursid

Lõuendiga töötamise muudab p5js-i teek väga lihtsaks.

Näidisprojektid

Meemigeneraator by imgflip

6. TÜÜPITAVA

Tase: 2 - kesktase

Mõned asjad on nii ilmsed, et neist saab lihtsalt mööda vaadata. Arendajana on teie võime kiiresti ja täpselt kirjutada üks tegur, mis mõjutab teie arenduse tootlikkust. Rakenduse Sisestuspraktika eesmärk on pakkuda teile tippimistava ja mõõdikuid, et saaksite oma edusamme mõõta.

Sisestustava kuvab sõna, mille peate seejärel kindla ajavahemiku jooksul sisestama. Kui sõna on valesti kirjutatud, jääb see ekraanile ja ajaintervall jääb samaks. Kuid kui sõna on õigesti kirjutatud, kuvatakse uus sõna ja ajaintervalli on veidi vähendatud.

Loodetavasti aitab see korduv praktika parandada nii kirjutamiskiirust kui ka täpsust.

Kasutaja lood

  • Kasutaja näeb ajaintervalli sõnu, mis tuleb rakenduse aknas kuvada.
  • Kasutaja näeb skoorikastis edukate katsete arvu ja kogu katsete arvu.
  • Kasutaja saab harjutusseansi alustamiseks klõpsata nuppu „Alusta harjutamist”.
  • Kasutaja näeb tekstikastis kuvatavat viipasõna.
  • Kasutaja saab hakata teksti sisestamiskasti sisestama.
  • Kui sisestate vale tähe ja tekstisisestuskast tühjendatakse, näeb kasutaja sisestatud tähti vilkuma.
  • Kasutaja näeb tekstisisestuskasti kõrval sõnumit, mis näitab, et kasutaja peaks vale tähe sisestamisel uuesti proovima.
  • Kasutaja näeb skoorikastis suurendatud katsete arvu.
  • Kasutaja näeb õnnesõnumit, kui sõna on õigesti kirjutatud.
  • Kasutaja näeb ajavahemiku sõnu, mida tuleb tippida väikese summa võrra vähendatuna, kui sõna on õigesti kirjutatud.
  • Kui sõna on õigesti kirjutatud, saab kasutaja skoorikastis näha edukate katsete arvu.
  • Kasutaja saab harjutusseansi peatamiseks klõpsata nupul „Peata praktika”.

Boonuse funktsioonid

  • Kasutaja saab kuulda unikaalset helisignaali, kui kuvatakse uus sõna, sõna on õigesti sisestatud või sõna on vale täht.
  • Kasutaja saab rakendusse sisse logida
  • Kasutaja näeb kõigi oma treeningute korral kumulatiivset toimivusstatistikat.

Kasulikud lingid ja ressursid

  • võtmehoidja
  • setInterval

Näidisprojektid

Twiddleri kirjutamise juhendaja

7. LIFT

Tase: 3 - edasijõudnutele

Liftideta maailmast on raske mõelda. Eriti kui peate iga päev 20 trepiastet üles ja alla kõndima. Kuid kui mõelda, olid liftid sündmuste ja ürituste käitlejate üks algseid rakendusi juba ammu enne veebirakenduste ilmumist.

Rakenduse Elevator eesmärk on simuleerida lifti tööd ja mis veelgi tähtsam, kuidas hallata sündmusi, mis tekivad siis, kui hoones elavad inimesed seda kasutavad. See rakendus simuleerib sõitjaid, kes kutsuvad lifti igal korrusel ja vajutavad lifti sees olevaid nuppe, et näidata korrust, mida nad soovivad külastada.

Piirangud

  • Igal korrusel olevate üles ja alla nuppude jaoks peate rakendama ühe sündmuste käitleja. Näiteks kui on 4 korrust, tuleks rakendada ühe sündmuse käitleja, mitte 8 (kaks nuppu korrusel).
  • Samamoodi tuleks lifti juhtpaneeli kõigi nuppude jaoks rakendada üks sündmuste käitleja, mitte iga nupu jaoks ainulaadne sündmuste käitleja.

Kasutaja lood

  • Kasutaja näeb nelja korruse, liftišahti, lifti ja ülemise nupu, teisel ja kolmandal korrusel üles ja alla ning neljandal korrusel allanupu ristlõike skeemi.
  • Kasutaja näeb diagrammi küljel lifti juhtpaneeli, millel on nupp iga korruse jaoks.
  • Kasutaja saab lifti helistamiseks klõpsata mis tahes korruse nuppu üles ja alla.
  • Kasutaja võib eeldada, et lifti taotlemiseks mis tahes korrusel üles ja alla nuppe klõpsates pannakse järjekorda ja hooldatakse järjestust, millel klõpsati.
  • Kasutaja näeb, kuidas lift liigub šahtist üles ja alla põrandale, kuhu teda kutsuti.
  • Kasutaja saab klõpsata lifti juhtpaneelil, et valida põrand, kuhu see peaks sõitma.
  • Kasutaja võib eeldada, et lift peatub 5 sekundit ja ootab juhtpaneelil põranda nuppu. Kui korruse nuppu selle aja jooksul ei klõpsata, töötleb lift järgmist kõnesoovi.
  • Kasutaja võib eeldada, et lift pöördub tagasi esimesele korrusele, kui töötlemistaotlusi pole.

Boonuse funktsioonid

  • Kasutaja näeb hoiatusteadet, kui lifti taotluste arv ületab maksimaalset lubatud arvu. See piir on jäetud arendaja hooleks.
  • Kasutaja kuuleb heli, kui lift jõuab korrusele.
  • Kasutaja võib näha, kuidas sõitja saabub juhuslikult korrusele, et näidata, millal kasutaja peaks sellel korrusel lifti üles või alla vajutama.
  • Kasutaja saab määrata ajavahemiku uute sõitjate vahel, kes saabuvad liftile helistama.

Kasulikud lingid ja ressursid

Esimene sisse, esimene välja järjekord (Wikipedia)

Näidisprojektid

8. FAST FOOD SIMULATOR

Tase: 3 - edasijõudnutele

Kiirtoidurakendus simuleerib lihtsa kaasavõetava restorani toimimist ja on loodud selleks, et aidata arendajal oma teadmised lubadustest ja SOLID-i kujundamise põhimõtetest tööle panna.

See rakendus simuleerib kaasavõtmisrestorani kliente, kes esitavad tellimusi ja ootavad nende ettevalmistamist ja toimetamist pikapiletti. Pärast tellimuse esitamist ootab klient enne tellimuse kättesaamist ja söögikohta minekut teatavaks tehtud tellimust.

Selle rakenduse kasutajalood keskenduvad neljale erinevale rollile:

  • Kasutaja - rakendust kasutav lõppkasutaja
  • Klient - simuleeritud klient
  • Tellimuse vastuvõtja - simuleeritud tellimuse vastuvõtja
  • Cook - simuleeritud Cook
  • Server - simuleeritud server

Sellel rakendusel on üsna palju kasutajalugusid. Ära siiski rabista. Võtke aega, et visandada mitte ainult kasutajaliides, vaid ka see, kuidas erinevad osalejad (rollid) suhtlevad ja järk-järgult rakendust üles ehitavad, järgides agiilseid põhimõtteid.

Piirangud

  • Tellimuspileteid võib kujutada kahe eri tüüpi lubadusena - ühte ootab server, kuni kokk tellimust ette valmistab, ja teist, mida klient ootab teenimisliinis olles.
  • Kasutage JS Promises'i emakeelset vastet selles keeles, mille valite arendamiseks. JS-i arendajad peaksid kasutama emakeelseid lubadusi ja mitte async/await.
  • Looge see rakendus emakeele funktsioonide abil. Te ei tohi kasutada simulatsioonipaketti ega teeki.
  • Uued kliendid saabuvad tellimisliinile kindla ajavahemiku tagant. Teisisõnu, uute klientide arv jõuab püsiva kiirusega.
  • Tellimuspiletid täidetakse ka kindla ajavahemiku järel. Need valmivad ühtlase kiirusega.

Kasutaja lood

Rakenduse operatsioon

  • Kasutaja näeb sisendala, mis võimaldab sisestada kliendi saabumise ajaintervalli ja tellimuse pileti täitmise ajaintervalli koka poolt.
  • Kui kliendi saabumisintervall või tellimuse täitmise intervall on valesti sisestatud, näeb kasutaja kohandatud hoiatusteadet.
  • Kasutaja saab simulatsiooni käivitada, klõpsates nuppu Start.
  • Kasutaja näeb tellimuse rea ala, mis sisaldab tekstikasti, kus on näidatud klientide arv, kes ootavad tellimuste esitamist.
  • Kasutaja näeb tellimisala, mis sisaldab tekstikasti, kus on näidatud tellimuse number .
  • Kasutaja näeb köögipinda, kus on tekstikast, mis näitab ettevalmistatava tellimuse numbrit , ja tekstikast, kus on järjestuses ootenõuded koos ootenumbrite arvuga.
  • Kasutaja saab näha kättetoimetamise ala, mis sisaldab tekstikasti, mis näitab tellimuse numbrit, mis on kliendi jaoks praegu saadaval, ja tekstikasti, kus on näidatud teenindaval real ootavate klientide arv.
  • Kasutaja saab simulatsiooni igal ajal peatada, klõpsates nuppu Stop.

Boonuse funktsioonid

  • Kasutaja saab määrata, kui palju aega võtab tellimuse vastuvõtja tellimuse pileti loomiseks .
  • Kasutaja saab määrata, kui kaua võtab server oma tellimuse kliendile kätte.
  • Kasutaja saab määrata kogu aja, mille simulatsioon peab käivituma, kui nupul Start on klõpsatud.
  • Kasutaja näeb töövoo liikumisel klientide ja tellimuste animeeritud vaadet.

Kasulikud lingid ja ressursid

  • Kiirtoidu simulaator - loogiline töövoog
  • Agile manifest ja 12 Agile tarkvara põhimõtet
  • SOLID põhimõtted, mida iga arendaja peaks teadma
  • Lubaduste kasutamine
  • Lubage

9. KOORIMÄNG

Tase: 3 - edasijõudnutele

Shelli mäng on klassikaline hasartmäng, mis pärineb Vana-Kreekast. Selle mängimiseks on vaja kolme kesta, hernest, operaatori käte osavust ja mängija innukat vaatlemisoskust. See on ka klassikaline petumäng, kuna operaatoril on mängijat lihtne välja petta. Jumal tänatud, et viimane pole meie eesmärk selle rakendusega.

See Shelli mäng on mõeldud graafilise liidese loomiseks klassikalisele kestamängule ja mängijale ausaks mängimiseks. Meie mäng tõmbab koos hernega lõuendile kolm kestat, liigutab herned ühe, kestade alla ja segab kestasid kindla ajavahemiku jooksul. Seejärel peab kasutaja klõpsama kestal, mis nende arvates peitub hernes. Kasutajal on lubatud jätkata nuputamist, kuni hernes asub.

Kasutaja lood

  • Kasutaja näeb kolme kestaga lõuendit ja hernest.
  • Kasutaja saab klõpsata kestal, mille alla hernes peidetakse.
  • Kasutaja näeb klõpsatava kesta all herneste liikumist.
  • Kasutaja saab kestade animeeritud segamise alustamiseks 5 sekundiks klõpsata nupul „Segamine“.
  • Kasutaja saab animatsiooni peatumisel klõpsata kestal, kelle arvates on hernes peidetud.
  • Kasutaja näeb klõpsatud koore kerkimist, et paljastada, kas hernes on selle all peidus.
  • Kasutaja võib jätkata kestade klõpsamist, kuni hernes on leitud.
  • Kui hernes asub, saab kasutaja õnnitlussõnumit näha
  • Kasutaja saab uut mängu alustada, klõpsates kestal, hernes tuleb peita (samm 2 ülal). Seejärel korratakse ülaltoodud samme.

Boonuse funktsioonid

  • Kasutaja näeb skooripaneeli, mis sisaldab võitude ja mängitud mängude arvu.
  • Kasutaja näeb mängitud mängude arvu suurenemist, kui hernes on koore alla peidetud
  • Esimesel oletusel näeb hernese leidmisel suurenenud võitude arv.
  • Kasutaja näeb hernese elustamiseks (värv, suurus või muu efekt) peitvat kesta (õige oletus).

Kasulikud lingid ja ressursid

  • Kestamäng (Vikipeedia)
  • Javascripti HTML DOM-i animatsioon
  • p5js animatsiooniraamatukogu

Näidisprojektid

Järeldus

Kui soovite rohkem rakenduse / projekti ideid leida, ärge unustage tutvuda eelmise artikliga ja repositooriumiga.

Samuti, kui sellest artiklist ja repost saadud teave oli teile mingil moel kasulik, andke sellele kindlasti täht? nii leiavad selle ka teised ja saavad sellest kasu! Aitäh!

Kas teil on ettepanekuid selle projekti üldiseks parandamiseks? Anna meile teada! Tahaksime teie tagasisidet kuulda!

Olete oodatud panustama oma ideedega! Saame sellest hoidlast teha rakenduste ideede osas käimasoleva ressursi.

Algselt avaldatud aadressil www.florin-pop.com.