Web-Apps plattformneutrale Entwicklung

.Net, Apache Cordova, Open Source Schlagwörter: , , , , 0 Kommentare

Unser Lego Portraits nach deiner Vorlage Projekt soll eine einfache App erhalten. Unsere Web-App soll die Kommuniation zwischen der integrierten Smartphone-Kamera und uns vereinfachen. In unserem Blog möchten wir in den nächsten Wochen den Weg zu der Web-App beschreiben.

Die ersten Schritte.

Wir haben in der Vergangenheit mit den unterschriedlichsten Werkzeugen bei der Gestaltung von unseren Kunden geholfen. Jetzt – für unsere eigene App – haben wir für eine plattformneutrale Entwicklung entschieden.

PhoneGap ist ein Framework zur Erstellung hybrider Applikationen für mobile Endgeräte. PhoneGap wurde ursprünglich von der Firma Nitobi produziert, welche 2011 von Adobe Systems gekauft wurde.

PhoneGap ermöglicht es, Anwendungssoftware für mobile Endgeräte mit JavaScript, HTML5 und CSS 3 zu schreiben, anstelle von gerätespezifischen Programmiersprachen wie Objective-C oder Java. Die dabei entstehenden Applikationen sind hybride Applikationen; sie sind weder native Applikationen, weil das Layout mittels Webtechnologien und nicht mit nativen User Interface Frameworks gemacht wird, noch sind sie webbasierte Applikationen, da sie als Apps über die Verkaufsportale der Betriebssystemhersteller verteilt werden können und auf die Programmierschnittstellen der Betriebssysteme der Endgeräte zugreifen können.

PhoneGap baut auf Apache Cordova auf welches von Adobe/Nitobi der Apache Software Foundation gespendet wurde. Apache Cordova hieß ursprünglich ebenfalls PhoneGap, musste aber aus rechtlichen Gründen umbenannt werden, da für Apache Projekte aus markenrechtlichen Gründen keine bereits belegten Namen verwendet werden dürfen. Es wurde zunächst Apache Callback genannt und später in Apache Cordova umbenannt. Bei Adobe Systems taucht es auch als Adobe PhoneGap und Adobe PhoneGap Build auf.

Mit der Umstellung auf Windows 10 und Visual Studio 2015 möchten wir diese Umgebung zukünftig für unsere Web-App Entwicklung verwenden.

Visual Studio 2015

Angeregt durch das Blog-Posting Targeting Windows 10 with your Apache Cordova app wollten wir uns die Entwicklungsumgebung einrichten. Es wird empfohlen, Visual Studio in der aktuellen Version zum Entwickeln von Apps mithilfe der Visual Studio Tools für Apache Cordova zu verwenden. Du kannst Visual Studio aus dem Microsoft Download Center herunterladen.

Visual Studio 2015

 

Mithilfe von Visual Studio-Tools für Apache Cordova kannst du plattformübergreifende Apps für iOS-, Android- und Windows-Geräte erstellen. Der leicht zu verwendende Installer gibt die richtigen Versionen der erforderlichen SDKs, Tools und Bibliotheken an, die zum Erstellen von Apache Cordova-Apps benötigt werden.

Du kannst Apps mithilfe der Tools für folgende Geräte und Plattformen erstellen:

• Android 2.3.3 und höher (4.4 bietet die beste Entwicklerumgebung)
• iOS 6, 7 und 8
• Windows 8 und 8.1
• Windows 10
 

Problem Lösung: Apache Cordova

Leider konnten wir die notwendigen Plugins für unsere Web-App nicht installieren. Wir erhielten auch keine Fehlermeldung. Lösungsweg
 
Wähle in der Menüleiste von Visual Studio Extras, Optionen aus.
 1. Wähle in der Menüleiste von Visual Studio Extras, Optionen aus.
 

Wähle im Dialogfeld Optionen die Optionen Tools für Apache Cordova und Cordova Tools aus.

Cordova Tools
 
Bei der Prüfung der Abhängigkeiten haben wir leider eine umfangreiche Fehleremldung erhalten. Wir haben Visual Studio-Tools für Apache Cordova gelöscht und neu installiert.

