Angepinnt Cordova Tutorial - Android App - Windows

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Cordova Tutorial - Android App - Windows

      Hier findest Du ein Tutorial zum Thema Cordova und einer Android-Applikation unter Windows. Step-by-Step vermitteln wir Dir, wie Du Deine App erstellst!


      Hier geht es zum ersten Video-Tutorial von Eclipse -> Video-Tutorial - erste Schritte in Eclipse!
      Dies ist der erste Teil einer Serie die beschreiben soll, wie man beim erstellen einer App für iPhone und Android am Besten vorgeht. Verbesserungsvorschläge und Ergänzungen zu diesem Tutorial sind bitte unter diesem Thema anzumerken. Lasst Euch nicht von der Länge des Tutorials abschrecken, ich habe nur einfach alles so detailiert wie möglich beschrieben, damit es zu keinerlei Fehlern kommt.

      Inhaltsverzeichnis:
      1. Was musst Du können um eine App zu entwickeln?
      2. Folgende Dinge sollten Dir keine Fremdbegriffe sein
      3. Was brauche ich um Apps zu entwickeln?
      4. Wo bekomme ich Eclipse?
      5. Wie installiere ich Cordova?
      6. Eclipse ist heruntergeladen, wie installiere ich es?
      7. Cordova - Jetzt geht es los!
      8. Importieren unseres erstellten Projektes in Eclipse
      9. Der erste Start unserer App


      Herzlich Willkommen also zum Tutorial - Wie erstelle ich meine erste App. Den ersten Schritt in Richtung eigene App hast Du bereits gemacht, denn Du bist hier. Wie es weiter geht, dazu komme ich jetzt:

      Was musst Du können um eine App zu entwickeln?(überspringen)
      Generell erst einmal: Nichts! Denn wir werden in diesem Tutorial Step-by-Step durchgehen was genau wie gemacht werden muss um am Ende eine App zu haben, die auf allen iPhones/iPads und Android-Geräten funktioniert.


      Folgende Dinge sollten Dir zumindest keine Fremdbegriffe sein:(überspringen)
      • HTML
      • CSS
      • JavaScript
      Also die gängigen Sprachen für die Webentwicklung. Ich höre den Aufschrei durch die Reihen der Programmierer gehen "HTML ist keine Sprache für "Webentwicklung"" und das ist auch korrekt soweit. Allerdings sind die Geräte auf denen wir entwickeln nicht in der Lage, uns einen Server zur Verfügung zu stellen, der beispielsweise PHP-Befehle verarbeiten kann. Deswegen beschränken wir uns hauptsächlich auf die drei oben genannten "Sprachen". Über Umwege können wir aber dennoch auf PHP-Scripte (ausgelagert auf einen Server) zurückgreifen, dazu aber dann später mehr.


      Was brauche ich um Apps zu entwickeln?(überspringen)
      In diesem Tutorial dreht es sich um die Appentwicklung für Android-Geräte. Auch, wenn unsere App hinterher 1 zu 1 portierbar auf ein iPhone-Gerät ist, möchte ich schon zwischen den zwei IDE (Entwicklungsumgebungen) Xcode und Eclipse unterscheiden. Folgende Dinge solltest Du also für die Android-App mitbringen:
      • Einen Windows oder Mac-Rechner (MacMini, Mac Pro, iMac usw.)
      • Cordova
      • Eclipse
      Und das war es dann auch schon. Du bringst die Hardware mit, und ich bringe Dir bei, wie Du damit in ein paar "Minuten" Android-Apps erstellst.


      Wo bekomme ich Eclipse?(überspringen)
      Die Entwicklungsumgebung mit welcher wir arbeiten nennt sich Eclipse. Eclipse ist ein Programm welches ihr direkt aus dem Developer-Portal von Android erhaltet. Folgt einfach diesem Link - developer.android.com/sdk/index.html und klickt anschließend auf den "Download Eclipse ADT" Button.
      Und wieder werden Leser sagen "Hey, aber es gibt doch schon Android Studio, das löst doch Eclipse ab und ist schon verwendbar!" - Nun, das ist so auch korrekt, allerdings ist Android Studio nach wie vor in einer Beta-Phase. Um den Einstieg außerdem nicht unnötig zu verkomplizieren bleiben wir zunächst bei Eclipse und gehen später, wenn Android Studio herausgekommen ist, darauf ein.

      Während der Download von Eclipse nun läuft können wir uns bereits um Cordova kümmern.


      Wie installiere ich Cordova?(überspringen)
      Die Cordova-Installation ist etwas ausführlicher, wir werden sie Schritt für Schritt abarbeiten.
      1. Als Erstes benötigen wir Node.js von dieser Seite -> Node.js herunterladen <- (WICHTIG: Die .msi nehmen, nicht die .exe). Nachdem der Download abgeschlossen ist folgst Du den Anweisungen und installierst Node.js somit auf Deinem Rechner. Sobald die installation abgeschlossen ist, solltest Du

        Quellcode

        1. npm

        in deine Konsole eingeben können. Moment, Konsole? Ja, die Konsole. Die Konsole wird uns über weite Strecken immer und immer wieder begleiten. Öffnen kannst Du sie ganz einfach: Drücke die Windows Taste (Zwischen STRG & ALT) und gleichzeitig R. In dem sich öffnenden Fenster trägst Du"CMD" ein und drückst "Enter". In der Konsole geben wir jetzt also

        Quellcode

        1. npm

        ein und erhalten als "Antwort":
        • [spoiler=Der Befehl "npm" ist entweder falsch geschrieben oder...] Das Problem ist schlichtweg folgendes: Der Befehl "npm" weist das Programm "npm" an, etwas zu tun. Wenn unsere Konsole aber gar nicht weiß, wer dieses "npm" ist und "wo es zuhause ist" dann kann es damit auch nichts anfangen. Entschuldigt bitte diese teilweise sehr kindliche Ausdrucksweise, aber ich habe einfach oft festgestellt, dass viele Tutorials viel zu kompliziert sind und eben nicht alles Step-by-Step vermittelt wird.


          Wie legen wir den PATH von NPM fest?(überspringen)
          Um nun also festzulegen, wo wir bzw. die Konsole nach npm suchen muss, gehen wir wie folgt vor: [spoiler=Windows 8]
          • Mauszeiger in die untere rechte Ecke des Bildschirms ziehen.
          • Auf das Suchsymbol klicken und "Systemsteuerung" eingeben.
          • Auf "Systemsteuerung" -> (Jetzt evtl. vorher oben Rechts bei Anzeige auf "Große Symbole" umstellen, damit "System" sichtbar wird) "System" -> "Erweiterte Systemeinstellungen" klicken.
          • Anschließend folgt ein Klick auf "Umgebungsvariablen". Nun unter "Systemvariablen" zu "PATH" und auf "Bearbeiten" klicken.
          • ++ GANZ WICHTIG ++ Das hier sind Systemvariablen. Da dran zu "basteln" kann auch ins Auge gehen. Bitte denkt 2x drüber nach, was ihr dort vornehmt. Einzelne Pfade sind immer (!) durch ein ; zu trennen.
          • Ganz ans Ende des derzeitigen Pfades setzen wir nun also ein ; (falls dort noch keines ist) und anschließend den Pfad zu unserem npm, bei mir:

            Quellcode

            1. C:\Program Files\nodejs\node_modules\npm\bin
            . Diesen Pfad
          • Speichern, alles schließen und anschließend den Computer neu starten.
          • Konsole öffnen (Windows Taste + R -> "cmd") und "npm" eingeben.
          • Die Antwortet lautet dann:
            und das wars.
          [/spoiler]

          [spoiler=Windows 7]
          • Im Startmenü den Rechner auswählen.
          • Im Kontextmenü die Option "Systemeigenschaften" anklicken.
          • Jetzt klickst Du auf "Erweitert" bei "Systemeinstellungen" und wählst anschließend oben im Register "Erweitert" aus.
          • Anschließend folgt ein Klick auf "Umgebungsvariablen". Nun unter "Systemvariablen" zu "PATH" und auf "Bearbeiten" klicken.
          • ++ GANZ WICHTIG ++ Das hier sind Systemvariablen. Da dran zu "basteln" kann auch ins Auge gehen. Bitte denkt 2x drüber nach, was ihr dort vornehmt. Einzelne Pfade sind immer (!) durch ein ; zu trennen.
          • Ganz ans Ende des derzeitigen Pfades setzen wir nun also ein ; (falls dort noch keines ist) und anschließend den Pfad zu unserem npm, bei mir:

            Quellcode

            1. C:\Program Files\nodejs\node_modules\npm\bin
            . Diesen Pfad
          • Speichern, alles schließen und anschließend den Computer neu starten.
          • Konsole öffnen (Windows Taste + R -> "cmd") und "npm" eingeben.
          • Die Antwortet lautet dann:
          [/spoiler]
          [/spoiler]
        • [spoiler=ERROR ENOENT stat C:\Users\Peter\AppData\Roaming\npm...] Die Lösung dafür ist folgende: In besagtem Verzeichnis, welches uns der Error ausgibt, von Hand einen Ordner erstellen der "npm" heißt - das wars, nun sollte es gehen! [/spoiler]
        • [spoiler=Usage: npm command where command...]Alles perfekt, so muss es sein. Weiter gehts![/spoiler]


        Puh, das war doch schon mal ein ganz schöner Akt. Wenn bis hierhin alles geklappt hat geht es weiter mit Schritt Nr. 2
        Als nächstes geben wir in die Konsole den Befehl

        Quellcode

        1. npm install -g cordova

        ein. Es folgt ein kurzer Moment und anschließend etwas code der uns bestätigt, dass Cordova installiert wurde.
        Als nächstes geben wir in die Konsole

        Quellcode

        1. cordova

        ein, und erhalten als Antwort:

        Brainfuck-Quellcode

        1. Synopsis
        2. cordova command [options]
        3. Global Commands
        4. create ............................. Create a project
        5. help ............................... Get help for a command
        6. Project Commands
        7. info ............................... Generate project information
        8. platform ........................... Manage project platforms
        9. plugin ............................. Manage project plugins
        10. prepare ............................ Copy files into platform(s) for building
        11. compile ............................ Build platform(s)
        12. run ................................ Run project
        13. (including prepare && compile)
        14. serve .............................. Run project with a local webserver
        15. (including prepare)
        16. aliases:
        17. build -> cordova prepare && cordova compile
        18. emulate -> cordova run --emulator
        19. Experimental Commands
        20. These commands require the --experimental flag.
        21. save ............................... Save installed platforms/plugins
        22. restore ............................ Restore saved platforms/plugins
        23. Command-line Flags/Options
        24. -v, --version ...................... prints out this utility's version
        25. -d, --verbose ...................... debug mode produces verbose log output for all activity,
        26. including output of sub-commands cordova invokes
        Alles anzeigen

        Wenn es an dieser Stelle zu Fragen oder Problemen kommt, bitte ich darum, einen Beitrag unter dem Tutorial zum Thema zu verfassen.
        Das wars, Cordova ist nun installiert!

        Eclipse ist heruntergeladen, wie installiere ich es?(überspringen)
        Man sollte meinen, eine Installation sei selbsterklärend. Allgemein sollte heutzutage eigentlich alles selbsterklärend sein. Als ich selber das erste mal vor dem Thema Eclipse + Windows stand habe ich mir 3 Tage lang die Haare ausgerissen. Damit Euch das nicht passiert, und ihr keine kahlen Stellen auf dem Kopf bekommt, geht es nun also weiter.
        Eclipse muss nicht installiert werden, dennoch gibt es ein paar Dinge zu beachten: Die Datei die wir heruntergeladen haben entpacken wir und öffnen anschließend den Ordner "sdk". Im Ordner "sdk" finden wir mehrere Unterordner von welchen wir "platform-tools" und "tools" nun zu unserem Path hinzufügen müssen.

        [spoiler=Path editieren Windows 7]
        • Im Startmenü den Rechner auswählen.
        • Im Kontextmenü die Option "Systemeigenschaften" anklicken.
        • Jetzt klickst Du auf "Erweiterte Systemeinstellungen" und wählst anschließend oben im Register "Erweitert" aus.
        • Anschließend folgt ein Klick auf "Umgebungsvariablen". Nun unter "Systemvariablen" zu "PATH" und auf "Bearbeiten" klicken.
        • ++ GANZ WICHTIG ++ Das hier sind Systemvariablen. Da dran zu "basteln" kann auch ins Auge gehen. Bitte denkt 2x drüber nach, was ihr dort vornehmt. Einzelne Pfade sind immer (!) durch ein ; zu trennen.
        • Ganz am Ende von Path fügen wir also nun ein ; ein, falls dort noch keines ist und anschließend folgenden Pfad (bitte individuell anpassen)
        • Quellcode

          1. C:\individuellAnpassen\adtOrdnerNameHierHin\sdk\platform-tools;C:\individuellanpassen\adt-bundle\sdk\tools
        • Speichern und alles schließen.
        [/spoiler] [spoiler=Path editieren Windows 8]
        • Mauszeiger in die untere rechte Ecke des Bildschirms ziehen.
        • Auf das Suchsymbol klicken und "Systemsteuerung" eingeben.
        • Auf "Systemsteuerung" -> (Jetzt evtl. vorher oben Rechts bei Anzeige auf "Große Symbole" umstellen, damit "System" sichtbar wird) "System" -> "Erweiterte Systemeinstellungen" klicken.
        • Anschließend folgt ein Klick auf "Umgebungsvariablen". Nun unter "Systemvariablen" zu "PATH" und auf "Bearbeiten" klicken.
        • ++ GANZ WICHTIG ++ Das hier sind Systemvariablen. Da dran zu "basteln" kann auch ins Auge gehen. Bitte denkt 2x drüber nach, was ihr dort vornehmt. Einzelne Pfade sind immer (!) durch ein ; zu trennen.
        • Ganz am Ende von Path fügen wir also nun ein ; ein, falls dort noch keines ist und anschließend folgenden Pfad (bitte individuell anpassen)
        • Quellcode

          1. C:\individuellAnpassen\adtOrdnerNameHierHin\sdk\platform-tools;C:\individuellanpassen\adt-bundle\sdk\tools
        • Speichern und alles schließen.
        [/spoiler]

        Nachdem das nun erledigt ist, müssen wir das gleiche noch mit Java und ANT machen. JDK oder JRE, mag sich jetzt vlt. jemand Fragen... Nein, heute schmeißen wir keine Münze und zu detalliert wollen wir auch nicht werden. Wir benötigen die JDK. Also laden wir uns die JDK unter folgendem Link herunter - oracle.com/technetwork/java/javase/downloads/index.html. Anschließend noch oben JDK auswählen, eure Platform und installieren. Danach testen, ob die Installation erfolgreich verlaufen ist: Konsole schließen und neu öffnen (Windows Taste + R -> "cmd") und in der Konsole "java" eingeben.(Es kann auch sein, dass ihr, so wie ich, erst einmal neustarten und anschließend den JDK-Installationsclient erneut starten müsst, damit dieser die Installation vollständig durchläuft) Bekommt ihr nun lauter Dinge zurück ist alles super. Erhaltet ihr hingegen die Antwort "Der Befehl java ist entweder falsch geschrieben oder..." dann müsst ihr den Pfad von Java noch zu Eurem PATH (obige Anleitung) am Ende ergänzen. Konsole neu starten und anschließend wieder testen (denkt an das ; vor dem Java-Pfad, meiner sieht so aus C:\Program Files\Java\jdk1.8.0_25\bin).
        Nun brauchen wir "nur noch" ANT von Apache. ANT findet ihr hier - ANT Download -. Herunterladen müsst ihr für Windows das ...bin.zip File. Nachdem der Download abgeschlossen ist, entpackt ihr die Datei und verschiebt sie (der besseren Handhabbarkeit später halber) in den Ordner von eurem adt-bundle zu den Ordnern "eclipse" und "sdk" und nennt ihn um in "ant". Nun den Unterordner "bin" im Ordner "ant" zu unserem Pfad hinzufügen wie oben beschrieben und an das ; am Ende denken! :-)
        Nun öffnen wir eine neue Konsole und geben "android" ein und drücken anschließend "Enter". Es öffnet sich ein neues Fenster, der Android-SDK-Manager. Wir müssen, bevor wir mit dem Programmieren anfangen können, noch die verschiedenen Targets (Zielplattformen) herunterladen und ein Update machen. Bitte folgende Pakete auswählen:

        und

        Und dann auf "Install Packages" klicken. Die Lizenzen annehmen, und alles herunterladen. Das wird einen Moment dauern, denn der Download beträgt ca. 3,45Gb. Dann geht es aber nun endlich ans Eingemachte - Die erste App!


        Cordova - jetzt geht es los!(überspringen)
        1. Als erstes öffnen wir eine neue Konsole und geben anschließend den Befehl

          Quellcode

          1. cd Desktop

          ein. Damit gelangen wir in der Konsole auf den Desktop.
        2. Nun erstellen wir unser erstes Cordova-Projekt mittels dem Befehl

          Quellcode

          1. cordova create HelloWorld com.example.com HelloWorld

          Bis dieser Befehl vollständig ausgeführt wurde kann es einen Moment dauern, etwas Geduld ist an dieser Stelle also eventuell gefragt.
          1. Was hast Du dort eigentlich eingegeben? Analysieren wir einmal Schritt für Schritt:
            1. Quellcode

              1. cordova

              hiermit rufen wir das Programm cordova auf und geben ihm anschließend den Befehl
            2. Quellcode

              1. create

              welcher cordova sagt, es soll etwas "herstellen". Was soll es herstellen? Erstmal den Ordner
            3. Quellcode

              1. HelloWorld

              und zwar auf dem Desktop. Bei dem nächsten Argument, dem
            4. Quellcode

              1. com.example.com

              handelt es sich um den domain-style identifier. Was das ist? Erstmal irrelevant, denn
            5. Quellcode

              1. HelloWorld

              sagt der App nun, wie sie heißen soll bzw. mit welchem Namen sie uns angezeigt wird.
        3. Nachdem wir nun also unser HelloWorld-Projekt erstellt haben, müssen wir mit der Konsole in den Ordner von HelloWorld manövrieren. Dies geschieht über den Befehl

          Quellcode

          1. cd HelloWorld


        4. Als nächstes müssen wir unserem Cordova-Projekt mitteilen, auf welchen Platformen es später laufen soll. Für unser Beispiel geben wir also zunächst ein:
          1. Quellcode

            1. cordova platform add android

            und sagen unserem Projekt nun es soll Android als Platform hinzufügen.
        5. Nachdem wir nun die Platform festgelegt haben, können wir unser Projekt mit dem Befehl
          1. Quellcode

            1. cordova build

            abschließen und sollten zum Schluss "BUILD SUCCESSFUL" in der Konsole lesen können.
        6. Wir haben nun ein fertiges Cordova-Projekt für Android.


        Importieren unseres erstellten Projektes in Eclipse(überspringen)
        Nachdem wir nun unser Cordova-Projekt erstellt haben, können wir nun in Eclipse damit arbeiten.

        Wir können nun eigentlich alle geöffneten Fenster (die dieses Tutorial betreffen) schließen. Wir starten nun Eclipse und müssen zunächst einen Arbeitsbereich festlegen. Hier empfiehlt es sich, für jedes Projekt einen eigenen Arbeitsbereich anzulegen. Wir klicken also auf "Durchsuchen" und legen in unseren Dokumenten einen Ordner "arbeitsbereich" an. Hier erstellen wir einen Unterordner "helloworld" und legen diesen als Arbeitsbereich/Workbench fest.


        Kommen wir nun zu Eclipse. Zunächst klicken wir oben auf File -> New -> Project. In dem sich öffnenden Fenster klicken wir auf "Android" und anschließend auf "Android Project from existing Code". Im nächsten Schritt klicken wir oben auf "Browse" wählen den "HelloWorld" Ordner auf dem Desktop aus und gehen ins das Verzeichnis "HelloWorld" -> "platforms" -> "android". Diesen Ordner klicken wir an und klicken auf "Ok". Nun noch auf "Finish" und unser HelloWorld-Projekt wird importiert.
        Nun klicken wir in der linken Spalte einmal auf den Ordner "HelloWorld" und anschließend (obere Menüleiste) auf "Project" -> "Properties". In dem neuen Fenster auf "Resource" -> "Resource Filters" und dann löschen wir die beiden enthaltenen Filter..."Apply" und "Ok".
        Nun ein Klick auf "assets" -> "www" und da haben wir unsere Dateien, an welchen wir arbeiten können.

        Nun müssen wir uns noch einen Emulator erstellen. Dazu klickt ihr zunächst oben auf den "Android Virtual Device Manager" (schräg links über dem X von "Package Explorer"). Nun auf "Create..." klicken und folgendes Gerät erstellen:

        Danach das Gerät selektieren und "Start..." auswählen. Nun kann es einen Moment dauern, bis Android vollständig gestartet ist. Es empfiehlt sich ordentlich RAM in dem Computer verbaut zu haben. Eclipse und der Emulator zusammen belegen bei mir ca 1,5Gb.

        Wie wir zukünftig besser damit umgehen können (der Android-Emulator ist sehr langsam) erkläre ich Euch im nächsten Tutorial in welchem wir GenyMotion installieren. GenyMotion stellt uns eine große Anzahl an Emulatoren zur Verfügung die Einwandfrei funktionieren. Gerade da, wo es total ruckelig mit dem Android-Emulator gewesen ist, wird Genymotion eine Abhilfe schaffen!
        Dann können wir auch schon anfangen und starten einfach mal, indem wir einen Rechtsklick auf den Ordner "HelloWorld" tätigen, anschließend "Run as" -> "Android Application" auswählen.
        In dem sich öffnenden Fenster wählen wir "Yes monitor LogCat-Output" aus und klicken auf Ok.

        Der erste Start unserer App


        Das soll es dann auch fürs Erste gewesen sein. Weiter geht es mit dem Tutorial Teil 2
    • Sehr schönes Tutorial, danke dafür :)

      Irgendwie scheint er bei mir aber android ned fressen zu wollen.
      Wenn ich einfach nur so android eingebe, erhalte ich folgende Meldung:
      Der Befehl "android" ist entweder falsch geschrieben oder konnte nicht gefunden werden.


      Und wenn ich versuche ein Projekt und eine Plattform hinzuzufügen, kommt folgendes:
      Error: ANDROID_HOME is not set and "android" command not in your PATH. You must fulfill at least one of these conditions.
      at C:\Users\reto.mertner\.cordova\lib\npm_cache\cordova-android\3.6.4\package\bin\lib\check_reqs.js:159:19
      at _fulfilled (C:\Users\reto.mertner\.cordova\lib\npm_cache\cordova-android\3.6.4\package\bin\node_modules\q\q.js:798:54)
      at self.promiseDispatch.done (C:\Users\reto.mertner\.cordova\lib\npm_cache\cordova-android\3.6.4\package\bin\node_modules\q\q.js:827:30)
      at Promise.promise.promiseDispatch (C:\Users\reto.mertner\.cordova\lib\npm_cache\cordova-android\3.6.4\package\bin\node_modules\q\q.js:760:13)
      at C:\Users\reto.mertner\.cordova\lib\npm_cache\cordova-android\3.6.4\package\bin\node_modules\q\q.js:821:14
      at flush (C:\Users\reto.mertner\.cordova\lib\npm_cache\cordova-android\3.6.4\package\bin\node_modules\q\q.js:108:17)
      at process._tickCallback (node.js:419:13)
      at Function.Module.runMain (module.js:499:11)
      at startup (node.js:119:16)
      at node.js:906:3
      Error: C:\Users\reto.mertner\.cordova\lib\npm_cache\cordova-android\3.6.4\package\bin\create.bat: Command failed with exit code 8
      at ChildProcess.whenDone (C:\Users\reto.mertner\AppData\Roaming\npm\node_modules\cordova\node_modules\cordova-lib\src\cordova\superspawn.js:135:23)
      at ChildProcess.emit (events.js:98:17)
      at maybeClose (child_process.js:756:16)
      at Process.ChildProcess._handle.onexit (child_process.js:823:5)


      Meine Path Variabeln sieht folgendermassen aus:
      C:\Users\DragonGun\AppData\Roaming\npm; C:\Program Files\nodejs\node_modules\npm\bin; C:\Users\DragonGun\Eclipse-ADT\adt-bundle-windows-x86_64-20140702\sdk\platform-tools; C:\Users\DragonGun\Eclipse-ADT\adt-bundle-windows-x86_64-20140702\sdk\tools; C:\Users\DragonGun\Eclipse-ADT\adt-bundle-windows-x86_64-20140702\ant\apache-ant-1.9.4\bin; C:\Program Files\Java\jdk1.8.0_25\bin

    • Hast Du mal versucht, die Leerzeichen aus dem PATH zu entfernen?

      Quellcode

      1. C:\Users\DragonGun\AppData\Roaming\npm;C:\Program Files\nodejs\node_modules\npm\bin;C:\Users\DragonGun\Eclipse-ADT\adt-bundle-windows-x86_64-20140702\sdk\platform-tools;C:\Users\DragonGun\Eclipse-ADT\adt-bundle-windows-x86_64-20140702\sdk\tools;C:\Users\DragonGun\Eclipse-ADT\adt-bundle-windows-x86_64-20140702\ant\apache-ant-1.9.4\bin;C:\Program Files\Java\jdk1.8.0_25\bin


      Und mal neugestartet nach dem Setzen des PATH?
    • Tammo schrieb:

      Gibt es explizite Wünsche, wie dieses Tutorial fortgeführt werden soll?

      Jetzt nicht unbedingt in der Reihenfolge und auch ned zwingend die Themen, aber ich würde mich dafür interessieren:
      • Wie baut man Inhalte ein
      • Wie erstelle ich einen Button und lasse ihn eine Aktion ausführen
      • Daten eingeben, schpeichern und auflisten
      • In eine Webseite einloggen und gewisse Inhalte anzeigen lassen
      • Notifications senden
      1. Inhalte einbauen kannst Du ganz normal über HTML (ist dir HTML geläufig, also, kennst Du Dich damit aus oder soll ich Dir ein Beispiel posten?) in der index.html in deinem WWW Ordner (Siehe Anhang Bild 1). Die Index.html kannst Du Dir oben in das große freie Feld in der Mitte ziehen und hast dann den Code zum bearbeiten geöffnet. Alles zwischen den <body></body>-Tags wird angezeigt.
      2. Einen Button könntest Du zwischen die beiden <body></body>-Tags beispielsweise mit <div id="button" style="width:150px;height:50px;background-color:#4A4A4A;" onclick="alert('test');">Drueck mich!</div> einbauen. Das ist jetzt element.style, der direkt für das div vergeben wird. Besser wäre solche Dinge in einem Stylesheet auszulagern und dann den DIV-Container über die ID "button" anzusprechen. Im Stylesheet würde das ganze dann ungefähr so aussehen:
        • Quellcode

          1. #button{background-color: #4A4A4A;width: 150px;height: 50px;}

      3. Das funktioniert einerseits mit der Lokalen-, andererseits mit einer MySQL-DB ist aber zu ausführlich, als das ich es Dir jetzt hier erklären könnte. @Vincent Fuhler hat ein Tutorial für die MySQL-DB Connetion geschrieben, das findest Du hier: Verbindung mit externer MySQL-DB
      4. Auch das ist über eine MySQL-DB möglich, setzt aber eine Verbindung zu eben jener voraus. Heißt: Es gibt eventuell eine Seite im Hintergrund (Web) auf der sich die User registrieren können, oder sie registrieren sich über die App (dann müssen die eingegebenen Daten natürlich übermittel und in der DB abgelegt werden). Anschließend können sie sich mit ihren Login-Daten einloggen. Aufürliches Tutorial hierzu könnte in den nächsten Tagen folgen.
      5. Notifications in welchem Sinne? Einfache JavaScript-Alerts sind ja kein Thema. Um eine Notification abzusenden wenn du auf den Knopf drückst kannst du auch anders vorgehen. Hier ein Beispiel, mit komplettem Code, einem Button und einem Alert:

      HTML-Quellcode

      1. <!DOCTYPE html>
      2. <html>
      3. <head>
      4. <meta charset="utf-8" />
      5. <meta name="format-detection" content="telephone=no" />
      6. <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
      7. <link rel="stylesheet" type="text/css" href="css/stylesheet.css" /><!-- Hier muss dann dein Stylesheet rein, je nachdem, wo er liegt und wie er heißt.-->
      8. <script type="text/javascript" src="cordova.js"></script>
      9. <title>DragonGun</title>
      10. <script>
      11. function alarm(){
      12. alert('HelloWorld');
      13. }
      14. </script>
      15. </head>
      16. <body>
      17. <div id="button" style="width:150px;height:50px;background-color:#4A4A4A" onclick="alarm()">Drueck mich!</div>
      18. </body>
      19. </html>
      Alles anzeigen


      Hoffe ich konnte etwas Klarheit schaffen :)
    • Das mit dem Standard HTML und CSS ist mir erst später eingefallen ... es is Freitag und schon fast Feierabend, da ist mein Gehirn schon fast im Wochenende :D

      Vielen Dank für das verlinken des Tutorials, das werd ich mir dann wohl die Tage zu Gemüte führen.

      Bezüglich der Notifications, da meinte ich eigentlich die "nativen" Notifications wie bei den Mails, WhattsApp und der gleichen.
      Also das die App dem Smartphone/Tablet ne Notification schickt.
      Oder geht das nur mit nativen Apps?
    • Hello
      erstmal danke für die super Erklärung zum Installieren.
      Beim Starten der App im Device ist aber leider Schluss bei mir.

      Quellcode

      1. [2014-11-20 14:48:46 - Helloworld] Installing Helloworld.apk...
      2. [2014-11-20 14:48:53 - Helloworld] Installation error: Unknown failure
      3. [2014-11-20 14:48:53 - Helloworld] Please check logcat output for more details.
      4. [2014-11-20 14:48:54 - Helloworld] Launch canceled!

      Habe ich was übersehen?
      Nach dem ca 5.Versuch hat es geklappt.

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von dartgott ()