Više projektnih ideja za poboljšanje vaših vještina kodiranja

Prije dva tjedna objavio sam članak koji sadrži 15 projektnih ideja koje možete izgraditi kako biste poboljšali svoje vještine kodiranja, a ljudi su bili vrlo uzbuđeni zbog tog resursa.

Također, spremište ideja za aplikacije dobilo je gotovo 3000 zvjezdica otkako sam objavio taj članak. To je suludo! ?

Hvala svima na tome! ?

U ovom ćemo postu preći na neke nove projekte koji su od tada dodani u spremište.

Kao kratki podsjetnik, svi su projekti podijeljeni u tri sloja na temelju znanja i iskustva potrebnih za njihovo dovršavanje. Pogledajte opis razina u spremištu.

Ispod ćete pronaći 2 ideje za početnike , 4 srednje i 3 napredne projektne ideje.

1. KALKULATOR

Razina: 1 - početnik

Kalkulatori nisu samo jedan od najkorisnijih dostupnih alata, već su i izvrstan način za razumijevanje korisničkog sučelja i obrade događaja u aplikaciji. U ovom ćete problemu stvoriti kalkulator koji podržava osnovne aritmetičke izračune na cijelim brojevima.

Stajling ovisi o vama pa iskoristite maštu i budite kreativni! Možda će vam se svidjeti i vaše vrijeme da eksperimentirate s aplikacijom kalkulatora na svom mobilnom uređaju kako biste bolje razumjeli osnovne funkcije i rubne slučajeve.

Ograničenja

  • eval()Funkciju ne možete koristiti za izvršavanje izračuna

Korisničke priče

  • Korisnik može vidjeti zaslon koji prikazuje trenutni uneseni broj ili rezultat posljednje operacije.
  • Korisnik može vidjeti ulaznu pločicu koja sadrži gumbe za znamenke 0–9, operacije - '+', '-', '/' i '=', gumb 'C' (za brisanje) i gumb 'AC' (za jasno sve).
  • Korisnik može unijeti brojeve kao nizove duge do 8 znamenki klikom na znamenke na ulaznoj pločici. Unos bilo koje znamenke veće od 8 ignorirat će se.
  • Korisnik može kliknuti na operativni gumb za prikaz rezultata te operacije na: _ rezultat prethodne operacije i zadnji uneseni broj ILI _ zadnja dva unesena broja ILI * zadnji uneseni broj
  • Korisnik može kliknuti gumb 'C' da izbriše zadnji broj ili posljednju operaciju. Ako je zadnji unos korisnika bio operacija, prikaz će se ažurirati na vrijednost koja mu je prethodila.
  • Korisnik može kliknuti gumb 'AC' da očisti sva unutarnja radna područja i da postavi zaslon na 0.
  • Korisnik može vidjeti prikazanu 'ERR' ako bi bilo koja operacija premašila maksimum od 8 znamenki.

Bonusne značajke

  • Korisnik može kliknuti gumb '+/-' da promijeni znak broja koji se trenutno prikazuje.
  • Korisnik može vidjeti gumb s decimalnom zarezom (.) Na ulaznoj pločici koji omogućuje unos brojeva s pomičnom zarezom do 3 mjesta i izvršavanje operacija do maksimalnog broja decimalnih mjesta unesenih za bilo koji jedan broj.

Korisni linkovi i izvori

  • Kalkulator (Wikipedia)
  • MDN

Primjeri projekata

2. PRIJEM APLIKACIJE

Razina: 1 - početnik

Možda to niste shvatili, ali recepti nisu ništa drugo do kulinarski algoritmi. Poput programa, i recepti su niz imperativnih koraka koji, ako se pravilno slijede, rezultiraju ukusnim jelom.

Cilj aplikacije Recept je pomoći korisniku da upravlja receptima na način koji će ih olakšati za slijeđenje.

Ograničenja

  • Za početnu verziju ove aplikacije podaci recepta mogu se kodirati kao JSON datoteka. Nakon implementacije početne verzije ove aplikacije možete je proširiti kako biste održavali recepte u datoteci ili bazi podataka.

Korisničke priče

  • Korisnik može vidjeti popis naslova recepata
  • Korisnik može kliknuti naslov recepta kako bi prikazao karticu recepta koja sadrži naslov recepta, vrstu obroka (doručak, ručak, večera ili međuobrok), broj ljudi kojima služi, razinu težine (početnike, srednje, napredne), popis sastojaka (uključujući njihove količine) i korake pripreme.
  • Korisnik klikne novi naslov recepta da bi trenutnu karticu zamijenio novim receptom.

