Neuigkeiten von trion.
Immer gut informiert.

macOS Environment für NativeScript

NativeScript vereinfacht die plattformübergreifende Entwicklung nativer Mobile-Apps für iOS und Android. Es ermöglicht mit Angular und Vue.js die Verwendung unterschiedlicher Frameworks. Außerdem wird neben JavaScript auch TypeScript als Programmiersprache unterstützt, das mit der Zeit immer beliebter wird. Bei den stackoverflow Developer Survey Results von 2019 wurde TypeScript bei den beliebtesten Programmiersprache bereits auf Platz 3 gewählt. Mit dem NativeScript CLI bietet NativeScript zudem ein mächtiges und zugleich einfaches Tool zur Automatisierung des Builds mittels einer CI-Pipeline.

In diesem Artikel beschreiben wir die Provisionierung eines macOS-Systems für NativeScript. In folgenden Artikeln schauen wir uns noch an, wie wir das System als Runner in Gitlab einbinden und zum Upload von NativeScript-Apps zum Apple App Store nutzen können.

macOS ohne eigene Apple Hardware

Leider erlaubt Apple in seinen Software License Agreements die Nutzung von macOS nur auf Apple Hardware. Somit ist Apple Hardware erforderlich, wenn mittels NativeScript eine iOS-App entwickelt und im Apple AppStore veröffentlicht werden soll. Anstatt selbst Apple Hardware zu erwerben, kann jedoch auch ein Cloud-Anbieter, wie z.B. macstadium oder macincloud, genutzt werden. Bei diesen Anbietern kann ein macOS-System gemietet werden, meist auf Monatsbasis. Einige Cloud-Anbieter für CI bieten auch macOS-Systeme inkl. Xcode und Support für iOS-Builds an, wie z.B. Travis CI - für OpenSource-Projekte sogar begrenzt kostenlos.

macstadium bietet eine kostenlosen Trial für 24 Stunden an, die für unseren Test genutzt werden kann. In dem Fall sollte Gitlab auch direkt auf dem Testsystem eingerichtet werden.

Manuelle MacOS Konfigurationen

Für die Provisionierung des macOS-Systems nutzen wir Ansible. Zunächst müssen jedoch ein paar Vorbereitungen manuell durchgeführt werden, damit Ansible auf das System zugreifen kann. Außerdem lassen sich einige Konfiguration nichts mittels Ansible automatisieren.

Die folgenden Schritte sind bei der macOS Konfiguration vorzunehmen:

  1. Konfiguration des Hostnamen

  2. SSH-Daemon aktivieren

  3. Verwendung von sudo ohne Passwort

  4. App Store Login und Installation von Xcode:

Die nachfolgende Befehlsfolge setzt den Systemnamen an verschiedenen Stellen und führt anschließend direkt einen Reboot durch. Danach ist der neue Hostname gesetzt:

Manuelles Setzen des Hostnamen
$ HOSTNAME=macos-runner-01
$ sudo scutil --set HostName <new hostname>
$ sudo scutil --set LocalHostName <new hostname>
$ sudo scutil --set ComputerName <new hostname>
$ sudo dscacheutil -flushcache
$ sudo reboot

Hier muss macos-runner-01 entsprechend durch den gewünschten Namen für das System ersetzt werden.

Damit ein remote-Zugriff möglich ist, z.B. zur Provisionierung mit Ansible, muss der SSH Service auf macOS ermöglicht werden. Folgender Kommandozeilenbefehl aktiviert den SSH-Daemon unter macOS:

Manuelles Aktivieren des SSH Dienstes unter macOS
$ sudo systemsetup -setremotelogin on

Einige Konfigurationen, die wir später über Ansible ausführen, erfordern eine Root-Berechtigung. Damit der Benutzer Befehle mittels sudo ohne Passworteingabe ausführen kann, muss die sudo-Konfiguration angepasst werden. Der Editor für die sudoers-Datei wird über den Befehl sudo visudo geöffnet.

Nun muss am Ende die folgenden Zeile ergänzt werden:

builduser ALL=(ALL) NOPASSWD: ALL

Hier muss builduser entsprechend durch den Namen des zu verwendenden Benutzers ersetzt werden.

