Tässä on joitain sovellusideoita, joita voit rakentaa koodaustaitojesi parantamiseksi

Oletko koskaan halunnut rakentaa jotain, mutta sinulla ei ollut aavistustakaan mitä tehdä? Aivan kuten kirjoittajilla on joskus “kirjoittajan lohko”, se pätee myös kehittäjiin.

Yhdessä ystäväni Jimin kanssa loimme kokoelman sovellusideoita, joiden tarkoituksena on ratkaista tämä ongelma lopullisesti!

Nämä sovellukset ovat:

  • hienoa parantaa koodaustaitojasi
  • hienoa kokeilla uusia tekniikoita
  • hienoa lisätä salkkuusi vaikuttamaan seuraavaan työnantajaasi / asiakasta
  • hienoa käyttää esimerkkeinä opetusohjelmissa (artikkeleissa tai videoissa)
  • helppo suorittaa ja myös helposti laajennettavissa uusilla ominaisuuksilla

Tämä ei ole vain yksinkertainen luettelo projekteista, vaan kokoelma, joka kuvaa kutakin projektia riittävän yksityiskohtaisesti, jotta voit kehittää sitä alusta asti!

Jokainen projektieritelmä sisältää seuraavat:

  1. Selkeä ja kuvaava tavoite
  2. Luettelo käyttäjätarinoista jotka olisi toteutettava (nämä tarinat toimittava ohjenuorana kuin pakotetun lista tehtävälista n . Voit vapaasti lisätä omia ominaisuuksia, jos haluat)
  3. Luettelo bonusominaisuuksista, jotka parantavat perushankkeen lisäksi myös taitojasi samanaikaisesti
  4. Kaikki resurssit ja linkit auttavat sinua löytämään projektin loppuunsaattamisen

Projektit

Kaikki projektit on jaettu kolmeen tasoon perustuen niiden toteuttamiseen tarvittavaan tietoon ja kokemukseen. Nämä tasot ovat:

  1. Aloittelija - Kehittäjät oppimismatkansa alkuvaiheessa. Ne, jotka ovat yleensä keskittyneet käyttäjäsovellusten luomiseen.
  2. Keskitaso - Kehittäjät oppimisen ja kokemuksen välivaiheessa. Ne ovat mukavia UI / UX: ssä, käyttävät kehitystyökaluja ja rakentavat sovelluksia, jotka käyttävät API-palveluita.
  3. Edistynyt - Kehittäjät, joilla on kaikki yllä olevat ja jotka oppivat kehittyneempiä tekniikoita, kuten BackEnd-sovellusten ja tietokantapalvelujen toteuttaminen.

Alla on 5 projektia kullekin tasolle ( yhteensä 15 ), mutta tässä GitHub-arkistossa on yli 30 projektia (tällä hetkellä). Muista tarkistaa se, koska aiomme lisätä uusia projekteja tulevaisuudessa. Olet tervetullut auttamaan! (Lisätietoja tästä alla olevasta Contributing- osiosta?)

1. Huomautuksia App

Taso: 1 - Aloittelija

Kuvaus : Luo ja tallenna muistiinpanoja myöhempää käyttöä varten!

Käyttäjien tarinat

  • Käyttäjä voi luoda muistiinpanon
  • Käyttäjä voi muokata muistiinpanoa
  • Käyttäjä voi poistaa muistiinpanon
  • Kun suljet selainikkunan, muistiinpanot tallennetaan ja kun käyttäjä palaa, tiedot haetaan

Bonusominaisuudet

  • Käyttäjä voi luoda ja muokata muistiinpanoa Markdown-muodossa. Tallennettaessa se muuntaa Markdownin HTML-muotoon
  • Käyttäjä voi nähdä päivämäärän, jolloin hän loi muistiinpanon

Hyödyllisiä linkkejä ja resursseja

  • paikallinen varasto
  • Markdown-opas
  • Merkitty - Markdown-jäsennin

Esimerkkiprojekti

2. Jouluvalot

Taso: 1 - Aloittelija

Kuvaus : Jouluvalot-sovellus luottaa kehityskykyihisi lumoavan valonäytön luomiseen. Sinun tehtäväsi on piirtää seitsemän värillistä ympyrää peräkkäin ja muuttaa ajastimen perusteella kunkin ympyrän voimakkuutta. Kun ympyrää kirkastetaan, edeltäjä palaa normaaliin voimakkuuteensa.

Tämä simuloi aaltoilevien merkkijonojen vaikutusta, samanlaisia ​​kuin joululomien aikana.

