A trafikmutyi médiahullámot meglovagolandó, én is csináltam egy mashupot a már jól ismert korábbi projektjeimből, és ezúttal mobilodon tudod chekkolni, hogy merre láttak a jómagyar honfitársak “itt nemzeti dohánybolt nyílik” feliratot: www.holvancigi.hu

Tessék bookmarkolni, megoszatni lájkolni és terjeszteni! Figyelem! A dohányosok korábban halnak!

A következő garázsprojektem a pécsieknek lehet hasznos, mobilon tudják majd chekkolni merre járnak a buszok.

Minden további infó a fejlesztésről a projekt FB oldalán fog menni: http://www.facebook.com/pages/Hol-a-busz/450232621719996

Projektindító poszt:

Tegnap a Comenius IHT 1/13-mal óra végén azt beszéltük, hogy ebben a hirtelen jött újratélben nem is biztos, hogy járnak a pécsi helyijáratos buszok, nézzük meg neten. A PKZRT-nek van egy hivatalos oldala, ahol nyomon lehet követni a buszokat (GPS adóval vannak ellátva), így láthatjuk ha épp egy sarokkal előttünk megy. Csak az a baj, hogy ezt az oldalt mobilon lehetetlen használni, erre Bálint hívta fel a figyelmem. JS dropdown, meg iframe gmaps embed, használhatatlan. Pedig ez tipikusan az az oldal lenne, amit az ember a buszmegállóban állva (vagy felé szaladva) használna, nem otthon kényelmesen a fotelban. Szóval az osztály feldobta a labdát (tudják, hogy mostanában mobil webbel foglalkozom) csináljam meg a mobilos felületet.Óra után gyors source turkálás, eléggé áttekinthető a kód, meg is találtam, hogy a weboldal hogyan kommunikál a szerverrel, és hogyan kéri le a buszok adatait. Szóval most itt tartok, arra gondoltam, hogy ennek az apró fejlesztésnek minden fontosabb mozzanatát egy külön fb oldalon publikálom, sőt az első tesztverziókat is elérhetővé teszem, és a teszterekkel itt tartom a kapcsolatokat….nyílt lapokkal.

Adott a kocsmatura.net webappom, ezzel futok neki ismét az AppSore-nak. (az első próbálkozásom visszadobták)

Szóval van egy már kész HTML/JS/PHP alapú weboldal, ezt átírtam HTML5/JS kódra, a szerveroldali dolgokra csináltam egy saját API-t amit a HMTL fájl jQuery-vel hív meg és JS dolgozza fel.

Ezt most nem részletezném, a lényeg, hogy elkészült a kód, sajátgépen böngészőben fut a sima HTML és JS kódot tartalmazó oldal. Ekkor Titanium indít, majd új HTML5 based project és a Resources/HTML mappa tartalmának lecserélése a saját kódbázisra. iPhone simulator indít, elvileg itt is működnie kell.

Most következik az iTunse Connect és mindenféle certifikáció beszerzése, hogy a Titanium tudjon csinálni natív buildet és a saját telefonomra át tudjam tölteni az immár natív alkalmazást.

[2013.02.09., 16:15]

1. iTunes Connect: (device reg) irszam miatt megvolt
2. iTunes Connect: uj app id
3. iTunes Connect: uj Provisioning Profiles, letolt, futtat, xcode telepít
4. Titanium: publish/ad-hoc/enterprise, app mentésének helye, next next publish
5. Titanium: valami error
6. telefon kábellel összeköt
7. Titanium: ismét publish/ad-hoc/enterprise
8. Titanium: megint error
9. Xcode Organizer: Library/Provisioning Profiles-bol a kocsmatura cert áthúzása a telefonra
10. Titanium: ismét publish/ad-hoc/enterprise
11. Titanium: megint error
12. …logout, login…

Most leszedem az AppStore-ba szükséges certifikációkat (iTunes Connect) és beküldöm, gondolom megint egy hét várakozás lesz…

[2013.02.17., 09:14]

Egy hétnyi review után jött a mail, miszerint visszadobták, ugyanis a kocsmakeresés miatt 17+-os ratingre kell állítanom az appot. Nem kérnek új buildet, csak javítsam a metaadatokat. Megtettem, megint várok…

[2013.02.19., 15:54]

Átment az app, kint van a store-ban: www.appstore.com/kocsmatura

Van baja rendesen, itt-ott a grafikák nagyon bénák, elmosottak, a helymeghatározásra is láma módon kétszer kérdez rá, de nem referencia app készítése volt a célom, szóval ezeket eléggé összecsaptam, a cél az boltba kerülés lépéseinek kitapasztalása volt, most következnek majd a komolyabb tervek!

Egy újabb garázsprojektem indult útjára, de az első posztot ezennel nem én írtam meg róla, hanem stro-B barátom, olvassátok ékes szavait: http://www.stro-b.com/patikablog/ugyeletes-patika-hol/

Sajtómegjelenések

• Patikablog
• Szifon.com
• iPhone Hungary
• Blog Pécs
• Apple hírek
• iPhone Blog

Verziók

