Vorletzen Samstag haben Nico, ich und ein Mann namens Aaron Woellfer in unserem Bürogebäude in Berlin eine neue Telefonanlage installiert. Nicht nur, dass wir weitere 8 Arbeitsplätze anschließen können sondern auch eine ganze Reihe verheißungsvoller Features sollte das gute Stück für 2600 € von Panasonic uns bereitstellen.

Zum Beispiel soll man am Rechner auf dem Bildschirm sehen, wer gerade telefoniert. Man soll Nachrichten hinterlassen können, Statusmeldungen und einer ganzen Reihe andere lustige Sachen auch noch machen können. Diese Features gibts natürlich nur wenn man eine Software namens Communication Assistant installiert und die gibts wiederum nur gegen weiteren Einwurf von Münzen. War ja klar.

Am Reizvollsten von den ganzen Features ist ein Hotkey-Feature, was es ermöglicht, eine Telefonnummer auf einer Webseite oder einem Dokument auf dem Bildschirm zu markieren und dann mittels eines Tastendrucks (Beispielsweise F8) telefoniert das Telefon am Arbeitsplatz los. Coole Sache, dachten wir uns. Dann geht das bestimmt auch, dass man einen Link in HTML so markieren kann, dass man das Programm von Außen anschubsen kann und es dann eine Nummer anruft. War für uns selbstverständlich, weil Skype kann das nämlich auch auf folgende Weise: <a href=”callto:12345678″>12345678 anrufen</a>.

Und so ähnlich, dachten wir uns, muss das doch auch mit diesem CA Programm von Panasonic laufen. Aber Denkste. Nichts zu machen.

Außer markieren und dann mit Tastendruck wählen gibts keine sonstigen Implementationen. Wir brauchen dieses Feature aber, weil unsere Software ist komplett webbasiert und es stellt eine nicht zu unterschätzende Produktivitätssteigerung dar. Nach Aussage von Herrn Woellfer gibts sowas Ähnliches von einer Firma mit dem Apple-like-Namen iLink GmbH die sowas “Kompliziertes” konstruieren kann, dieses sich dann aber überdurchschnittlich bezahlen lassen würden. Weil wir auf Abzocker keinen Bock haben, Gabs nur eine Lösung: Selber basteln.

Gesagt getan hab ich in C# ein kleines Programm geschrieben, was ich  TapiCaller genannt habe, denn das beschreibt auch, wie es funktioniert:

Der Panasonic CA richtet sich im Betriebsystem als TAPI Gerät ein (Telephony Programming Interface) Mann kann es also über ein paar TAPI-Befehle dazu bewegen, einen Anruf zu tätigen. Zusätzlich sorgt es noch dafür, dass ein Link der folgender Maßen markiert ist <a href=”prfwebcall:12345678″>12345678 anrufen</a> vom den installierten Browsern erkannt wird. Dadurch wird der TapiCaller gestartet, der wiederum den CA startet und die Nummer wählt. Einfache Sache also.

Seit heute können alle Mitarbeiter das Tool benutzen. Und wer das gleiche Problem hat, kann sich hier das Programm runterladen. 

download PRofiFLITZER TapiCaller.zip

… ,dass die Kisten bei so einer Ansage nicht sofort aus dem Fenster fliegen. Bei Fujitsu hält man sich wohl für besonders witzig.

…trotz massiv besserer Hardware wissen wir leider immer noch nicht genau, aber wir werden es rausfinden.

Sascha Qualitz ist der nächste Nerd der bei uns mitspielen darf. Seines Zeichens Informatiker an der Humboldt Universität Berlin. Er bringt zusätzlich reichlich Erfahrung vom Fraunhofer Institut mit, wo er vorher arbeitete. Ob das unseren Ansprüchen genügt, wird sich zeigen. Jedenfalls haben wir ihm erstmal ein ordentliches 27 Zoll Spielzeug mit Apfel drauf hingestellt. Er soll sich ja von Anfang an wohlfühlen.
Sascha wird sich nach seiner Einarbeitungszeit insbesondere mit unserem PRF_Framework beschäftigen und hier insbesondere die UI Komponenten aufbereiten und weiterentwickeln.

Das Update von my-PRofiFLITZER.de ist nahe, sehr nahe – es ist MORGEN! Und wir haben ein ganzes Paket an Neuerungen integriert. Viele davon werden Außenstehenden nicht auffallen, aber dennoch sind sie ungemein wichtig – vor allem für die Zukunft.

