WebAPP
Einführung¶
Smartphones und Tablets, bzw. deren Apps sind die idealen Geräte zur Fernbedienung der "intelligenten Dinge"
Neben nativen Apps, welche für eine bestimmte Zielplattform geschrieben wurden, gibt es auch die Möglichkeit von Web-Apps (Webseiten).
Eine mobile Web-App verhält sich im Idealfall genau so wie eine native App, wird also vom Nutzer nicht wie eine Webseite wahrgenommen, sondern bietet stattdessen eine Benutzeroberfläche, die sich in das mobile Endgerät optisch und ergonomisch integriert.
Web-Apps werden, in der Regel, mittels HTML5 und JavaScript implementiert. Zur Vereinfachung der Programmierung stehen einen Reihe von Frameworks zur Verfügung.
PhoneGap¶
PhoneGap ist ein Framework zur Erstellung hybrider Applikationen für mobile Endgeräte.
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.
Um eine Webseite in eine Web-App umzuwandeln, wird diese um eine config.xml Datei ergänzt, als ZIP verpackt oder auf github.com hochgestellt und mittels des Cloud Builder von PhoneGap als App aufbereitet.
Links¶
Beispiel config.xml
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.phonegap.example"
version = "1.0.0"
versionCode = "10" >
<!-- versionCode is optional and Android only -->
<preference name="phonegap-version" value="3.5.0" />
<name>Sample Config.xml</name>
<description>
An example for phonegap build docs.
</description>
<author href="http://yoursite.com" email="you@youremail.com">
Your Name
</author>
</widget>
jQueryMobile¶
jQuery Mobile ist ein Touch-optimierte Web-Framework (auch als mobile Framework bezeichnet), genauer gesagt eine JavaScript-Bibliothek.
Die Entwicklung konzentriert sich auf die Schaffung eines Frameworks die mit einer Vielzahl von Smartphones und Tablet-Computer kompatibel ist.
Das jQuery Mobile Framework ist mit anderen mobilen App-Frameworks und Plattformen kompatibel, wie PhoneGap und vielen mehr.
Links¶
Beispiel aus Verzeichnis Web-APP im Zusammenspiel mit RPCHTTPServerVariable¶
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Marcel Bernet, Zuerich">
<title>mbed Web-App</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<form>
<div data-role="page" id="page-index" data-title="mbed App">
<div data-role="header" class="ui-header ui-bar-c">
<a href="#left-panel" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false">Menu</a>
<h1>mbed Web-App</h1>
<img src="./img/logo.png" width="30" class="ui-btn-right" />
</div>
<div data-role="content">
<div class="ui-field-contain">
<label for="led-1">LED 1</label>
<select name="led1" id="led1" data-role="slider">
<option value="Off">Off</option>
<option value="On">On</option>
</select>
</div>
<div class="ui-field-contain">
<label for="led-2">LED 2</label> <select name="led2" id="led2" data-role="slider">
<option value="Off">Off</option>
<option value="On">On</option>
</select>
</div>
<div class="ui-field-contain" id="servo1f">
<label for="servo-1">Servo 1:</label>
<input name="servo1" id="servo1" type="range" min="0" max="100" value="50">
</div>
</div>
</div>
<script type="text/javascript">
var server="http://192.168.178.63/rpc/";
$('select#led1').change(function()
{
var myswitch = $(this);
var name = myswitch[0].name;
var url = myswitch[0].selectedIndex == 1 ? server + name + '/write 1' : server + name + '/write 0';
$.get( url );
});
$('select#led2').change(function()
{
var myswitch = $(this);
var name = myswitch[0].name;
var url = myswitch[0].selectedIndex == 1 ? server + name + '/write 1' : server + name + '/write 0';
$.get( url );
});
$("#servo1f").on("slidestop", "#servo1", function(event)
{
var val = $(this).val() / 100.0;
$.get( server + 'servo1/write ' + val );
console.log( server + 'servo1/write ' + val );
});
</script>
</form>
</body>
</html>
Übungen¶
jQueryMobile¶
Ergänzt das jQueryMobile Beispiel um die Fehlenden Aktoren wie LED 3 und Servo 2.
Anwendung: Fernbedienung für ein "intelligentes Ding".
Hinweis: index.html direkt in IDE editieren und dann mittels rechter Maustaste Export File, lokal speichern und ausprobieren.
Import program2-09-01-Uebung
Ergänzt das jQueryMobile Beispiel um die Fehlenden Aktoren wie LED 3 und Servo 2.
Last commit 27 May 2015 by 
smd.iotkit2.ch
Zusammenfassung¶
Smartphones und Tablets, bzw. deren Apps sind die idealen Geräte zur Fernbedienung der "intelligenten Dinge"
Neben nativen Apps, welche für eine bestimmte Zielplattform geschrieben wurden, gibt es auch die Möglichkeit von '''Web-Apps (Webseiten)'''
Web-Apps werden, in der Regel, mittels '''HTML5 und JavaScript''' implementiert. Zur Vereinfachung der Programmierung stehen einen Reihe von Frameworks zur Verfügung. jQuery Mobile ist eines davon.
PhoneGap erzeugt aus Web-App native Apps für Smartphones und Tables.