Hier sind einige App-Ideen, die Sie entwickeln können, um Ihre Codierungsfähigkeiten zu verbessern

Wollten Sie schon immer etwas bauen, hatten aber keine Ahnung, was Sie tun sollten? So wie Autoren manchmal eine „Schreibblockade“ haben, gilt dies auch für Entwickler.

Zusammen mit meinem Freund Jim haben wir eine Sammlung von Anwendungsideen erstellt, die dieses Problem ein für alle Mal lösen sollen!

Diese Anwendungen sind:

  • ideal, um Ihre Codierungsfähigkeiten zu verbessern
  • großartig, um mit neuen Technologien zu experimentieren
  • Es ist großartig, in Ihr Portfolio aufgenommen zu werden, um Ihren nächsten Arbeitgeber / Kunden zu beeindrucken
  • ideal als Beispiele für Tutorials (Artikel oder Videos)
  • einfach zu vervollständigen und auch leicht erweiterbar mit neuen Funktionen

Dies ist nicht nur eine einfache Liste von Projekten, sondern eine Sammlung, die jedes Projekt so detailliert beschreibt, dass Sie es von Grund auf weiterentwickeln können!

Jede Projektspezifikation enthält Folgendes:

  1. Ein klares und beschreibendes Ziel
  2. Eine Liste der User Stories, die implementiert werden sollten (diese Storys dienen eher als Richtlinie als als erzwungene Liste der Aufgaben . Sie können jederzeit Ihre eigenen Funktionen hinzufügen, wenn Sie möchten).
  3. Eine Liste von Bonusfunktionen , die nicht nur das Basisprojekt, sondern gleichzeitig auch Ihre Fähigkeiten verbessern
  4. Alle Ressourcen und Links, die Ihnen helfen, das zu finden, was Sie zum Abschließen des Projekts benötigen

Projekte

Alle Projekte sind in drei Ebenen unterteilt, basierend auf dem Wissen und der Erfahrung, die erforderlich sind, um sie abzuschließen. Diese Ebenen sind:

  1. Anfänger - Entwickler in den frühen Phasen ihrer Lernreise. Diejenigen, die sich normalerweise auf die Erstellung benutzerbezogener Anwendungen konzentrieren.
  2. Mittelstufe - Entwickler in einer Zwischenstufe des Lernens und Erlebens. Sie sind mit UI / UX vertraut, verwenden Entwicklungstools und erstellen Apps, die API-Dienste verwenden.
  3. Fortgeschrittene - Entwickler, die über alle oben genannten Funktionen verfügen und fortgeschrittenere Techniken wie die Implementierung von BackEnd-Anwendungen und Datenbankdiensten erlernen.

Unten finden Sie 5 Projekte für jede der Ebenen ( insgesamt 15 ), aber es gibt (derzeit) über 30 Projekte in diesem GitHub-Repository. Probieren Sie es aus, da wir planen, in Zukunft weitere Projekte hinzuzufügen. Sie können gerne helfen! (Mehr dazu im Abschnitt " Beiträge " weiter unten?)

1. Notizen App

Stufe: 1 - Anfänger

Beschreibung : Erstellen und speichern Sie Ihre Notizen für einen späteren Zweck!

Benutzergeschichten

  • Der Benutzer kann eine Notiz erstellen
  • Der Benutzer kann eine Notiz bearbeiten
  • Der Benutzer kann eine Notiz löschen
  • Beim Schließen des Browserfensters werden die Notizen gespeichert und bei der Rückkehr des Benutzers werden die Daten abgerufen

Bonusmaterial

  • Der Benutzer kann eine Notiz im Markdown-Format erstellen und bearbeiten. Beim Speichern wird Markdown in HTML konvertiert
  • Der Benutzer kann das Datum sehen, an dem er die Notiz erstellt hat

Nützliche Links und Ressourcen

  • lokaler Speicher
  • Markdown-Anleitung
  • Markiert - Ein Markdown-Parser

Beispielprojekt

2. Weihnachtsbeleuchtung

Stufe: 1 - Anfänger

Beschreibung : Die Anwendung Christmas Lights basiert auf Ihren Entwicklungstalenten, um eine faszinierende Lichtanzeige zu erstellen. Ihre Aufgabe ist es, sieben farbige Kreise hintereinander zu zeichnen und basierend auf einem Timer die Intensität jedes Kreises zu ändern. Wenn ein Kreis aufgehellt wird, kehrt sein Vorgänger zu seiner normalen Intensität zurück.

Dies simuliert die Wirkung einer Reihe von Wellenlichtern, ähnlich denen, die während der Weihnachtsferien angezeigt werden.