Wir haben neue Abrechnungsmodelle integriert, die einen modularen Aufbau von Rechnungen ermöglichen und dadurch den Weg für neue Tools zur automatisierten Rechnungsgenerierung ebnen. Damit ist die Grundlage gelegt, um bald Grundvergütung, Provisionen und Fahrtkosten systemseitig in die Rechnung integrieren zu lassen. Wir haben das System intern so umstrukturiert, dass Marktmitarbeiter ab sofort als Benutzer des Systems behandelt werden und es in Zukunft möglich sein wird, auch den Markt mit Daten zu versorgen. Er wird sich in kommenden Tools einen eigenen Überblick über stattfindende Aktionen in seinem Markt verschaffen können. Weiterhin haben wir die Benutzerverwaltung überarbeitet,  sodass sich Außendienstler bald eigene Marktkategorien anlegen und damit eigene Analysen fahren können.

Zu guter Letzt und mit dem Update aufrufbar ist unser Produktverfügbarkeitstool: myInventory. Dieses dient dazu, Warenbestände, sofern erfragt, darzustellen und dem Kunden somit eine Möglichkeit der Kontrolle, aber auch der Steuerung an die Hand zu geben.

Alle Maßnahmen, die wir hier nur kurz umschreiben, dienen in erster Linie einem Zweck – sie stellen Transparenz her – gegenüber dem Kunden, genauso wie gegenüber unseren Fachberatern und den Märkten. Außerdem sollen sie uns für die Zukunft rüsten, um so auf weitere Anforderungen seitens unserer Kunden, unserer Fachberater und des Handels flexibel reagieren zu können. Wir sind überzeugt davon, dass wir mit diesem Update einen großen Schritt getan haben, auch wenn er nach außen hin eher klein ausfällt.

Das Update wird am 22.11.2011, 21:00 Uhr bis ca. 23.11.2011, 06:00 Uhr durchgeführt.

Hurra.  Der Prototyp unseres Analysetools für Produktverfügbarkeiten ist fertig. Mit diesem Tool ist es möglich zuvor ermittelte Produktverfügbarkeiten komfortabel auswzuwerten und darzustellen. Neben den bekannten Filtereinstellungen aus myMissions und mySales-pro gibt es auch die Möglichkeit die Anzeige zu gruppieren und dadurch gleichzeitig die Ergebnisse entsprechend der Gruppierung kummuliert darzustellen. Bis zu 3 Gruppierungswerte sind gleichzeitig möglich. Eine Sortierung nach auf- oder absteigenden Werten ist ebenfalls vorhanden.

Der Excel-Export bietet neben dem Export der gefilterten Ergebnisse, auch einen Export aller einzelnen Datensätze.

Prototyp myWatchDog

Am 21.10.2011 stellen wir unseren Mitarbeitern das neue Konzept der Abrechnungsmodelle vor. Die Abrechnungsmodelle dienen dazu, Personal leistungsgerecht mit Provisionen, Tagespauschalen, Fahrtkostenübernahmen und weiteren Typen von Zahlungskomponenten zu vergüten.
Die Modelle sind eng mit dem System verknüpft und ermöglichen es in Zukunft auch Automationsprozesse zu entwerfen. Beispielsweise ist es denkbar, dass unser eingesetztes Personal Tools an die Hand bekommt, mit dem es Rechnungen voll automatisch erstellen kann.
Zusätzlich ist dies ein Schritt in die Richtung, unseren Kunden ein höheres Maß an Transparenz zu bieten. Beispielsweise mit Kosten -und Provisionsübersichten. Es geht also fröhlich weiter mit der Entwicklung und Erweiterung von my-profiflitzer.de. Man darf gespannt sein.

This tutorial is addressed to developers that are already familiar with higher techniques of object oriented programming and object relational data mapping in PHP.
Before you start:
I think the Facebook Api (and also the other connection services offered by Facebook) is one of the reasons for the success of this social network. Lots of games, tools and apps run “inside” Facebook, using the data supplied by the current user. So everything is great…but the documentation.
Nevertheless I recommed to read the article at
http://developers.facebook.com/docs/guides/canvas.
Especially the authorization part.