Käyttäjien tarinat

  • Käyttäjä voi painaa painiketta aloittaakseen ja pysäyttääkseen näytön
  • Käyttäjä voi muuttaa ajanjaksoa säätämällä voimakkuuden muutosta

Bonusominaisuudet

  • Käyttäjä voi valita jokaisen ympyrän täyttämiseen käytetyn värin
  • Käyttäjä voi määrittää intensiteetin arvon
  • Käyttäjä voi muuttaa minkä tahansa rivin ympyrän kokoa
  • Käyttäjä voi määrittää näytölle sisällytettävien rivien määrän. Voit valita yhdestä seitsemään riviä

Hyödyllisiä linkkejä ja resursseja

  • Näytekuva
  • Adafruit LED -matriisi

Esimerkkiprojekti

3. FlipImage

Taso: 1 - Aloittelija

Kuvaus : Verkkokehittäjien on tärkeää ymmärtää kuvien käsittelyn perusteet, koska rikkaat verkkosovellukset luottavat kuviin lisäarvon luomiseksi käyttöliittymään ja käyttökokemukseen (UI / UX).

FlipImage tutkii kuvankäsittelyn yhtä näkökohtaa - kuvan kiertämistä. Tämä sovellus näyttää neliönmuotoisen paneelin, joka sisältää yhden kuvan 2x2-matriisissa. Käyttämällä kunkin kuvan vieressä olevia nuolia ylös, alas, vasemmalle ja oikealle käyttäjä voi kääntää ne pysty- tai vaakasuunnassa.

Tämän sovelluksen käyttöönotto edellyttää vain alkuperäisen HTML: n, CSS: n ja Javascriptin käyttöä. Kuvapaketit ja kirjastot eivät ole sallittuja.

Käyttäjien tarinat

  • Käyttäjä voi nähdä yhden kuvan sisältävän ruudun toistuvan 2x2-matriisissa
  • Käyttäjä voi kääntää minkä tahansa kuvan pysty- tai vaakasuunnassa käyttämällä kuvan vieressä olevia ylös-, alas-, vasenta ja oikeaa nuolta.

Bonusominaisuudet

  • Käyttäjä voi vaihtaa oletuskuvan kirjoittamalla toisen kuvan URL-osoitteen syöttökenttään
  • Käyttäjä voi näyttää uuden kuvan napsauttamalla Näytä-painiketta syöttökentän vieressä
  • Käyttäjä voi nähdä virheilmoituksen, jos uusien kuvien URL-osoitetta ei löydy

Hyödyllisiä linkkejä ja resursseja

  • Kuinka kääntää kuvaa
  • Luo CSS Flipping -animaatio

Esimerkkiprojekti

4. Tietokilpailu

Taso: 1 - Aloittelija

Kuvaus : Harjoittele ja testaa tietosi vastaamalla kysymyksiin tietokilpailusovelluksessa.

Kehittäjänä voit luoda tietokilpailusovelluksen muiden kehittäjien koodaustaitojen testaamiseen. (HTML, CSS, JavaScript, Python, PHP jne.)

Käyttäjien tarinat

  • Käyttäjä voi aloittaa tietokilpailun painamalla a button
  • Käyttäjä voi nähdä kysymyksen, johon voi vastata 4 mahdollista vastausta
  • Kun olet valinnut vastauksen, näytä seuraava kysymys käyttäjälle. Tee tämä, kunnes tietokilpailu on valmis
  • Loppujen lopuksi Käyttäjä voi nähdä seuraavat tilastot:
  1. Tietokilpailun loppuun saattamiseen kulunut aika
  2. Kuinka monta oikeaa vastausta hän sai
  3. Viesti siitä, onko hän passedtai failedtietokilpailu

Bonusominaisuudet

  • Käyttäjä voi jakaa tietokilpailun tuloksen sosiaalisessa mediassa
  • Lisää useita tietokilpailuja sovellukseen. Käyttäjä voi valita, minkä ottaa
  • Käyttäjä voi luoda tilin ja tallentaa kaikki tulokset hallintapaneeliinsa. Käyttäjä voi suorittaa tietokilpailun useita kertoja

Hyödyllisiä linkkejä ja resursseja

  • Avaa Trivia-tietokanta

Esimerkkiprojekteja

React-sovelluksella rakennettu tietokilpailu (odota, että se latautuu, kun sitä isännöi Heroku)

5. Roomalainen luku desimaalilukuiksi muunnin

Taso: 1 - Aloittelija