Benutzergeschichten

  • Der Benutzer kann eine Taste drücken, um die Anzeige zu starten und zu stoppen
  • Der Benutzer kann das Zeitintervall ändern, in dem die Änderung der Intensität gesteuert wird

Bonusmaterial

  • Der Benutzer kann die Farbe auswählen, mit der jeder Kreis gefüllt wird
  • Der Benutzer kann den Intensitätswert angeben
  • Der Benutzer kann die Größe eines Kreises in der Zeile ändern
  • Der Benutzer kann die Anzahl der Zeilen angeben, die in die Anzeige aufgenommen werden sollen. Es können eine bis sieben Zeilen ausgewählt werden

Nützliche Links und Ressourcen

  • Beispielbild
  • Adafruit LED Matrix

Beispielprojekt

3. FlipImage

Stufe: 1 - Anfänger

Beschreibung : Für Webentwickler ist es wichtig, die Grundlagen der Manipulation von Bildern zu verstehen, da Rich-Webanwendungen auf Bildern basieren, um der Benutzeroberfläche und der Benutzererfahrung (UI / UX) einen Mehrwert zu verleihen.

FlipImage untersucht einen Aspekt der Bildmanipulation - die Bildrotation. Diese App zeigt ein quadratisches Feld mit einem einzelnen Bild in einer 2x2-Matrix an. Mit einem Satz von Aufwärts-, Abwärts-, Links- und Rechtspfeilen neben jedem der Bilder kann der Benutzer sie vertikal oder horizontal spiegeln.

Sie dürfen nur natives HTML, CSS und Javascript verwenden, um diese App zu implementieren. Bildpakete und Bibliotheken sind nicht erlaubt.

Benutzergeschichten

  • Der Benutzer kann einen Bereich sehen, der ein einzelnes Bild enthält, das in einer 2x2-Matrix wiederholt wird
  • Der Benutzer kann jedes der Bilder vertikal oder horizontal spiegeln, indem er eine Reihe von Aufwärts-, Abwärts-, Links- und Rechtspfeilen neben dem Bild verwendet

Bonusmaterial

  • Der Benutzer kann das Standardbild ändern, indem er die URL eines anderen Bildes in ein Eingabefeld eingibt
  • Der Benutzer kann das neue Bild anzeigen, indem er neben dem Eingabefeld auf die Schaltfläche "Anzeigen" klickt
  • Der Benutzer kann eine Fehlermeldung sehen, wenn die neue Bild-URL nicht gefunden wird

Nützliche Links und Ressourcen

  • So spiegeln Sie ein Bild
  • Erstellen Sie eine CSS-Flip-Animation

Beispielprojekt

4. Quiz App

Stufe: 1 - Anfänger

Beschreibung : Üben und testen Sie Ihr Wissen, indem Sie Fragen in einer Quizanwendung beantworten.

Als Entwickler können Sie eine Quizanwendung erstellen, um die Codierungsfähigkeiten anderer Entwickler zu testen. (HTML, CSS, JavaScript, Python, PHP usw.)

Benutzergeschichten

  • Der Benutzer kann das Quiz durch Drücken von a starten button
  • Der Benutzer kann eine Frage mit 4 möglichen Antworten sehen
  • Zeigen Sie dem Benutzer nach Auswahl einer Antwort die nächste Frage an. Tun Sie dies, bis das Quiz beendet ist
  • Am Ende kann der Benutzer die folgenden Statistiken sehen:
  1. Zeit, die benötigt wurde, um das Quiz zu beenden
  2. Wie viele richtige Antworten hat er bekommen?
  3. Eine Nachricht, die zeigt, ob er passedoder faileddas Quiz

Bonusmaterial

  • Der Benutzer kann das Ergebnis eines Quiz in sozialen Medien teilen
  • Fügen Sie der Anwendung mehrere Tests hinzu. Der Benutzer kann auswählen, welche er nehmen möchte
  • Der Benutzer kann ein Konto erstellen und alle Ergebnisse in seinem Dashboard speichern. Der Benutzer kann ein Quiz mehrmals absolvieren

Nützliche Links und Ressourcen

  • Öffnen Sie die Trivia-Datenbank

Beispielprojekte

Mit React erstellte Quiz-App (warten Sie, bis sie geladen ist, da sie auf Heroku gehostet wird)

5. Konverter für römische Zahlen in Dezimalzahlen

Stufe: 1 - Anfänger

Beschreibung : Das durch römische Ziffern dargestellte numerische System stammt aus dem alten Rom und blieb bis weit ins Spätmittelalter die übliche Schreibweise für Zahlen in ganz Europa. Die heute verwendeten römischen Ziffern verwenden sieben Symbole mit jeweils einem festen ganzzahligen Wert.

In der folgenden Tabelle sind die Symbol-Wert- Paare aufgeführt:

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

