Immer wieder kristallisierte sich bei den Entwicklerrunden und Gesprächen mit Neulingen bei der User App Entwicklung ein großes Problem. Scheinbar ist es sehr schwer zu verstehen, wie man ein HTML-UI so nutzt, damit im HTML-UI eine Aktion stattfindet und darauf der Server eine Reaktion zeigt.
Lest den heutigen Blogbeitrag durch, um zu erfahren wie ihr so etwas realisieren könnt.
Hinweis:
Dieses „Script-Quicky” soll euch zeigen, wie man eine Reaktion auf dem Chatserver (Begrüßungstext vom Bot) auslöst, in dem ein User in einem HTML-UI eine Aktion (Klick auf einen Button) ausführt.Um jeden Quelltext anschauen zu können, klicke einfach auf den Link „Quelltext der …“ und schon öffnet sich der Quelltext.
Dieses „Script-Quicky” soll euch zeigen, wie man eine Reaktion auf dem Chatserver (Begrüßungstext vom Bot) auslöst, in dem ein User in einem HTML-UI eine Aktion (Klick auf einen Button) ausführt.Um jeden Quelltext anschauen zu können, klicke einfach auf den Link „Quelltext der …“ und schon öffnet sich der Quelltext.
/* Variablen definieren */
var bot = KnuddelsServer.getDefaultBotUser();
/* App inizialisieren */
var App = {};
/* Ausgelagerte Dateien laden */
require('configs/onAppStart.js'); // Sachen, die beim AppNeustart ausgeführt werden sollen
require('configs/onEvents.js'); // Sachen, die bei einem Event ausgeführt werden sollen
require('configs/commands.js'); // Befehle, die User ausführen können</div>
<!DOCTYPE html>
<head>
<title>Beispiel User App</title>
<meta charset="utf-8" />
<script src="/apps/api/jquery.min.js"></script>
</head>
<body>
<button class="commandButton case1"> Begrüßen! </button>
<button class="commandButton case2"> Verabschieden! </button>
</body>
<script>
$(function(){
$('.commandButton.case1').off('click').on('click', function(){
Client.sendEvent('commandButton', {command: 'sayHello'});
});
$('.commandButton.case2').off('click').on('click', function(){
Client.sendEvent('commandButton', {command: 'sayBye'});
});
});
</script>
</html>
Erklärung zum Code:
In Zeile 14 sowie in Zeile 18 findet die wichtige Aktion statt. Mittels Client.sendEvent() teilt der Client (HTML-UI) dem Chatserver mit, dass ein Event versendet wird. Der Chatserver reagiert auf das gesendete Event im onEventReceived-Bereich. Damit dieser aber richtig reagieren kann, bekommt er ein paar Informationen (z.B. command: ’sayHello‘) mitgeteilt und kann damit anschließend richtig reagieren.
In Zeile 14 sowie in Zeile 18 findet die wichtige Aktion statt. Mittels Client.sendEvent() teilt der Client (HTML-UI) dem Chatserver mit, dass ein Event versendet wird. Der Chatserver reagiert auf das gesendete Event im onEventReceived-Bereich. Damit dieser aber richtig reagieren kann, bekommt er ein paar Informationen (z.B. command: ’sayHello‘) mitgeteilt und kann damit anschließend richtig reagieren.
function sayHello(user){
bot.sendPublicMessage('Ich soll euch von '+user.getProfileLink()+' herzlich grüßen!');
}
function sayBye(user){
bot.sendPublicMessage(''+user.getProfileLink()+' verabschiedet sich, und ich richte es euch aus.');
}
App.chatCommands =
{
// Anfang von Funktion huhu
huhu: function(user, params){
sayHello(user, params);
},
// Ende von Funktion huhu
// Anfang von Funktion byebye
byebye: function(user, params){
sayBye(user, params);
}
// Ende von Funktion byebye
};
App.onEventReceived = function(user, key, data)
{
switch(key){
case 'commandButton':
switch(data.command.toString()){
case 'sayHello':
sayHello(user);
break;
case 'sayBye':
sayBye(user);
break;
}
break;
}
};
Erklärung zum Code:
In Zeile 4 – 13 verarbeiten wir die übertragenen Daten, die vom Clienten kommen. Da wir commandButton übergeben haben, weiss nun der Server, dass er in diesem Bereich reagieren muss.
Da wir zwei verschiedene Möglichkeiten mit sayHello und sayBye haben, muss in Zeile 5 entschieden werden, welche Meldung mitgeteilt werden soll. Diese Information haben wir mit {command: ’sayHello‘} mitgeliefert.
In Zeile 4 – 13 verarbeiten wir die übertragenen Daten, die vom Clienten kommen. Da wir commandButton übergeben haben, weiss nun der Server, dass er in diesem Bereich reagieren muss.Da wir zwei verschiedene Möglichkeiten mit sayHello und sayBye haben, muss in Zeile 5 entschieden werden, welche Meldung mitgeteilt werden soll. Diese Information haben wir mit {command: ’sayHello‘} mitgeliefert.
App.onAppStart = function(){
bot = KnuddelsServer.getDefaultBotUser(), // BotUser definieren
humanOnlineUsers = KnuddelsServer.getChannel().getOnlineUsers(UserType.Human); // Alle User aus dem Channel laden
/* Als nächstes werden alle User im Channel ein HTML-UI erhalten */
for(i in humanOnlineUsers){
if(humanOnlineUsers[i].isAppDeveloper() || humanOnlineUsers[i].isAppManager()){ // Aber nur, wenn sie der AppEntwickler oder AppManager der App sind
var user = humanOnlineUsers[i]; // Laden des aktuellen Users
var DATEN = {}; // Daten, die wir übergeben wollen - in diesem Falle keine.
var htmlFileEdit = new HTMLFile('home.html', DATEN);
appContentEdit = AppContent.popupContent(htmlFileEdit, 300, 50);
if(user.canSendAppContent(appContentEdit)===true){
user.sendAppContent(appContentEdit);
}
}
}
}
Alle Dateien haben wir für euch zusammengefasst:
Der offizielle Knuddels Blog 