119. Go App oder vom PC-Subsprachengrammierer zum App-Amateur
Einleitung
Der Sternenhimmelstuermer wollte immer schon einmal Apps
erstellen...eine Demo-App mit Phone7.
Die Wahl des Sternenhimmelstuermers fiel auf Phonegap, da dort
wegen der
ausführlichen Dokumentation in englischer Sprache keine Wünsche
offen bleiben. Der Sternenhimmelstuermer hat schon den Anspruch, wieder
Code zusammenzutragen, damit es Ihnen leichter fällt, Anwendungen auf
jedem Betriebssystem zum Laufen zu bringen.
Ursprünglich wollte der Sternenhimmelstuermer mit Eclipse und Phonegap
arbeiten, aber nach Überschreitung eines selbst gestellten Zeitlimits,
dass der Sternenhimmelstuermer für seine Webseite erstellte, ist
Phonegap mit Android für ihn nicht tragbar. Bei der Version 4.2 von
Eclipse ging so ziemlich alles nach Setzung der Main activity Java schief. Am
Ende "zerschoss" der entnervte Sternenhimmelstuermer Eclipse und die
ganze Neuinstallation...
Bei Microsoft
Visual Studio 2010 Express konnte der Sternenhimmelstuermer innerhalb
von
wenigen Minuten eine Probeapp mit seinem grausam nicht angepassten Code zum Laufen bringen
und die Benutzeroberfläche von Microsoft Visual Studio 2010 Express ist dazu
deutsch. Nach dreißig Tagen ist übrigens eine Registrierung nötig -
Microsoft Visual Studio 2010 Express bleibt weiterhin kostenlos.
Android muss warten, bis ein Kumpel dem Sternenhimmelstuermer mehrere
Ungereimtheiten erklärt. Der Sternenhimmelstuermer stellt nur das auf
seiner Seite vor, was bei ihm funktioniert.
Im Spezialfall von Phonegap laufen die Anwendungen quasi in einem
unsichtbaren Browserfenster - ist also so etwas wie HTA - nur eben
diesmal mit HTML 5, Javascript und CSS.
Das auf jedem bekannten Smartphone. Ist quasi eine App, die eine
Serverumgebung simuliert, die Sie ohne Kenntnisse con C# , Java usw.
mit Content füllen.
Das besondere ist, dass Sie eben auf alle wichtigen Funktionen des
Handys zugreifen können - von der Kamera über Mediafiles bis zu
Geolocation - und das bei fast allen Smartphones.
Gleichzeitig bleibt Ihnen aber es nicht erspart die
Entwicklungsumgebung des Smartphones, sei es Android, Phone 7, I-Phone
oder Blackberry mit herunterzuladen. Also wäre die Aussage, dass
Phonegap eine übergreifende Standalloneanwendung ist also falsch.
Esmuss der Code für den Zugriff auf das Smartphone auf den jeweiligen Typ angepasst werden - Beispiel Windows Phone 7 Geolocation: Hier muss z. B. erstmal ins WPAppManifest.xml ein Eintrag im XML-Code vorgenommen werden wie
<Capabilities>
<Capability Name="ID_CAP_LOCATION" />
</Capabilities>
Erst danach kann ein Javascript in der Indexseite gestaltet werden. Bei Android müsste im plugins.xml und im AndroidManifest.xml
die Geolocation registriert werden. Die Beispieldateien der Indexseite
auf der o. a. Phonegapseite scheinen dann auf Android abgestimmt zu
sein. Die ID_Cap_location müsste dann
theoretisch in der Indexseite von Phone 7 auch verwendet werden, was
aus den Beispielcodes dieser Seite nicht unbedingt ersichtlich ist, der
eher auf Android abgestimmt ist...
Um es kurz zu machen: Für jedes Smartphone letztendlich anderer
angepasster Code - das ist nicht sehr plattformübergreifend. Genausogut
könnten Sie die native für jedes Smartphone lernen..., wenn da nicht
der Sternenhimmelstuermer wäre, der den Browser mit ein wenig
Javascript von der Index.Seite "hijacked" und Ihnen sämtliche Möglichkeiten zu einer webbasierten Lösung in Ihrem Webspace mit Möglichkeit der Weiterbearbeitung mit PHP anbieten würde...
Die nächsten zwei eben aufgeführten Abhandlungen beschäftigen sich mit
diesem Lösungsansatz, da Sie zum Abgreifen von z. B. den Geodaten nur
Html5 brauchen.
Der Sternenhimmelstuermer fängt in seinem pragmatischen Ansatz
gleich an, ohne viel überflüssige Theorie - Sie wollen ja schließlich
nicht die geniale HELLO WORD-Applikation schreiben, sondern gleich
loslegen.
Kurzeinstieg in Window Phone 7
als erstes führt Sie der Weg zum Download des SDK, dass folgende Komponenten enthält:
•Microsoft Visual Studio 2010 Express for Windows Phone
•Windows Phone Emulator
•Windows Phone SDK 7.1-Assemblys
•Silverlight 4 SDK und DRT
•Windows Phone SDK 7.1-Erweiterungen für XNA Game Studio 4.0
•Microsoft Expression Blend SDK für Windows Phone 7
•Microsoft Expression Blend SDK für Windows Phone OS 7.1
•WCF Data Services Client für Windows Phone
•Microsoft Advertising SDK für Windows Phone
Folgende Voraussetzungen sind zu beachten: Windows X86 (im Volksmund:
Windows 7 32) oder X64 , beide mit Service Update 2, 4 GB freier
Speicherplatz auf Festplatte und dem Willen, etwas neues zu lernen..
Dann wählen Sie deutsch
aus - eine englische Version wird unter einem
deutschen Betriebssystem auch nicht korrekt laufen. Dann laden Sie die
vm_web2.exe (ca 3,4 MB)
herunter und führen diese mit Adminrechten
(rechte Maustaste: Auswahl als Administrator ausführen) aus.
Nach Zustimmung der Lizenzbedingungen, die sich natürlich kein Mensch
durchliest, werden erstmal 677 MB heruntergeladen...
Das Installieren von PhoneGap gestaltet sich für Phone 7 relativ
einfach zuerst laden Sie die 26 MB große Zipp-Datei herunter.
Dann drücken Sie den behindertengerecht großen Button getting startet
und bekommen eine Auswahl von den Betriebssystemen als
ausführbaren
Link (mit IOS meinen die Wohl I-Phone...).
Wir nehmen erstmal Windowsphone.
Hier gibt es eine bebilderte englische Anleitung und zwei Links für ein
Einführungsvideo.
Dann wird die Zip-Datei in den Pfad: My Documents\Visual Studio
2010\Templates\ProjectTemplates verschoben (Das ist der Pfad der
Bibliotheken; für deutsche User am einfachsten start - Dokumente (je
nach dem, wie Sie ihre Dokumente gespeichert haben, beim
Sternenhimmelstuermer ist das Laufwerk D:\ ) und dann den Rest
des o. a. Pfades.
Nach Öffnung von
Microsoft Visual Studio 2010 Express ein neues Projekt geöffnet.
Dann müssen Sie evtl. im linken Fenster von Microsoft Visual Studio
2010 Express auswählen
und sehen nun theoretisch im mittleren Fenster Cordoba, eben nicht wie im
Bild
angegeben Phonegap.
So viel zur Theorie und nun zur Praxis, wo die Übernahme des Templates
ein Krampf war:
Denn die Ladung von Cordoba funktionierte erstmal beim
Sternenhimmelstuermer nicht. Also kopierte er die ZIP-Datei in den
Unterordner C## und entpackte dort auch Cordoba. Dann öffnete er
schließlich ein Leeres Projekt, wählte im Suchfeld Phonegap,
wählte nochmals ein neues Projekt und Visual Studio erbarmte sich
und bot diesmal Cordoba an.
Welche der o. a. Maßnahmen letztlich zum Erfolg führte, ist dem
Sternenhimmelstuermer ziemlich egal...
Danach sehen Sie auf der rechten Seite eine Ordnerhierarchie. Der
Ordner www ist ihre
Spielwiese. Sie erinnern sich? Phonegap ist eine
Browserapplication und ihr Server heißt Cordoba. Stellen Sie sich vor,
Sie wären in Filezilla (FTP-Programm). Der Ordner www entspricht ihrer
Domäne und siehe da, tatsächlich liegt da auch schon ein Index.html.
Des weiteren eine Master css und ein Javascript.
Die index.html klicken
Sie an und der Inhalt wird ihnen im "Editor" angezeigt.
Schauen Sie sich doch einmal den Inhalt auf dem virtuellen Windowsphone
an: Drücken Sie dazu den grünen Pfeil neben dem ersten oberen Fenster.
Das Windowsphone wird geladen, die Cordoba App
geöffnet und der Text der Indexseite "Hello Cordoba" geladen.
Dann können Sie die Indexseite mal komplett entmüllen (löschen) und aus
Spaß
einen Haushaltsstellenfinder
vom Sternenhimmelstuermer einbauen. Ist
jetzt ein saumäßiger Code, aber eine App in 20 Sekunden ist doch nicht
schlecht?
<!DOCTYPE HTML>
<HTML>
<head>
<meta name="viewport"
content="width=device-width, height=device-height, initial-scale=1.0,
maximum-scale=1.0, user-scalable=yes;" />
<title>Employee Directory</title>
<link rel="stylesheet" href="master.css" />
<script type="text/javascript">
document.addEventListener("deviceready",onDeviceReady,false);
// once the device ready event fires, you can safely do your thing! -jm
function onDeviceReady()
{
document.getElementById("welcomeMsg").innerHTML += "Cordova is ready!
version=" + window.device.cordova;
console.log("onDeviceReady. You should see this message in Visual Studio's output window.");
}
</script>
</head>
<body style="color: rgb(255, 255, 255); background-color:
rgb(0, 0, 0);" alink="#ff0000" link="#ffff00" vlink="#990099">
<div>
<script type='text/javascript'>
<!--
function titelfinder( ) {
location.href="http://bund.offenerhaushalt.de/" + document.nummer.haushaltsstellennummer.value + ".html";
}
//-->
</script>
<form name="nummer" action="javascript:titelfinder();">
Bitte geben Sie ohne
Trennzeichen die Haushaltsstelle so weit bekannt ein (Einzelplan: mit
zwei Stellen; Einzelplan und
Kapitelnummer: 4 Stellen;
Einzelplan, Haushaltsstelle und Titelnummer mit 9 Stellen und
Bindestrich mit folgenden drei Nummern):
<input type="text" name="haushaltsstellennummer" size="20"></input>
<input type="button" style="font-family: Verdana; font-size: 20px"
value="Haushaltsstellensuche" onclick="titelfinder()" name="button"></input>
</form>
</div>
</body>
</HTML>
Ach ja, in das Input-Feld der o. a. Anwendung geben Sie z. B. 11 ein.
Dann den Button Haushaltsstellensuche drücken und der integrierte
Browser der Emulationssoftware zeigt Ihnen dann die entsprechende
Behörde an.
Ist eine safe Adresse. Da können Sie dann gerne betrachten, wie Ihre
Steuergelder so verwendet werden...Richtig, die Emulationssoftware ist
voll internetfähig und eigentlich nur ihre Firewall kann dann
dazwischenfunken...
Ist jetzt einfach unformatierter Code mit Fehlern, die im Debugger
angezeigt
werden. Was ist ein Debugger? Vor dem Starten der
Virtualisierungsmaschine mit dem grünen Pfeil gehen Sie ins Menü
Debuggen und im Dropdownmenü Debugging starten auswählen. Sie haben die
Phone 7 - Emulation bereits gestartet? Dann schließen und im
Debugging-Modus wieder öffnen.
Dann wird Ihnen alles unterstrichen, was von der Syntax in der gerade
geöffneten Seite so falsch ist - wusste ich auch so...Die normale
Index-Seite ist mit UTF 8
codiert. Ob man nicht besser unter
Berücksichtigung dieses Codes weitere Seiten einbindet, wird noch
ausprobiert.
Ist alles nur Spielerei. Im Prinzip könnte man auch die eigene Webseite
einbauen, wenn man wie der Sternenhimmelstuermer in weiser Voraussicht
in HTML und Javascript schreibt: Javascript ist die Web-Zukunft...
Nicht alles ist portierbar und es dürfte vernünftiger sein Javascript
und HTML wie CSS zu trennen. In dem Beispielcode wurde fast nichts
angepasst:
<!DOCTYPE HTML> ist
für die Verwendung von html5 eigentlich Pflicht...
<link rel="stylesheet"
href="master.css" /> Das ist die Adresse zum ursprünglichen
Master.css, stark anpassungsbedürftig -:)
<meta name="viewport"
content="width=device-width, height=device-height, initial-scale=1.0,
maximum-scale=1.0, user-scalable=yes;" /> ist zur korrekten Darstellung unerlässlich - wird in der vorlage automatisch generiert -:)
Nachtrag 23.07.2012 Das Script wurde ein wenig angepasst und sieht jetzt vernünftig aus. Die Begeisterung ist ungebrochen...
So, wie man Javascript, css und html anwendet, sollten Sie wissen, wenn
Sie eine Homepage betreiben. Nichts kann Sie jetzt daran hindern
Unterordner aufzubauen, Kleine Webseiten zu erstellen und Sie als App
freizugeben.
Wie man Phonegap für Microsoft Visual Studio 2010 Express
Betriebsbereit macht, wissen
Sie jetzt. Der Sternenhimmelstuermer verweist auf PC-Magazin
8/2012, wo auf den Seiten 106 - 110 unter der Subüberschrift Apps
für Windows Phone entwickeln, dass SDK, erste Schritte mit C#,
Vermarktung und viele andere hilfreiche Links drin stehen.
Die arbeiten allein mit C# und dem SDK - hey, dass geht auch mit dem
leichteren VB.
Phonegap ist leichter und hat eine der best dokumentierten Javascript-Bibliothek
von Befehlen im Web (in Javascript, natürlich nur mit Phonegap
ausführbar!), mit denen Sie auf sämtliche Funktionen der Smartphones
Zugriff
haben. Hinter dem Projekt steht auch Adobe - es dürfte weitergeführt
werden.
Eine Alternative, für Menschen, die PHP können, nicht mehrere
Programmiersprachen lernen wollen, ist das Projekt Titanium, dass
die Befehle für die Smartphones in die native Sprache übersetzt.
Der Sternenhimmelstuermer könnte bereits über 50 Anwendungen allein mit
dem Inhalt seiner Webseite in Phonegap kreieren ...Wahnsinn!
Natürlich wird es mal Anwendungen vom Sternenhimmelstuermer geben, aber
das hat Zeit. Erstmal ein wenig alles antesten und die Befehle hier
öffentlich aufschreiben - die Sternenhimmelstuermerseite ist ja
bekanntlich das öffentliche Tagebuch vom Autor, wovon die User nicht
unerheblich profitieren...
Fazit
In der Microsoft-Welt haben Sie mit Phonegap kein Problem. Der
Sternenhimmelstuermer testete mehrere Tage Phonegap unter Android, aber
die Beschreibungen sind fehlerhaft und der Sternenhimmelstuermer konnte
mit Eclipse und Phonegap nichts vernünftig zum Laufen bringen. Am Ende
"zerschrotete" er eclipse ausversehen beim Experimentieren und eine Neuinstallation ist auf einige Zeit
nicht in Sicht.
Der Wille war da, aber gerade die einfach strukturierte deutsche
Bedienoberfläche von Microsoft Visual 2010 Express, Visual Basic oder C#
als
Laufzeitumgebung, sind für einen Anfänger die leichtere Wahl für ein Einstieg für Phonegap.
Nachwort zu Android und Eclipse: Manchmal verirren sich ja Androidfans auf diese Seite, daher Mal so eine Frage ins blaue:
Bei App.Java in der Gebrauchsanleitung stehen
scheinbar andere Einträge als bei Eclipse 4.2 vor der Änderung. Nach
dem Ändern der Datei sind sämtliche wichtigen Ordnerhierarchiepfade
(src, lib usw. in Eclipse mit Kreuzchen (Fehlermeldungen belegt). Das
Ignorieren und Weiterbearbeiten bringt nichts. Leider sind bei eclipse
4.2 schon im Assistenten im Start Änderungen. Das heißt dann
ursprümglich mainactivity, kann man natürlich umändern...Wenn
jemand eine Lösungsmöglichkeit hätte, oder einen Link, auf den
der Sternenhimmelstuermer verweisen kann, dann bitte unter dem
Impressum melden...
(Adresse muss da nicht eingetragen werden, geht auch anonym - gehört aber als Option für den Sternenhimmelstuermer dazu...)
Dann geht beim Sternenhimmelstuermer auch nicht das Probeprojekt zu
laden: Quasi nichts geht, Pfade und Ordner werden nicht
erkannt...Ordnerhierarchien werden mit Kreuzchen angezeigt...Nachtrag:
Nach Anpassung von Pfaden werden die Fehler weniger - jetzt meldet
Eclipse, dass die Projektpfade nicht in Gebrauch sind...
Lesen Sie auch den Artikel: Redirect: mit ein wenig Schummel steht unter Phonegap Ihnen die ganze Webwelt offen
Haftungsausschluss - Das verwenden von Tipps oder Software auf dieser Seite auf eigene Gefahr.