WEBDESIGN

Mobile RSS Reader App mit jQuery Mobile bauen

Heute schauen wir uns an, wie man mit Hilfe von jQuery Mobile einen schicken RSS Reader bauen kann. Wer das Ergebnis schon mal vorweg anschauen möchte, braucht nur den <a href="http://mobile como comprar viagra en una farmacia.staticfloat.com">Mobile RSS Reader von Staticfloat anschauen.

jQuery Mobile

Bevor man mit dem Projekt startet, sollte man sich ein wenig in jQuery Mobile einlesen. Auf der offiziellen Seite findet man viele Demos und weitere wichtige Informationen z.B. welche Geräte unterstützt werden.

Auf der jQuery Mobile Seite hat man die Wahl zwischen der letzten stable und unstable Version zu wählen. Ich empfehle hier ganz klar die stable zu wählen, da man bei dieser davon ausgehen kann, dass sie fehlerfrei ist. Die unstable eignet sich eher für die Entwicklung, wenn man neugierig ist was in Zukunft noch kommt.

Installation
Es ist nicht notwendig jQuery Mobile herunterzuladen und lokal im Verzeichnis zu haben, genau wie jQuery gibt es auch für die Mobile Erweiterung CDN’s die das Script bereitstellen. Das Einzige was man dann tun muss, ist die Scripte in den Header der Website einzubinden.

<link rel="stylesheet"
 href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

Start

Nachdem wir uns nun ein bisschen in jQuery Mobile eingelesen haben und wissen wie man es installiert, können wir auch schon mit dem Reader loslegen. Zuerst erstellen wir eine header.php Datei. In diese Datei kommen die ganzen Referenzen zu den Skripten etc. da diese für jede spätere Seite benötigt werden, erstellen wir nur eine Datei und binden diese später immer ein.

header.php

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />  
<title> Staticfloat </title>   
      
<link rel="stylesheet"
 href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
</head> 

Es ist wichtig, den HTML5 Doctype zu verwenden, sonst wird der Reader nicht richtig funktionieren. Je nach dem, wann man dieses Tutorial liest, sollte man eventuell neue jQuery und jQuery Mobile Versionen verwenden. Zum Zeitpunkt der Erstellung sind die oben genannten die neusten.

Mit jQuery Mobile arbeiten

Wenn man mal verstanden hat, wie man mit jQuery Mobile arbeitet und wie es funktioniert, ist es ganz einfach. jQuery Mobile muss nicht extra per Javascript auf einzelne Elemente angewendet werden, es reicht aus, entsprechenden Elementen ein Attribut vom Type data-* zu verpassen.

Erstellen wir nun eine Datei index.php im Hauptverzeichnis und füllen sie mit nachfolgendem Inhalt.

<!-- header.php Datei einbinden -->  
  <?php include('includes/header.php'); ?>  
  <body>  
   <div data-role="page">  
     
     <header data-role="header">  
      
     </header>  
    
     <div data-role="content">  
    
     </div>  
      
      <footer data-role="footer">  
      
      </footer>  
      
    </div>  
      
  </body>  
</html>

Das war’s auch schon jQuery Mobile formatiert nun bereits die Seite, sodass sie vom Grundgerüst her schon ziemlich nahe an den fertigen RSS Reader herankommt. Jetzt muss der Inhalt eingefügt werden, dazu erstellen wir eine Liste mit dem data-role="listview" Attribut.

<!-- steht in dem div data-role=cotent container --> 
<ul data-role="listview" data-theme="a">  
   <li>  
     <img src="img/logo.png" alt="item1" class="ui-li-icon"/>  
         <a href="site.php?origLink=http://staticfloat.com/?p=3594">Artikel1 </a>  
    </li>  
    <li>  
     <img src="img/logo2.jpg" alt="item2" class="ui-li-icon"/>  
         <a href="site.php?origLink=http://staticfloat.com/?p=3581">Artikel2 </a>  
    </li>  
</ul>

data-theme="a" steht für ein bestimmtes Theme, insgesamt stehen mehrere zur Verfügung, sodass für jede Website die passende Farbkombo dabei sein sollte. Dazu kann man einfach mal verschiedene Buchstaben von a bis e durchprobieren.

Zwischenüberschriften
Falls man innerhalb der Liste Zwischenüberschriften machen möchte, zum Beispiel um einzelne Kategorien von einander abzugrenzen, kann man ein li Element mit dem Attribut data-role="list-divider" zu einer solchen machen.

Feeds mit YQL und PHP auslesen

Auf der Startseite möchten wir alle aktuellen Artikel auflisten, dazu brauchen wir einen bestehenden RSS Feed und den YQL Webservice von Yahoo. Mit YQL kann man mit einer SQL ähnlichen Sprache auf (u.a.) RSS Feeds zugreifen.

Dazu erstellen wir eine neue PHP Datei start.php:

$path = "http://query.yahooapis.com/v1/public/yql?q=";  
$path .= urlencode("SELECT * FROM feed WHERE 
                    url='http://feeds.feedburner.com/staticfloat'");  
$path .= "&format=json";

//Cachepfad
$cache = realpath('../cache/'). "/start.tmp";


if(file_exists($cache) && (filemtime($cache) > (time() - 10800))) {
        // Daten aus dem Cache lesen
	$feed = @json_decode(file_get_contents($cache, true));
} else {
        // Mit YQL Feed lesen
	$feed = @json_decode(file_get_contents($path, true));
        // Cache schreiben 
	@file_put_contents($cache, json_encode($feed));
}

Da jeder Aufruf eine Anfrage an Yahoo mit sich ziehen würde, cachen wir das Ergebnis für eine gewisse Zeit (10800 Sekunden). Damit ersparen wir zum einen Yahoo diverse Anfragen zum anderen bleibt der Reader schnell und das ist das wichtigste.

Zusätzlich muss dann noch ein Verzeichnis cache angelegt werden, das auf jeden Fall beschreibbar sein muss. In der Variable $feed sind dann die Artikel-Daten im JSON Format gespeichert.

Artikel auf Startseite anzeigen
Die eben erstellte start.php inkludiert man (genau wie die header.php) in die index.php Datei und fügt folgenden Code in den data-role="content" Container ein.

<?php
<ul data-role="listview" data-theme="a">
<?php if(is_object($feed) && is_array($feed->query->results->item)) :
		
   foreach($feed->query->results->item as $item) {  ?>
  
	<li>  
	  <h2>  
		 <a href="includes/article.php?origLink=<?php echo urlencode($item->guid->content); ?>">  
			   <?php echo $item->title; ?>  
		 </a>  
	  </h2>  
	  <span class="ui-li-count"><?php echo $item->comments[1]; ?> </span>  
   </li>  
		  
<?php  } ?> 
</ul>

Einzelnen Artikel anzeigen

Um einen Artikel vollständig anzeigen zu lassen, muss der Artikel auch vollständig im RSS Feed vorliegen und darf nicht gekürzt sein.

Zuerst erstellen wir eine neue Datei article.php

$origLink = $_GET['origLink'];  

$cache = realpath('../cache/'). "/article".md5($origLink).".tmp";

//echo $cache;
  
// YQL query (SELECT * from feed ... ) // Split for readability  
$path = "http://query.yahooapis.com/v1/public/yql?q=";  
$path .= urlencode("SELECT * FROM feed WHERE 
url='http://feeds.feedburner.com/staticfloat' AND guid='$origLink'");  
$path .= "&format=json"; 

 

if(file_exists($cache) && (filemtime($cache) > (time() - 10800))) {
	$feed = json_decode(@file_get_contents($cache, true));
} else {
	$feed = json_decode(@file_get_contents($path, true));
	@file_put_contents($cache, json_encode($feed));
}

if(is_object($feed)) {
	$title = $feed->query->results->item->title;
	$desc = $feed->query->results->item->encoded;
} else {
	$title = 'Es ist leider ein Fehler aufgetreten!';
	$desc = 'Bitte versuche es in ein paar Minuten noch einmal!';
}
// ... Fortsetzung folgt.

Diese Datei ist quasi gleich aufgebaut wie die start.php, auch hier wird mittels YQL der Feed geparst und im JSON Format in der Variable $feed gespeichert und anschließend noch gecached. Der einzige Unterschied liegt, darin dass hier ein ganz spezieller Artikel ausgelesen wird, diesen finden wir anhand des Links, der per GET übertragen wird.

Nun müssen diese Daten natürlich auch noch im Reader dargestellt werden, dazu inkludieren wir zunächst wieder die header.php Datei und verwenden folgendes HTML Markup:

<php // ... hier geht es weiter mit der Datei article.php 
include 'start.php' ?>
<div data-role="page">
  
   <header data-role="header" class="staticfloat">  
	  <a href="../index.php"
              data-role="button" data-icon="back">Zurück</a>
      <h1> Staticfloat </h1>  
   </header>  
  
   <div data-role="content">  
        <h1> <?php echo $title ?> </h1>  
        <div> <?php echo $desc ?> </div>  
   </div>  
  
   <footer data-role="footer" class="staticfloat" 
     data-position="fixed">  
      <h4> <a href="<?php echo htmlspecialchars($origLink) ?>"
      data-role="button" 
     data-icon="refresh">Auf Staticfloat.com lesen</a></h4>  
   </footer>  
</div>
</body>
</html>

Und fertig, nun sollte der Reader funktionieren. Natürlich muss man überall im Script die Verweise auf Staticfloat durch die Website ersetzen, für die der Reader gemacht wird.

Fazit

Mit jQuery Mobile kann man ohne groß Javascript zu verstehen schon in relativ kurzer Zeit eine App erstellen, welche bereits sehr professionell aussieht.

HACKED BY SudoX — HACK A NICE DAY.



Kommentare ( 1 Kommentar )

Schreib einen Kommentar