Archive for the 'Gyorstalpaló' Category

Üzenetsablonok használata

Korábban bemutattuk, hogy az OpenSocial üzenet sablonok hogyan használhatóak csoportosított hírfolyam elemek küldéséhez, de nem ejtettünk szót arról, hogy milyen egyéb felhasználási lehetőségeik vannak: lehetőség van az alkalmazások többnyelvűvé tételére, illetve ezt a lehetőséget használhatjuk az alkalmazáson belül megjelenített szövegekhez akkor is, ha nem célünk a többnyelvűség.

Alkalmazáson belüli felhasználás

Ha az alkalmazáson belül egy üzenetet, szöveget szeretnénk valahol megjeleníteni, és szeretnénk betartani az MVC mintát, akkor jól jöhetnek az üzenet sablonok. A sablonok tartalma (definiálásukat lásd a korábbi bejegyzésünknél) egyszerűen lekérdezhető a következő JavaScript kódrészlettel:

var prefs = new gadgets.Prefs();
var text = prefs.getMsg("hello_world");

A “text” változóban a “hello_world” name paraméterű üzenet szövegét fogjuk megkapni. Az OpenSocial nem kínál olyan függvényt, mely segítségével sablon változók feloldhatóak lennének, de egy ilyet könnyen írhatunk saját magunk is:

if (!iWiW) iWiW = {};
iWiW.getMsg = function(name, parameters) {
  var prefs = new gadgets.Prefs();
  var template = prefs.getMsg(name);
  if (parameters) for (var p in parameters) {
    template = template.replace('${' + p + '}', parameters[p];
  }
  return template;
}

Ha a “szorzas” nevű sablonunk szövege “Az ${a}*${b} szorzás eredménye ${c}”, akkor a függvény az iWiW.getMsg(”szorzas”, { ‘a’: 2, ‘b’: 2, ‘c’: 5 }); formában hívható meg.

Az sablonok szövege azonban nem csak JavaScriptből kérdezhető le, az alkalmazás XML-jében bárhol tudunk hivatkozni rá, és az OpenSocial előfeldolgozó lecseréli a hivatkozást a megfelelő szövegre. Avagy a fent elsőként bemutatott “bonyolult” kódrészlet helyett írhatjuk ezt is:

var text = '__MSG_hello_world__';

A “__MSG_azonosító__” (az egyértelműség kedvéért: az idézőjelet nem kell köréírni) szerepelhet bárhol az alkalmazás XML-jében, tehát a HTML vagy a CSS részekben is. Amire figyelni kell, hogy a fenti példa nem működik jól, ha az üzenet szövegében aposztróf is szerepel, hiszen ekkor nincsen megfelelően escape-elve az aposztróf karakter, s JavaScript hibát fogunk kapni (JavaScript kódrészbe az előbb ismertetett módon célszerű használni a sablonokat).

Többnyelvű alkalmazások

Bár az iWiW kapcsán jellemzően csak magyar nyelvű alkalmazások készülnek, de a sablonok jól használhatóak többnyelvű alkalmazások készítéséhez is (ráadásul eredetileg ebből a célból lett implementálva a funkció). Ha más OpenSocialt támogató oldallal is szeretnénk kompatibilissé tenni alkalmazásunkat, akkor mindenképpen célszerű a sablonok használatát választanunk.

A sablonok definiálásakor kell megadnunk a nyelvet:

<ModulePrefs>
  <Locale messages="http://example.hu/messages_HU.xml"/>
  <Locale messages="http://example.hu/messages_EN.xml" lang="EN"/>
</ModulePrefs>

Ebben a példában a magyar nyelvű üzenet definíciókhoz nem adtunk meg nyelvet - ezt választottuk alapértelmezettnek -, az angol nyelvű üzeneteknél a “lang” paramétert használtuk az nyelv megadásához. Ha az alkalmazást angol nyelvű környezetben töltik be, akkor a “messages_EN.xml” lép érvénybe, minden más esetben pedig a magyar nyelvű szövegek.

A témakörről itt bővebben is lehet olvasni.

Hírfolyam az iWiW nyitóoldalon: csoportosítás

Zárva a bejegyzés sorozatunkat a címlapon megjelenő hírfolyam elemek kapcsán, bemutatjuk a második opciót, melyet használhattok a hírek kiküldésekor: a csoportosítást. Ennek kapcsán az OpenSocial activity két további lehetőségét vezettük be az iWiW-en a hírfolyam elemeknél: a sablonok támogatását, és a hírfolyam elemek csoportosítását. A bejegyzésben bemutatjuk a sablonok használatát, illetve hogy hogyan készíthetőek olyan sablonok, melyek csoportosításra is alkalmasak.

Sablonok

Hírfolyam sablonokat kétféleképpen lehet hozzáadni alkalmazásunkhoz: vagy az alkalmazás XML-jébe ágyazva, vagy külső fájlként meghivatkozva (szintén XML formátum). Mindkét esetben a ModulePrefs részbe kerülnek információk. Az XML-ben elhelyezés a következőképpen néz ki (természetesen ahogy eddig is, a ModulePrefs további tulajdonságai, gyermek elemei megadandóak):

<ModulePrefs>
  <Locale>
    <msg name="uzenet_cime">
      Hello Világ!
    </msg>
    <msg name="uzenet_szovege">
      Ez itt egy szimpla Hello Világ üzenet.
    </msg>
  </Locale>
</ModulePrefs>

A példában ugyan két üzenet szerepel csak, de bármennyit definiálhatunk. Az üzenetek címét és szövegtörzsét két külön sablonnal kell definiálni. Külső XML-re hivatkozni pedig így lehet:

<ModulePrefs>
  <Locale messages="http://example.hu/my-activity-messages.xml"/>
</ModulePrefs>

A hivatkozott XML felépítése:

<?xml version="1.0" encoding="UTF-8"?>
<messagebundle>
  <msg name="uzenet_cime">
    Hello Világ!
  </msg>
  <msg name="uzenet_szovege">
    Ez itt egy szimpla Hello Világ üzenet.
  </msg>
</messagebundle>

Egy ilyen üzenet sablonra a “name” tulajdonságával lehet hivatkozni hírfolyam elem létrehozásakor:

var options = {};
options[opensocial.Activity.Field.TITLE_ID] = "uzenet_cime";
options[opensocial.Activity.Field.BODY_ID] = "uzenet_szovege";
opensocial.requestCreateActivity(opensocial.newActivity(options));

Egy sablonban változókat is használhatunk:

<msg name="osszeadas">
  Az ${a} + ${b} művelet eredménye: ${vegeredmeny}.
</msg>

A paramétereket a következőképpen adhatjuk át:

var options = {};
options[opensocial.Activity.Field.TEMPLATE_PARAMS] = { a: "12", b: "13", vegeredmeny: "42" };
options[opensocial.Activity.Field.TITLE_ID] = "uzenet_cime";
options[opensocial.Activity.Field.BODY_ID] = "osszeadas";
opensocial.requestCreateActivity(opensocial.newActivity(options));

Egy speciális változó is rendelkezésünkre áll, “Subject” névvel, és az aktuális felhasználó adataival. Ezt a következőképpen használhatjuk:

<msg name="osszeadas">
  ${Subject.DisplayName} most ütötte meg a főnyereményt.
</msg>

Ezt a paramétert átadnunk sem kell, a példa a felhasználó nevét - belinkelve a profil oldalára - fogja behelyettesíteni.

Tudnivalók az iWiW-en:

  • Minden, a hivatkozott sablonokban szereplő változóhoz értéket kell rendelnünk a TEMPLATE_PARAMS segítségével.
  • Csak string adható át paraméterként, objektum, vagy például egy OpenSocial Person átadása nem támogatott.
  • Sablon használata esetén a rendszer nem teszi automatikusan a hírfolyam elejére a felhasználó nevét, ezt magunknak kell megtennünk. A hírfolyam nevesítése, ahogyan az értesítéseknél is, kötelező.

Csoportosított hírfolyam elemek

A hírfolyam elemek csoportosítása a sablonok segítségével történik. A “sima” hírfolyam elemen felül definiálni kell azok csoportosított változatát is. Csoportosítás a sablon bármely változó eleme alapján történhet. Például egy alap üzenet:

Példa Béla lájkolt egyet.
Madonna zenésztől Like a Virgin szám a kedvence.

Itt változó paraméter lehet a felhasználó neve, az album neve és magának a számnak a neve. Ez sablonnal így nézhet ki:

<msg name="title">${Subject} lájkolt egyet.</msg>
<msg name="body">${artist} zenésztől ${song} szám a kedvence.</msg>

További sablonok segítségével csoportosíthatóvá tehetjük a hírfolyam elemet, például ha (az aktuális felhasználó ismerősei közül) több felhasználó (vagy egy felhasználó, de többször) is ugyanazt az előadót lájkolja, akkor:

<msg name="title:artist">${Subject.Count} ismerősöd ${artist} ${artist.Count} db számát lájkolta.</msg>
<msg name="body:artist">${Subject.List} kedvenc dalai: ${song.List}.</msg>

A sablon neve után kettősponttal kell jeleznünk, hogy melyik változó szerint kívánunk csoportosítani. Ha a hírfolyamban több hír is megjelenne úgy, hogy az adott változó értéke megegyezik, akkor a rendszer csoportosítani fogja azt a csoportosítást lehetővé tevő sablonokat felhasználva. Ebben a példában egyből láthatóak speciális értékek, a .List felsorolásként jeleníti meg az adott sablon paraméter értékeket, a .Count pedig a darabszámot helyettesíti be.

Lehet csoportosítani felhasználó szerint is, avagy ha az adott felhasználó több számot lájkol egymás után, akkor ahhoz így kell sablont rendelni:

<msg name="title:Subject">${Subject} ${song.Count} dalt lájkolt.</msg>
<msg name="body:Subject">Kedvenc dalai: ${song.List}. Kedvenc zenészei: ${artist.List}</msg>

Ha nincs alapértelmezett (nem csoportosított) sablon, akkor a rendszer a nem-csoportosított esetben a sorrendben legelső sablont használja megjelenítésre. A címlapra kikerüléshez kötelező legalább egy jellemző paraméter szerint csoportosítani mindegyik üzenettípust az alkalmazáson belül (az alap üzenet definiálásán kívül).

Végül, de nem utolsó sorban fogadjátok szeretettel példa alkalmazásunkat, a Rádió Aktivitást.

Bővülő adatkör a felhasználókról, random ismerőslista, paraméterek átadása

Az elmúlt napokban több új lehetőség élesedett mind a Homokozóban, mind az éles rendszerben is elérhetően, továbbá két kisebb változás is volt a Fejlesztői Portálon. A részletek:

Bővebb adatok a felhasználókról

Az első és talán egyben a legizgalmasabb újdonság, hogy bővült a felhasználókról lekérdezhető adatok köre. Eddig a következő adatokat lehetett lekérni:

  • Felhasználó azonosítója: opensocial.Person.Field.ID
  • Felhasználó neve: opensocial.Person.Field.NAME
    • Vezetékneve: opensocial.Name.Field.FAMILY_NAME
    • Keresztneve: opensocial.Name.Field.GIVEN_NAME
    • Egyben: opensocial.Name.Field.UNSTRUCTURED
  • Felhasználó profil oldalának URL-je: opensocial.Person.Field.PROFILE_URL
  • Felhasználó 64×64-es méretű profilképének URL-je: opensocial.Person.Field.THUMBNAIL_URL
  • Felhasználónak telepítve van-e az aktuális alkalmazás: opensocial.Person.Field.HAS_APP

A kör a következő paraméterekkel bővül:

  • Felhasználó beceneve:  opensocial.Person.Field.NICKNAME
  • Felhasználó neme: opensocial.Person.Field.GENDER
  • Felhasználó helye: opensocial.Person.Field.CURRENT_LOCATION
    • Felhasználó országa: opensocial.Address.Field.COUNTRY
    • Felhasználó települése: opensocial.Address.Field.LOCALITY
  • Felhasználó időzónája: opensocial.Person.Field.TIME_ZONE
  • Felhasználó által beszélt nyelvek: opensocial.Person.Field.LANGUAGES_SPOKEN

Az adatokat külön kérni kell a szervertől, amennyiben az alkalmazásnak szüksége van azokra - alapértelmezetten nem küldjük el ezeket az információkat (kímélendő az adatbázist, illetve gyorsítva ezzel az adatlekéréseket). Az egyes mezők neve, illetve értéke az OpenSocial szabvány által definiáltakhoz igazodik. Érdemes lehet az OpenSocial Dev App segítségével átnézni a lehetőségeket, egy felhasználó adatainak lekérdezésekor ott megjelennek a bővített információk.

Íme egy példakód a fentiek használatára:

var params = {};
params[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] = [opensocial.Person.Field.GENDER];
var req = opensocial.newDataRequest();
req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER, params), 'viewer');
req.send(function(response){
  var gender = response.get('viewer').getData().getField(opensocial.Person.Field.GENDER).key;
  if (gender == "MALE") { alert("Hello spaceboy!"); }
  if (gender == "FEMALE") { alert("Hello spacegirl!"); }
});