Kuvaus : Roomalaisilla numeroilla esitetty numeerinen järjestelmä on peräisin antiikin Roomasta ja pysyi tavallisena tapana kirjoittaa numeroita kaikkialle Eurooppaan pitkälle keskiaikaan. Roomalaisissa numeroissa käytetään nykyään seitsemää symbolia, joista jokaisella on kiinteä kokonaislukuarvo.

Katso alla oleva taulukko Symboli - Arvoparit:

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

Käyttäjien tarinat

  • Käyttäjän on voitava syöttää yksi roomalainen numero syöttökenttään
  • Käyttäjä näki tulokset yhdessä lähtökentässä, joka sisälsi desimaalin (perus 10) vastaavan roomalaisen luvun, joka syötettiin painamalla painiketta
  • Jos syötetään väärä symboli, käyttäjän pitäisi nähdä virhe

Bonusominaisuudet

  • Käyttäjä voi nähdä muunnoksen tapahtuvan automaattisesti kirjoittaessani
  • Käyttäjän on voitava muuntaa desimaalista roomalaiseksi (päinvastoin)

Hyödyllisiä linkkejä ja resursseja

  • Selitys roomalaisista numeroista

Esimerkkiprojekti

Roomalaisen luvun muunnin

6. Book Finder -sovellus

Taso: 2 - keskitaso

Kuvaus : Luo sovellus, jonka avulla käyttäjät voivat etsiä kirjoja kirjoittamalla kyselyn (otsikko, tekijä jne.). Näytä saadut kirjat sivun luettelossa, jossa on kaikki vastaavat tiedot.

Käyttäjien tarinat

  • Käyttäjä voi kirjoittaa hakukyselyn inputkenttään
  • Käyttäjä voi lähettää kyselyn. Tämä kutsuu sovellusliittymää, joka palauttaa joukon kirjoja vastaavilla tiedoilla ( otsikko , tekijä , julkaisupäivä , kuva jne.)
  • Käyttäjä voi nähdä sivulla näkyvän luettelon kirjoista

Bonusominaisuudet

  • Lisää kutakin luettelon kohdetta varten linkki, joka lähettää käyttäjän ulkoiselle sivustolle, jolla on lisätietoja kirjasta
  • Ota käyttöön reagoiva suunnittelu
  • Lisää latausanimaatioita

Hyödyllisiä linkkejä ja resursseja

Voit käyttää Google-kirjojen sovellusliittymää

Esimerkkiprojekti

BookSearch-React

7. Kortti-muisti-peli

Taso: 2 - keskitaso

Kuvaus : Korttimuisti on peli, jossa sinun täytyy napsauttaa korttia nähdäksesi, mikä kuva on sen alla, ja yrittää löytää vastaava kuva muiden korttien alapuolelta.

Käyttäjien tarinat

  • Käyttäjä voi nähdä ruudukon, jossa on nxn korttia ( non kokonaisluku). Alun perin kaikki kortit ovat alaspäin ( hiddentila)
  • Käyttäjä voi napsauttaa painiketta aloittaakseen pelin. Kun tätä painiketta napsautetaan, ajastin käynnistyy
  • Käyttäjä voi napsauttaa mitä tahansa korttia paljastamaan kuvan, joka on sen alla (vaihda visibletilaksi). Kuva näkyy, kunnes käyttäjä napsauttaa toista korttia

Kun Käyttäjä napsauttaa 2. korttia:

  • Jos ottelu on olemassa, 2 korttia poistetaan pelistä (joko piilota / poista tai jätä ne visibletilaan)
  • Jos ottelua ei ole, kaksi korttia palaa alkuperäiseen tilaansa ( hiddentilaan)
  • Kun kaikki ottelut on löydetty, Käyttäjä voi nähdä valintaikkunan, jossa näkyy Onnittelut-viesti ja laskuri, joka näyttää pelin loppuun saattamiseen kuluneen ajan

Bonusominaisuudet

  • Käyttö voi valita useista vaikeustasoista (helppo, keskitaso, kova). Lisääntynyt vaikeus tarkoittaa: kortin täyttämiseen käytettävissä olevan ajan lyhentämistä ja / tai korttien määrän lisäämistä
  • Käyttäjä voi nähdä pelitilastot (voittojen / häviöiden lukumäärä, paras aika kullekin tasolle)

Hyödyllisiä linkkejä ja resursseja

  • Wikipedia

Esimerkkiprojekteja

Flip - kortti muistipeli

SMB3-muistikorttipeli

8. Markdown-taulukon generaattori

Taso: 2 - keskitaso

Kuvaus : Luo sovellus, joka muuntaa säännöllisen taulukon, jossa on käyttäjän toimittamat tiedot (valinnaisesti) Markdown-muotoiseksi taulukoksi.