Leider gibt es in macOS keine Automatisierungen für die Anmeldung im App Store und die Installation von Apps aus dem App Store. Es gibt zwar mac-cli, ein OpenSource-CLI-Tool für den App Store. Allerdings erfordert auch dieses eine manuelle Anmeldung und ermöglicht die Installation von Apps nur dann, wenn der Benutzer sich über die GUI am System angemeldet hat. Eine Installation über SSH, wie bei Ansible, ist nicht möglich. (Für weitere Infos siehe https://github.com/mas-cli/mas/issues/128)

Daher muss nun der App Store gestartet und die Anmeldung mit einer Apple Id durchgeführt werden. Nach der Anmeldung installieren wir dann Xcode.

Alternativ kann Xcode auch von https://developer.apple.com heruntergeladen und mit dem xcode-Playbook von macstadium installiert werden.

Provisionierung von macOS für NativeScript mittels Ansible Playbook

Die weitere Konfiguration des Systems können wir nun über Ansible vornehmen. Folgende Konfigurationen und Installationen sind erforderlich:

  • Zeitzone setzen

  • Automatisches StandBy und Bildschirmschoner deaktivieren

  • Xcode Command Line Tools installieren

  • Für Android:

    • OpenJDK8 installieren

    • Android-Lizenzen annehmen

    • Android-Requirements installieren

  • Für iOS:

    • xcodeproj installieren

    • cocoapods installieren

  • NPM installieren (Für die NativeScript Installation)

  • NativeScript installieren

  • Umgebungsvariablen anpassen

  • Umgebung mit tns doctor validieren

Wir haben das Ansible-Playbook nativescript-environment.yml vorbereitet, das die oben gelisteten Schritte ausführt und in folgendem Repository zu finden ist: https://github.com/trion-development/nativescript-gitlab-ios

Nachdem das Repository geklont wurde, müssen als Erstes die zu provisionierenden Systeme in der Datei hosts unterhalb von [macs] definiert werden. Anschließend wird die Provisionierung über das Script provision.sh gestartet:

Manuelles Aktivieren des SSH Dienstes unter macOS
$ cd <<repo-path>>
$ bash provision.sh

NativeScript Testprojekt erstellen

Nun wollen wir ein Testprojekt mit NativeScript erstellen, um unsere Umgebung zu testen. Für die Erstellung des Testprojektes nutzen wir das NativeScript CLI. Mit den folgenden Befehlen wird auf Basis des Templates tns-template-drawer-navigation-ts ein NativeScript-Projekt erzeugt und danach gebaut:

Erzeugung eines NativeScript Projekts unter macOS
$ tns create HelloWorld --template tns-template-drawer-navigation-ts
$ cd HelloWorld
$ tns build ios

Am Ende sollte die Ausgabe dann in etwa wie folgt aussehen:

...
Project successfully built.
The build result is located at: /Users/builduser/HelloWorld/platforms/ios/build/Debug-iphonesimulator/HelloWorld.app

NativeScript Playground

Zuletzt wollen wir das Ergebnis auch anfassen. Dazu stellen wir die App mittels NativeScript Playground mit dem folgenden Befehl auf unserem Smartphone bereit:

Preview der NativeScript Anwendung durch den NativeScript Playground
$ tns preview

Terminal wird daraufhin ein QR-Code angezeigt, der mit der NativeScript Playground App gescannt werden muss. Ein sehr hilfreiches Feature um auch ohne Mac schnell eine native iOS-App entwickeln zu können.

In der Datei app/home/home-page.xml kann nun in Zeile 27 der Text der Startseite angepasst werden. Solange die Playground-App auf dem Smartphone geöffnet ist, wird die App automatisch aktualisiert.

Nun ist unser System bereit für die Entwicklung und Bereitstellung von NatveScript-Apps für iOS. Im nächsten Artikel schauen wir uns an, wie das System als Runner in Gitlab registriert wird.




Zu den Themen NativeScript, Ansible und Angular bieten wir sowohl Beratung, Entwicklungsunterstützung als auch passende Schulungen an:

Auch für Ihren individuellen Bedarf können wir Workshops und Schulungen anbieten. Sprechen Sie uns gerne an.

  • Geschrieben von Thomas Kruse am 11. Juli 2019
Feedback oder Fragen zu einem Artikel - per Twitter @triondevelop oder E-Mail freuen wir uns auf eine Kontaktaufnahme!

Kategorien

Nach Jahr

Zur Desktop Version des Artikels