Szóval bütykölgettem az ünnepek alatt. Ez a jQtouch egy érdekes dolog, kicsit másképp kell nekimenni az ilyen webappoknak, mint a hagyományos weboldalaknak. Más iskola.

Pl a munkafolyamatok is mások picit. Legalábbis nekem máshogy volt kényelmes.
Egy weboldal esetén elkészül a címlap látványterv, majd a főbb – esetleg minden – aloldal terve. Majd elkészül a címlap sitebuild és ezután a megrajzolt aloldalak is lekódolódnak statikusan, legvégül pedig jöhet a php/sql. Na itt ez nem így ment.
Megrajzoltam az app egy olyan screenjét, amin rajta van minden fontos dolog:

• fejléc
• lábléc
• lista
• ikon
• felirat
• gomb

A további screeneket nem rajzoltam meg, mert ebben a szakaszban még egyáltalán nem biztos, hogy amit eltervezek az úgy meg is valósítható… akkor meg minek megrajzolni. Szóval megvolt a nyitó screen, de abból nem készült el a statikus html/css, hanem fogtam a jQtouch alapértelmezett skinjét és a további fejlesztés során azt használtam. Összeraktam a nyitó képet, az aloldalakat, animációkat, leprogramoztam a php részeket…. mindent. És a leges legvégén, amikor minden funkció működött csak akkor csináltam meg a kitalált designt.
Ez nagyon érdekes volt, de mondok valamit: szabdságot adott a fejlesztés közben, hogy változtassak a funkciókon.

Nyugi nem untatok senkit step by step howtoval, de a gondolataimat felvázolom. Egy ilyen alkalmazásnál kérdéses lehet, hogy honnan szedjem a bank címeit. Google-re nem hagyatkozhatom, csak bank névre keresve nem listáz mindent.

Össze szedhetném kézzel netről a bankok címlistáit de lusta vagyok, szóval az általam imádott 4sq API-ra és a közösség erejére hagyatkozom. A 4sq userek már szinte minden fontosabb helyet felvittek, és ez le is kérdezhető, királyság.

Az eredmény egy JSON objektum lesz, ezt kell kicsit átnyálazgatni és máris egy emészthető tömböt kapok.

Az év utolsó dobása részemről egy bankkereső webapp lesz. Tudom tudom, miért erre külön alkalmazás, amikor beírom a bank nevét a google maps-be és máris látom a pontokat körülöttem. Két okból:

• a kocsmatúra webappon kívül jelenleg nincs más demó a portfóliómba
• a lehető legegyszerűbb bankkereső procedúrát akarom megcsinálni

1. kattintás: elindítod az alkalmazást
2. kattintás: abc rendben a bankok nevei közül kiválasztod melyiket keresed
3. kattintás: itt már látod távolság szerint növekvő rendben utcanevekkel a kiválasztott bankfiókokat, ha az utcára kattintasz akkor máris megkapod a jelenlegi pozíciód és a választott cím közti legrövidebb útvonalat berajzolva térképen

Ami a designt illet semmi extra:

Amikor két SOS deadlineos projekt közt akad egy-két szabad órácskám saját bocskorom fényezésére, akkor próbálom a personal branding témakört körbefutni picit. Elindítottam hát a megmondo.com-on lévő facebook oldalam.

Sőt ezzel kapcsolatban szakértettem picit a Bognár Stúdió SEO blogján: Vírusmarketing és SEO:

[…] Egy webdesigner felfogható márkának, aki legtöbb munkáját kiajánlások útján kapja. Minden designer rendelkezik portfolio oldallal, de kevesen jelennek meg a facebookon, ahol hihetetlenül egyszerű pont a kiajánlás funkció (a tetszetős munkáink egyetlen kattintással megoszthatják kedves látogatóink). […]

Néhány hónapja felállítottam magamnak egy szabályt. Ha bármilyen webes dologgal kapcsolatos ötletem támad, azt azonnal feljegyzem a wunderlistbe.

A wunderlist egy todo kezelő program, ezt használom a laptopon és a telefonon is, szinkronban vannak, nagyon könnyen és gyorsan tudok projekteket és taskokat menedzselni vele, imádom használni.

Korábban is voltak folyamatosan ötleteim, de mindig csak megmaradtak “na majd ezt meg azt megcsinálom valamikor mert milyen jó poén” dolognak. Ismerős a szitu?

Amint elhatároztam, hogy ezeket az ötleteket rögzítem abba a programba, amiben az éles teendők is vannak, máris lendültek a dolgok.

Wunderlist disclaimer: nálam minden projekt egy lista, és a projekthez kapcsolódó munkafolyamatok a taskok. Na itt a projektek (listák) közt van egy “ötletek” elnevezésű listaelem, és ez alá vannak egyszerű nem dátumhoz kötött taskok létrehozva.

A következő szabály az volt, hogy ezeket az “ötlet taskokat” kb havonta átnézem, és kiválasztok egyet, amit ezután EGYETLEN kattintással átmozgatok, és igazi ÉLES projektté alakítom, ezáltal megjelenik dátumhoz kapcsolva mint ELVÉGZENDŐ teendő. Ezután már ottt van a késztetés, hogy igen ezt meg kell valósítani, ki kell pipálni.