Käyttäjien tarinat

  • Käyttäjä voi luoda HTML tabletietyn määrän rivejä ja sarakkeita
  • Käyttäjä voi lisätä tekstiä jokaiseen soluun HTML table
  • Käyttäjä voi luoda a Markdown formatted table, joka sisältää tiedotHTML table
  • Käyttäjä voi esikatsella Markdown formatted table

Bonusominaisuudet

  • Käyttäjä voi kopioida Markdown formatted tableleikepöydälle painamalla painiketta
  • Käyttäjä voi lisätä uuden rivin tai sarakkeen määritettyyn sijaintiin
  • Käyttäjä voi poistaa rivin tai sarakkeen kokonaan
  • Käyttäjä voi kohdistaa ( vasemmalle , oikealle tai keskelle ) solun , sarakkeen , rivin tai koko taulukon

Hyödyllisiä linkkejä ja resursseja

  • Markdown-opas
  • Merkitty - Markdown-jäsennin
  • Kuinka kopioida leikepöydälle

Esimerkkiprojekti

Taulukoiden luontitaulukot

9. Jousisarja Art

Taso: 2 - keskitaso

Kuvaus : String Artin tarkoituksena on antaa kehittäjälle käytäntö luoda yksinkertainen animoitu grafiikka, käyttää geometriaa animaatioalgoritmissa ja luoda jotain, joka on visuaalisesti miellyttävää katsella.

String Art piirtää yhden monivärisen viivan, joka liikkuu tasaisesti, kunnes toinen pää koskettaa ympäröivän ikkunan sivua. Siinä vaiheessa se koskettaa "pomppimis" -vaikutusta, jota käytetään suunnan muuttamiseen.

Aaltoiluefekti syntyy pitämällä vain 10–20 kuvaa viivasta sen liikkuessa. Vanhemmat kuvat haalistuvat asteittain, kunnes ne katoavat.

Animaatiokirjastoja ei sallita. Käytä vain Vanilla HTML / CSS / JavaScript.

Käyttäjien tarinat

  • Aloita piirtämällä monivärinen viiva satunnaisessa paikassa sen ympäröivän ikkunan rajoissa
  • Jokainen 20 ms piirtää uuden kopion viivasta uuteen sijaintiin lentoradan perusteella - inkrementaalinen etäisyys edellisestä linjasta päätepisteiden perusteella
  • Kun jompikumpi päätepiste koskettaa ympäröivän ikkunan rajaa, muuta sen suunta ja muuta sen kulmaa satunnaisesti
  • Vähennä asteittain vanhojen viivojen voimakkuutta niin, että vain viimeisimmät 10–20 viivaa ovat näkyvissä liiketuntuman tai ”aaltoilun” luomiseksi

Bonusominaisuudet

  • Käyttäjä voi määrittää viivan pituuden ja nopeuden
  • Käyttäjä voi määrittää useita viivoja ikkunassa, jotka kaikki liikkuvat eri reittejä ja nopeuksia pitkin

Hyödyllisiä linkkejä ja resursseja

  • Monivaiheisten animaatioiden ja siirtymien käyttäminen
  • Animaation perusteet

Esimerkkiprojekti

Tämä projekti on hyvin lähellä, mutta sillä on pieni sulkuikkuna ja yksivärinen. Daniel Cortes

10. Tehtäväsovellus

Taso: 2 - keskitaso

Kuvaus : Klassinen tehtävä-sovellus, jossa käyttäjä voi kirjoittaa muistiin kaikki haluamansa asiat.

Käyttäjien tarinat

  • Käyttäjä voi nähdä inputkentän, johon hän voi kirjoittaa tehtävän
  • Painamalla enter (tai painiketta) käyttäjä voi lähettää tehtävän ja nähdä, että se lisätään tehtäväluetteloon
  • Käyttäjä voi merkitä tehtävän nimellä completed
  • Käyttäjä voi poistaa tehtävän painamalla painiketta (tai itse tehtävää)

Bonusominaisuudet

  • Käyttäjä voi muokata tehtävää
  • Käyttäjä voi nähdä luettelon kaikista suoritetuista tehtävistä
  • Käyttäjä voi nähdä luettelon kaikista aktiivisista tehtävistä
  • Käyttäjä voi nähdä päivämäärän, jolloin hän loi tehtävän
  • Kun suljet selainikkunan, tehtävät tallennetaan ja kun käyttäjä palaa, tiedot haetaan

Hyödyllisiä linkkejä ja resursseja

  • paikallinen varasto

Esimerkkiprojekteja

React-sovelluksella rakennettu Todo-sovellus