Benutzergeschichten

  • Der Benutzer sollte in der Lage sein, eine römische Zahl in ein Eingabefeld einzugeben
  • Der Benutzer konnte die Ergebnisse in einem einzelnen Ausgabefeld sehen, das die Dezimalzahl (Basis 10) der römischen Zahl enthält, die durch Drücken einer Taste eingegeben wurde
  • Wenn ein falsches Symbol eingegeben wird, sollte der Benutzer einen Fehler sehen

Bonusmaterial

  • Der Benutzer konnte sehen, dass die Konvertierung automatisch durchgeführt wird, während ich tippe
  • Der Benutzer sollte in der Lage sein, von Dezimal nach Roman zu konvertieren (umgekehrt).

Nützliche Links und Ressourcen

  • Eine Erklärung der römischen Zahlen

Beispielprojekt

Roman Number Converter

6. Book Finder App

Stufe: 2 - Mittelstufe

Beschreibung : Erstellen Sie eine Anwendung, mit der Benutzer durch Eingabe einer Abfrage (Titel, Autor usw.) nach Büchern suchen können. Zeigen Sie die resultierenden Bücher in einer Liste auf der Seite mit allen entsprechenden Daten an.

Benutzergeschichten

  • Der Benutzer kann eine Suchabfrage in ein inputFeld eingeben
  • Der Benutzer kann die Abfrage senden. Dadurch wird eine API aufgerufen, die eine Reihe von Büchern mit den entsprechenden Daten ( Titel , Autor , Veröffentlichungsdatum , Bild usw.) zurückgibt.
  • Der Benutzer kann die Liste der Bücher sehen, die auf der Seite angezeigt werden

Bonusmaterial

  • Fügen Sie für jedes Element in der Liste einen Link hinzu, über den der Benutzer zu einer externen Site weitergeleitet wird, die weitere Informationen zum Buch enthält
  • Implementieren Sie ein Responsive Design
  • Fügen Sie Ladeanimationen hinzu

Nützliche Links und Ressourcen

Sie können die Google Books-API verwenden

Beispielprojekt

BookSearch-React

7. Kartenspeicher-Spiel

Stufe: 2 - Mittelstufe

Beschreibung : Der Kartenspeicher ist ein Spiel, bei dem Sie auf eine Karte klicken müssen, um zu sehen, welches Bild sich darunter befindet, und versuchen müssen, das passende Bild unter den anderen Karten zu finden.

Benutzergeschichten

  • Der Benutzer kann ein Raster mit nxn-Karten sehen ( nist eine Ganzzahl). Alle Karten werden zunächst verdeckt ( hiddenStatus)
  • Der Benutzer kann auf eine Schaltfläche klicken, um das Spiel zu starten. Wenn Sie auf diese Schaltfläche klicken, wird ein Timer gestartet
  • Der Benutzer kann auf eine beliebige Karte klicken, um das darunter liegende Bild anzuzeigen (ändern Sie den visibleStatus). Das Bild wird angezeigt, bis der Benutzer auf eine zweite Karte klickt

Wenn der Benutzer auf die 2. Karte klickt:

  • Wenn es eine Übereinstimmung gibt, werden die 2 Karten aus dem Spiel entfernt (entweder verstecken / entfernen oder im visibleStatus belassen)
  • Wenn es keine Übereinstimmung gibt, werden die 2 Karten in ihren ursprünglichen Zustand zurück Flip ( hiddenZustand)
  • Wenn alle Übereinstimmungen gefunden wurden, wird dem Benutzer ein Dialogfeld mit einer Glückwunschmeldung mit einem Zähler angezeigt, in dem die Zeit angezeigt wird, die zum Beenden des Spiels benötigt wurde

Bonusmaterial

  • Die Verwendung kann zwischen mehreren Schwierigkeitsstufen wählen (leicht, mittel, schwer). Erhöhter Schwierigkeitsgrad bedeutet: Verringern der verfügbaren Zeit zum Abschließen und / oder Erhöhen der Anzahl der Karten
  • Der Benutzer kann die Spielstatistik anzeigen (Anzahl der Siege / Niederlagen, die beste Zeit für jedes Level).

Nützliche Links und Ressourcen

  • Wikipedia

Beispielprojekte

Flip - Kartenspeicherspiel

SMB3 Speicherkartenspiel

8. Markdown Table Generator

Stufe: 2 - Mittelstufe

Beschreibung : Erstellen Sie eine Anwendung, die eine reguläre Tabelle mit vom Benutzer bereitgestellten Daten (optional) in eine Markdown-formatierte Tabelle konvertiert.