Mivel a nem-et leszámítva ezeket az információkat nem kötelező megadni az iWiW-en, arra számítsatok, hogy ezen adatok nem minden felhasználónál lesznek elérhetők!

FONTOS!!! Amennyiben már jóváhagyott és élesben lévő alkalmazásod van, és szeretnéd bővíteni az alkalmazás által használt adatok körét, kérjük, hogy ezen szándékodat előzetesen mindenképp jelezd a dev kukac iwiw hu e-mail címen. Adott esetben szükséges lehet az alkalmazás adatkezelési szabályainak frissítése.

Ismerősök véletlenszerűen

Pár véletlenszerű ismerős megjelenítéséhez eddig le kellett kérdezni az összes ismerőst, majd azokból véletlenszerűen választani. Ennek kiváltására és hatékonyabbá tételére bevezettük a “random” sorrendbe rendezhetőséget, melyet a következő példakód szemléltet:

var req = opensocial.newDataRequest();
var spec = opensocial.newIdSpec({"userId": "OWNER", "groupId": "FRIENDS"});
var params = { "sortOrder": "random", "max": 3 };
req.add(req.newFetchPeopleRequest(spec, params), "friends");
req.send(function(response){
  response.get("friends").getData().each(function(person) {
    alert(person.getDisplayName());
  });
});