11. Taistelulaivapelimoottori

Taso: 3 - Edistynyt

Kuvaus : Battleship Game Engine (BGE) toteuttaa klassisen vuoropohjaisen lautapelin pakettina, joka on erotettu mistä tahansa esityskerroksesta. Tämä on eräänlainen arkkitehtuurimalli, josta on hyötyä monissa sovelluksissa, koska se sallii minkä tahansa määrän sovelluksia käyttää samaa palvelua.

Itse BGE kutsutaan toimintokutsujen sarjan kautta pikemminkin suoraan kytkettyjen loppukäyttäjän toimien kautta. Tässä suhteessa BGE: n käyttö on samanlainen kuin verkkosovelluksen altistaman sovellusliittymän tai reittisarjan käyttö.

Tämä haaste vaatii, että kehität BGE: n ja erittäin ohuen, tekstipohjaisen esityskerroksen testausta varten, joka on erillinen itse moottorista. Tästä johtuen alla olevat käyttäjätarinat on jaettu kahteen sarjaan - yksi BGE: lle ja toinen tekstipohjaiselle esityskerrokselle.

BGE on vastuussa pelitilan ylläpidosta.

Käyttäjien tarinat

BGE

  • Soittaja voi käyttää startGame()toimintoa aloittaakseen yhden pelaajan pelin. Tämä toiminto luo 8x8-pelilaudan, joka koostuu kolmesta aluksesta, joiden leveys on yksi neliö ja pituus:
  1. Tuhoaja: 2 ruutua
  2. Risteilijä: 3 ruutua
  3. Taistelulaiva: 4 ruutua

startGame() sijoittaa nämä alukset satunnaisesti aluksella mihin tahansa suuntaan ja palauttaa matriisin, joka edustaa alusten sijoittelua.

  • Soittaja voi kutsua shoot()toiminnon, joka välittää kohdelistan ja sarakekoordinaatit pelilaudalla. shoot()palauttaa indikaattorit, jotka ilmaisevat, johtuuko ammuttu osuma tai epäonnistuminen, jäljellä olevien (eli vielä uppoamattomien) alusten lukumäärä, alusten sijoitusryhmä ja päivitetyt osumat ja epäonnistumiset.

Osumat ja epäonnistumiset -ryhmän solut sisältävät välilyönnin, jos niitä ei ole vielä kohdennettu, Ojos ne on kohdistettu, mutta yksikään aluksen osa ei ole kyseisessä paikassa tai Xjos solu on miehitetty aluksen osalla.

Tekstipohjainen esityskerros

  • Käyttäjä voi nähdä osumat ja ohitukset -taulukon, joka näkyy startGame()toiminnon palauttamana pelilaudan 2-ulotteisena hahmona .
  • Käyttäjää voidaan kehottaa syöttämään kohdelaukun koordinaatit pelilaudalle.
  • Käyttäjä voi nähdä päivitetyt osumat ja ohittaa taulukon näytön otettuaan kuvan.
  • Käyttäjä voi nähdä jokaisen laukauksen jälkeen viestin siitä, johtiinko laukaus osuman vai epäonnistumisen.
  • Käyttäjä voi nähdä onnitteluviestin viimeisen jäljellä olevan laivan uppoamisen jälkeen.
  • Käyttäjää voidaan kehottaa pelaamaan uudelleen jokaisen pelin lopussa. Uuden pelin hylkääminen lopettaa pelin.

Bonusominaisuudet

BGE

  • Soittaja voi määrittää pelilaudan rivien ja sarakkeiden määrän startGame()funktion parametrina .
  • Soittaja voi kutsua gameStats()toiminnon, joka palauttaa Javascript-objektin, joka sisältää nykyisen pelin tiedot. Esimerkiksi pelattujen kierrosten määrä, nykyinen osumien ja epäonnistumisten määrä jne.
  • Soittaja voi määrittää soittaessaan pelaajien lukumäärän (1 tai 2), startGame()mikä luo yhden pöydän jokaiselle aluksille satunnaisesti asutulle pelaajalle.

shoot()hyväksyy pelaajan numeron, johon ammutaan, sekä laukauksen koordinaatit. Palautetut tiedot ovat tälle soittimelle.