Bonusne značajke

  • Korisnik može vidjeti fotografiju koja prikazuje kako predmet izgleda nakon što je pripremljen.
  • Korisnik može potražiti recept koji nije na popisu naslova recepata tako da u okvir za pretraživanje unese naziv obroka i klikne gumb "Traži". Bilo koji API za recepte otvorenog koda može se koristiti kao izvor recepata (vidi The MealDB u nastavku).
  • Korisnik može vidjeti popis recepata koji odgovaraju pojmovima za pretraživanje
  • Korisnik može kliknuti naziv recepta da bi prikazao njegovu karticu s receptom.
  • Korisnik može vidjeti poruku upozorenja ako nije pronađen odgovarajući recept.
  • Korisnik može kliknuti gumb "Spremi" na karticama za recepte smještene putem API-ja da spremi kopiju u ovu datoteku recepata za aplikacije ili u bazu podataka.

Korisni linkovi i izvori

  • Korištenje dohvaćanja
  • Aksiosa
  • API MealDB

Primjeri projekata

3. CRTANJE APLIKACIJE

Razina: 2 - srednja

Stvorite digitalna umjetnička djela na platnu na webu za dijeljenje na mreži, a također ih izvezite kao slike.

Korisničke priče

  • Korisnik može crtati canvasmišem
  • Korisnik može promijeniti boju
  • Korisnik može promijeniti veličinu alata
  • Korisnik može pritisnuti tipku za brisanje canvas

Bonusne značajke

  • Korisnik može spremiti umjetnička djela kao sliku ( .png, .jpgitd format)
  • Korisnik može crtati različite oblike ( rectangle, circle, star, itd)
  • Korisnik može dijeliti umjetničko djelo na društvenim mrežama

Korisni linkovi i izvori

  • Naučite kako stvoriti aplikaciju za crtanje pomoću p5js

Primjeri projekata

4. EMOJI TRANSLATOR

Razina: 2 - srednja

Emojiji su postali lingua franca modernog društva. Oni su zabavan i brz način komunikacije, ali ujedno i izuzetno izražajan mehanizam za prenošenje osjećaja i reakcija.

Cilj aplikacije Emoji Translator je prevesti tekst koji je korisnik unio u ekvivalentni niz emojija, prevedenih iz jedne ili više riječi u izvornom tekstu i riječi za koje ne postoji odgovarajući emoji.

Korisničke priče

  • Korisnik može unijeti niz riječi, brojeva i interpunkcije u tekstni okvir
  • Korisnik može kliknuti gumb "Prevedi" da prevede riječi iz unesenog teksta u odgovarajuće emojije.
  • Korisnik može vidjeti poruku upozorenja ako je kliknut gumb "Prevedi", ali tekstualni okvir za unos bio je prazan ili nepromijenjen u odnosu na zadnji prijevod.
  • Korisnik može vidjeti tekstualne elemente u unesenom tekstu prevedene na njihove ekvivalentne emojije u izlaznom okviru za tekst. Tekstualni elementi za koje nema emojija ostat će nepromijenjeni.
  • Korisnik može kliknuti gumb "Očisti" da očisti okvire za unos i izlaz teksta.

Bonusne značajke

  • Razvojni programer implementirat će značajku sinonima emojija kako bi aplikaciji omogućio prijevod šireg niza riječi na emoji.
  • Korisnik može odabrati jezik s kojeg se unosi tekst s padajućeg popisa jezika.

Korisni linkovi i izvori

Cijeli popis emojija v12.0

Primjeri projekata

Prevedi emotikone

5. APLIKACIJA MEME GENERATOR

Razina: 2 - srednja

Omogućite korisnicima da generiraju prilagođene meme dodavanjem teksta na sliku.

Korisničke priče

  • Korisnik može prenijeti sliku koja će se pojaviti na platnu
  • Korisnik može dodati tekst u gornji dio slike
  • Korisnik može dodati tekst u donji dio slike
  • Korisnik može odabrati boju teksta
  • Korisnik može odabrati veličinu teksta
  • Korisnik može spremiti rezultirajući mem

Bonusne značajke

  • Korisnik može odabrati obitelj fontova za tekst
  • Korisnik može dijeliti mem na društvenim mrežama (twitter, reddit, facebook, itd.)
  • Korisnik može povući tekst i smjestiti ga gdje god poželi na vrh slike
  • Korisnik može crtati oblike na vrhu slike (krugovi, pravokutnici ili besplatni crtež mišem)

Korisni linkovi i izvori