Nach dem Neustart des Rechners funktioniert die Entwicklungsumgebung.

Erstelle ein Cordova Projekt

Öffne Visual Studio und erstelle ein neues Projekt mit der Datei> Neu> Projekt-Menü und wähle die JavaScript> Apache Cordova Apps> Leere App-Vorlage, um ein neues Projekt zu erstellen Cordova.

Erstelle ein Cordova Projekt
 

Konfiguriere für die Zielplattform

In jedem Projekt ist eine Datei config.xml enthalten, welche die meisten App-Konfigurationen wie Anzeigename und Startseite der App enthält. Im Projektmappen-Explorer kannst du auf diese Datei doppelklicken, um sie im Configuration Designer einer Visual Studio-Schnittstelle für die Datei zu öffnen.

Configuration Designer
 

Die Cordova-CLI-Version

Du kannst den Konfigurations-Designer verwenden, um die im Projekt verwendete CLI-Version zu ändern. Wähle zum Ändern der Version die Registerkarte „Plattformen“, und gibt die Version an:

CLI-Version
 

https://github.com/apache/cordova-cli

Windows-Zielversion

Die in „Windows-Zielversion“ angezeigten Optionen richten sich danach, welches SDK installiert ist.

Windows-Zielversion
 

Projektmappen-Explorer im rechten Fensterbereich

res wird für plattformspezifische visuelle Objekte (Symbole und Begrüßungsbildschirme), Signaturzertifikate und (sofern erforderlich) plattformspezifische Konfigurationsdateien verwendet.

www wird für den App-Code verwendet.

config.xml enthält Konfigurationseinstellungen für die App.

In taco.json sind Projektmetadaten gespeichert.

Die Standard-Startseite für die App lautet www\index.html.

In Project_Readme.html sind Links zu nützlichen Informationen enthalten.

Projektmappen-Explorer im rechten Fensterbereich
 

Plugins

Plugins hinzufügen
 

Erstellen der Standard-App

Führe nach der Erstellung eines Projekts mithilfe der Standardvorlage einen Schnelltest aus, um die Installation und Einrichtung zu überprüfen. Bei diesem ersten Test führe die unveränderte leere App-Vorlage unter deinen Zielsystem aus. Wir verwenden hier Windows.

In der folgenden Abbildung ist die Windows Any CPU -Plattform dargestellt.

Projektmappenplattformen
 

Ausführen der Anwendung auf dem Windows Phone Emulator

Hierfür muss Hyper-V auf dem PC aktiviert sein. Der PC muss die Systemanforderungen für den Windows Phone-Emulator unterstützen.

Wähle einen der Emulatoren aus, z. B. Mobile Emulator 10.0.10240.0 WVGA 4 inch 1 GB.
 
Entwicklermodus aktivieren

 

Warnung

 

Ausführen der App im Windows Phone-Emulator

hallo_anwendung_ist_bereit
 

Surfen mit Edge im Windows Phone-Emulator

In der folgenden Abbildung ist unsere neue WebSite vom Fotostudio im Edge dargestellt.

Surfen im Emulator
 

Windows 10 -Emulator

windows_10

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Business Shooting

Mit dem visuellen Erscheinungsbild beginnt alles. Egal ob Du Freelancer, langjähriger Unternehmer oder Verantwortlicher eines Start-ups bist – Du musst nach außen kommunizieren, für welche Kompetenzen und Botschaften Du stehst.
Imagefördernde Fotos unterstützen ein Unternehmen dabei, sich erfolgreich und attraktiv zu präsentieren und damit neue Kunden anzusprechen.
Bei meiner Arbeit geht es mir sowohl um die ausdrucksstarke und kompetente Darstellung der Führungskräfte und Mitarbeiter als auch um die repräsentative Abbildung der Produkte.

Aktuell

Blog via E-Mail abonnieren

Gib Deine E-Mail-Adresse an, um diesen Blog zu abonnieren und Benachrichtigungen über neue Beiträge via E-Mail zu erhalten.