Tekstipohjainen esityskerros

  • Käyttäjä voi nähdä nykyisen pelitilanteen milloin tahansa kirjoittamalla lause statskohdekoordinaattien sijaan. (Huomaa, että tämä edellyttää gameStats()toimintoa BGE: ssä)
  • Käyttäjä voi määrittää kahden pelaajan pelattavan pelin, jokainen pelaaja vuorotellen vuorotellen samalla pääteistunnolla (Huomaa, että tämä edellyttää vastaavia bonusominaisuuksia BGE: ssä)
  • Käyttäjä voi nähdä soittimen numeron kehotteissa, jotka liittyvät jokaisen kierroksen tuloihin.
  • Käyttäjä voi nähdä molemmat pelaajat laudalla jokaisen käännöksen lopussa.

Hyödyllisiä linkkejä ja resursseja

  • Taistelulaivapeli (Wikipedia)
  • Taistelulaivan pelisäännöt (Hasbro)

Esimerkkiprojekteja

Tämä YouTube-video näyttää, miten tekstipohjaista taistelulaivapeliä pelataan.

Seuraava esimerkki on esimerkki taistelulaivapelistä, jos se ei ole sinulle tuttu. Muista, että sinun on otettava käyttöön tekstipohjainen esityskerros testausta varten. Taistelulaivapeli, Chris Brody

12. Chat-sovellus

Taso: 3 - Edistynyt

Kuvaus : Reaaliaikainen chat-käyttöliittymä, jossa useat käyttäjät voivat olla vuorovaikutuksessa toistensa kanssa lähettämällä viestejä.

MVP: nä (Minimum Viable Product) voit keskittyä chat-käyttöliittymän rakentamiseen. Reaaliaikainen toiminnallisuus voidaan lisätä myöhemmin (bonusominaisuudet).

Käyttäjien tarinat

  • Käyttäjää pyydetään antamaan käyttäjänimi, kun hän vierailee chat-sovelluksessa. Käyttäjätunnus tallennetaan sovellukseen
  • Käyttäjä voi nähdä, input fieldmihin hän voi kirjoittaa uuden viestin
  • Painamalla enternäppäintä tai napsauttamalla sendpainiketta, teksti näkyy chat boxkäyttäjänimen vieressä (esim. John Doe: Hello World!)

Bonusominaisuudet

  • Viestit näkyvät kaikille chat-sovelluksessa (WebSocketsia käyttäville) oleville käyttäjille.
  • Kun uusi käyttäjä liittyy chattiin, viesti näytetään kaikille olemassa oleville käyttäjille
  • Viestit tallennetaan tietokantaan
  • Käyttäjä voi lähettää kuvia, videoita ja linkkejä, jotka näytetään oikein
  • Käyttäjä voi valita ja lähettää emojin
  • Käyttäjät voivat keskustella yksityisesti
  • Käyttäjät voivat liittyä channelstiettyihin aiheisiin

Hyödyllisiä linkkejä ja resursseja

  • Socket.io
  • React.js-chat-sovelluksen rakentaminen 10 minuutissa - artikkeli

Esimerkkiprojekti

Chatty2

13. GitHub-aikajana

Taso: 3 - Edistynyt

Kuvaus : API: t ja tietojen graafinen esitys ovat nykyaikaisten verkkosovellusten tunnusmerkkejä. GitHub-aikajana yhdistää nämä kaksi visuaalisen historian luomiseen käyttäjien GitHub-toiminnasta.

GitHub-aikajanan tavoitteena on hyväksyä GitHub-käyttäjänimi ja tuottaa aikajana, joka sisältää jokaisen repon ja merkinnän repo-nimillä, niiden luomispäivämäärällä ja kuvauksilla. Aikataulun tulisi olla sellainen, että se voidaan jakaa mahdollisen työnantajan kanssa. Sen pitäisi olla helppo lukea ja käyttää värejä ja typografiaa tehokkaasti.

Vain julkiset GitHub-repot tulisi näyttää.

Käyttäjien tarinat

  • Käyttäjä voi kirjoittaa GitHub-käyttäjänimen
  • Käyttäjä voi napsauttaa Luo-painiketta, jos haluat luoda ja näyttää nimetyn käyttäjän repo-aikajanan
  • Käyttäjä voi nähdä varoitusviestin, jos GitHub-käyttäjänimi ei ole kelvollinen GitHub-käyttäjänimi.

Bonusominaisuudet

  • Käyttäjä voi nähdä yhteenvedon luototusten lukumäärästä niiden luomisvuoden mukaan

Hyödyllisiä linkkejä ja resursseja

GitHub tarjoaa kaksi sovellusliittymää, joita voit käyttää repotietojen käyttämiseen. Voit myös käyttää NPM-pakettia päästäksesi GitHub-sovellusliittymään.

GitHub-sovellusliittymän dokumentaatio löytyy osoitteesta:

  • GitHub REST -sovellusliittymä V3
  • GitHub GraphQL API V4