Rad s platnom omogućuje knjižnicu p5js vrlo jednostavno.

Primjeri projekata

Meme Generator od imgflip

6. TIPANJA PRAKSE

Razina: 2 - srednja

Neke su stvari toliko očite da se lako mogu previdjeti. Kao programer, vaša sposobnost brzog i preciznog tipkanja jedan je od čimbenika koji utječe na vašu razvojnu produktivnost. Cilj aplikacije Typing Practice je pružiti vam praksu tipkanja zajedno s mjernim podacima koji će vam omogućiti da izmjerite svoj napredak.

Praksa tipkanja prikazuje riječ koju morate unijeti u određenom vremenskom intervalu. Ako je riječ pogrešno upisana, ona ostaje na ekranu, a vremenski interval ostaje isti. Ali kad je riječ ispravno upisana, prikazuje se nova riječ i vremenski interval je malo smanjen.

Nadamo se da će vam ova ponavljana praksa pomoći da poboljšate brzinu i točnost tipkanja.

Korisničke priče

  • Korisnik može vidjeti da se u prozoru aplikacije prikazuje vremenski interval u kojem se moraju upisati riječi.
  • Korisnik može vidjeti broj uspješnih pokušaja i broj ukupnih pokušaja u okviru s rezultatima.
  • Korisnik može kliknuti gumb "Pokreni vježbu" da započne sesiju vježbanja.
  • Korisnik može vidjeti promptnu riječ prikazanu u tekstnom okviru.
  • Korisnik može započeti s upisivanjem riječi u okvir za unos teksta.
  • Korisnik može vidjeti upisana slova ako trepće s pogrešnim slovom i okvir za unos teksta će se izbrisati.
  • Korisnik može vidjeti poruku pored okvira za unos teksta u kojoj se navodi da bi korisnik trebao pokušati ponovo ako se unese netočno slovo.
  • Korisnik može vidjeti broj ukupnih povećanih pokušaja u okviru s rezultatima.
  • Korisnik može vidjeti poruku čestitke ako je riječ ispravno upisana.
  • Korisnik može vidjeti kako se vremenski interval riječi mora unositi umanjen za malu količinu ako je riječ ispravno upisana.
  • Korisnik može vidjeti broj uspješnih pokušaja uvećan u okviru s ocjenom ako je riječ ispravno upisana.
  • Korisnik može kliknuti gumb 'Zaustavi vježbu' da zaustavi vježbanje.

Bonusne značajke

  • Korisnik može čuti jedinstveni zvučni signal kada se prikaže nova riječ, ako je riječ ispravno unesena ili se u nju unese pogrešno slovo.
  • Korisnik se može prijaviti u aplikaciju
  • Korisnik može vidjeti kumulativnu statistiku izvedbe u svim svojim vježbama.

Korisni linkovi i izvori

  • tipkovnica
  • setInterval

Primjeri projekata

Tutor za tipkanje Twiddlera

7. DIZALO

Razina: 3 - napredna

Teško je razmišljati o svijetu bez dizala. Pogotovo ako svakodnevno morate hodati gore-dolje po 20 stepenica. Ali, ako bolje razmislite, dizala su bila jedna od izvornih implementacija događaja i rukovatelja događajima puno prije nego što su se web aplikacije pojavile na sceni.

Cilj aplikacije Lift je simulirati rad dizala i što je još važnije, kako se nositi s događajima koji nastaju kada ga stanari zgrada koriste. Ova aplikacija simulira putnike koji pozivaju na dizalo s bilo kojeg kata i pritiskajući tipke unutar dizala kako bi označili pod koji žele posjetiti.

Ograničenja

  • Morate implementirati jedan obrađivač događaja za gumbe gore i dolje na svakom katu. Na primjer, ako postoje 4 kata, treba implementirati jedan obrađivač događaja, a ne 8 (dva gumba po katu).
  • Slično tome, za sve gumbe na upravljačkoj ploči u dizalu trebao bi se primijeniti jedan obrađivač događaja, a ne jedinstveni obrađivač događaja za svaki gumb.