Benutzergeschichten

  • Der Benutzer kann eine HTML tablemit einer bestimmten Anzahl von Zeilen und Spalten erstellen
  • Der Benutzer kann Text in jede Zelle der einfügen HTML table
  • Der Benutzer kann eine generieren Markdown formatted table, die die Daten aus dem enthältHTML table
  • Benutzer kann eine Vorschau der Markdown formatted table

Bonusmaterial

  • Der Benutzer kann Markdown formatted tabledas per Knopfdruck in die Zwischenablage kopieren
  • Der Benutzer kann eine neue Zeile oder Spalte an einer bestimmten Stelle einfügen
  • Der Benutzer kann eine Zeile oder eine Spalte vollständig löschen
  • Der Benutzer kann eine Zelle , eine Spalte , eine Zeile oder die gesamte Tabelle ( links , rechts oder in der Mitte ) ausrichten

Nützliche Links und Ressourcen

  • Markdown-Anleitung
  • Markiert - Ein Markdown-Parser
  • So kopieren Sie in die Zwischenablage

Beispielprojekt

Tabellengenerator / Markdown-Tabellen

9. String Art

Stufe: 2 - Mittelstufe

Beschreibung : Der Zweck von String Art besteht darin, dem Entwickler das Erstellen einer einfachen animierten Grafik unter Verwendung der Geometrie im Animationsalgorithmus zu üben und etwas zu erstellen, das optisch angenehm anzusehen ist.

String Art zeichnet eine einzelne mehrfarbige Linie, die sich reibungslos bewegt, bis ein Ende eine Seite des umschließenden Fensters berührt. An dem Punkt, an dem es berührt wird, wird ein "Bounce" -Effekt angewendet, um seine Richtung zu ändern.

Ein Welleneffekt wird erzeugt, indem nur 10 bis 20 Bilder der Linie während der Bewegung beibehalten werden. Ältere Bilder werden nach und nach ausgeblendet, bis sie verschwinden.

Animationsbibliotheken sind nicht erlaubt. Verwenden Sie nur Vanilla HTML / CSS / JavaScript.

Benutzergeschichten

  • Zeichnen Sie zunächst eine mehrfarbige Linie an einer zufälligen Position innerhalb der Grenze des umschließenden Fensters
  • Alle 20 ms wird eine neue Kopie der Linie an einer neuen Position basierend auf einer Trajektorie gezeichnet - der inkrementelle Abstand von der vorherigen Linie basierend auf den Endpunkten
  • Wenn einer der Endpunkte der Linie die Grenze des umschließenden Fensters berührt, ändern Sie die Richtung und ändern Sie zufällig den Winkel
  • Verblassen Sie die Intensität alter Linien schrittweise, sodass nur die letzten 10 bis 20 Linien sichtbar sind, um das Gefühl von Bewegung oder „Welligkeit“ zu erzeugen.

Bonusmaterial

  • Der Benutzer kann die Länge der Linie und ihre Geschwindigkeit angeben
  • Der Benutzer kann mehrere Linien innerhalb des Fensters angeben, die sich alle entlang unterschiedlicher Trajektorien und Geschwindigkeiten bewegen

Nützliche Links und Ressourcen

  • Verwenden von mehrstufigen Animationen und Übergängen
  • Grundlagen der Animation

Beispielprojekt

Dieses Projekt ist sehr nah, hat aber ein kleines Fenster und ist einfarbig. Daniel Cortes

10. To-Do-App

Stufe: 2 - Mittelstufe

Beschreibung : Die klassische To-Do-Anwendung, in der ein Benutzer alle Dinge aufschreiben kann, die er erreichen möchte.

Benutzergeschichten

  • Der Benutzer kann ein inputFeld sehen, in das er ein Aufgabenelement eingeben kann
  • Durch Drücken der Eingabetaste (oder einer Schaltfläche) kann der Benutzer das Aufgabenelement senden und sehen, dass es einer Liste von Aufgaben hinzugefügt wird
  • Der Benutzer kann eine Aufgabe als markieren completed
  • Der Benutzer kann ein Aufgabenelement durch Drücken einer Taste (oder auf das Aufgabenelement selbst) entfernen.

Bonusmaterial

  • Der Benutzer kann eine Aufgabe bearbeiten
  • Der Benutzer kann eine Liste mit allen erledigten Aufgaben anzeigen
  • Der Benutzer kann eine Liste mit allen aktiven Aufgaben anzeigen
  • Der Benutzer kann das Datum sehen, an dem er die Aufgabe erstellt hat
  • Beim Schließen des Browserfensters werden die Aufgaben gespeichert und bei der Rückkehr des Benutzers werden die Daten abgerufen

Nützliche Links und Ressourcen

  • lokaler Speicher

Beispielprojekte

Todo App mit React erstellt

11. Battleship Game Engine

Stufe: 3 - Fortgeschritten