Esimerkkikoodi, joka näyttää, miten GitHub-sovellusliittymiä käytetään, ovat:

Tämän CURL-komennon avulla näet V3 REST -sovellusliittymän palauttaman JSON: n repoosi:

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

Esimerkkiprojekteja

14. Oikeinkirjoitus

Taso: 3 - Edistynyt

Kuvaus : Oikeinkirjoituksen tuntemus on olennainen osa sujuvaa kieltä. Olitpa sitten nuori, joka oppii oikeinkirjoitusta, tai henkilö, joka oppii uutta kieltä ja pystyy harjoittelemaan, auttaa vahvistamaan kielitaitoasi.

Spell-It -sovellus auttaa käyttäjiä harjoittamaan oikeinkirjoitusta toistamalla sanan äänitallenteen, jonka käyttäjän on sitten kirjoitettava tietokoneen näppäimistöllä.

Käyttäjien tarinat

  • Käyttäjä voi napsauttaa Toista-painiketta kuullaksesi syötettävän sanan
  • Käyttäjä voi nähdä kirjaimet, jotka näkyvät sanan syöttökentässä, kun ne syötetään näppäimistöön
  • Käyttäjä voi napsauttaa Enter-painiketta lähettääksesi sanan, joka on kirjoitettu sanan syöttökenttään
  • Käyttäjä voi nähdä vahvistusviestin, kun oikea sana kirjoitetaan
  • Käyttäjä voi nähdä viestin, joka pyytää sanaa kirjoittamaan uudelleen, kun se kirjoitetaan väärin
  • Käyttäjä voi nähdä oikean oikeinkirjoituksen määrän, yritettyjen sanojen kokonaismäärän ja onnistuneiden merkintöjen prosenttiosuuden.

Bonusominaisuudet

  • Käyttäjä voi kuulla vahvistusäänen, kun sana on kirjoitettu oikein
  • Käyttäjä voi kuulla varoitusäänen, kun sana on kirjoitettu väärin
  • Käyttäjä voi napsauttaa 'Vihje' -painiketta korostaaksesi väärät kirjaimet sanan syöttökentässä
  • Käyttäjä voi kirjoittaa kirjoitetun sanan painamalla näppäimistön Enter-näppäintä tai napsauttaa Enter-painiketta sovellusikkunassa

Hyödyllisiä linkkejä ja resursseja

  • Texas Instruments puhu ja loitsu
  • Web Audio -sovellusliittymä
  • Napsauta ja puhu

Esimerkkiprojekteja

Word Wizard iOS: lle

Puhu N Spell Google Playssa

15. Kyselysovellus

Taso: 3 - Edistynyt

Kuvaus : Kyselyt ovat arvokas osa kehittäjien työkalupakettia. Ne ovat hyödyllisiä saadaksesi käyttäjiltä palautetta useista aiheista, mukaan lukien sovellusten tyytyväisyys, vaatimukset, tulevat tarpeet, ongelmat, prioriteetit ja vain pahenemisvaiheet muutamaksi.

Survey-sovellus antaa sinulle mahdollisuuden oppia kehittämällä monipuolisen sovelluksen, jonka voit lisätä työkalupakkiisi. Se tarjoaa mahdollisuuden määritellä kysely, antaa käyttäjien vastata vastaamaan ennalta määrätyssä ajassa ja taulukoida ja esittää tuloksia.

Tämän sovelluksen käyttäjät on jaettu kahteen erilliseen rooliin, joilla kaikilla on erilaiset vaatimukset:

  • Kyselykoordinaattorit määrittelevät ja suorittavat kyselyjä. Tämä on hallinnollinen toiminto, jota tavalliset käyttäjät eivät voi käyttää.
  • Kyselyyn vastanneet Täytä kyselyt ja tarkastele tuloksia. Heillä ei ole järjestelmänvalvojan oikeuksia sovelluksessa.

Kaupalliset kyselytyökalut sisältävät jakelutoiminnon, joka lähettää kyselyjä kyselyyn vastaajille. Yksinkertaisuuden vuoksi tässä sovelluksessa oletetaan, että vastauksia varten avoimia kyselyjä käytetään sovelluksen verkkosivulta.

Käyttäjien tarinat

Kenraali

  • Kyselykoordinaattorit ja kyselyyn vastanneet voivat määritellä, suorittaa ja tarkastella kyselyjä ja kyselytuloksia yhteiseltä verkkosivustolta
  • Kyselykoordinaattorit voivat kirjautua sisään sovellukseen saadakseen hallinnollisia toimintoja, kuten määrittelemällä kyselyn.