There are very much tutorials… all over the web that dealing with the issue to integrate an app into Facebook. When I had to develop a Facebook app I read them all (perceived ) And now I know: A lot do wrong. Some of them still refer to the Facebook Markup Language (FBML) which is deprecated and no longer supported. (http://developers.facebook.com/docs/reference/fbml/). So forget about FBML. You won’t need it. Also a lot of them show you how to fill the forms on the “Create a new app page” (https://developers.facebook.com/apps/). I won’t. I will exclusively focus on the “special” input fields that aren’t self-explanatory enough.

What you need to know:

1. You need a developer account on Facebook. It is easy to get so find out by yourself.
2. Your app will run on your own machine. Facebook uses an iframe to display your app.
3. All data your app can retrieve is encoded in JSON (Java Script Object Notation)
4. All user data you want to have access to, must be permitted by the user. Therefore you need an access token that we will inquire thru the oAuth procedure. (Click here for a full permission listing: http://developers.facebook.com/docs/reference/api/permissions/)

Let’s start:

1. Create the app on (https://developers.facebook.com/apps/)

This should not be very difficult. Except the canvas page is a bit confusing and wasted me time. What facebook want you to enter is basically a directory for your app consists of 7 characters minimum. You can choose your own. It does not depend on the canvas url. The canvas url is the root directory where the documents lays on your server. It must look like this: http://yourserver/directoryofyourapp/ . Don’t forget the slash at the end.  Test the accessibility of your app by typing http://apps.facebook.com/yourchoosencanvaspagename into the browser.

1. Download the  (badly written) facebook sdk. We need our class to inherit from. You can find it here: https://github.com/facebook/php-sdk/

Writing the connector class

What we want is an easy way to connect with Facebook and retrieve data from it. Something like this:

$connector=new PRF_facebook_connector($yourApiKey, $appId, $appSecret, $canvasPage, $dataPermissions);
$user = $connector->user();
//Do the stuff you want to do

The connector itself should handle the permission request.  (see http://developers.facebook.com/docs/guides/canvas/#auth)
How do we get there? First briefly explenation to $dataPermissions. In my class it is an array that represents the permissions we want the user to gave us. The list with the possible permissions: http://developers.facebook.com/docs/reference/api/permissions/. You can easily add some to this array. The user will be prompted to allow your app to access. Try array(“publish_stream”,”user_photos”) as an example.

The original Facebook example looks like this:

$app_id = "YOUR_APP_ID";
 $canvas_page = "YOUR_CANVAS_PAGE_URL";
$auth_url = "http://www.facebook.com/dialog/oauth?client_id=". $app_id . "&redirect_uri=" . urlencode($canvas_page);
 
$signed_request = $_REQUEST["signed_request"];
 
list($encoded_sig, $payload) = explode('.', $signed_request, 2);
 
$data = json_decode(base64_decode(strtr($payload, '-_', '+/')), true);
 
if (empty($data["user_id"])) {
 
echo("<script type="text/javascript">// <![CDATA[
; top.location.href='" . $auth_url . "'
// ]]></script>;");
 
} else {
 
echo ("Welcome User: " . $data["user_id"]);
 
}

Apart from the bad habit to use underscores we will do the nearly the same but our code will look more elegant and readable for human beings. So take a look at this:

include "facebook/src/facebook.php";
 
class PRF_facebook_connector extends Facebook {
 
	private $appSecret = false;
	private $canvasPage = false;
	private $authUrl;
	private $tokenUrl;
	private $user = false;
	private $accessToken = false;
 
	private $facebookUser = false;
 
	public function __construct($apiKey,$appId,$appSecret, $canvasPage,$dataPermissions = array()){
		$this->apiSecret = $appSecret;
		$this->appId = $appId;
		$this->appSecret = $appSecret;
		$this->canvasUrl = $canvasPage;
		parent::__construct(array(
			'appId' =>; $appId,
			'secret' =>; $appSecret,
			'cookie' =>; true));
 
		//Dialogurl für den Zugriffsdialog zusammenbauen
		$authUrl = "https://www.facebook.com/dialog/oauth?client_id=".$this->appId."&redirect_uri=".urlencode($this->canvasPage)."&scope=".implode(",", $dataPermissions);
		$this->authUrl = $authUrl;
 
		//Url um den Token zu erfragen
		$tokenUrl = "https://graph.facebook.com/oauth/access_token?client_id=".$this->appId."&redirect_uri=".urlencode($this->canvasPage)."&client_secret=".$this->appSecret;
		$this->tokenUrl = $tokenUrl;
		//echo $this->tokenUrl;
	}
 
	public function connect(){
		$code = (isset($_REQUEST["code"]) ? $_REQUEST["code"] : false);
		if(!$code){
			echo "Please wait..."; 
        echo "<script type="text/javascript">top.location.href='".$this->authUrl."'></script>"; die();
        //Weitere Ausgaben verhindern 
        } 
        $this->tokenUrl .= "&code=".$code; $this->accessToken = file_get_contents($this->tokenUrl); 
} 
}

What does this do?

Nothing! Because it is just the class, the construction plan.
But if you initialize it and invoke the connect method it redirects the user to the permission page and should look like this:

The constructor method gets all the information facebook gives us when we completed the app creation.
After setting the properties we invoke the parent constructor method (you dont need to understand it yet) and assemble the oAuth url and the token url that we need inside the connect method.

In the connect method we check first if the parameter “code” is attached to the url. If not there has not been an oAuth confirmation. This isn’t a very smart way Facebook is offering us here. But there is nothing we can do about it. Anyway, one more reason to encapsulate all the connection stuff in a class that we do not have to see this code all the time.
Now we have the code parameter we can go on. We attach it to the token url and read the accessToken we recieve and save it in the property tokenUrl we provided for.

How to get the user?

If you done with it an your work was correct we will implement a method to get the data the user allows us to read.

public function user(){
		$graphUrl = "https://graph.facebook.com/me?".$this->accessToken;
		//User ermitteln
		if($this->user==false){
                        $facebookUser = json_decode(file_get_contents($graphUrl));
			$this->user = $facebookUser;
		}
		return $this->user;
	}

When you invoke this method, it reads the json contents of the https://graph.facebook.com/me – url into the private user property and returns the object. Try a vardump on the return value to debug it. If the connection has been established correctly from now on you have access to the standard user properties wraped in a standard class object. If you call the method again it won’t do the process again. It only return the user object because it has been saved within your connector object.

$connector=new PRF_facebook_connector($yourApiKey, $appId, $appSecret, $canvasPage, $dataPermissions);
$user = $connector->user();
var_dump($user);

Now wouldn’t it be nice if we were able to access all the Facebook user data by calling methods like this:

$arrayWithFacebookPhotoObjects = $connector->user()->photos();
$connector->user()->postToWall($facebookAtachementObject);
$arrayWithObjectsOfFacebookFriends = $connector->user()->friends();

Think about it. We allready did.

Otto lief seinen Part in der 5×5 Kilometer Teamstaffel 2011 im Berliner Tiergarten am 24.6. unter 20 min. Eine sensationelle Leistung. Besonders dadurch sind wir auf dem 1211. Platz gelandet. Das ist nicht schlecht bei 4211 Teams, die an den Start gegangen sind.

Ungemein erhellend: Wieder einmal gelangt man zur Erkenntnis, dass die Reihenfolge von HTML-Tags in einer Seite ungemein wichtig ist, wenn diese Seite auch im IE6 dargestellt werden soll. Moderne Browser sind nicht ganz so kritisch, was die Reihenfolge der Tags angeht. Dadurch wird man schnell nachlässig, da die Anzeige korrekt erfolgt oder man keine Fehler feststellen konnte. Der IE6 dagegen ist ein Browser, der einem das Leben schwer macht und einen nur allzu gerne daran erinnert, dass man 100% sauber arbeiten muß. Nachlässigkeiten werden nicht geduldet.

Der Kasus knaxus: Sofern man den Tag <meta http-equiv=”Content-Type” … > verwendet, sollte dieser an erster Stelle im Head stehen. Dieser Tag dient dazu, das der Browser weiß, welche Codierung das Dokument besitzt. Steht dieser meta-Tag nicht an erster Stelle versucht der Browser selber herauszufinden, welche Kodierung verwendet wird. Im Fall das dieser Tag nicht an erster Stelle steht muss, jedes ASCII-wertige Byte für ein  ASCII-Zeichen stehen (HTML4). Wenn man dies nicht beachtet erzeugt der IE6 nur eine leere Seite, wenn vor diesem Tag noch andere Tags stehen.

Also, immer schön Reihenfolge beachten und sauber programmieren, auch wenn moderne Browser es nicht ganz so ernst nehmen und kleine Inkorrektheiten geduldet werden.