Beschreibung : Battleship Game Engine (BGE) implementiert das klassische rundenbasierte Brettspiel als Paket, das von jeder Präsentationsschicht getrennt ist. Dies ist eine Art Architekturmuster, das in vielen Anwendungen nützlich ist, da eine beliebige Anzahl von Apps denselben Dienst verwenden kann.

Die BGE selbst wird durch eine Reihe von Funktionsaufrufen und nicht durch direkt gekoppelte Endbenutzeraktionen aufgerufen. In dieser Hinsicht ähnelt die Verwendung der BGE der Verwendung einer API oder einer Reihe von Routen, die von einem Webserver verfügbar gemacht werden.

Diese Herausforderung erfordert, dass Sie die BGE und eine sehr dünne, textbasierte Präsentationsebene zum Testen entwickeln, die von der Engine selbst getrennt ist. Aus diesem Grund sind die folgenden User Stories in zwei Gruppen unterteilt - eine für die BGE und eine für die textbasierte Präsentationsebene.

BGE ist für die Aufrechterhaltung des Spielstatus verantwortlich.

Benutzergeschichten

BGE

  • Der Anrufer kann eine startGame()Funktion aufrufen , um ein 1-Spieler-Spiel zu starten. Diese Funktion erzeugt ein 8x8-Spielbrett, das aus 3 Schiffen mit einer Breite von einem Quadrat und einer Länge von:
  1. Zerstörer: 2 Felder
  2. Kreuzer: 3 Felder
  3. Schlachtschiff: 4 Felder

startGame() platziert diese Schiffe zufällig in eine beliebige Richtung auf dem Brett und gibt ein Array zurück, das die Schiffsplatzierung darstellt.

  • Der Anrufer kann eine shoot()Funktion aufrufen , die die Zielzeilen- und -spaltenkoordinaten der Zielzelle auf dem Spielbrett übergibt. shoot()gibt Indikatoren zurück, die angeben, ob der Schuss zu einem Treffer oder Fehlschlag geführt hat, die Anzahl der verbleibenden Schiffe (dh noch nicht versenkt), das Schiffsplatzierungsarray und das aktualisierte Treffer- und Fehlfeld.

Zellen im Array "Treffer und Fehler" enthalten ein Feld, wenn sie noch nicht als Ziel ausgewählt wurden, Owenn sie als Ziel ausgewählt wurden, sich aber kein Teil eines Schiffes an diesem Ort befand oder Xwenn die Zelle von einem Teil eines Schiffes besetzt war.

Textbasierte Präsentationsschicht

  • Der Benutzer kann das Treffer- und Fehlerarray als zweidimensionale Charakterdarstellung des von der startGame()Funktion zurückgegebenen Spielbretts anzeigen .
  • Der Benutzer kann aufgefordert werden, die Koordinaten eines Zielfelds auf dem Spielbrett einzugeben.
  • Der Benutzer kann nach einer Aufnahme eine aktualisierte Array-Anzeige für Treffer und Fehler sehen.
  • Der Benutzer kann nach jedem Schuss eine Meldung sehen, die angibt, ob der Schuss zu einem Treffer oder Fehlschlag geführt hat.
  • Der Benutzer kann nach dem Schuss, der das letzte verbleibende Schiff versenkt, eine Glückwunschmeldung sehen.
  • Der Benutzer kann aufgefordert werden, am Ende jedes Spiels erneut zu spielen. Wenn Sie sich weigern, erneut zu spielen, wird das Spiel gestoppt.

Bonusmaterial

BGE

  • Der Aufrufer kann die Anzahl der Zeilen und Spalten auf dem Spielbrett als Parameter für die startGame()Funktion angeben .
  • Der Aufrufer kann eine gameStats()Funktion aufrufen , die ein Javascript-Objekt zurückgibt, das Metriken für das aktuelle Spiel enthält. Zum Beispiel die Anzahl der gespielten Runden, die aktuelle Anzahl der Treffer und Fehlschläge usw.
  • Der Anrufer kann beim Anrufen startGame()die Anzahl der Spieler (1 oder 2) angeben, wodurch für jeden Spieler, der zufällig mit Schiffen besetzt ist, ein Brett generiert wird.

shoot()akzeptiert die Spielernummer, für die der Schuss gemacht wird, zusammen mit den Koordinaten des Schusses. Die zurückgegebenen Daten gelten für diesen Spieler.