• 2.0 Teljesen újraírt feldolgozó kód. Pontosabb eredmények.
• 1.3 Hibajavítás, együttműködés az embeddelhető modullal (http://embed.ugyeletespatika.com)
• 1.2 Új funkció: közeli patikák térképes megjelenítésénel már nem google keresés van használva, hanem hivatalos forrásból származó adatbázisból vannak a gyógyszertárak megjelenítve
• 1.1 Hibajavítás+új funkció: ha az adott városban nincs ügyeletes gyógyszertár, akkor megmutatja mely közeli városokban van
• 1.0.x Már nem béta, az alapfunkciók a tervek szerint működnek
• 0.9.7x beta További hibajavítások, funkcióbővítések
  • Kézi városmegadáskor patika címének mutatása térképen
• 0.9.6x beta További hibajavítások, funkcióbővítések
  • Budapest agglomerációk ügyeleti beosztásai
  • Budapesten a több ügyeletes patika közül távolság szerinti legközelebbi jelzése
• 0.9b Hibajavítások
• 0.8b Első publikus béta verzió
  • Az élesítés utáni első hét forgalmi statisztikája: PDF

A lentebbi posztomban a képlet mutatja, hogy valami mobilra optimalizált, facebookkal és (virulens) megosztással kapcsolatos valamit szeretnék kitalálni. Örök kedvenc állatorvosi lovam, a Chuck Norris mém, most is erről húzok le egy bőrt, és most mobil framework nélküli, touch vezérlést használó valamit akartam csinálni, csak hogy a fejlesztés buktatóira fény derüljön. Így összedobtam ezt a webappot.

Feltételezhetően csak iPhoneon működik normálisan. Az érdekességek, amikre fény derült számomra:

• egyscreenes app esetén (én így nevezem amikor nem akarom a scrollozást engedni) számításba kell venni, hogy böngészőben nézve jelentősen kisebb a felületünk, mint fullscreenen, márpedig legtöbben nem fogják a webappot kitenni kezdőképernyőre, illetve a portrait és landscape nézetet is nyílván elegánsabban kellene lekezelni mint itt
• iOS Safari néha viccesen cachel, ne dőljünk be neki
• jQTouch és egyéb frameworkok sokszor nagyon béták és felesleges használni. Sokkal gyorsabban lehet haladni, ha mi magunk írjuk meg a felületet HTML/CSS-ben, és csak kiegészítjük a szükséges meta és jquery pluginekkel a kódot (itt én csak a viewportot, no-scale-t, ikont és a touch slider-t használtam, egyébként egy mezei weboldal)
• ios facebook app-ban nyitot oldalon nem mukodik a sharer.php dialog

Elkészítettem a bankakozelben.eu egy klónját. Ebben az alkalmazásban a benzinkutakat próbáltam meg a usereknek kikeresni távolság alapján. Természetesen itt is a 4sq adatbázisát használom, így előfordulhat, hogy bár van a közelben kút, de a program mégsem jelzi, mert a 4sq-ben még senki sem checkinelt be.

Figyelembe vettem a korábbi kritikákat is a listázással kapcsolatban. Egyenlőre teszt fázisban üzemel a projekt, kötelező lábjegyzet:

Ez egy mobilokra optimalizált webalkalmazás, asztali gépen nézve a helymeghatározás pontatlan, tesztkészülék hiányában csak iPhone-on garantált a működés.

Most az érdekesebb hibajelenségekről illetve olyan dolgokról írnék, amikbe a fejlesztés során belefutottam, és amikkel abszolút nem lehet a munkálatok elején tervezni.

Foursquare

Azt már említettem ugye a legelején, hogy a bankok címeit a közösségre hagyatkozva gyűjtöm be, a foursquare adatbázisát használom.

Viszont gyakran nem jól vannak megadva a címek, sőt gyakran hiányosak is, ugyanis az address csak opcionális mező helyszín létrehozásakor, a 4sq a koordinátákat tárolja le. Ahhoz, hogy én mindenhol szépen utcaneveket listázhassak nekem kellett a hosszúsági és szélességi koordinátákat fordított geolokációval címmé alakítani.

A másik probléma maga a kulcsszó. Ez úgy néz ki, hogy egy keresést csinálok úgy, hogy a kulcsszó a bank neve. Na ez néha problémás…

Budapest bank

Belefutottam abba, hogy pl a Budapest Bank esetén a keresési kulcsszó a “budapest” szó volt (általánosságban minden bankhoz a saját egyszerűsített nevét társítottam kulcsszónak). A probléma az lett itt, hogy a találati listában minden olyan hely megjelent, aminek a nevében szerepelt a “budapest” szó.

K&H

A K&H bank esetén is az előzőhöz hasonlatos a probléma. A kereső szó itt is a “k&h”, viszont az “&” jelet logikai AND operátornak veszi a 4sq API, így minden olyan közeli helyet listáz aminek a nevében szerepel a “K” és a “H” betű.

jQtouch

Rengeteg nem várt probléma adódott még abból is, hogy maga a keretrendszer is csak béta, vagyis hibákat tartalmaz. Pl volt olyan, hogy a telefon böngészőjében nyitva tök jól működött a program, de homescreenre téve és onnan indítva nem érzékelte a scroll eventet. Mint kiderült ezt egy hibás CSS osztály okozta.

Na mindegy, jó szórakozás volt, tényleg csak az ünnepek alatti láblógatásra találtam ki magamnak a projektet, úgyhogy befejezettnek tekintem. Bár lehet ha majd nagyon ráérek csinálok belőle egy csomó klón alkalmazást: közeli benzinkutak, közeli gyógyszertárak, közeli kocsmák…

Akinek szüksége van rá, használja egészséggel: http://bankakozelben.eu

Akinek pedig hasonló alkalmazás kellene, keressen fel, biztosan meg tudunk állapodni ;)

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: