További projektötletek a kódolási képességek fejlesztéséhez

Programozás

Két héttel ezelőtt publikáltam egy cikket, amely 15 projektötletet tartalmazott, amelyek segítségével felépítheti kódolási képességeit, és az embereket nagyon izgatta ez az erőforrás.

Ezenkívül az alkalmazás-ötletek tárháza majdnem 3000 csillagot kapott, mióta közzétettem a cikket. Ez őrültség! ?

Köszönöm mindenkinek ezt! ?

Ebben a bejegyzésben áttekintünk néhány új projektet, amelyeket azóta felvettek a tárba.

Gyors emlékeztetőül: az összes projekt három szintre oszlik a befejezéséhez szükséges ismeretek és tapasztalatok alapján. Nézze meg a tárolókban a szintek leírását.

Az alábbiakban 2 kezdő , 4 középhaladó és 3 haladó projektötlet található.

1. SZÁMOLÓ

Szint: 1 - Kezdő

A számológépek nem csak az elérhető egyik leghasznosabb eszköz, de kiválóan megértik a felhasználói felületet és az események feldolgozását is egy alkalmazásban. Ebben a feladatban létrehoz egy számológépet, amely támogatja az egész számok alapvető számtani számítását.

A stílus rajtad múlik, ezért használd fantáziádat és légy kreatív! Érdemes lehet időt szánnia arra is, hogy kísérletezzen a mobileszközén található számológép alkalmazással, hogy jobban megértse az alapvető funkcionalitást és az éles tokokat.

Korlátok

  • Nem használhatja a eval()függvényt számítások végrehajtására

Felhasználói történetek

  • A felhasználó láthatja a kijelzőt, amely az aktuálisan megadott számot vagy az utolsó művelet eredményét mutatja.
  • A felhasználó láthatja a 0–9 számjegyek gombjait, a „+”, „-”, „/” és „=” műveleteket, a „C” gombot (a törléshez) és az „AC” gombot. (az összes törléséhez).
  • A felhasználó legfeljebb 8 számjegyből álló szekvenciákat írhat be, ha a számjegyekre kattint a beviteli padon. A 8-nál nagyobb számjegyek beírását a rendszer figyelmen kívül hagyja.
  • A felhasználó egy művelet gombra kattintva jelenítheti meg a művelet eredményét: _ az előző művelet eredménye és az utoljára beírt szám VAGY _ az utolsó két beírt szám VAGY * az utolsó beírt szám
  • A felhasználó a "C" gombra kattintva törölheti az utolsó számot vagy az utolsó műveletet. Ha a felhasználó utolsó bejegyzése művelet volt, a kijelző frissül az azt megelőző értékre.
  • A felhasználó az 'AC' gombra kattintva törölheti az összes belső munkaterületet és a kijelzőt 0-ra állíthatja.
  • A felhasználó láthatja az „ERR” kijelzést, ha bármely művelet meghaladja a 8 jegyű maximumot.

Bónusz funkciók

  • A felhasználó a '+/-' gombra kattintva megváltoztathatja az éppen megjelenített szám előjelét.
  • A felhasználó láthatja a tizedesjegy (.) Gombot a beviteli felületen, amely lehetővé teszi a lebegőpontos számok legfeljebb 3 hely bevitelét és a műveletek végrehajtását az egy számra megadott maximális tizedesjegyig.

Hasznos linkek és források

  • Számológép (Wikipédia)
  • MDN

Példa projektek

2. RECEPT APP

Szint: 1 - Kezdő

Lehet, hogy erre még nem jöttél rá, de a receptek nem más, mint kulináris algoritmusok. A programok hasonlóan a receptek is elengedhetetlen lépések sorozata, amelyek helyes követése ízletes fogást eredményez.

A Recept alkalmazás célja, hogy segítse a felhasználót a receptek kezelésében oly módon, hogy azok könnyen követhetőek legyenek.

Korlátok

  • Az alkalmazás kezdeti verziójában a receptadatok JSON fájlként kódolhatók. Az alkalmazás kezdeti verziójának bevezetése után kibővítheti ezt, hogy recepteket tároljon egy fájlban vagy adatbázisban.

Felhasználói történetek

  • A felhasználó megtekintheti a receptcímek listáját
  • A felhasználó rákattinthat a recept címére, és megjelenítheti a receptkártyát, amely tartalmazza a recept címét, étkezés típusát (reggeli, ebéd, vacsora vagy snack), a kiszolgált emberek számát, nehézségi szintjét (kezdő, középhaladó, haladó), az összetevők listáját. (beleértve azok mennyiségét), és az előkészítési lépéseket.
  • A felhasználó kattintson egy új recept címére, hogy a jelenlegi kártyát új receptre cserélje.

Bónusz funkciók

  • A felhasználó láthatja a fényképet, amely megmutatja, hogyan néz ki az elem, miután elkészült.
  • A felhasználó kereshet egy receptet, amely nem szerepel a receptcímek listájában, ha beírja az étkezés nevét a keresőmezőbe, és rákattint a "Keresés" gombra. Bármely nyílt forráskódú recept API használható receptek forrásaként (lásd alább a MealDB-t).
  • A felhasználó megtekintheti a keresési kifejezéseknek megfelelő receptek listáját
  • A felhasználó a recept nevére kattintva megjelenítheti a receptkártyáját.
  • A felhasználó figyelmeztető üzenetet láthat, ha nem található megfelelő recept.
  • A felhasználó az API-n keresztül található receptek kártyáin kattintson a "Mentés" gombra, hogy elmentse a másolatot az alkalmazások receptfájljába vagy adatbázisába.

Hasznos linkek és források

  • A Fetch használatával
  • Axios
  • A MealDB API

Példa projektek

3. RAJZ APP

Szint: 2 - Középszintű

Hozzon létre digitális grafikákat egy vásznon az interneten, hogy megossza online, és exportálhassa képként is.

Felhasználói történetek

  • A felhasználó canvasaz egérrel rajzolhat be
  • A felhasználó megváltoztathatja a színét
  • A felhasználó megváltoztathatja az eszköz méretét
  • A felhasználó megnyomhat egy gombot a fájl törléséhez canvas

Bónusz funkciók

  • A felhasználó tudja menteni a grafikát, mint egy kép ( .png, .jpgstb formátumban)
  • A felhasználó felhívni különböző formájú ( rectangle, circle, starstb)
  • A felhasználó megoszthatja a grafikát a közösségi médiában

Hasznos linkek és források

  • Ismerje meg, hogyan hozhat létre rajzalkalmazást a p5js használatával

Példa projektek

4. EMOJI FORDÍTÓ

Szint: 2 - Középszintű

Hangulatjelek váltak a lingua franca a modern társadalomban. Ez egy szórakoztató és gyors kommunikációs mód, ugyanakkor rendkívül kifejező mechanizmus az érzelmek és reakciók közléséhez.

Az Emoji Translator alkalmazás célja a felhasználó által beírt szöveg ekvivalens hangulatjel-lefordítása, az eredeti szöveg egy vagy több szavából lefordítva, és olyan szavakra, amelyeknek nincs megfelelő emoji.

Felhasználói történetek

  • A felhasználó egy szövegmezőbe írhat be szavakat, számokat és írásjeleket
  • A felhasználó a "Fordítás" gombra kattintva lefordíthatja a beírt szöveg szavakat a megfelelő hangulatjeleikbe.
  • A felhasználó figyelmeztető üzenetet láthat, ha a „Fordítás” gombra kattintottak, de a beviteli mező üres vagy nem változott az utolsó fordításhoz képest.
  • A felhasználó a beírt szövegben láthatja a kimeneti szövegdobozban a megfelelő hangulatjelekre lefordított szövegelemeket. Azok a szöveges elemek, amelyekhez nincs emoji, változatlanok maradnak.
  • A felhasználó a 'Törlés' gombra kattintva törölheti a be- és kimeneti szövegdobozokat.

Bónusz funkciók

  • A fejlesztő egy emoji szinonima funkciót valósít meg, amely lehetővé teszi az alkalmazás számára, hogy a szavak szélesebb skáláját fordítsa hangulatjelre.
  • A felhasználó a nyelvek legördülő listájából választhatja ki a beviteli szöveg beviteli nyelvét.

Hasznos linkek és források

Teljes Emoji List v12.0

Példa projektek

Emoji Translate

5. MEME GENERATOR APP

Szint: 2 - Középszintű

Lehetővé teszi a felhasználók számára, hogy egyéni mémeket állítsanak elő szöveg hozzáadásával egy képre.

Felhasználói történetek

  • A felhasználó feltölthet egy képet, amely vászonon jelenik meg
  • A felhasználó szöveget adhat a kép felső részéhez
  • A felhasználó szöveget adhat a kép alsó részéhez
  • A felhasználó kiválaszthatja a szöveg színét
  • A felhasználó kiválaszthatja a szöveg méretét
  • A felhasználó elmentheti a kapott mémet

Bónusz funkciók

  • A felhasználó kiválaszthatja a szöveg betűtípus-családját
  • A felhasználó megoszthatja a mémet a közösségi médiában (twitter, reddit, facebook stb.)
  • A felhasználó áthúzhatja a szöveget, és bárhová helyezheti a kép tetejére
  • A felhasználó alakzatokat rajzolhat a kép tetejére (körök, téglalapok vagy ingyenes rajz az egérrel)

Hasznos linkek és források

A vászonnal való munkát a p5js könyvtár nagyon megkönnyíti.

Példa projektek

Meme Generator by imgflip

6. Gépelési gyakorlat

Szint: 2 - Középszintű

Néhány dolog annyira nyilvánvaló, hogy könnyen figyelmen kívül hagyható. Fejlesztőként a gyors és pontos gépelés képessége az egyik tényező, amely befolyásolja a fejlesztés hatékonyságát. A gépelési gyakorlat célja, hogy gépelési gyakorlatot és metrikákat biztosítson számodra, amelyek lehetővé teszik az előrehaladás mérését.

A gépelési gyakorlat megjeleníti a szót, amelyet be kell írnia egy meghatározott időintervallumon belül. Ha a szót helytelenül írta be, akkor az a képernyőn marad, és az időintervallum ugyanaz marad. De amikor a szót helyesen beírta, új szó jelenik meg, és az időintervallum kissé lerövidül.

Remélhetőleg ez az ismétlődő gyakorlat javítani fogja a gépelési sebességet és a pontosságot.

Felhasználói történetek

  • A felhasználó láthatja, hogy az időintervallum szavakat be kell írni az alkalmazásablakban.
  • A felhasználó egy eredménymezőben láthatja a sikeres próbálkozások és az összes próbálkozások számát.
  • A felhasználó a „Gyakorlat indítása” gombra kattintva indíthatja el a gyakorlatot.
  • A felhasználó láthatja a szövegmezőben megjelenő felszólító szót.
  • A felhasználó elkezdheti beírni a szót egy szövegbeviteli mezőbe.
  • A felhasználó láthatja, hogy a beírt betűk villognak, ha helytelen betűt ír be, és a szövegbeviteli mező törlődik.
  • A felhasználó láthatja a szövegbeviteli mező mellett található üzenetet, amely jelzi, hogy a felhasználónak újra kell próbálkoznia, ha helytelen betűt ad meg.
  • A felhasználó a pontszám mezőben láthatja az összes kísérlet növekedését.
  • A felhasználó gratulálási üzenetet láthat, ha a szót helyesen írta be.
  • A felhasználó láthatja, hogy az időintervallum szavakat kis összeggel csökkentve kell-e gépelni, ha a szót helyesen írták be.
  • A felhasználó láthatja a sikeres próbálkozások számát a pontszám mezőben, ha a szót helyesen írta be.
  • A felhasználó a "Gyakorlat leállítása" gombra kattintva leállíthatja a gyakorlatot.

Bónusz funkciók

  • A felhasználó egyedi hangjelzést hallhat, amikor új szó jelenik meg, egy szó helyesen van beírva, vagy helytelen betűt ír be a szóba.
  • A felhasználó bejelentkezhet az alkalmazásba
  • A felhasználó az összes gyakorlata során láthatja az összesített teljesítménystatisztikákat.

Hasznos linkek és források

  • kulcstartó
  • setInterval

Példa projektek

Twiddler gépelés oktató

7. FELVONÓ

Szint: 3 - Haladó

Nehéz belegondolni egy lift nélküli világba. Különösen, ha naponta 20 lépcsőn kell fel és le járnia. De ha belegondolunk, a felvonók az események és az eseménykezelők egyik eredeti megvalósításának számítottak jóval azelőtt, hogy a webalkalmazások megjelentek volna.

A Lift alkalmazás célja szimulálni a lift működését, és ami még fontosabb, hogyan kell kezelni azokat az eseményeket, amelyek akkor keletkeznek, amikor az épületben tartózkodók használják. Ez az alkalmazás szimulálja az utasokat, akik liftet hívnak bármelyik emeletről, és a lift belsejében lévő gombok megnyomásával jelzik a meglátogatni kívánt emeletet.

Korlátok

  • Minden emeleten egyetlen eseménykezelőt kell megvalósítania a fel és le gombokhoz. Például, ha 4 emelet van, akkor egyetlen eseménykezelőt kell megvalósítani, nem pedig 8-at (emeletenként két gombot).
  • Hasonlóképpen, egyetlen eseménykezelőt kell megvalósítani a lift valamennyi kezelőpaneljén található összes gombhoz, nem pedig minden eseményhez tartozó egyedi eseménykezelőt.

Felhasználói történetek

  • A felhasználó megtekintheti egy négyszintes épület, egy liftakna, a lift és az első emeleten egy felfelé, a második és a harmadik emeleten fel és le, a negyedik emeleten pedig egy lefelé mutató gomb keresztmetszetét.
  • A felhasználó láthatja a lift kezelőpaneljét, az egyes emeletek egyik gombjával az ábra oldalán.
  • A felhasználó bármelyik emeleten található fel és le gombra kattintva felhívhatja a liftet.
  • A felhasználó számíthat arra, hogy bármelyik emeleten a fel és le gombokra kattintva kérheti a liftet a várakozási sorrendben és abban a sorrendben, ahogyan rájuk kattintottak.
  • A felhasználó láthatja, hogy a lift fel és le mozog a tengelyen a padlóig, ahová hívták.
  • A felhasználó a lift kezelőpaneljére kattintva kiválaszthatja azt az emeletet, amelyre utaznia kell.
  • A felhasználó számíthat arra, hogy a lift 5 másodpercig szüneteltetve várja a kezelőpanel padlógombjának kattintását. Ha egy emelet gombra nem kattintanak ez idő alatt, a lift feldolgozza a következő híváskérést.
  • A felhasználó számíthat arra, hogy a lift visszatér az első emeletre, amikor nincs kérés feldolgozásra.

Bónusz funkciók

  • A felhasználó figyelmeztető értesítést láthat, ha a liftkérelmek száma meghaladja a megengedett maximális számot. Ez a korlát a fejlesztőre marad.
  • A felhasználó hangot hall, amikor a lift megérkezik egy emeletre.
  • A felhasználó láthatja, hogy egy utas véletlenszerűen megérkezik egy emeletre, hogy jelezze, mikor kell a felhasználónak kattintania az emeleten lévő fel vagy le hívás gombra.
  • A felhasználó megadhatja az időintervallumot az új utasok között, akik megérkeznek a lift hívására.

Hasznos linkek és források

Első be, első kijáró sor (Wikipédia)

Példa projektek

8. GYORS ÉTEL SZIMULÁTOR APP

Szint: 3 - Haladó

A gyorsétterem alkalmazás szimulálja egy egyszerű elvihető étterem működését, és célja, hogy segítse a fejlesztőt az ígéretekről és a SZOLID tervezési elvekről szóló ismereteik működésében.

Ez az alkalmazás egy elvihető étterem ügyfeleit szimulálja, akik megrendeléseket adnak le, és várják őket, amíg felkészülnek és kiszállítják az átvételi pultba. A megrendelés leadása után az ügyfél megvárja a meghirdetendő megrendelést, mielőtt átvenné és elindulna az ebédlőbe.

Az alkalmazást alkotó felhasználói történetek négy különböző szerepkör körül helyezkednek el:

  • Felhasználó - az alkalmazást használó végfelhasználó
  • Ügyfél - a szimulált Ügyfél
  • Order Taker - a szimulált Order Taker
  • Cook - a szimulált Cook
  • Szerver - a szimulált szerver

Ennek az alkalmazásnak elég sok felhasználói története van. Ne lepődj meg mégis. Szánjon időt arra, hogy ne csak az UI-t vázolja fel, hanem azt is, hogy a különböző szereplők (szerepek) hogyan lépnek kölcsönhatásba és hogyan építik fel fokozatosan az alkalmazást az Agile elvek betartásával.

Korlátok

  • A rendelési jegyek kétféle ígéretként jeleníthetők meg: az egyikre a Szerver vár, amíg a Szakács elkészíti a megrendelést, a másikra pedig az Ügyfél a kiszolgáló sorban vár.
  • Használja a JS Promises natív megfelelőjét abban a nyelven, amelyiken fejleszteni szeretne. A JS fejlesztőknek natív ígéreteket kell használniuk, és nem async/await.
  • Hozza létre ezt az alkalmazást az anyanyelvi funkciók használatával. NEM használhat szimulációs csomagot vagy könyvtárat.
  • Az új ügyfelek meghatározott időközönként érkeznek a rendelési sorba. Más szavakkal, az új ügyfelek állandó ütemben érkeznek.
  • A rendelési jegyek meghatározott időközönként teljesülnek. Állandó ütemben készülnek el.

Felhasználói történetek

Az alkalmazás működése

  • A felhasználó láthatja azt a beviteli területet, amely lehetővé teszi az ügyfelek érkezési időintervallumának megadását, valamint annak az időintervallumnak a teljesítését, amikor a szakács teljesíti a rendelési jegyet .
  • A felhasználó személyre szabott figyelmeztető üzenetet láthat, ha az ügyfél érkezési intervallumát vagy a megrendelés teljesítési intervallumát tévesen adta meg.
  • A felhasználó a Start gombra kattintva elindíthatja a szimulációt.
  • A felhasználó láthatja a rendelési sor területét, amely szövegmezőt tartalmaz, amely megmutatja a megrendelések leadására váró ügyfelek számát.
  • A felhasználó láthatja a rendelési területet, amely szövegdobozokat tartalmaz, amelyek a jelenleg készülő megrendelés számát mutatják .
  • A felhasználó láthatja a konyhaterületet, amely tartalmaz egy szövegdobozt, amely a készülő rendelés számát mutatja, és egy szövegdobozt, amely felsorolja a várakozási sorrendeket, valamint a várakozási megrendelések számát.
  • A felhasználó láthatja az Átvételi területet, amely egy olyan szövegdobozt tartalmaz, amely tartalmazza az Ügyfél által jelenleg átvehető rendelési számot , és egy szöveget, amely a kiszolgáló sorban várakozó Ügyfelek számát mutatja.
  • A felhasználó bármikor leállíthatja a szimulációt a Stop gombra kattintva.

Bónusz funkciók

  • A felhasználó megadhatja, hogy mennyi időbe telik, amíg a Megrendelő átveszi a megrendelés jegyét .
  • A felhasználó megadhatja, hogy a kiszolgáló mennyi idő alatt szállít megrendelést az ügyfélnek.
  • A felhasználó megadhatja a szimuláció teljes időtartamát, miután a Start gombra kattintottak.
  • A felhasználó animált nézetet láthat az ügyfelekről és a megrendelésekről a munkafolyamat során.