Textbasierte Präsentationsschicht

  • Der Benutzer kann die aktuelle Spielstatik jederzeit anzeigen, indem er die Phrase statsanstelle der Zielkoordinaten eingibt. (Beachten Sie, dass dies die gameStats()Funktion in der BGE erfordert )
  • Der Benutzer kann festlegen, dass ein Spiel für zwei Spieler gespielt werden soll, wobei jeder Spieler abwechselnd in derselben Terminalsitzung an der Reihe ist (Beachten Sie, dass hierfür entsprechende Bonusfunktionen in der BGE erforderlich sind).
  • Der Benutzer kann die Spielernummer in den Eingabeaufforderungen sehen, die den Eingaben in jeder Runde zugeordnet sind.
  • Der Benutzer kann sehen, dass beide Spieler am Ende jeder Runde an Bord gehen.

Nützliche Links und Ressourcen

  • Schlachtschiff-Spiel (Wikipedia)
  • Schlachtschiff-Spielregeln (Hasbro)

Beispielprojekte

Dieses YouTube-Video zeigt, wie ein textbasiertes Schlachtschiffspiel gespielt wird.

Das folgende Beispiel dient als Demonstration des Schlachtschiffspiels, wenn es Ihnen nicht vertraut ist. Denken Sie daran, dass Sie zum Testen eine textbasierte Präsentationsebene implementieren müssen. Schlachtschiffspiel von Chris Brody

12. Chat App

Stufe: 3 - Fortgeschritten

Beschreibung : Echtzeit-Chat-Oberfläche, über die mehrere Benutzer durch Senden von Nachrichten miteinander interagieren können.

Als MVP (Minimum Viable Product) können Sie sich auf die Erstellung der Chat-Oberfläche konzentrieren. Echtzeitfunktionen können später hinzugefügt werden (die Bonusfunktionen).

Benutzergeschichten

  • Der Benutzer wird aufgefordert, einen Benutzernamen einzugeben, wenn er die Chat-App besucht. Der Benutzername wird in der Anwendung gespeichert
  • Der Benutzer kann sehen, input fieldwo er eine neue Nachricht eingeben kann
  • Durch Drücken der enterTaste oder durch Klicken auf die sendSchaltfläche wird der Text in der angezeigt werden chat boxneben seinem Benutzernamen (zB John Doe: Hello World!)

Bonusmaterial

  • Die Nachrichten sind für alle Benutzer in der Chat-App sichtbar (mithilfe von WebSockets).
  • Wenn ein neuer Benutzer dem Chat beitritt, wird allen vorhandenen Benutzern eine Nachricht angezeigt
  • Nachrichten werden in einer Datenbank gespeichert
  • Der Benutzer kann Bilder, Videos und Links senden, die ordnungsgemäß angezeigt werden
  • Der Benutzer kann ein Emoji auswählen und senden
  • Benutzer können privat chatten
  • Benutzer können channelsan bestimmten Themen teilnehmen

Nützliche Links und Ressourcen

  • Socket.io
  • So erstellen Sie eine React.js-Chat-App in 10 Minuten - Artikel

Beispielprojekt

Chatty2

13. GitHub Timeline

Stufe: 3 - Fortgeschritten

Beschreibung : APIs und die grafische Darstellung von Informationen sind Kennzeichen moderner Webanwendungen. GitHub Timeline kombiniert beide, um einen visuellen Verlauf der GitHub-Aktivität eines Benutzers zu erstellen.

Das Ziel von GitHub Timeline ist es, einen GitHub-Benutzernamen zu akzeptieren und eine Timeline zu erstellen, die jedes Repo enthält und mit den Repo-Namen, dem Erstellungsdatum und ihren Beschreibungen versehen ist. Der Zeitplan sollte ein Zeitplan sein, der mit einem potenziellen Arbeitgeber geteilt werden kann. Es sollte leicht zu lesen sein und Farbe und Typografie effektiv nutzen.

Es sollten nur öffentliche GitHub-Repos angezeigt werden.

Benutzergeschichten

  • Der Benutzer kann einen GitHub-Benutzernamen eingeben
  • Der Benutzer kann auf die Schaltfläche "Generieren" klicken, um die Repo-Zeitleiste des benannten Benutzers zu erstellen und anzuzeigen
  • Der Benutzer kann eine Warnmeldung sehen, wenn der GitHub-Benutzername kein gültiger GitHub-Benutzername ist.

Bonusmaterial

  • Der Benutzer kann eine Zusammenfassung der Anzahl der Repos sehen, die nach dem Jahr ihrer Erstellung gezählt wurden

Nützliche Links und Ressourcen

GitHub bietet zwei APIs, mit denen Sie auf Repo-Daten zugreifen können. Sie können auch ein NPM-Paket verwenden, um auf die GitHub-API zuzugreifen.

Die Dokumentation zur GitHub-API finden Sie unter:

  • GitHub REST API V3
  • GitHub GraphQL API V4

Beispielcode für die Verwendung der GitHub-APIs ist:

Mit diesem CURL-Befehl können Sie den von der V3-REST-API für Ihre Repos zurückgegebenen JSON anzeigen:

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

Beispielprojekte

14. Spell-It

Stufe: 3 - Fortgeschritten

Beschreibung : Das Wissen, wie man buchstabiert, ist ein wesentlicher Bestandteil der fließenden Sprache. Ob Sie ein Jugendlicher sind, der das Buchstabieren lernt, oder eine Person, die eine neue Sprache lernt und üben kann, hilft, Ihre Sprachkenntnisse zu festigen.

Die Spell-It-App hilft Benutzern beim Üben ihrer Rechtschreibung, indem sie die Audioaufnahme eines Wortes abspielt, das der Benutzer dann über die Computertastatur buchstabieren muss.

Benutzergeschichten

  • Der Benutzer kann auf die Schaltfläche "Abspielen" klicken, um das einzugebende Wort zu hören
  • Der Benutzer kann Buchstaben im Texteingabe-Textfeld sehen, wenn sie auf der Tastatur eingegeben werden
  • Der Benutzer kann auf die Schaltfläche "Enter" klicken, um das Wort zu übermitteln, das in das Texteingabefeld eingegeben wurde
  • Der Benutzer kann eine Bestätigungsmeldung sehen, wenn das richtige Wort eingegeben wurde
  • Der Benutzer kann eine Nachricht sehen, in der er aufgefordert wird, das Wort erneut einzugeben, wenn es falsch geschrieben ist
  • Der Benutzer kann die Anzahl der korrekten Schreibweisen, die Gesamtzahl der versuchten Wörter und einen Prozentsatz der erfolgreichen Eingaben anzeigen.

Bonusmaterial

  • Der Benutzer kann einen Bestätigungston hören, wenn das Wort richtig geschrieben ist
  • Der Benutzer kann einen Warnton hören, wenn das Wort falsch geschrieben ist
  • Der Benutzer kann auf die Schaltfläche "Hinweis" klicken, um die falschen Buchstaben im Texteingabe-Textfeld hervorzuheben
  • Der Benutzer kann die Eingabetaste auf der Tastatur drücken, um ein eingegebenes Wort zu senden, oder auf die Eingabetaste im App-Fenster klicken

Nützliche Links und Ressourcen

  • Texas Instruments sprechen und buchstabieren
  • Web Audio API
  • Klicken und sprechen

Beispielprojekte

Word-Assistent für iOS

Sprechen Sie N Spell bei Google Play

15. Umfrage-App

Stufe: 3 - Fortgeschritten

Beschreibung : Umfragen sind ein wertvoller Bestandteil jeder Entwickler-Toolbox. Sie sind nützlich, um Feedback von Ihren Benutzern zu einer Vielzahl von Themen zu erhalten, darunter Anwendungszufriedenheit, Anforderungen, bevorstehende Anforderungen, Probleme, Prioritäten und einfach nur Ärger, um nur einige zu nennen.

Mit der Umfrage-App können Sie lernen, indem Sie eine App mit vollem Funktionsumfang entwickeln, die Sie Ihrer Toolbox hinzufügen können. Es bietet die Möglichkeit, eine Umfrage zu definieren, Benutzern die Möglichkeit zu geben, innerhalb eines vordefinierten Zeitrahmens zu antworten sowie Ergebnisse zu tabellieren und zu präsentieren.

Benutzer dieser App sind in zwei unterschiedliche Rollen unterteilt, die jeweils unterschiedliche Anforderungen haben:

  • Umfragekoordinatoren definieren und führen Umfragen durch. Dies ist eine Verwaltungsfunktion, die normalen Benutzern nicht zur Verfügung steht.
  • Umfrageteilnehmer Füllen Sie Umfragen aus und zeigen Sie die Ergebnisse an. Sie haben keine Administratorrechte innerhalb der App.

Kommerzielle Umfragetools umfassen Verteilungsfunktionen, mit denen Umfragen per E-Mail an Umfrageteilnehmer gesendet werden. Der Einfachheit halber geht diese App davon aus, dass auf Umfragen, die für Antworten geöffnet sind, über die Webseite der App zugegriffen wird.

Benutzergeschichten

Allgemeines

  • Umfragekoordinatoren und Umfrageteilnehmer können Umfragen und Umfrageergebnisse auf einer gemeinsamen Website definieren, durchführen und anzeigen
  • Umfragekoordinatoren können sich bei der App anmelden, um auf Verwaltungsfunktionen wie das Definieren einer Umfrage zuzugreifen.

