Artikel
Mobile Facebook-Apps Teil 3: Welche Möglichkeiten habe ich?
Die mobile Facebook App z. B. gestalterisch aufwerten.
In Teil 2 haben wir das Grundgerüst für eine einfache Facebook Mobile App angelegt, jetzt schauen wir, welche neuen Möglichkeiten zur Verfügung stehen.
Als erstes werden wir die App ein wenig schöner aussehen lassen, damit man zum Lesen der Inhalte nicht länger eine Lupe braucht. Insgesamt sieht sie nun so aus:
<html>
<head>
<title>Kopfrechnen</title>
<style>
body {width: 100%, height: 100%; padding: 20px; font-family: Verdana; font-size: 50pt;}
#content {background-color: #88FF88; width: 80%; height: 80%; padding: 10%; text-align: center; -webkit-border-radius:50px;}
button {background-color: #00AA00; width: 100%; font-family: Verdana; font-size: 50pt;-webkit-border-radius:50px;}
body.connected #login { display: none; }
body.connected #logout { display: block; }
body.not_connected #login { display: block; }
body.not_connected #logout { display: none; }
</style>
</head>
<body>
<div id="fb-root"></div>
<script>
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
window.fbAsyncInit = function() {
FB.init({ appId: 'XXXXXXXXXXXX',
status: true,
cookie: true,
xfbml: true,
oauth: true});
FB.Event.subscribe('auth.statusChange', handleStatusChange);
};
function handleStatusChange(response) {
document.body.className = response.authResponse ? 'connected' : 'not_connected';
if (response.authResponse) {
updateUserInfo(response);
}
}
function loginUser() {
FB.login(function(response) { }, {scope:'email'});
}
function updateUserInfo(response) {
FB.api('/me', function(response) {
document.getElementById('user-info').innerHTML = '<img width="20%" src="https://graph.facebook.com/' + response.id + '/picture"><br/>' + response.name;
});
}
</script>
<div id="content">
<div id="user-info"></div>
<div id="login" class="not_connected">
<p><button onClick="loginUser();">Login</button></p>
</div>
<div id="logout" class="not_connected">
<p><button onClick="FB.logout();">Logout</button></p>
</div>
</div>
</body>
</html>
Anfragen
Die erste Neuerung sind Requests. Damit lassen sich Freunde in die eigene App einladen. Wir möchten unseren Freunden gern Kopfrechen-Aufgaben stellen.
Also fügen wird zwei Eingabefelder und vier Knöpfe für die Grundrechenarten ein:
<p>
<input id="f1" type="number">
<input id="f2" type="number">
<p>
<p>
<button class="request" onClick="sendRequest('+');">+</button>
<button class="request" onClick="sendRequest('-');">-</button>
<button class="request" onClick="sendRequest('*');">*</button>
<button class="request" onClick="sendRequest('/');">/</button>
</p>
Die Funktion sendRequest sieht zunächst ganz einfach aus:
function sendRequest(op) {
f1 = document.getElementById("f1");
f2 = document.getElementById("f2");
msg = "fragt: Was ist " + f1.value + op + f2.value + "?";
FB.ui({
method: 'apprequests',
message: msg,
},
function(response) {
console.log('sendRequest response: ', response);
});
Sie verwendet zur Versendung der Anfrage die API Methode FB.ui mit der Methoden Kennung "apprequests". Drücken des Knopfes öffnet nun einen neuen Dialog:
...übrigens nicht in einem neuen Browserfenster, sondern im Fenster der App (die Elemente werden im Div fb-root eingefügt). Hier kann der Benutzer eine Liste seiner Freunde zusammen stellen, die die Anfrage gesendet bekommen.
Alternativ könnte man im Request mit dem Parameter "to" feste Facebook-User-IDs angeben können (wenn die z.B. aus einer vorherigen Auswahl schon bekannt sind). Die Benutzer erhalten nun eine Notifikation und eine Benachrichtigung in Facebook. Wenn Sie letztere dann anwählen, bringt sie Facebook direkt zur Mobile App!
|
|
|
Diese Funktionalität kann man übrigens nicht so einfach auf dem Entwicklerrechner testen: Die Angabe der App Domain in den Einstellungen der Facebook Anwendung wird spätestens jetzt nötig.
So weit, so schön. Allerdings sollte die Anwendung natürlich darauf reagieren, dass sie als Folge einer Anfrage gestartet wurde. Hier im Beispiel sollte sie vielleicht die Lösung erfragen und nicht gleich die nächste Aufgabe eingeben lassen.
Zu diesem Zweck muss beim Start abgefragt werden, ob Anfragen vorliegen. Das ist einfach, der Anwendung wird nämlich schlicht im Parameter request_ids eine Liste aller nicht bearbeiteter Anfragen übergeben. Wir nehmen einfach den ersten Request, besorgen uns die Details und stellen die Frage an den Benutzer. Damit die Anwendung bereits authentifiziert ist, geschieht das alles im OAuth-Callback:
function handleStatusChange(response) {
document.body.className = response.authResponse ? 'connected' : 'not_connected';
q = document.getElementById('question');
a = document.getElementById('answer');
a.className = "hideme";
q.className = "showme";
if (response.authResponse) {
updateUserInfo(response);
if (window.location.search!="") {
requests = parameter('request_ids');
if (requests!=null) {
requestId = requests.split("%2C")[0];
FB.api('', {"ids": requestId }, function(response) {
console.log(response)
a.className = "showme";
q.className = "hideme";
text = document.getElementById('questionText');
asker = document.getElementById("asker");
asker.value = response[requestId].from.id;
text.innerHTML = response[requestId].from.name +" "+ response[requestId].message;
});
FB.api(requestId, 'delete', function(response) {
console.log(response);
});
}
}
}
}
function parameter(name) {
params = window.location.search.slice(1).split('&');
for (var i = 0; i < params.length; i++) {
param = params[i].split('=');
if (param[0]==name)
return param[1];
}
return null;
}
Im Anschluss löschen wir den Request sofort. Dies muss von der Anwendung selbst geschehen, sonst wird der Benutzer immer wieder mit denselben Anfragen konfrontiert. Der Vollständigkeit halber hier noch das zugehörige, veränderte HTML-Fragment
<div id="question">
<p>
<input id="f1" type="number">
<input id="f2" type="number">
<p>
<p>
<button class="request" onClick="sendRequest('+');">+</button>
<button class="request" onClick="sendRequest('-');">-</button>
<button class="request" onClick="sendRequest('*');">*</button>
<button class="request" onClick="sendRequest('/');">/</button>
</p>
</div>
<div id="answer" class="hideme">
<span id="questionText"></span><br/>
<input id="asker" type="hidden"></input>
<input id="answerText" type="number"></input><br/>
<button onClick="sendAnswer();">Senden</button>
</div>
sowie die Methode zum zurücksenden der Antwort:
function sendAnswer() {
q = document.getElementById("questionText");
a = document.getElementById("answerText");
asker = document.getElementById("asker");
msg = "antwortet auf die Frage '"+q.innerHTML+"': "+a.value;
FB.ui({
method: 'apprequests',
message: msg,
to : asker.value
},
function(response) {
q = document.getElementById('question');
a = document.getElementById('answer');
a.className = "hideme";
q.className = "showme";
console.log('sendAnswer response: ', response);
});
}
Hier kann man eine Anfrage bewundern, die nur an genau einen Adressaten geschickt wird.
Weitere Informationen
