PHPGangsta - Der praktische PHP Blog

PHP Blog von PHPGangsta


Mit TideSDK und Webtechniken können wir Desktop-Applikationen bauen!

with 10 comments

Was Phonegap für Handys ist, ist TideSDK für den Desktop: Mit Hilfe von Webtechniken plattformübergreifende Applikationen bauen. Der Softwareanbieter Appcelerator hat TideSDK open-sourced und es an die Community übergeben, um sich auf die mobile Titanium-Plattform zu konzentrieren.

Mit TideSDK kann man Apps bauen, die zur Darstellung der Oberfläche HTML, CSS und Javascript nutzen, und im „Backend“ entweder Python, Ruby oder PHP die komplizierteren Aufgaben erledigt. Innerhalb kurzer Zeit lassen sich damit von vielen Entwicklern Desktops-Applikationen bauen, die performancetechnisch natürlich nicht vorn mitspielen können, aber in vielen Fällen ausreichend sind.

Schauen wir uns ein kurzes Beispiel an. Wir installieren das TideSDK wie im User Guide beschrieben an die passende Stelle. Nach der Installation von TideSDK Developer erhalten wir eine leere Entwicklungsumgebung:

TideSDK_Developer

Nach einem Klick auf „New Project“ füllen wir die Basisdaten für unsere erste App aus:

TideSDK_Developer_create_project

Nach dem Klick auf „Create Project“ erhalten wir ein paar Dateien im angegebenen Verzeichnis, die wir nachher bearbeiten werden. Doch zuerst wollen wir das neue, leere Projekt einmal starten. Dazu auf „Test & Package“ klicken und dann „Launch App“

TideSDK_Developer_launch

TideSDK_Developer_started

Und schon läuft die erste plattformübergreifende Desktop-Applikation!

Doch wir wollen nun etwas komplizierteres als statischen Inhalt darstellen. Dann mal los, wir nutzen natürlich PHP als Backendsprache. Es gibt mehrere Wege, PHP anzusprechen und zu nutzen, eine ist das Laden von separaten PHP-Dateien, aber auch das direkte Einbetten in den HTML-Code ist möglich. Für den ersten Test nutzen wir letzteres, und bauen eine kleine phpinfo() Ausgabe:

TideSDK_Developer_phpinfo

Nach einem Klick auf „Launch App“ erhalten wir das gewünschte Ergebnis:

TideSDK_Developer_phpinfo_output

Erste wichtige Info: Wir haben PHP 5.3.1 zur Verfügung.

Für das zweite Beispiel trauen wir uns etwas weiter raus und nutzen die PDO-MySQL-Funktionen, und diesmal lagern wir den PHP-Code in eine externe Datei aus, da ich gern Syntax-Highlighting und Autocompletion etc. in PHPStorm nutzen möchte. In die index.html schreiben wir folgendes:

<html>
<head>
    <script type="text/php" src="app.php"></script>
</head>
<body>
    <button onclick="fetch_data();">Fetch Data</button>

    <div id="data"></div>
</body>
</html>

Und die dazugehörige app.php sieht dann so aus:

<?php
function fetch_data() {
    global $document, $window;
    $document->getElementById("data")->innerHTML = '<span style="color:green">Fetching...</span>';

    $fn = function() {
        global $document, $window;

        try {
            $dbh = new PDO('mysql:dbname=test;host=127.0.0.1', 'root', '');

            $sql = 'SELECT Username FROM users WHERE UserId = :id';
            $sth = $dbh->prepare($sql);
            $sth->execute(array(':id' => 1));
            $result = $sth->fetch(PDO::FETCH_ASSOC);

            $document->getElementById("data")->innerHTML = 'Username: '.$result['Username'];
        } catch (Exception $e) {
            $window->alert($e->getMessage());
        }
    };

    $window->setTimeout($fn, 500);
}

Was hier nun passiert ist klar: Wir erhalten nach dem Start eine leere Fläche mit nur einem Button. Beim Klick darauf startet die PHP-Funktion, die zuerst in grün unter den Button „Fetching…“ schreibt und dann kurze Zeit später von einem MySQL-Server einen Wert abruft und ausgibt.

TideSDK_Developer_mysql

Mit HTML, Bildern und CSS kann man schöne Oberflächen bauen, mit Javascript und einer der Backend-Sprachen verleiht man dem ganzen noch Funktionalität, und schon hat man die erste plattformübergreifende Applikation fertig.

Weitere Ressourcen zum Thema PHP in TideSDK:

https://github.com/TideSDK/TideSDK/wiki/Using-TideSDK-with-PHP

https://github.com/TideSDK/TideSDK-Examples/tree/master/PHPMySQLDemo

https://github.com/TideSDK/TideSDK-HelloWorld

Written by Michael Kliewe

April 5th, 2013 at 10:45 am