Umfrage definieren

  • Der Umfragekoordinator kann eine Umfrage definieren, die 1–10 Multiple-Choice-Fragen enthält.
  • Der Umfragekoordinator kann für jede Frage 1–5 sich gegenseitig ausschließende Auswahlen definieren.
  • Der Umfragekoordinator kann einen Titel für die Umfrage eingeben.
  • Der Umfragekoordinator kann auf die Schaltfläche "Abbrechen" klicken, um zur Startseite zurückzukehren, ohne die Umfrage zu speichern.
  • Der Umfragekoordinator kann auf die Schaltfläche "Speichern" klicken, um eine Umfrage zu speichern.

Eine Befragung durchführen

  • Der Umfragekoordinator kann eine Umfrage öffnen, indem er eine Umfrage aus einer Liste zuvor definierter Umfragen auswählt
  • Umfragekoordinatoren können eine Umfrage schließen, indem sie sie aus einer Liste offener Umfragen auswählen
  • Der Umfrageteilnehmer kann eine Umfrage ausfüllen, indem er sie aus einer Liste offener Umfragen auswählt
  • Der Umfrageteilnehmer kann Antworten auf Umfragefragen auswählen, indem er auf ein Kontrollkästchen klickt
  • Umfrageteilnehmer können sehen, dass eine zuvor ausgewählte Antwort automatisch deaktiviert wird, wenn auf eine andere Antwort geklickt wird.
  • Umfrageteilnehmer können auf die Schaltfläche "Abbrechen" klicken, um zur Startseite zurückzukehren, ohne die Umfrage zu senden.
  • Umfrageteilnehmer können auf die Schaltfläche "Senden" klicken, um ihre Antworten an die Umfrage zu senden.
  • Umfrageteilnehmer können eine Fehlermeldung sehen, wenn auf "Senden" geklickt wird, aber nicht alle Fragen beantwortet wurden.

Umfrageergebnisse anzeigen

  • Umfragekoordinatoren und Umfrageteilnehmer können die anzuzeigende Umfrage aus einer Liste geschlossener Umfragen auswählen
  • Umfragekoordinatoren und Umfrageteilnehmer können die Umfrageergebnisse in Tabellenform anzeigen und die Anzahl der Antworten für jede der möglichen Auswahlen auf die Fragen anzeigen.

Bonusmaterial

  • Umfrageteilnehmer können in der App ein eindeutiges Konto erstellen
  • Umfrageteilnehmer können sich bei der App anmelden
  • Umfrageteilnehmer können dieselbe Umfrage nicht mehr als einmal ausfüllen
  • Umfragekoordinatoren und Umfrageteilnehmer können grafische Darstellungen der Umfrageergebnisse anzeigen (z. B. Kreis-, Balken-, Spalten- usw. Diagramme).

Nützliche Links und Ressourcen

Bibliotheken für Gebäudevermessungen: SurveyJS

Einige kommerzielle Umfragedienste umfassen: Survey Monkey und Typeform

Beispielprojekt

Mitwirken

Sie können gerne im GitHub-Repository einen Beitrag zum Projekt leisten! Jeder Beitrag wird sehr geschätzt.

Sie können auf zwei Arten einen Beitrag leisten:

  1. Erstellen Sie ein Problem und teilen Sie uns Ihre Idee mit. Stellen Sie sicher, dass Sie in diesem Fall das neue Ideenetikett verwenden .
  2. Gabel das Projekt und reichen Sie eine PR ein. Stellen Sie zuvor sicher, dass Sie den Beitragsleitfaden gelesen und befolgt haben (Sie finden ihn im Repository).

Fügen Sie Ihre eigenen Beispiele hinzu

Sie können den Projekten auch eigene Beispiele hinzufügen, nachdem Sie sie abgeschlossen haben. Ich ermutige Sie sehr, dies zu tun, da es anderen zeigen wird, welche erstaunlichen Dinge Sie gebaut haben! ?

Verbreite das Wort!

Wenn die Informationen aus diesem Artikel und aus dem Repo für Sie in irgendeiner Weise nützlich waren, stellen Sie sicher, dass Sie ihm einen Stern geben? Auf diese Weise können andere sie finden und auch davon profitieren! Gemeinsam können wir wachsen und unsere Gemeinschaft verbessern!

Haben Sie Vorschläge, wie wir dieses Projekt insgesamt verbessern können? Lass uns wissen! Wir würden uns über Ihr Feedback freuen!

Hauptverantwortliche?

Florin Pop : Twitter und Website.

Jim Medlock : Twitter und Medium

Wöchentliche Codierungs-Herausforderung?

Als Bonus gibt es eine wöchentliche Codierungs-Herausforderung, bei der Sie mehr lernen können, indem Sie Ihre Fähigkeiten in realen Projekten üben. Lesen Sie den vollständigen Leitfaden, um herauszufinden, wie Sie teilnehmen können! ?

Ursprünglich veröffentlicht unter www.florin-pop.com.