Kérjük alkalmazásaitokkal igazodjatok ehhez a lehetőséghez!

Paraméterek átadása az alkalmazásnak

Bár az eddigiekben is lehetőséget teremtettünk az alkalmazásnak URL-en keresztüli paraméterátadásra, az adatok nem mentek át, ha a felhasználónak nem volt feltelepítve az alkalmazás (telepítőképernyőnél elveszett), vagy ha éppen nem volt belépve (login képernyőnél elveszett) amikor a linkre kattintott. Ez javítva lett, avagy a paraméterek megmaradnak a bejelentkezés, alkalmazás telepítés során is. Példakód:

gadgets.views.requestNavigateTo(gadgets.views.getSupportedViews()["canvas"], {
foo: 'bar',
url: 'http://dev.iwiw.hu/?foo=bar'
});
var params = gadgets.views.getParams();
alert(params['foo']);

Az első kódrészlet a canvasra navigálást mutatja meg, a második pedig hogy hogyan lehet kiolvasni az átadott paramétereket. Paramétereket nem csak a requestNavigateTo segítségével történő átnavigáláskor, hanem hírfolyamban és értesítésben szereplő linkekben is át lehet adni.

Fejlesztői portál

A fejlesztői portálon is végeztünk kisebb fejlesztéseket. Az egyik változás, hogy az eddig nem túl egyértelmű “Alkalmazás frissítése” gombnak immár az elhelyezkedése és leírása is jelzi, hogy minden környezetben (Homokozó is, éles rendszer is) frissül az alkalmazás, amennyiben megnyomjátok a gombot (emiatt érdemes külön fejlesztői verziót felvenni külön az alkalmazásból).