Tutkimuksen määritteleminen

  • Kyselykoordinaattori voi määritellä kyselyn, joka sisältää 1–10 monivalintakysymystä.
  • Kyselykoordinaattori voi määrittää 1–5 toisiaan poissulkevaa valintaa kullekin kysymykselle.
  • Kyselykoordinaattori voi kirjoittaa kyselyn otsikon.
  • Kyselykoordinaattori voi napsauttaa Peruuta-painiketta palataksesi kotisivulle tallentamatta kyselyä.
  • Kyselykoordinaattori voi tallentaa kyselyn napsauttamalla Tallenna-painiketta.

Tutkimuksen tekeminen

  • Kyselykoordinaattori voi avata kyselyn valitsemalla kyselyn aiemmin määriteltyjen kyselyjen luettelosta
  • Kyselykoordinaattorit voivat sulkea kyselyn valitsemalla se avoimien kyselyjen luettelosta
  • Kyselyyn vastaaja voi suorittaa kyselyn valitsemalla sen avoimien kyselyjen luettelosta
  • Kyselyvastaaja voi valita vastaukset kyselyyn napsauttamalla valintaruutua
  • Kyselyyn vastanneet näkevät, että aiemmin valittu vastaus poistetaan automaattisesti, jos napsautetaan muuta vastausta.
  • Kyselyyn vastanneet voivat napsauttaa Peruuta-painiketta palataksesi kotisivulle lähettämättä kyselyä.
  • Kyselyn vastaajat voivat napsauttaa Lähetä-painiketta ja lähettää vastauksensa kyselyyn.
  • Kyselyyn vastanneet voivat nähdä virheilmoituksen, jos Lähetä-painiketta napsautetaan, mutta kaikkiin kysymyksiin ei ole vastattu.

Tutkimustulosten tarkastelu

  • Kyselykoordinaattorit ja kyselyyn vastanneet voivat valita näytettävän kyselyn suljettujen kyselyjen luettelosta
  • Kyselykoordinaattorit ja kyselyyn vastanneet voivat tarkastella kyselyn tuloksia taulukkomuodossa ja näyttää vastausten määrän kutakin mahdollista valintaa varten.

Bonusominaisuudet

  • Kyselyyn vastanneet voivat luoda sovelluksessa ainutlaatuisen tilin
  • Kyselyyn vastanneet voivat kirjautua sovellukseen
  • Kysely Vastaajat eivät voi täyttää samaa kyselyä useammin kuin kerran
  • Kyselykoordinaattorit ja kyselyyn vastanneet voivat tarkastella graafisia esityksiä tutkimustuloksista (esim. Piirakka-, palkki-, sarake- jne. Kaaviot)

Hyödyllisiä linkkejä ja resursseja

Kirjastot rakennuskartoituksia varten: SurveyJS

Joitakin kaupallisia kyselypalveluita ovat: Survey Monkey ja Typeform

Esimerkkiprojekti

Myötävaikuttaminen

Olet tervetullut osallistumaan projektiin GitHub-arkistossa! Jokainen panos on erittäin arvostettu.

Voit osallistua kahdella tavalla:

  1. luo ongelma ja kerro meille ideasi. Varmista, että käytät tässä tapauksessa uutta ideatarraa ;
  2. haasta projekti ja lähetä PR. Ennen kuin teet sen, varmista, että luet ja jatkat Contribution Guide -opasta (löydät sen arkistosta);

Lisää omia esimerkkejä

Voit myös lisätä omia esimerkkejä projekteihin, kun olet valmis. Kannustan sinua tekemään niin, koska se näyttää muille mitä upeita asioita olet rakentanut! ?

Levitä sanaa!

Jos tämän artikkelin ja repon tiedot olivat sinulle hyödyllisiä millään tavalla, varmista, että annat sille tähti?, Tällä tavoin muutkin löytävät sen ja hyötyvät siitä! Yhdessä voimme kasvaa ja tehdä yhteisöstämme parempaa!

Onko sinulla ehdotuksia siitä, miten voimme parantaa tätä projektia kokonaisuudessaan? Kerro meille! Haluaisimme kuulla palautteesi!

Tärkeimmät avustajat ??

Florin Pop : Twitter ja verkkosivusto.

Jim Medlock : Twitter ja Medium

Viikoittainen koodaushaaste?

Bonuksena on Weekly Coding Challenge, jossa voit oppia lisää harjoittelemalla taitojasi tosielämän projekteissa. Lue täydellinen opas saadaksesi selville, miten voit osallistua! ?

Alun perin julkaistu osoitteessa www.florin-pop.com.