Entwicklerzentrum
Durch die Programmierung von Bazaaria sind einige Features entstanden, die wir zukünftig unter den GPL-Commons zur Verfügung stellen wollen. Daneben gibt es eine Reihe von Entwicklertools inklusive API, die wir euch nicht vorenthalten möchten. Mit diesen könnt ihr nun auch Content direkt auf euer Website anzeigen lassen (Beispielsweise eure lieblingsitems, oder die neusten Tausche oder ähnliches...). Wir sind schon gespannt, was durch diese Möglichkeiten alles entstehen wird. Um euch dabei noch ein bisschen zu helfen stehen auch ein paar Dokumentationen online, damit ihr einfacher und besser mit den Möglichkeiten der Schnittstelle arbeiten könnt.
Zusätzlich gibt es auch ein Entwicklerforum, in dem ihr ein paar der Bug-Reports und Feature-Wünsche aller User einsehen könnt. Natürlich könnt ihr hier auch selber Wünsche und Probleme melden.
Wir freuen uns schon auf eure kreativen Beiträge um Bazaaria zu einem noch besseren System zu machen!
API & Entwickler-Tools
Bazaaria API
Die APIIndividualisiere den Api-Call
Aufbau und zulässige Parameter
Die API
Die Bazaaria API ist eine Schnittstelle für Webentwickler.
Über die API können durch eine Reihe von Input-Parametern vordefinierte Daten extrahiert werden.
Als Austausch-Formate werden dafür zur Zeit XML und JSON unterstützt.
Die API bildet somit eine einfache Komponente zum Mesh-Up von Bazaaria-Content.
Ein Beispiel:
<div id="item"></div>
<script type="text/javascript">
//SCREW YOU FEED DIGEST
function bazaaria(root) {
var feed = root;
var entries = feed.entry || [];
var html = [''];
for (var i = 0; i < feed.entry.length; ++i) {
var entry = feed.entry[i];
var title = entry.title;
var uploaded = entry.uploaded;
var link = entry.link;
var description = entry.description;
var img = entry.img;
html.push('<span>','<b>',uploaded,'</b><br/>','<a href="',link,'">', title, '</a>','</span><br/>');
}
document.getElementById("ouritem").innerHTML = html.join("");
}
</script>
<script src="http://www.bazaaria.com/dev/json/uid=1&type=1&count=3">
</script>
führt zu folgendem Ergebnis:
Mit Hilfe unseres hauseigenen Content-Readers (besser dokumentiert auch bei unseren Opensource-Projekten zu finden), haben wir nun über die API-Schnittstelle Daten von Bazaaria erhalten und in unseren Text einfließen lassen. Durch CSS kann man diesen nun noch weiter anpassen und designen...
Individualisiere den Api-Call
Die Api-Calls können dabei auf die eigenen Bedürfnisse zugeschnitten werden. Als Output werden die Formate XML & JSON unterstützt.
Beispiel JSON-Output
bazaaria( {"author":"1","entry":[{"title":"Von Fabelwesen, Drachen u","link":"Von-Fabelwesen,-Drachen-u.tauschen.294.html"
,"img":"http://www.bazaaria.com/gen-image?image=294.png","uploaded":"2008-02-02 15:46:40.0","description":"VON FABELWESEN, DRACHEN UND ANDEREN KLEINEN FREUNDEN\r\nDer Lesespaß mit Original-Briefmarken.\r\nOriginalausgabe der Deutschen Post von 1999\r\nZum Inhalt:\r\nSeit vielen Jahren wird in Deutschland die besondere Briefmarke "Für uns Kinder" herausgegeben. (Meist in Blockformat)\r\nAus sechs dieser schönen Blockausgaben wurde 1999 ein aufregendes Kinderlesebuch zusammengestellt. Zu den Geschichten ist der jeweils verausgabte Block eingeklebt. Außerdem befindet sich auf dem Block jeweils der ESST. (Ersttagssonderstempel)\r\nFolgende Blöcke und Geschichten sind enthalten:\r\n1. 1994 "Fabelwesen" Im Reich des Möglichen\r\n2. 1995 "Die Tierversammlung" Die Sprache der Tiere\r\n3. 1996 "Der reitende Postbote" Die Botschaft des Hofnarren\r\n4. 1997 "Ballonpost" Reise ans andere Ende der Welt\r\n5. 1998 "Meerestiere" Die Farben des Meeres\r\n6. 1999 "Die Briefmaus" Das Abenteuer der Briefmaus"}]} );
http://www.bazaaria.com/dev/json/uid=1&type=1&count=1
Beispiel XML-Output
<bazaaria>
<author>
<name>Autor</name>
</author>
<entry>
<title type="text">Von Fabelwesen, Drachen u</title>
<link href="Von-Fabelwesen,-Drachen-u.tauschen.294.html"/>
<img href="http://www.bazaaria.com/gen-image?image=294.png"/>
<uploaded>2008-02-02 15:46:40.0</uploaded>
<description type="text">VON FABELWESEN, DRACHEN UND ANDEREN KLEINEN FREUNDEN
Der Lesespaß mit Original-Briefmarken.
Originalausgabe der Deutschen Post von 1999
Zum Inhalt:
Seit vielen Jahren wird in Deutschland die besondere Briefmarke "Für uns Kinder" herausgegeben. (Meist in Blockformat)
Aus sechs dieser schönen Blockausgaben wurde 1999 ein aufregendes Kinderlesebuch zusammengestellt. Zu den Geschichten ist der jeweils verausgabte Block eingeklebt. Außerdem befindet sich auf dem Block jeweils der ESST. (Ersttagssonderstempel)
Folgende Blöcke und Geschichten sind enthalten:
1. 1994 "Fabelwesen" Im Reich des Möglichen
2. 1995 "Die Tierversammlung" Die Sprache der Tiere
3. 1996 "Der reitende Postbote" Die Botschaft des Hofnarren
4. 1997 "Ballonpost" Reise ans andere Ende der Welt
5. 1998 "Meerestiere" Die Farben des Meeres
6. 1999 "Die Briefmaus" Das Abenteuer der Briefmaus</description>
</entry>
</bazaaria>
http://www.bazaaria.com/dev/xml/uid=1&type=1&count=1
Aufbau und zulässige Parameter
Ein Aufruf der API folgt dabei immer einem standadisiertem Schema:
http://www.bazaaria.com/dev/ + FORMAT (xml/json) +/PARAMETER
Alle Parameter werden durch & getrennt und an die URL angehängt. Durch eine Kombination dieser lassen sich individuelle Queries gestalten. Zulässig sind dabei die folgenden:
| Parameter | Ausprägung | Beschreibung |
|---|---|---|
| uid | $Nummer | Enthält eine beliebige persönliche UserId. Diese ist als Angabe zwingend notwendig, auch wenn die Abfrage keine Verknüpfung zu einer Person erhält. Falls die eigene uid unbekannt oder nicht vorhanden ist, so kann man alternativ die uid auf "0" setzen (bspl: uid=0) |
| type | 1 | Umfasst alle Waren für die Query. |
| 2 | Umfasst nur persönliche Waren für die Query. Die jeweiligen Besitzer werden durch die uid definiert. Die uid findet man als id-Parameter am ende der URL zu seinem jeweiligen Profil. (bspl: http://www.bazaaria.com/profil/1 oder http://www.bazaaria.com/profil.jsp?id=1) | |
| query | (default = empty) | Bietet die Möglichkeit einen Suchparameter zu übergeben. Dieser Parameter überschreibt die natürliche "Order by date" Klausel und gewichtet nach Relevanz. Boolsche Zeichen wie +,-,~,*,<,>() werden zur Suchoptimierung unterstützt. [s.a.: Forum/Wiki] |
| cat | $Number | Eine Zahl zwischen 0-2255. Beschränkt die Suche auf eine jeweilige Kategorie und deren Unterkategorien. Die jeweilige Kategorie-ID wird dabei in der URL mit dargestellt. Bspl: URL: http://www.bazaaria.com/kategorie.Haushalt.7.html
|
| count | $Number | Eine Zahl zwischen 1-50. Gibt die Anzahl der Maximalen Results an. |
| order | (default = empty) | Gibt die Sortierung der Waren an. Der Standardwert ist: DESC (descending = absteigend). Bei Angabe eines Wertes wird dies auf ASC (ascending = ansteigend) gesetzt. |
Ein Beispiel:
Aus diesen Parametern ergeben sich somit eine Fülle von Anwendungsmöglichkeit. Man nehme man wolle die letzten 5 seiner eigenen Gegenstände im XML Format auf seiner Seite integrieren. So bedarf es des folgenden API-Calls:
http://www.bazaaria.com/dev/ als base Query. Dazu setzen wir XML als Ausgabeformat:
http://www.bazaaria.com/dev/xml/
nun passen wir noch die Parameter an. Wir selbst sind in diesem Fall der User Stephen W. (unser Demo-Nutzer).
http://www.bazaaria.com/dev/xml/uid=0
und möchten unsere persönlichen Waren anzeigen
http://www.bazaaria.com/dev/xml/uid=0&type=2
und hiervon nur die aktuellsten 5:
http://www.bazaaria.com/dev/xml/uid=0&type=2&count=5
Open Source Projekte
Übersicht
EinleitungB-Holt JSON-READER v1.0
B-Holt Texteditor
Auf dieser Seite stellen wir euch ein paar Entwicklungen unter der GPL zu eurer freien Verfügung bereit. Sämtliche Inhalte dieser Seite dürfen frei verändert und unter eurem Namen veröffentlicht werden. Wir freuen uns schon auf euer Feedback und erzählt uns gerne auch, was für tolle Anwendungen ihr damit gebaut habt.
B-Holt-JSON-Reader v1.0
Es hat sich gezeigt, dass fast alle JSON - Reader heutzutage von kommerzieller Natur sind. Als Ergebnis hat man dann oft unschöne Werbe-Anzeigen in seinem Content. Dies ist unserer Meinung nach nicht Sinn hinter dem Sache und stellen daher hier einen einfachen Content-Reader für euch bereit:
<script type="text/javascript">//function wie im json-feed definiert
function listEvents(root) {
//Weise feedinhalt Variablen zu
var feed = root.feed;
var entries = feed.entry || [];
var html = [''];
// Bei mehreren Objekten gleichen Typs, durchlaufe alle diese Objekte und weise ihnen eine Variable zu...
for (var i = 0; i < feed.entry.length; ++i) {
var entry = feed.entry[i];
var title = entry.title.$t;
var published = entry.published.$t;
var link;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
link = entry.link[k].href;
break;
}}
// Erstelle neuen HTML - Code den wir im Anschluss in einem Element anzeigen lassen wollen
html.push('<li>','<b>',published.truncate(10,''),'</b><br/>','<a href="',link,'">', title, '</a>','</li>');
}
//Füge unsere neuen HTML Code einem ELement hinzu... hier: eine liste (ul) mit der id "agenda" [bspl: <ul id="agenda"> </ul>]
document.getElementById("agenda").innerHTML = html.join("");
}
</script>
<script src="http://www.bazaaria.com/dev/json/uid=1&type=1&count=3">
</script>
Zunächst erstellen wir eine Funktion, die wir im Anschluss per externem Skript (unserem JSON-FEED) aufrufen möchten. Es kommt uns zu gute, dass viele Dienste (u.a. Blogspot) bereits den Feed als einen Aufruf dieser Funktion tarnen. (Beispiel Blogspot Feed: 'listEvents({"version":"1.0","e[...]').
function listEvents(root) {
//CONTENT
}
</script>
Aus diesem lesen wir nun einzelne Content-Bausteine aus und weisen diese Variablen zu
function listEvents(root) {
//Weise anfang des Feeds einer Variablen zu
var feed = root.feed;
//weise Entries einer variablen zu ... bei einem Array, weiße der Variablen ein leeres Array zu
var entries = feed.entry || [];
//setze den html text auf blank, hier speichern wir später unseren neuen HTML-Content
var html = [''];
for (var i = 0; i < feed.entry.length; ++i) {
// durchlaufe alle Entries
// [...]
}
}
</script>
Man merkt, dass dieser Weg ein recht einfacher, jedoch gleichermassen erfolgreicher ist, um Content auf der eigenen Website anzuzeigen. In Folgeversionen wäre denkbar diesen noch um 2-3 weitere Feeds zu erweitern...
B-Holt Texteditor
BENÖTIGT!!!! Prototype API v1.5.2 oder höher
Dieser Texteditor durchläuft nach Aufruf der checkTextarea-Funktion das jeweilige Dokument nach Textareas und fügt unser neues Textarea Menü hinzu. Die Anschließende Funktion "editor", umschließt nach einem Druck auf einen Button den jeweiligen selektierten Text mit den richtigen BB-Codes. Die editor-Funktion basiert usprünglich auf einem im Netz gängigen Verfahren, erweitert dies jedoch um die Lauffähigkeit auf allen Browsern...
/*Diese Funktion einmal beim Start aufrufen!
Sie durchläuft das gesamte Dokument und sucht nach Textareas, wenn eine Textarea gefunden wurde, dann fügt es unseren code hinzu...
*/
function checkTextarea(){
//if textarea, add our cool formeditor bar
Element.getElementsBySelector('body','textarea').each(function (obj){
var id = obj.readAttribute('id');
if(id != null && obj.hasClassName('txtedit') == false){
//Füge unserer Textarea unser Menü mit einzelbuttons hinzu! (achtung: wir haben hier auch CSS-Code mit standardicons verwendet, diesen auf jeden Fall anpassen!)
var editmenu = '<input type="button" accesskey="b" name="addcode1" value=" " style="background:#fff url(images/icons/text_bold.png) no-repeat center;" onClick="editor(\''
+id
+ '\',1);"/>'
+'<input type="button" accesskey="i" name="addcode2" value=" " style="background:#fff url(images/icons/text_italic.png) no-repeat center;" onClick="editor(\''
+id
+'\',2)"/>'
+'<input type="button" accesskey="u" name="addcode3" value=" " style="background:#fff url(images/icons/text_underline.png) no-repeat center;" onClick="editor(\''
+id
+'\',3)"/>'
+'<input type="button" accesskey="d" name="addcode4" value=" " style="background:#fff url(images/icons/text_strikethrough.png) no-repeat center;" onClick="editor(\''
+id
+'\',4)"/>'
/* +'<input type="button" accesskey="s" name="addcode5" value=" " style="background:#fff url(images/icons/text_subscript.png) no-repeat center;" onClick="editor(\''
+id
+'\',5)"/>'
+'<input type="button" accesskey="p" name="addcode6" value=" " style="background:#fff url(images/icons/text_superscript.png) no-repeat center;" onClick="editor(\''
+id
+'\',6)"/>'
*/
+'<br/>';
obj.addClassName('txtedit');
new Insertion.Before(obj, editmenu);
}
});
}
//Diese Funktion wird mit einem Klick auf die oben hinzugefügten Buttons ausgeführt
function editor(id, type){
//checke nach Buttontyp, von dem der Call ausging und setze die richtigen BB-Code variablen
var myV1 ="";
var myV2 ="";
switch(type){
case 1:
myV1 = "[b]";
myV2 = "[/b]";
break;
case 2:
myV1 = "[i]";
myV2 = "[/i]";
break;
case 3:
myV1 = "[u]";
myV2 = "[/u]";
break;
case 4:
myV1 = "[del]";
myV2 = "[/del]";
break;
case 5:
myV1 = "[sub]";
myV2 = "[/sub]";
break;
case 6:
myV1 = "[sup]";
myV2 = "[/sup]";
break;
}
var myField = $(id);
//Umschließe je nach Browser den Text mit den jeweiligen BB-Codes
//IE support -> Ha! We kick some serious butt!
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text =myV1+sel.text+myV2;
}
//MOZILLA/NETSCAPE support
else if (myField.selectionStart || myField.selectionStart == '0') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
myField.value = myField.value.substring(0, startPos)
+ myV1+myField.value.substring(startPos,endPos)+myV2
+ myField.value.substring(endPos, myField.value.length);
} else {
myField.value += myValue;
}
}
Dokumentation
... kommt noch!