Angepinnt Cordova Tutorial - iOS App - Mac OS X

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

    • Cordova Tutorial - iOS App - Mac OS X

      Dies ist das Tutorial für Mac - für das Tutorial unter Windows bitte hier entlang - Wir erstelle ich meine erste App (Windows, Android, 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 in diesem (Diskussionsthread zum Tutorial: Wie erstelle ich meine erste App) 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. Wie erstelle ich einen Developer-Account bei Apple und kostet der nicht eigentlich 100$?
      5. Wie installiere ich Cordova?
      6. XCode ist heruntergeladen, wie installiere ich es?
      7. Cordova - Jetzt geht es los!
      8. Importieren unseres erstellten Projektes in XCode
      9. XCode eine Übersicht
      10. 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)
      Wir fangen mit der Appentwicklung für das iPhone an. Auch, wenn unsere App hinterher 1 zu 1 portierbar auf ein Android-Gerät ist, möchte ich schon zwischen den zwei IDE (Entwicklungsumgebungen) Xcode und Eclipse unterscheiden. Folgende Dinge solltest Du also für die iPhone-App mitbringen:
      • Einen Mac-Rechner (MacMini, Mac Pro, iMac usw.)
      • Einen Developer-Account bei Apple (Die Erstellung erläutere ich gleich)
      • Cordova
      • Xcode
      Und das war es dann auch schon. Einen Mac musst Du also "mitbringen", zu dem Rest bringe ich Dich.


      Wie erstelle ich einen Developer-Account bei Apple und kostet der nicht eigentlich 100$?(überspringen)
      Als Erstes: Nein, er kostet keine 100$. Die werden nur fällig, wenn Du Apps in den App-Store laden möchtest um sie Anderen zur Verfügung zu stellen. Um einen Developer-Account bei Apple zu erstellen benötigst Du nichts weiteres als eine Apple-ID. Ich setze jetzt einmal voraus, dass Du bereits eine hast. Ansonsten kannst Du Dir hier -> Apple-ID erstellen <- eine Apple-ID erstellen.

      Also, Du hast nun eine Apple-ID, die Dinge vorher aufmerksam gelesen und bist immer noch gewillt, eine App zu programmieren? Weiter gehts!

      Als nächstes richten wir unseren Developer-Account bei Apple ein. Hierzu bitte folgenden Link aufrufen -> Developer-Account registrieren <-. Auf der nächsten Seite klicken wir auf "Continue" (ich war schon eingeloggt, wahrscheinlich musst Du Dich mit den Daten von eben einloggen, und kommst dann zum nächsten Schritt)


      Wir aktivieren die Checkbox und aktzeptieren somit die Lizenzbestimmungen für das Developer-Programm (vorher natürlich erst durchlesen ;) ). Auf der nächsten Seite müssen wir angeben, in welcher Position wir uns befinden. Ich wähle hier: "IT-Systems/Serveradministrator" bei Auswahl Nr. 1 und "2013-present" bei Auswahl Nr. 2. Anschließend wähle ich noch aus "iOS Apps (App-Store)" und im zweiten Reiter "Mobile Android".
      Und das wars, wir sind nun offiziell Apple-Entwickler. Nach einem Klick auf "Continue" landen wir im Member-Center für Entwickler. Hier angekommen klicken wir nun auf "iOS" und laden dort anschließend XCode 6 herunter.



      Während der Download von XCode 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 <-. 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 dein Terminal eingeben können. Moment, Terminal? Ja, das Terminal. Das Terminal wird uns über weite Strecken immer und immer wieder begleiten. Öffnen kannst Du es ganz einfach, klick auf die Spotlightsuche auf dem Schreibtisch (Die Lupe oben rechts in der Ecke), "Terminal" eingeben und "Enter" drücken. Im Terminal geben wir jetzt also

        Quellcode

        1. npm

        ein und erhalten als "Antwort" vom Terminal:

        Quellcode

        1. where <command> is one of:
        2. add-user, adduser, apihelp, author, bin, bugs, c, cache,
        3. completion, config, ddp, dedupe, deprecate, docs, edit,
        4. explore, faq, find, find-dupes, get, help, help-search,
        5. home, i, info, init, install, isntall, issues, la, link,
        6. list, ll, ln, login, ls, outdated, owner, pack, prefix,
        7. prune, publish, r, rb, rebuild, remove, repo, restart, rm,
        8. root, run-script, s, se, search, set, show, shrinkwrap,
        9. star, stars, start, stop, submodule, t, tag, test, tst, un,
        10. uninstall, unlink, unpublish, unstar, up, update, v,
        11. version, view, whoami
        12. npm <cmd> -h quick help on <cmd>
        13. npm -l display full usage info
        14. npm faq commonly asked questions
        15. npm help <term> search for help on <term>
        16. npm help npm involved overview
        17. Specify configs in the ini-formatted file:
        18. /Users/username/.npmrc
        19. or on the command line via: npm <command> --key value
        20. Config info can be viewed via: npm help config
        21. npm@1.4.28 /usr/local/lib/node_modules/npm
        Alles anzeigen


        Wenn bis hierhin alles geklappt hat geht es weiter mit Schritt Nr. 2
      2. Als nächstes geben wir in das Terminal den Befehl

        Quellcode

        1. sudo npm install -g cordova

        ein. Wir werden aufgefordert unser Passwort einzugeben um die Installation fortzuführen. Das tun wir, folgen den Schritten durch die Installation und haben nun Cordova installiert und sollten, wenn wir den Befehl

        Quellcode

        1. cordova

        in das Terminal eingeben, 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

        erhalten. Wenn ja, dann hast Du alles richtig gemacht. Falls nein, bitte ich darum einen Beitrag in diesem Thema (-> Diskussionthread zum Thema <-) zu verfassen.

      3. Das wars, Cordova ist nun installiert!


      XCode ist heruntergeladen, wie installiere ich es?(überspringen)
      Darauf möchte ich an dieser Stelle weniger ausführlich eingehen. XCode zu installieren sollte selbsterklärend sein. Wenn es dennoch zu Fragen oder Problemen kommt bitte ich ebenfalls darum wieder einen Beitrag im -> Diskussionsthread <- zum Thema zu verfassen. Ich gehe also nun davon aus, dass Cordova und XCode installiert sind und Du einen Developer-Account hast? Dann geht es nun tatsächlich ans Eingemachte - Die erste App!


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

        Quellcode

        1. cd ~/Desktop

        ein. Damit gelangen wir im Terminal auf den Schreibtisch. Die Tilde erzeugst Du mit

        Quellcode

        1. Alt + N

      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 dem Terminal 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 ios

          und sagen unserem Projekt nun es soll iOS 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.
      6. Wir haben nun ein fertiges Cordova-Projekt für iOS.


      Importieren unseres erstellten Projektes in XCode(überspringen)
      Nachdem wir nun unser Cordova-Projekt erstellt haben, können wir nun in XCode damit arbeiten. Hierzu gehe ich zunächst davon aus, dass Du XCode installiert hast. Sollte das nicht der Fall sein, dann schaue bitter weiter oben nach, wie Du am besten vorgehst.

      Wir können nun eigentlich alle geöffneten Fenster (die dieses Tutorial betreffen) schließen. Wir öffnen auf dem Desktop den eben erstellten Ordner HelloWorld und finden mehrere Unterordner. Wir klicken auf "platforms" -> "ios" und öffnen nun per Doppelklick unser "HelloWorld.xcodeproj" in XCode.


      XCode - eine Übersicht(überspringen)
      Kommen wir nun zu XCode. Da das ganze nun ausführlich wird, werden die angehängten Bilder kleiner sonst sprenge ich hier den Rahmen. Ich werde dennoch so detailiert wie möglich bleiben. Zunächst klicken wir in der linken Leiste auf den kleinen Pfeil vor unserer HelloWorld-App. Anschließend sehen wir in XCode folgendes (ich habe weitere Ordner ausgeklappt):



      Dann können wir auch schon anfangen und starten einfach mal, indem wir die App auf unser Gerät bringen mit einem Klick auf den Pfeil unter dem Punkt 2.


      Der erste Start unserer App
      Ich habe jetzt das iPhone 5 als Startdevice ausgewählt (einfach auf den Schriftzug "iPhone 6" klicken, dann erhältst Du eine Auswahl) und auf Start gedrückt. Wahrscheinlich wunderst Du Dich gerade, wie groß das iPhone dargestellt wird. Zum Arbeiten reicht es meiner Meinung nach das Fenster auf 75% zu skalieren. Dazu klickst Du mit der Maus einmal in das iPhone und anschließend oben auf Window und Scale 75%:



      Und dann sieht es so aus:


      Das soll es dann auch fürs Erste gewesen sein. Weiter geht es mit dem Tutorial Teil 2
    • Cooles Tutorial.
      Dank dem bin ich auf [lexicon]Cordova[/lexicon] gekommen :)


      Vielleicht könntest du fortfahren mit einem Tutorial zur Anbindung von einer Komponente.
      Also z.B. die Abfrage der Gerätedaten oder ähnliches.
      Spannend für mich wäre auch ein Tutorial zu solchen Dingen wie "Benachrichtigungen" im Hintergrund.
      Sprich man macht eine Chat-App mit [lexicon]Cordova[/lexicon] und schiebt diese App jetzt in den Hintergrund und lockt sein Gerät.
      -> Wie funktioniert [lexicon]Cordova[/lexicon] dann mit Push Notifications??

      Dazu gibt's meine ich auch offiziell kein Plugin. Nur eins auf Github...
      Wäre auf jeden Fall spannend ^^
    • Danke für das Feedback und herzlich Willkommen ;-)!

      Das Plugin für Push-Notifications habe ich persönlich noch nicht eingesetzt. Ich schau es mir gerne morgen einmal an. Glaube irgendjemand hatte schon einmal etwas zu jenem Plugin wissen wollen - vlt. @DragonGun?

      Schau sonst mal hier: plugins.cordova.io/ da findest Du eigentlich auch immer ein Plugin, das passt. Auf anhieb konnte ich zum Thema Push aber nichts vernünftiges entdecken. Es empfiehlt sich also das GitHub Plugin github.com/phonegap-build/PushPlugin.

      Generell ist mit den Plugins alles möglich, was auch nativ möglich wäre. Der einzige Fall, bei dem man auf native Programmierung setzen sollte ist die komplexe Spieleentwicklung. Ansonsten ist mit [lexicon]Cordova[/lexicon] alles möglich, was auch nativ möglich ist.
    • Ich muss hier noch mal eben was ergänzen: Wir haben beispielsweise das "network-information"-Plugin benutzt um in eine App eine Option einzubauen, die ermöglichen soll, dass Daten nur bei einer WiFi-Verbindung hochgeladen werden sollen.

      Du nimmst beispielsweise ein Video auf, bindest das Network-Information Plugin ein und schreibst anschließend eine Funktion die einfach nur den Status überprüft der Internetverbindung. Anschließend kannst du mit dem CallBack arbeiten und diesen bspw. in eine weitere Funktion für deinen Schieberegler unter "Einstellungen" o.ä. einbauen.

      Nervig ist auch, dass wenn du einen alert() schreibst, dieser (sofern du eine SPA verwendest) immer mit "index.[lexicon]html[/lexicon]" als title ausgegeben wird. Dafür kannst Du das DIalogs-Plugin nutzen und dir deinen Alert selber zusammenstellen.
    • Naja, Bluetooth unter iOS ist ja so eine Sache... da man nicht mal von einem Handy zum anderen Dateien übertragen kann via Bluetooth, war es bis jetzt für uns recht uninteressant. Direkt genutzt haben wir soetwas auch noch nicht.

      Das Plugin scheint da einige Möglichkeiten zu bieten, allerdings wirst Du die App niemals in den Store bekommen (zumindest würde ich das behaupten x)). Du brauchst die UUID laut der readme, dass musst du beim App-Upload angeben, also: Das Du auf die UUID zugreifst. Tust Du das nicht, behält Apple sich vor, deinen gesamten Account vom Developer-Projekt zu rejecten und dich praktisch rauszuschmeißen. Du gibst also an, dass Du auf die UUID zugreifst, und Apple wird deine App Zeile für Zeile für Zeile durchgucken... Ist in meinen Augen schade, dass Bluetooth so reglementiert wird. Ich bin gespannt, was uns mit dem 6 / 6+ mit NFC erwartet ;) Da wird einiges kommen!