Korisničke priče

  • Korisnik može vidjeti dijagram presjeka zgrade s četiri kata, oknom dizala, dizalom i gumbom za gore na prvom katu, gumbom za gore i dolje na drugom i trećem katu te gumbom za dolje na četvrtom katu.
  • Korisnik može vidjeti upravljačku ploču dizala s gumbom za svaki od katova sa strane dijagrama.
  • Korisnik može kliknuti tipke gore i dolje na bilo kojem katu kako bi nazvao lift.
  • Korisnik može očekivati ​​da će se pritiskom na gumbe gore i dolje na bilo kojem katu kako bi se zatražilo dizalo staviti u red čekanja i servisirati u slijedu u kojem su kliknuti.
  • Korisnik može vidjeti dizalo kako se kreće prema dolje i dolje prema otvoru do poda na koji je pozvan.
  • Korisnik može kliknuti upravljačku ploču dizala za odabir poda na koji bi trebao putovati.
  • Korisnik može očekivati ​​da se dizalo zaustavi na 5 sekundi čekajući da se klikne gumb na podu na upravljačkoj ploči. Ako unutar tog vremena ne pritisnete tipku za pod, dizalo će obraditi sljedeći zahtjev za poziv.
  • Korisnik može očekivati ​​povratak dizala na prvi kat kad nema zahtjeva za obradu.

Bonusne značajke

  • Korisnik može vidjeti obavijest upozorenja ako broj zahtjeva za dizalo premaši maksimalni dopušteni broj. Ovo je ograničenje prepušteno programeru.
  • Korisnik može čuti zvuk kada dizalo stigne na pod.
  • Korisnik može vidjeti kako putnik nasumično dolazi na pod kako bi naznačio kada bi korisnik trebao pritisnuti gumb za poziv gore ili dolje u liftu na tom katu.
  • Korisnik može odrediti vremenski interval između novih putnika koji dolaze kako bi nazvali lift.

Korisni linkovi i izvori

Red za prvi ulaz, prvi izlaz (Wikipedia)

Primjeri projekata

8. APP. SIMULATOR BRZE HRANE

Razina: 3 - napredna

Aplikacija Fast Food simulira rad jednostavnog restorana za poneti i osmišljena je kako bi programeru pomogla da svoje znanje o obećanjima i SOLID principima dizajna djeluje.

Ova aplikacija simulira kupce restorana za ponošenje koji naručuju i čekaju da budu pripremljeni i dostavljeni na šalter. Nakon stavljanja narudžbe kupac čeka narudžbu koja će biti objavljena prije nego što je preuzme i nastavi do blagovaonice.

Korisničke priče koje čine ovu aplikaciju usredotočuju se na četiri različite uloge:

  • Korisnik - krajnji korisnik koji koristi aplikaciju
  • Kupac - simulirani kupac
  • Narudžbenica - simulirani Narudžbenica
  • Cook - simulirani Cook
  • Poslužitelj - simulirani poslužitelj

Ova aplikacija ima prilično korisničkih priča. Nemojte se ipak svladati. Odvojite vrijeme za skiciranje ne samo korisničkog sučelja, već i načina na koji različiti glumci (uloge) međusobno djeluju i postupno grade aplikaciju slijedeći agilne principe.

Ograničenja

  • Ulaznice za narudžbu mogu se predstaviti kao dvije različite vrste obećanja - jednu na koju poslužitelj čeka dok Cook priprema narudžbu, a drugu koju kupac čeka dok je u redu za posluživanje.
  • Upotrijebite izvorni ekvivalent JS Promises na kojem god jeziku odabrali razvoj. JS programeri bi trebali koristiti native Promises, a ne async/await.
  • Izradite ovu aplikaciju pomoću značajki na materinjem jeziku. NE SMIJETE koristiti simulacijski paket ili knjižnicu.
  • Novi kupci stižu u red za narudžbu u određenom vremenskom intervalu. Drugim riječima, novi kupci dolaze stalnom brzinom.
  • Narudžbe se također ispunjavaju u određenom vremenskom intervalu. Dovršavaju se konstantnom brzinom.

Korisničke priče

Rad aplikacija

  • Korisnik može vidjeti područje unosa koje omogućuje unos vremenskog intervala za dolazak kupca i vremenskog intervala za ispunjenje narudžbenice od strane kuhara.
  • Korisnik može vidjeti prilagođenu poruku upozorenja ako je interval dolaska kupca ili interval izvršenja narudžbe pogrešno unesen.
  • Korisnik može započeti simulaciju klikom na gumb Start.
  • Korisnik može vidjeti područje retka narudžbe koje sadrži tekstualni okvir koji prikazuje broj kupaca koji čekaju da izvrše narudžbu.
  • Korisnik može vidjeti područje narudžbe koje sadrži tekstne okvire koji prikazuju broj narudžbe koji se trenutno uzima.
  • Korisnik može vidjeti kuhinjski dio koji sadrži tekstualni okvir s brojem narudžbe koji se priprema i tekstni okvir s redoslijedom naloga za čekanje, zajedno s brojem broja naloga za čekanje.
  • Korisnik može vidjeti područje preuzimanja koje sadrži tekstualni okvir koji prikazuje broj narudžbe koji je trenutno dostupan za preuzimanje od strane kupca i tekstualni okvir koji prikazuje broj kupaca koji čekaju u liniji za usluživanje.
  • Korisnik može zaustaviti simulaciju u bilo kojem trenutku klikom na gumb Stop.

