Ich programmiere eine VOKABEL-APP
Kostenloses Beratungsgespräch: weiterbildung.developerakadem...
In diesem Tutorial lernst du, wie du mit #HTML, #CSS und #JavaScript eine App zum Vokabeln lernen programmierst. Anschließend veröffentlichen wir die App als Progressive Web App (PWA).
Inhaltsverzeichnis:
00:00 | Intro
01:15 | Setup
07:52 | Layout mit HTML und CSS
25:18 | Vokabeln hinzufügen
47:29 | Vokabeltest
01:06:12 | App veröffentlichen
Gesamter Code: github.com/JunusErgin/Vokabel...
App testen: cdn.developerakademie.com/Vok...
Instagram: / junus.ergin (Junus Ergin)
Tiktok: / herr_programmierer (Herr Programmierer)
Podcast: open.spotify.com/show/3sOOzOg...
____ Über diesen Kanal ___
Die Developer Akademie bildet dich zum Programmierer weiter. Auch wenn du noch NIE eine Zeile Code geschrieben hast, ist es möglich in 3 - 9 Monaten einen bezahlten Job zu finden. Dafür musst du nicht nur programmieren lernen, sondern einen guten Lebenslauf mit vielen verschiedenen Projekten vorweisen. In unserem Programm hast du ständigen Kontakt zu unseren Coaches, Hausaufgaben, Abgabefristen und Projekte aus der Praxis.
Am Ende erstellen wir mit dir deinen Lebenslauf und unterstützen dich bei deiner Bewerbung.
Informiere dich auf weiterbildung.developerakadem...
Пікірлер: 138
Endlich jemand der sehr gut erklärt. Bitte mehr Videos Yunus :)
sehr gut yunus, vielen dank für deine wertvollen videos, weiter so..
Wow richtig gut. Danke 👍
Bist der beste ! Lerne so vie ! Danke dir !
Danke sehr,viel gelernt
Sehr gutes Tutorial 😁
@Programmierenlernen
Жыл бұрын
Danke 😁
Tausend dank aus Panama ❤
Danke Junus.!
Tipp: Bei Linux ist das Formatieren vom Code STRG - SHIFT - I
Wäre es möglich das ihr mal eine App entwickelt die den Zugriff auf die Handykamera ermöglicht und dann einen Text scannt, welcher dann irgendwo angezeigt oder abgespeichert wird? Das wäre echt cool zu sehen. Vielen dank schon mal im voraus. Deine Videos sind echt der Hammer!
@ImaDonutDev
Жыл бұрын
Da bräuchte man irgendeine intelligenz für...
Schönes Tutorial, aber kann man den Code auch über visual studio schreiben? Oder braucht man zwingend visual studio code
Hey tolles Video! Habe noch eine frage. Wenn ich schon ein html,css script habe wie mache ich das dann in eine webseite, die jeder besuchen kann?
Kann man die WebApp dann nur 1 Std nutzen, oder hat man lediglich 1std Zeit für den Download?
eine frage hätte ich generell: gibt es eine möglichkeit/methode/funktion/plugin die vokabular auf dem bildschirm vorlesen zu lassen? danke..
Danke für die Video! Eine Frage habe ich nur... Seit wann kann man Html Element nur mit id bekommen in js? und ist das überhaupt legal ?😄
Hey ich habe leider ein Problem bei mir kommt bei der Browser Konsole (sowohl Chrome als auch Mozila): nextVocabulary is not defined onload
Super Guide vielen dank! Wie müsste man dies nun anpassen, damit man die einträge statt im localStorage auf einen Server speichert, so das man Browser unabhäning auf seine Vokablen zugreifen kann?
@Incredible-Gaming
Жыл бұрын
Ja das wäre interessant
@placetogame9826
Жыл бұрын
Das ist leider nicht ganz so einfach. Dafür braucht man eine Datenbank und ein Backend was darauf zugreift. Das einfachste wäre wahrscheinlich diesen Trainer in PHP neu zu schreiben.
@Mar-Tin87
Жыл бұрын
Theoretisch könnte man das via Ajax und im backend dann mit php lösen. Der Ajax request feuert dann eine anfrage an das php backend und dieses holt sich aus der Datenbank alle aktuellen einträge. Ein CRUD is damit natürlich ebenfalls machbar. Oder zur not via REST API.
Hey bin grad am lernen, VS meint aber zu mir das die Website sich nicht selbst updaten kann: "Live Reload is not possible without body or head tag" wo finde ich den body tag oder head tag ?
Bin 13 und habe so angefangen mit 12 aber mit 12 habe ich nichts großes gemacht und will wen ich älter bin informatiker werden und irgendwas mit software web und cyber machen also was krasses auf jeden fall deswegen fange ich jetz mit javascript an gehe dan zu python dann zu c++ danach lua und dann sehe ich weiter :) (weiter so nur hilfreiche tutorials)
Btw. return false beim onsubmit event trigger wird in manchen Browsern zu einem Fehler führen. Lieber einfach in die Funktion die aufgerufen wird den Parameter "e" einfügen und in der Funktion "e.preventDefault()" ganz oben eingeben eingeben.
Eigentlich finde ich das Video recht gut. Schade ist nur, dass ein paar Begriffe falsch verwendet werden. JavaScript-Object, Dictionary, JSON. JavaScript-Object: {} Dictionary: Der Begriff "Dictionary" wird in der Programmiersprache Python (und auch in anderen, aber nicht in JavaScript) verwendet und entspricht in etwa einem JavaScript-Object JSON: Text-Repräsentation von Daten, die in unterschiedlichen Programmiersprachen verwendet werden kann, um Daten als Text abzuspeichern und wieder einzulesen. Aber wie gesagt, eigentlich ist das Video ansonsten recht gut und hilft sicher einigen, mit ein paar Grundkenntnissen in HTML, CSS und Javascript mal ein komplettes Projekt zu erstellen, auf dem man aufbauen kann.
Guten Tag ich hab mal eine Frage.... Wie kann man einen Live HIntergrund fürs Handy programmieren ( wie Matrix zum Beispiel ) Das würde mich sehr interessieren. LG Niklas
Hey, Leute. Eure Videos sind gut. Mich würde mal interessieren, wie man eine PWA mithilfe des Serviceworkers automatisch updaten kann. Wäre dazu ein Video möglich? Oder ist das updaten, nicht möglich? Oder funktioniert das auch anders? Vielen Dank.
Hallo Finde deine Vidos echt Top,wäre super wen du mal eines mit Apple Geräten machst,da funktioniert das mit dem Fullscreen irgendwie nicht :(
wie ändere ich die Farbe des Buttons? über die CSS Klasse hat es nicht funktioniert: .mdl-button { background-color:black; col }
Hallo zusammen, kann mir jemand einen Tipp geben, mit welcher Tastenkombo ich die beiden hochgestellten Striche für „oder“ bekomme? Die bei Minute 39:02 Danke😊
Nur, wie kann ich den Ordner, ggfs. nach dem "zippen", jetzt als APK bereitstellen, ohne dass es einen Parsingfehler beim öffnen gibt?
Tolles Video, bloß bei mir kommt immer ein Fehler, wenn ich den erstellten link öffne, kommt immer ein Fehler, das die Internet Seite nicht gefunden wurde. Würde mich über eine Antwort freuen.
Guten Morgen, wieso funktioniert Shift + Alt + F nicht in Visual Studio . (manchmal funktioniert es manchmal nicht)
bei mir wird wenn ich auf den button clicke um eine vokabel hinzuzufügen die seite direkt neu geladen. was kann ich tun?
Wenn ich die App auf meinem Handy öffne, habe ich nicht dasselbe Layout wie auf meinem Laptop. Es ist alles sehr klein geraten und auch dieser blaue Balken mit dem Titel ist nicht vorhanden. Woran kann das liegen?
@Programmieren lernen, ich habe versucht einen Button zum löschen hinzuzufügen, aber habe es nicht geschafft. Auch deine anderen Videos haben mir leider nicht weitergeholfen. Könntest du mir vielleicht sagen wie ich das genau mache? LG ...
Sehr cooles Tutorial! Aber ich hab versucht es so zu machen das von beiden Sprachen also engliscvh und deutsch die vokabeln abgefragt werden ich hab zuerst beide Wörter halt als Key benutzt das hat gut funktioniert aber das sah bei der vokabelliste nicht so schön aus und dann wollte ich von Keys und Values das nehmen hab dann eine zufällige Zahl von 1-2, wenn sie 1 ist wird es Englisch und bei 2 Deutsches Wort aber das hat nicht geklappt und Entrys haben auch nicht funktioniert. Dann wollte ich einen zufälligen key nehmen und davon die value ging aber irgendwie auch nd. Falls du den Kommentar bis hier gelesen hast, kannst du mir helfen? edit: sonst frag ich auf stack overflow :/
Gibt es einen Weg die Vokabeln nicht mehr als einmal erscheinen zu lassen? Die Math.random Methode ermöglicht zwar die Abwechslung, aber wie kann ich es so machen, dass die Vokabeln nur maximal einmal erscheinen und dann nicht erneut abgefragt werden können?
Ich habe das Gleiche versucht in c# aber bin irgendwie gescheitert mit dem Speichern von bereits eingegebenen Vokabeln
@gernothartung
Жыл бұрын
bleib dran, und machs über ne datenbank (für ne handy app z.b. sqlite), da kommst du mittelfristig eh nicht dran vorbei
Geil!
Tipp für 45:40: ich habe einfach das return false beim onsubmit entfernt. das löst auch das Problem, dass alles noch einmal hinzugefügt wird, da eh beim reload alles gelöscht wird
Ich hab das auch schonmal gemacht aber für den Desktop mit Javafx
Junus, weißt du wie ich im Editor Visual Studio die Seitencodierung einstelle ? UTF-8 ?
@akaTwiiX
Жыл бұрын
Stell bei deiner erstellten HTML Datei das HTML SAmple ein.. da ist alles eingebunden, wie main.js etc. Kannst du ja natürlich auch umbenennen. :D
@Davidvoelkel
Жыл бұрын
UTF-8 ist lediglich das Layout der verwendeten Tastatur. Was genau meinst du mit Seitencodierung?
@MaLi-he5fh
Жыл бұрын
@@akaTwiiX das Dokument anlegen in UTF8 nicht Meta Tags. Nein Notepad++ kann man da einstellen. Ansi, UTF8 usw.
Das Ergebnis hier ist am Schluss wirklich eine App? Oder doch nur eine Browser Ansicht im Vollbild Modus? Letzteres würde ja dann nicht ohne Internet laufen? Oder ist das ganze so abgespeichert auch im Offline Modus möglich? Bzw. Wie würde das dann Funktionieren, wenn ich das dann offline nutzen wollte?
@Programmierenlernen
Жыл бұрын
Web-App genau. Für deinen Fall kannst du nach "cordova" suchen, so kriegst du die Web-App auf Mobile-Geräte
Wie kann man die Wörter wieder löschen???
gutes tutorial! weiß jemand wie man in den vokabeltrainer noch ein bild als hintergrund einfügen kann? Danke
@Pasi236
Жыл бұрын
Ein Bild in der HTML Datei einfügen der einer Klasse geben und über Css height und width 100% geben je nach Bedarf. Background Image einfügen einfach mal Googlen.
Gibt es irgendwo die codes zu kopieren damit man sie nach selbst anpassen kann?😅
Eine Frage bei mir kommt immer falsch beim Test obwohl ich es richtig habe kannst es vielleicht verbessern
Ich hab mir heute Gedanken um ein Ticketsystem gemacht. Das würde mich interessieren ob man ein einfaches Ticket system umsetzen kann (wobei Visuell sollte schon was dabei rumkommen). Also sprich, wo man so ähnlich wie eine ToDo Liste anlegt, nur das man auch automatisch zuordnungen = benachrichtigt wird und das, wenn die Deadline erreicht ist, dass nochmal gemeldet wird, und falls nicht fertig, solls entweder gelöscht oder verlängert werden. Ist es möglich die "Jobs", dann per if Anweisung auch automatisch aus einer Datenbank zu löschen?
@DJone4one
Жыл бұрын
@@TT-zh4oq das weiß ich
@Mar-Tin87
Жыл бұрын
Hi, via Ajax, sollte die komplette Logik in JS aufgebaut werden. Das is immer problematisch, da JS client-seidig läuft und somit manipulierbar ist. Im backend ist es mit php und mysql relativ einfach. Sicher auch mit Python.
Immer wenn ich in der Konsole dictionary eingebe kommt der Fehlercode: Uncaught ReferenceError: dictionary is not defined at :1:1, obwohl ich alles genauso gemacht habe wie im Video. edit: Und die Seite lädt immernoch neu und geht zu add.html? wenn ich auf den Hinzufügen-Button drücke.
@viviewtreash-production1107
Жыл бұрын
Hey, das war bei mir ähnlich... Bei mir lag es daran, dass ich beim Dictionary auf der Seite bei "Element untersuchen", die gespeicherten Vokabeln bearbeitet habe und ausversehen ein Komma zu viel gelassen hatte. Also nur auf das Dictionary bezogen. Bei add.html musst du schauen, ob du den Knopf und die Function richtig verbunden hast... Ich hoffe das hilft irgendwie :D
@kwinsch9399
Жыл бұрын
@@viviewtreash-production1107 ich gucke mal
Kann ich diese App dann auch wirklich auf mein Smartphone laden?
rechter rand ist bei uns nicht sichtbar. nur ein tip. egal welcher browser. Danke für deine Arbeit!
hey voll das coole tutorial aber habe leider ein Problem bei Minute 43:05, wenn ich Test durch ${key} ersetze wird alles orange und es steht bei der Aufzählung drei mal ${key} da. kann mir jemand helfen?
@leonoberwaditzer4583
Жыл бұрын
Eventuell falsche Anführungszeichen verwendet. Es müssen diese sein: `. Also nicht die Geraden, sondern die leicht Schrägen.
@kaliboghg5678
Жыл бұрын
@@leonoberwaditzer4583 ja das war es, Danke 😊😊
Hallo wie kann man ein Wort aus dem Speicher löschen?
Super! Aber es ist eigentlich keine PWA ohne Service-Worker.
was mache ich eigentlich wenn ich mit einem anfänger tutorial durch bin? es solange anwenden bis ich es im schlaf? kann oder dann schon richtung fortgeschrittenes tutorial?
@takumifujiwara7826
Жыл бұрын
beziehungsweise ich möchte mehrere sprachen lernen für die mod erstellung für ein paar spiele da wären unteranderem lua, javascript mit welcher sprache sollte ich anfangen?
Bei mir funktionirt dieses Verlinken zum CSS Code nicht, jetzt sieht meine Seite nicht so gut aus... Aber mach weiter mit solchen Viedeos, die sind echt Super
Bei Junus sieht alles babyeinfach aus. Hab das Vokabelding auf meinem Samsung per chrome. Webseite auch nach einem Tag noch aktiv, obwohl ich keinen account habe. Kriege im Eingabefeld immer eine Liste mit Wort-Vorschlägen aus dem Dictionary. Vielleicht sollte der User bestimmen können, ob er neue Vokabel bekommen will.
Hi junus l ich habe alles genauso gemacht wie im Video. Edit: aber die Seite lädt immer noch neu wenn ich auf den Hinzufügen-Button drücke. kann jemand helfen bitte?
@klabuster2
Жыл бұрын
schreib in die add-function zwischen die runden Klammern ein event und in die function ein event.preventDefault(). Das hindert das Formular sein defaultverhalten nämlich das neu laden der Seite auszuführen.
Tipp für eine Verbesserung: Bei einer falschen Antwort die richtige anzeigen.
Ich habe es genau so gemacht aber habe 3 fehler in der css klasse. Mit Page-content und mdl-Textfield. Wie finde in nun heraus was falsch lief.
@Programmierenlernen
Жыл бұрын
einfach in den originalcode auf github schauen (ist unten verlinkt) und vergleichen
@Pasi236
Жыл бұрын
Sonst dein Code auf Jdsfiddle nach Fehlern untersuchen lassen.
Hi, soweit lief alles super.... Lediglich beim test wurd mir kein Richtig oder Flasch angezeigt. Bisher noch keine unterschiede festgestellt .
@viviewtreash-production1107
Жыл бұрын
Hey, ich hatte einen ähnlichen Fehler... du musst schauen, ob dein id von dem Eingabefeld übereinstimmt mit dem bei dem Java Script bzw. ob du vielleicht irgendwo einen Buchstaben groß oder klein geschrieben hast und beim anderen nicht... Hoffe das hilft :D
Hallo, bin totaler Anfänger bei HTML/JavaScript und Co., aber eine Frage stellt sich da doch: Ist es wirklich sinnvoll ein externes CSS wie "Material Design Lite" zu nutzen? Was passiert mit meiner APP/Website wenn der Anbieter irgendwann mal offline geht?
@GeroldPenz
Жыл бұрын
Geht der "Anbieter" offline, dann funktioniert deine App nicht mehr. Um das zu umgehen, kannst du dir die Dateien von den externen Anbietern herunterladen und "lokal" in deine App laden, indem du statt den URLs zu den externen Anbietern in deinen HTML-Dateien die URLs zu den lokalen Dateien verwendest.
@England_
Жыл бұрын
@@GeroldPenz Danke für die Info
Wie kann ich eine App veröffentlichen ohne einen online Dienst zu verwenden?
@tommajoreck1745
Жыл бұрын
Naja du kannst deine App and den playstore senden und die prüfen die dann.
Android kann native html Displayen als App aber es gibt auch gute konverter von Web auf apk
Weshalb sagst du so oft "Ja" ?. Mein Spieß bei der Bundeswehr hatte das auch so drauf. Den konnte ich allerdings nicht fragen. (Es nervt etwas.)
Weiß jemand wie die Tastenkombination bei 11:42 ist
@VRTXVRTX-fw4cy
Жыл бұрын
strg+x
@b4nny765
Жыл бұрын
@@VRTXVRTX-fw4cy danke dir
Bei mir steht wenn es richtig ist falsch dann habe ich es mal getauscht und es hat immer noch nicht geklappt
Hey Junus & Manu, Ihr nimmt ja Leute bei euch an die Volljährig sind. Ich bin 15 und mein Ziel ist es auch mal Programmierer zu werden. würdet ihr das denn noch viele Jahre weitermachen?
@Programmierenlernen
Жыл бұрын
Hi Kaan! Schön deine Story zu hören. Junus hat auch sehr früh mit 13 angefangen. Du hast aber keine Eile. Mach erstmal deine Schule fertig und code nebenbei einfach Tutorials nach und mal ab und zu ein eigenes Projekt. Dann nach der Schule kannst du dich gerne bei uns melden, wenn du dann immer noch Programmierer werden willst (ist eine tolle Karriere!)
@Fynn588
Жыл бұрын
@@Programmierenlernen Kann ich auch anstelle des dictionarys auch Benutzerdaten speichern lassen?
@hapticdc
Жыл бұрын
Hey junus & manu bei mir ist es das aller gleiche mir wurde aber gesagt das kann dafür studieren muss und da wollte ich fragen ob es stimmt LG haptic (macht mal vllt kotlin )
@hapticdc
Жыл бұрын
btw bin 15
@liamheinrich7322
11 ай бұрын
ich bin 12 und wollte mich nach der Schule auch mal bei euch melden
Tipp: Statt localStorage Storage schreiben
Könntest du vielleicht ein Tutorial machen wie man eine Javascript App in dem Playstore veröffentlicht?
@zitroneg
Жыл бұрын
Das kostet Geld, da man sich einen Creator-Account anlegen muss. Wenn man aber bereit ist das zu zahlen, kriegt man das auch ohne Tutorial hin
@henrybaum8830
Жыл бұрын
Danke
Bitte zeig uns mal wie man eine Dating-App programmiert.
@toofatdjatlov2102
Жыл бұрын
*sag bitte 🗿*
@2001kai
Жыл бұрын
XD
@mortn_yt
7 ай бұрын
...
Ich finde das sehr interessant, nur leider als totaler Anfänger in diesem Bereich, sehr kompliziert. Eine App würde ich auch gerne programmieren, doch ist diese wohl komplizierter als die Vokabel-App. Trotzdem finde ich das Video sehr informativ, vielleicht versteh ich ja nach und nach wie alles funktioniert.
Egal ob Smartphone oder Tablet, der Netlify link wird mir in verschiedenen Browsern als nicht sicher angezeigt. Ergo unbrauchbar. Gibt es alternative links? Über Umwege klappe es dann doch, musste aber feststellen, dass alles verschoben war. Ergo, sucht euch lieber ein richtiges Programm zum entwickeln von Apps, da diese auch nicht auf html basieren, sondern java, c++ oder kotlin
wie löscht man vokabeln wieder?
ich bekomme es nicht hin mit dem "switchen"
Hi ich wollte fragen ob du vielleicht ein Teil 2 machen könntest wie man Vokabeln löscht weil ich hab jetzt schon sehr lange rum probiert aber keine lösung gefunden Vielen Dank
@michaelsavitskis1165
Жыл бұрын
Weißt du jetzt wie man die Vokabeln löscht?
@cod-e9604
Жыл бұрын
localStrage.removeItem('zulöschendeVokabel')
@michaelsavitskis1165
Жыл бұрын
@@cod-e9604 danke aber was soll ich hinschreiben anstatt zulöschende vokabel? Weil wenn ich da Erdbeere zum Beispiel hinschreibe löscht er immer nur die vokabel erdbeere
@cod-e9604
Жыл бұрын
@@michaelsavitskis1165 was willst du denn genau? alles löschen ? ich bin davon ausgegangen das du immer nur eine vokabel löschen möchtest
@michaelsavitskis1165
Жыл бұрын
@@cod-e9604 ne ich möchte das jetzt zum beispiel bei jeder vokabel ein Button ist und das bei dem Button die jeweilige vokabel gelöscht wird.
@noegoufan9307
Жыл бұрын
Öffne deine style.css file : #englishText{ padding: 40px; } ansonsten schau dich nach Tippfehlern um
Ist geil, aber nicht immer schlüssig wenn etwas geändert wurde, ohne das es gezeigt wurde. Da kann man lange suchen.
Also mein Textfelder kann Ich nicht anpassen. 🤔
Setz ich mich zuhause mal dran da eh ich gerade auf Duolingo lerne, so kann ich die Werbung umgehen. :D
@RuebelGAMING
Жыл бұрын
AdBlocker hilft dir :) Nutze ich bei Duolingo auch, auch wenn ich die Werbung nicht aufdringlich und Nervig finde.
@Pasi236
Жыл бұрын
@@RuebelGAMING Es ist noch im Rahmen wobei die Plusmitgliedschaft für 2 Wochen echt nicht schlecht war.
@derindividualist6625
Жыл бұрын
Eigene VPN mit PiHole?
Ey Junus es sind (stand jetzt) 25 Kommentare und du hast es Geschafft 3 oder 5 davon zu beantworten? Und im Stream hast du gesagt, dass du auf „sehr viele“ Kommentare antwortest. Die Quote ist echt schlecht. Außerdem vergibst du die Herzen komplett random auf Kommentare die halt als erstes gekommen sind und sogar auf negative. Trotzdem gutes Video. @Programmieren lernen
Also ich habe mir jetzt das Video zum Dritten mal angegckt bis zu der stelle wo ich jetzt bin und ich habe alles genau so gemacht doch ich finde meinen fehler nicht :( ich brauche hilfeeeeeee
@Programmierenlernen
Жыл бұрын
schau doch den verlinkten code auf github an und vergleiche mit deinem code
es funktioniert alles außer der Vokabeltest
die webseite lädt aus irgendeinem grund permanent neu
Mincraft???? lol bin ich der einziege der das gesehen hat???
Naja, eine App ist schon was anderes nh
Wie kann man pwa auch offline nutzen?
bei mir steht Cannot GET /index.html wenn ich auf den test wechseln möchte
Wenn ich mir die Vokabeln anzeigen lassen will, sagt die Konsole immer das meine Bibliothek undefiniert ist. Ich habe alles genauso gemacht wie im Video. Kann mir einer vlt helfen ?
ich werf mich weg -.-# in der Zeile, im Script.js habe ich set statt get geschrieben, so viel dazu das 1 Buchstabe falsch sein kann, und man gefühlt ewig nicht den Fehler findet ^^# let dictionary = lJSON.parse(localStorage.getItem('dictionary')) ||{};