És a dolog baszki működik, az utóbbi időben tényleg foghatóvá váltak kb 2 havonta olyan dolgok, amik mondjuk a pirosnál állva villantak be, 5 másodperc alatt felírtam, aztán már mentem is tovább a dolgomra. És most teljesen mindegy, hogy egy összetettebb kocsmatúra webappról, chuck norris generátorrol vagy valami teljesen bődületes, 1-2 munkaórás baromságról  van szó.

És emberek, a cső be van tárazva… Stay Hungry. Stay Foolish!

Bemutatnám a gyorsan összekattintott facebookba huzalozott mikroszolgáltatást, az instant facepalm generátort:

http://instantfacepalm.tk

Okostelefonokon homescreenezhető, egykattintós applikáció.

Ha már mindenki felszállt a facebook vonatra, akkor úgy gondolom ideje kidobni a csillagos értékelést. Ez egyszerűbb is a usereknek, mivel nem kell gondolkodni az 1-5-ös skálán, a like egy nagyon egyszerű valami, vagy jó, vagy nem, vagy tetszik vagy nem. Boolen.

Ha pl van egy webshopod és a termékeid rendelkezni egyedi url-lel (márpedig miért ne rendelkezne) akkor kiteszel mindegyikhez egy like buttont. Ha jó belájkolják, ha nem akkor nem. A legjobb terméked kapja a legtöbb lájkot.

A lájkok száma egyszerűen kinyerhető a Graph API-val egy sima url kéréssel valahogy így:

http://graph.facebook.com/http://atewebshopod.com/id/12345

Ezt egy JSON dekódolóval megetetve máris megvan a lájkok száma. Vagyis nem pont a lájkok száma, mert a lájkbutton countere egy aggregált értéket mutat, amibe a megosztások és a kommentek is beleszámítanak, de kiindulási alapnak jó.

Jójó, még csak pár éve vagyok benne a wedesign bizniszben, nem fogalmazhatnék meg nagy szavakat, de elmondom a nettó tapasztalatom:

A kinézet nem fontos…

…várjatok, máshogyan fogalmazok:

…a kinézet a legfontosabb!

Nehéz ügy, mi?

Elkezdtem érdeklődni a webalkalmazások fejlesztése iránt, első ilyen kísérleti jellegű művem a kocsmatura.net lenne.

Okostelefonokra optimalizált webapp. Ez azt jelenti, hogy teljesen PHP/HTML/CSS/JS/MySQL technológiákon alapszik, hagyományos webszerveren fut. iPhone-on elmenthető a kezdőképernyőre, innen indítva saját ikonnal és teljes képernyőben fut, mintha csak hagyományos app lenne.

Elvileg androidon és blackberryn is működik.

Ezt tudja:

Login után tudunk magunknak létrehozni kocsmatúrákat, pl osztálytalálkozó névvel. Aztán ahogyan vándorlunk presszóról presszóra, fel tudjuk venni a tartózkodási helyünk koordinátáit (GPS képes telefon kell hozzá) az adott túrához, és az logolja így nekünk az est útvonalát. Később facebookon meg is oszthatjuk a pajtásokkal a térképet ahol megfordultunk.

Béta

Van még egy két trükk amit be szeretnék építeni (közeli kocsmák foursquare API-ból, checkinek szerint rangsorolva, stb…), de igazából nem tervezek komoly fejlesztéseket, tényleg csak gyakorló feladatnak szántam magamnak. Természetesen tele van hibákkal, ha találsz valamit, akkor a @emem07 twitterre jöhet.

Hibák és todok listája

A térképes alkalmazásokkal az a baj, hogy valamilyen adatbázisból dolgozni kell, és ennek két módja van. Egy nyilvános adatbázist használunk (nem valószínű, hogy lesz ilyen), lopunk (jajj ilyen csúnyaságot nem csinálunk) vagy létrehozzuk magunk. (venni is lehet, de ez ugye senkinek sem fordul meg a fejében)

Az én ötletem az, hogy hagyatkozzunk a közösségre, és valamelyik közösségi helymegosztós szolgáltatás API-ja segítségével gyűjtöm be pl a közeli kocsmákat.

[Pécs]

A foursquare-t már sokan használják itthon is, az adatbázisa elég jól fel van töltve, és jól vannak kategorizálva a helyek, úgyhogy most ezzel fogok próbálkozni…

[Szederkény]

Van egy ilyen venues API. Elvileg OAuth után lekérdezhető az ami nekem kell, gondolom JSON-ban adja vissza az eredményt.

[Mohács]

Működni látszik a dolog. Regisztráltam magamnak OAuth id-t és secretet és Pécs koordinátáit megadva már meg is vannak a helyek. Most szűrjük le kategóriákra…

[Mohács]

A kategóriákat ID-ik szerint tudjuk szűrni, ezek pedig itt találhatóak… (kocsmák: 4bf58dd8d48988d11b941735)

[Mohács]

Na jó, amit akartam elértem: a foursqare API segítségével le tudom kérdezni bármely koordináta körül lévő helyeket, akár kategóriákra szűrve. Íme a pécsi kocsmák listája: http://sandbox.mondovicsmihaly.tk/4sq/