Bonusne značajke

  • Korisnik može odrediti koliko je vremena potrebno da Izvođač narudžbi stvori kartu za narudžbu .
  • Korisnik može odrediti koliko vremena treba poslužitelju da klijentu isporuči narudžbu.
  • Korisnik može odrediti ukupan broj vremena simulacije nakon što se klikne gumb Start.
  • Korisnik može vidjeti animirani prikaz kupaca i narudžbi dok se kreću kroz tijek rada.

Korisni linkovi i izvori

  • Simulator brze hrane - logičan tijek rada
  • Agile Manifest i 12 principa agilnog softvera
  • ČVRSTI Principi koje bi svaki programer trebao znati
  • Korištenje obećanja
  • Obećanje

9. IGRA ŠKOLJKE

Razina: 3 - napredna

Shell igra klasična je kockarska igra koja datira još iz antičke Grčke. Za njegovo igranje potrebne su tri školjke, zrno graška, spretnost ruku od strane operatera i izoštrene sposobnosti promatranja igrača. To je također klasična prevara, jer je operater lako prevariti igrača. Hvala Bogu da ovo drugo nije naša namjera s ovom aplikacijom.

Namjera ove igre Shell je pružiti grafičko sučelje s klasičnom školjkom i pružiti igraču iskrenu igru. Naša igra crta tri ljuske na platnu zajedno s graškom, pomiče grašak ispod jedne ljuske i miješa ljuske u određenom vremenskom intervalu. Tada korisnik mora kliknuti ljusku pod kojom misli da je grašak skriven. Korisniku je dopušteno nastaviti pogađanje dok se ne pronađe grašak.

Korisničke priče

  • Korisnik može vidjeti platno s tri školjke i grašak.
  • Korisnik može kliknuti ljusku pod kojom će se grašak skrivati.
  • Korisnik može vidjeti kako se grašak kreće ispod ljuske koja je kliknuta.
  • Korisnik može kliknuti gumb "Nasumično promijeni" kako bi započeo animirano miješanje školjki na 5 sekundi.
  • Korisnik može kliknuti ljusku pod kojom vjeruje da je grašak skriven kad se animacija zaustavi.
  • Korisnik može vidjeti kako se ljuska na koju se klikne podiže kako bi otkrila je li grašak skriven ispod nje.
  • Korisnik može nastaviti kliktati ljuske dok grašak ne bude pronađen.
  • Korisnik može vidjeti poruku čestitke kada se nalazi grašak
  • Korisnik može započeti novu igru ​​klikom na ljusku ispod koje će se grašak skrivati ​​(korak 2 gore). Zatim se ponavljaju gornji koraci.

Bonusne značajke

  • Korisnik može vidjeti tablu rezultata koja sadrži broj pobjeda i broj odigranih igara.
  • Korisnik može vidjeti kako se broj odigranih igara povećava kada je grašak skriven ispod ljuske
  • Korisnik može vidjeti kako se povećava broj dobitaka kada se zrno zrna pronađe na prvom pogađanju.
  • Korisnik može vidjeti ljusku koja skriva zrno graška za animiranje (boja, veličina ili neki drugi efekt) kada se na njega klikne (tačna pretpostavka).

Korisni linkovi i izvori

  • Igra školjke (Wikipedia)
  • Javascript HTML DOM animacija
  • Biblioteka animacije p5js

Primjeri projekata

Zaključak

Ne zaboravite provjeriti prethodni članak i spremište ako želite pronaći više ideja za programe / projekte.

Također, ako su vam informacije iz ovog članka i iz repo-a bile korisne na bilo koji način, obavezno im dodajte zvjezdicu?; na ovaj način i drugi to mogu pronaći i imati koristi! Hvala vam!

Imate li prijedloga kako bismo mogli ukupno poboljšati ovaj projekt? Obavijestite nas! Voljeli bismo čuti vaše povratne informacije!

Dobrodošli ste da doprinesete vlastitim idejama! Ovo spremište možemo učiniti pristupnim resursom kada je riječ o idejama za aplikacije.

Izvorno objavljeno na www.florin-pop.com.