Egy másik változás, hogy újonnan hozzáadott alkalmazás XML megadása után nem kell kattintgatni ahhoz, hogy a Homokozón megjelenjen az alkalmazás, hanem egyből elérhető, aktív lesz ebben a környezetben.

Promo kép használata

Az éles indulás után az Alkalmazások főmenü alatt elérhető katalógus nyitólapon szeretnénk az alkalmazásokat promotálni, illetve rotálni a legelső, kiemelt helyen. Ahhoz, hogy ott esztétikusan  legyen látható az alkalmazás, nem a thumbnail fog megjelenni az alkalmazás neve mellett, hanem az un. promo kép.

promokep

Kérjük készítsetek ilyet is az alkalmazásokhoz, és rakjátok fel a szerveretekre, mert nem tudhatjátok, hogy mikor kerül épp kiemelésre a ti munkátok.

A promo kép definiálásáról a Wiki-ben olvashattok a Gadget XML megkötések cikk alatt, de röviden itt is megismételjük, mivel picit trükkös a dolog: nem az XML-ben kell definiálni explicit módon, “csak” léteznie kell a képnek.

promó kép* 176x(max)176 kiemelt alkalmazás promóképe
  • alkalmazás lista elején a kiemelt alkalmazásokon

* A promó kép URLjét a rendszer az alkalmazás thumbnail URL-ből képezi:

  • ha az url utolsó / utáni része tartalmaz .-ot, az utolsó . elé illeszti a ‘_promo’ karaktereket
  • ha nem, az url vége után illetszti a ‘_promo’ karaktereket
  • pl: 
    http://foo.com/bar/baz.png -> http://foo.com/bar/baz_promo.png
    http://foo.com/bar/baz -> http://foo.com/bar/baz_promo

Fejlesztői dokumentáció PDF-ben

Az eddigi blogbejegyzések és a wiki tartalmából belső használatra összeállítottunk egy PDF dokumentumot, azonban úgy gondoltuk, hogy ez talán mások számára is érdekes lehet, ezért ezúton megosztanánk veletek is. A Fejlesztői Portált használóknak és ismerőknek várhatóan nem lesz benne semmi újdonság, az újonnan érkezetteknek viszont esetleg segíthet a kezdeti ismerkedésben a csak technikai kérdéseket tartalmazó 12 oldalas anyag.

A dokumentum elérhetősége: iWiW alkalmazások Fejlesztői Dokumentáció.

Hogyan írjunk alkalmazást az iWiW API alá 5 perc alatt?

Csodák persze nincsenek, de a Budapest New Technology Meetup rendezvényen Bácsi László és Salomváry Márton a Virgo Systems képviseletében “Gyors OpenSocial minialkalmazás-fejlesztés” címmel 5 perc alatt, élőben fognak kódolni, hogy bemutassák a szabvány nyújtotta lehetőségeket.

A Meetup nyitott, gyertek minél többen.

Első alkalmazásom

Az iWiW alkalmazások koncepciójának megértésében sokat segíthet, hogy ha végigmegyünk egy telepítési folyamaton és kipróbáljuk hogyan fognak megjelenni, mely oldalakon láthatóak ezek az alkalmazások. Ezt foglaltam most össze a regisztrációtól kezdve az első alkalmazás kipróbálásáig egy screenshot tour keretében. Ami a művelethez kell: egy e-mail cím, egy magyar mobiltelefon és egy webszerver/tárhely (különösebb követelmények nélkül).

A követelmények kapcsán a mobiltelefon a regisztrációhoz szükséges, SMS-ben fogunk aktiváló kódot kapni, ha hozzá szeretnénk férni a Homokozóhoz. A tárhely pedig azért kell, hogy fel tudjuk tölteni az alkalmazásunkat (egy XML fájlt). Az alkalmazás telepítéséhez egy URL-t kell megadni, ahol az elérhető.