10 Responses to 'Mit TideSDK und Webtechniken können wir Desktop-Applikationen bauen!'

Subscribe to comments with RSS or TrackBack to 'Mit TideSDK und Webtechniken können wir Desktop-Applikationen bauen!'.

  1. Hi Michael, danke für die Vorstellung dieses Tools. Was mich interessieren würde: Was muss ich beim Deployment alles mitgeben und was wird da zusammengelinkt und -compiliert? Erhalte ich eine .exe am Ende? Was muss noch alles mitgegeben werden (tonnenweise .dll’s)?

    Sascha Presnac

    5 Apr 13 at 10:55

  2. Servus,

    oh man, da werden sich ja sicher einige Hobbyentwickler freuen. Endlich (mal wieder) PHP auf dem Desktop. Halte ich persönlich nicht so viel von. Was mich aber hier besonders verwundert ist die Deklination von Funktionen etc. Wirkt (optisch) auf mich so, als ob man die Javascript-Engine aufgebohrt hätte und dort die entsprechenden PHP-Features hinterlegt hat. Hat mal jemand einen Blick unter die Haube gewagt und kann dazu mehr sagen?

    Wahrscheinlich wird beim Export die gesamte Bibliothek in der ausführbaren Datei hinterlegt. Wie groß ist denn nachher dein lauffähiges „Hello World“ gewesen?

    MrPepperwood

    5 Apr 13 at 12:17

  3. @Sascha + Sebastian: Ich habe nur einmal auf „Package“ gedrückt, da kam dann soweit ich mich erinnere eine HelloWorld.exe + ein paar andere Dateien bei raus, und auch ein Installer a la setup.exe lag da rum. Aber habe mir das nicht genauer angeschaut sondern immer nur mit „Launch App“ gearbeitet. Am besten probiert ihr es eben selbst aus, beide Sachen downloaden, SDK entpacken, Developer installieren, „New Project“, 5 Sachen eingeben, und „Package“ drücken.

    @Sebastian: Im MySQL-Beispiel oben wurde das gemacht um das User Interface nicht zu blockieren wenn der SQL-Query mal länger dauert, deshalb ist das via setTimeout() entkoppelt.

    Michael Kliewe

    5 Apr 13 at 12:25

  4. Unter Ubuntu scheint es nicht wirklich zu funktionieren, zumindest bekomme ich seltsame (undokumentierte) Fehler angezeigt. Naja, ich hab mal ’nen Bugreport gemacht. 🙂

    Oliver

    5 Apr 13 at 13:29

  5. Also ich habe mal probiert. Sämtliche Dateien sind einzeln im Ressource Ordner, d. h. man hat keine Möglichkeiten, diese gegen Änderungen zu schützen. Man macht also alles (unfreiwillig) OpenSource.

    Das Packaging erzeugt eine ausführbare Datei plus eine manifest Datei plus eine xml Datei. Zusätzlich gibt es dutzende Module. Das Deployment ist also durchaus umständlich. Selbst die kleinste mögliche Demodatei ist also schon 68 MB groß, weil alle Libraries mit geliefert werden. Man kann die wohl raus sortieren, aber komfortabel ist das nicht.

    Ich war ja am Anfange interessiert, aber nach dem Hintergrund bleib ich glaub ich doch lieber bei QT.

    Oliver

    5 Apr 13 at 16:55

  6. @Michael: Hatte mich im ersten Augenblick nur sehr verwirrt. Hab ich so halt noch nie gesehen.

    @Oliver: Fast 70 MB sind schon eine Hausmarke. Kann es zZ nicht testen. Aber wenn es nicht eine bequeme Möglichkeit gibt die Libraries auszusortieren, kann ich mir nicht vorstellen dass es zu einer großen Verbreitung kommt.

    MrPepperwood

    5 Apr 13 at 17:41

  7. 70MB? Wow, da bleibe ich doch lieber bei C# oder Delphi, da habe ich nur wenige Kilobyte. Kommt vor allem beim Updaten zu tragen.

    Sascha Presnac

    5 Apr 13 at 18:04

  8. Mit PHP sind es unter Linux 93 MB. Allerdings ist das auch völlig unoptimiert und mit allen Klassen.

    Oliver

    5 Apr 13 at 20:25

  9. Uh.. oh.. 93MB für ein Hello World?

    Da brauchst nicht mehr mit optimieren anfangen.

    Das „SDK“ scheint mir eher ein Spielzeug zu sein. Und zwar eines, was das Zeug haben wird noch mehr schlechten Code in die Welt zu spülen, als ohnehin schon herum schwirrt.

    beko

    8 Apr 13 at 09:43

  10. Ja toll und was soll man dann programmieren mit PHP, ist doch alles da, was man für den Desktop braucht, oder?

    Porto1988

    27 Mai 13 at 14:19

Leave a Reply

You can add images to your comment by clicking here.