Hasznos linkek és források

  • Gyorsétterem-szimulátor - logikai munkafolyamat
  • Agilis kiáltvány és az agilis szoftver 12 alapelve
  • SZILÁRD alapelvek, amelyeket minden fejlesztőnek tudnia kell
  • Az ígéretek felhasználása
  • Ígéret

9. Kagyló játék

Szint: 3 - Haladó

A Shell játék egy klasszikus szerencsejáték, amely az ókori Görögországból származik. A játékhoz három kagylóra, borsóra, a keze ügyességére és a játékos figyelő képességére van szükség. Ez egyben klasszikus csaló játék is, mivel az üzemeltetőnek könnyű átverni a játékost. Hála istennek, ez utóbbi nem a mi szándékunk ezzel az alkalmazással.

Ez a Shell játék célja, hogy grafikus felületet biztosítson a klasszikus shell játékhoz, és hogy őszinte játékot nyújtson a játékosnak. Játékunk három kagylót rajzol a vásznra a borsóval együtt, a borsót az egyik alá helyezi, a héjak közül, és egy meghatározott időközönként összekeveri a kagylót. Ezután a felhasználónak rá kell kattintania a héjra, amely szerinte a borsó el van rejtve. A felhasználó folytathatja a találgatásokat, amíg a borsó meg nem jelenik.

Felhasználói történetek

  • A felhasználó láthatja a három kagylós vásznat és a borsót.
  • A felhasználó rákattinthat a héjra, amely alá a borsót el kell rejteni.
  • A felhasználó láthatja a borsó mozgását a rákattintott héj alatt.
  • A felhasználó a 'Shuffle' gombra kattintva 5 másodpercig animáltan keverheti a héjakat.
  • A felhasználó rákattinthat a héjra, amelyről úgy véli, hogy a borsó rejtőzik, amikor az animáció leáll.
  • A felhasználó láthatja a rákattintott héj felemelkedését, hogy kiderüljön, van-e rejtve a borsó alatta.
  • A felhasználó addig folytathatja a kagyló kattintását, amíg a borsót meg nem találja.
  • A felhasználó láthatja a gratuláló üzenetet, amikor a borsó megtalálható
  • A felhasználó egy héjra kattintva indíthat új játékot, a borsót el kell rejteni (a fenti 2. lépés). A fenti lépéseket ezután megismételjük.

Bónusz funkciók

  • A felhasználó megtekintheti a pontszámpanelt, amely tartalmazza a győzelmek és a lejátszott játékok számát.
  • A felhasználó láthatja a lejátszott játékok számának növekedését, amikor a borsót elrejtik egy héj alatt
  • A felhasználó az első találgatáskor láthatja a növelt győzelmek számát, amikor a borsó megtalálható.
  • A felhasználó láthatja, hogy a borsó elrejti a borsót (szín, méret vagy más hatás), ha rákattint (helyes tipp).

Hasznos linkek és források

  • Shell játék (Wikipédia)
  • Javascript HTML DOM animáció
  • p5js animációs könyvtár

Példa projektek

Következtetés

Ne felejtse el megnézni az előző cikket és a tárat, ha további alkalmazás / projekt ötleteket szeretne találni.

Továbbá, ha az e cikkből és a repóból származó információk bármilyen módon hasznosak voltak az Ön számára, akkor feltétlenül adjon neki csillagot? így mások is megtalálhatják és hasznára válhatnak! Köszönöm!

Van valami javaslata, hogyan javíthatnánk ezt a projektet összességében? Tudasd velünk! Örömmel halljuk visszajelzését!

Örülünk, hogy hozzájárulhat saját ötleteivel! Ezt az adattárat go-to erőforrássá tehetjük, amikor appötletekre kerül sor.

Eredetileg a www.florin-pop.com címen jelent meg.