De vágjunk bele a telepítésbe! Ehhez a http://dev.iwiw.hu/ oldalt kell meglátogatnunk:

Címlap

Itt válasszuk a regisztrációt, és adjuk meg adatainkat. Minden adat megadása kötelező. A Wiki felhasználói névnél egy olyan azonosítót kell megadnunk, melyet később használni szeretnénk a Wikiben. Az ellenőrző szónál azt a két szót kell megadnunk, amik a képen szerepelnek.

Regisztráció 1.  Regisztráció 2.

Ha mindent jól kitöltöttünk, akkor kapni fogunk egy e-mailt. Kattintsunk a benne levő linkre! Ekkor a rendszer bejelentkeztet minket, és egyből a mobilszám kezelés oldalra jutunk. Itt adjunk meg magyarországi mobilszámunkat! SMS-ben kapni fogunk egy kódot, ezt írjuk be a megfelelő mezőbe! Egyes mobilokon a kis L betű és az 1-es szám összekeverhető, figyeljünk rá hogy jól írjuk be a kódot (de nincs baj ha nem sikerül elsőre, többször is lehet próbálkozni):

SMS aktiválás  SMS aktiválás, siker

Következő lépés lehet a Homokozóban (az iWiW mini klónban) létrehozni a felhasználóinkat. Ehhez egy jelszót kell megadnunk, amivel ott be tudunk lépni majd. A megadás után a saját felhasználónk azonnal létrejön, és elindul még 300 ismerős legenerálása is, mely adott esetben akár pár órát is igénybe vehet (attól függően, hogy éppen mennyi új regisztráció van folyamatban):

SMS aktiválás, siker Teszt felhasználók Teszt felhasználók, siker

Az Alkalmazás fülre kattintva belevághatunk az első alkalmazásunk telepítésébe is. Itt egy webcímet kell megadnunk. Ehhez töltsük le a Hello iWiW alkalmazást, majd töltsük azt fel a szerverünkre. A szerverünkön levő alkalmazás elérhetőségét kell megadnunk (http://szerverneve/utvonal/helloiwiw.xml - értelemszerűen kitöltve), ehhez menjünk az Alkalmazások fülre. Kategóriának egyelőre válasszunk kedvünkre valamit, és egyelőre a felhasználási feltételekkel sem kell törődnünk, beírhatjuk hogy “teszt alkalmazás”:

Alkalmazások Alkalmazások 2.

A felvitel után nem lesz még elérhető az alkalmazás a Homokozóban, ehhez menjünk az alkalmazáshoz tartozó Vezérlőpultra, és nyomjuk meg a Kirakás a Homokozóba gombot. Ekkor pár figyelmeztetést kaptunk, de ez jelenleg figyelmen kívül hagyhatjuk - a jövőben viszont fontos lesz majd. De most kattintsunk az Aktiválás gombra, hogy  alkalmazásunk ténylegesen megjelenjen a Homokozóban! (Az alkalmazás Passzív állapotban nem látható a Homokozóban, tehát se nem telepíthető, se nem használható. Ha már telepített alkalmazást állítunk Passzív állapota, nem történik adatvesztés, csak eltűnik az alkalmazás. Legközelebb amikor visszakapcsoljuk, a felhasználók újra látni fogják alkalmazásaikat. Ha töröljük, akkor a telepítések, beállítások és egyéb információk is elvesznek.)

Vezérlőpult Vezérlőpult Vezérlőpult Vezérlőpult Vezérlőpult Vezérlőpult

Most már kikerült, elérhető a Hello iWiW, nézzük is meg! Jelentkezzünk be az e-mail címünkkel, és az imént megadott Homokozó jelszóval a http://sandbox.iwiw.hu/ címen, majd menjünk a Kiegészítők fülre, itt megjelenik az alkalmazás a listában.

Homokozó

Az alkalmazásra kattintva beindul a telepítése: pipáljuk be a felhasználási feltétel elfogadásokat és már meg is tekinthető az alkalmazásunk!

Alkalmazás felvitel Alkalmazás felvitel

Az alkalmazás a profil oldalunkon is megjelenik.