Címkék » development


Trafik app

2013. június 24. javascript development html5 github komment hozzászólás

Mostanában nagy a felhajtás a trafik mutyi körül, láttam mennyi helyen elkezdték gyűjteni az emberek a leendő trafikok helyét, gondoltam hát egyet és összedobtam egy igen egyszerű webes alkalmazást, ezen igény kielégítésére. Teremtettem hát némi szabadidőt és 3 este után megszületett a Trafik.

trafik-app-preview.jpg

Végtelenül egyszerű alkalmazás, egyetlen célja, hogy megmutassa hol van a legközelebbi trafik.

Egyik mobilalkalmazás-boltban sem található meg. A fő célom az volt, hogy HTML 5-ös alkalmazást készítsek, JavaScript és CSS használatával, végül nem kívántam becsomagolni, hogy natív app látszatát adja. E helyett első körben iOS felhasználóknak kedvezve, webről telepíthető verzió készült el. Ez kissé hasonlít a telepíthető alkalmazásokhoz, mert elrejti a Safari fejlécét. A többi nagyobb platform jelenleg szűkében van az efféle megoldásoknak, így a legegyszerűbben kezdőképernyőhöz téve használhatjátok az alkalmazást. 

Flat minimal

A felület, twitter bootstrap-ra épülő Flat-UI adja. Az alkalmazás ikonját lecserélném, ha érzel magadban annyi energiát, hogy egy egyszerű, hasonló stílusú ikont készíts, jelezd felém! Inspirációt és a fenti képet dribbble-ről szedtem és természetesen tagadhatatlan, hogy Sun-hoz hasonló a nyitóképernyő. Mert imádom.

Tech bla-bla

Hogyan működik? Lássuk csak. A nem régiben megjelent Google Maps v3.11 javascript API-t használtam a térkép megjelenítéséhez. Pofon egyszerű lett, sokkal jobb mint az első két verzió. Street View integrációt is kapott (kattintsatok a kis kör alakú képre).  Az alkalmazás cacheléséhez manifest fájlt használtam, melynek működéséről ebben a cikkben írnak elég részletesen. A trafikok listáját publikus, egyedi Google térképről értem el, letölthető kml formátumban.

Az egész alkalmazás kódbázisa hamarosan elérhető GitHub-on. Küldjetek feature requestet, forkoljátok, jelezzétek ha valami nincs a helyén. Jó pöfékelést!

Játék készítése Node.js és socket.io használatával - 1. rész

2013. június 20. javascript development komment hozzászólás

Kedvet kaptam játszani egy nagyon egyszerű, de annál inkább szórakoztatóbb kártya (társas) játékot. Történethez tartozik, hogy meg szerettem volna vásárolni azt, de sehol nem találtam tisztességes áron, így hát nyakamba vettem az online szabálykönyvet és nekiültem implementálni. 

JavaScript nyelven írtam a játék logikáját, amit eleinte frontend oldalra terveztem kitenni, végül szerver oldalra került. Készültek tesztek Jasmine JS segítségével. Nagyjából 60 tesztesettel fedtem le , amiben 100-nál is több állítás van. Frontenden csak a socket.io kliens kódja és az eseményvezérelt UI kódbázisa található. Minden egyes kliens mozzanatot a szerver felé küld, így szűrve a csalás lehetőségét.

Most kezdtem el (újra) ismerkedni a Node.js rejtelmeivel, nehéz volt frontend-en megszokott dolgokat elfelejteni, hiszen más szabályok vannak szerver oldalon. Hozzáteszem, itt minden jobb, kényelmesebb és elérhető npm-el.

Választásom Expressjs-re esett, ami nagyban leegyszerűsítettem a Node.js hiányosságaimat. Pillanatokon belül sikerült egy példa szervert beállítanom. Először telepíteni kell a hiányzó node modult.

$ sudo npm install express

Majd készítettem egy basic-server.js fájlt, amibe betöltöm a későbbiekben használt elemeket.

var app    = require('express')(),
    server = require('http').createServer(app);

app.get('/', function(request, response) {
    response.sendfile(__dirname + '/index.html');
});
server.listen(3000);

var activePlayerCount = 0;
io.sockets.on('connection', function(socket) {
    activePlayerCount++;
    // ez a node konzolján jelenik majd meg
    console.log('Aktív játékosok száma:' activePlayerCount);
    io.sockets.emit('playerChange', {number: activePlayerCount});
    socket.on('disconnect', function() {
        activePlayerCount--;
        io.sockets.emit('playerChange', {number: activePlayerCount});
    });
});

Szerver indítása után a http://127.0.0.1:3000/ oldalon már az index.html fájlunkat szolgáljuk ki ahova a már említett frontend kódokat helyezzük. Szerepeljen benne valami ilyesmi:

<!DOCTYPE html>
<html>
<head>
  <script src="/static/app.js"></script>
  <script src="/socket.io/socket.io.js"></script>
  <script>
  var socket = io.connect('http://127.0.0.1:3000');
  socket.on('playerChange', function(data) {
    // ez a böngésző konzolján jelenik majd meg
    console.log('Aktív játékosok száma:', data.number);
  });
  </script>
</head>
<body>Hello world!</body>
</html>

A fenti páros az egyidejűleg az oldalon tartózkodó felhasználók számát fogja kiírni a böngésző ill. a szerver konzoljára. Használjuk a socket.io.js fájlt, ezt a webszerver kiszolgálja statikusan, nem kell letölteni/másolgatni. Viszont az app.js fájlra szükségünk van és jelenleg 404-et kap. Ezért bővítettem a szervert egy statikus fájlkiszolgálással.

app.configure(function(){
    app.use("/static", express.static(__dirname + '/src/'));
});

Ez most egyben egy routing is, hiszen minden kérés ami illeszkedik a /static/* -ra azt az src/ mappából fogja kiszolgálni a node szerver. Van egy kellemetlen mellékhatása a basic-server.js fájl bővítésének: újra kell indítani minden alkalommal a szervert.

$ sudo node basic-server.js

Elvileg 1024 alatti portok figyeléséhez szükség van sudo-ra, gyakorlatilag én a 3000-es portot sem tudtam sudo nélkül hallgatni. Lehet használja valami.

Jelenleg állapotban tehát él a kiszolgálás, csatlakozhatunk több szállal (akár több böngésző füllel is) a szerverhez, mindegyik egy-egy egyedi "játékosnak" felel meg. Tudunk a szerver és a játékosok között kommunikálni, eseményeket kezelni. A következő lépés az lesz, hogy minden "játékost" egyedileg azonosítunk.

Folyt köv.

Node.js telepítése Mac OSX-re

2013. június 17. development OSX selfnote komment hozzászólás

Gyors és lényegre törő leszek, nem friss a téma, afféle #selfnote ez. A cukormázas részt elolvashatjátok angolul.

Első lépés: Node.js telepítése

Roppant egyszerű dolgunk van ugyanis, Xcode telepíti, így nincs más teendőnk mint AppStore-ban megkeresni és letölteni azt.

Második lépés: NPM telepítése

Ez a Node Package Manager-e, amit nem is tudnék a nevénél jobban jellemezni.

$ curl https://npmjs.org/install.sh | sudo sh

Alternatív megoldás, töltsd le a forráskódot github-ról.

$ git clone http://github.com/isaacs/npm.git
$ cd npm
$ sudo make install

~/.bash_profile -ba be kell tenni két sort, hogy az npm megtalálja a hozzá tartozó moduljait.

export NODE_PATH="/usr/local/lib/node"
export PATH="/usr/local/bin:/usr/local/sbin: ↩
/usr/local/mysql/bin:/usr/local/share/npm/bin:$PATH"

Értelem szerűen a ↩ jel és a sortörés maga sem kell. Profile reload után már működnie is kell mindennek. 

Harmadik lépés: Szerver indítása

Hozz létre egy server.js fájlt és állítsd be a tartalmának az alábbi sorokat:

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');

Majd parancssorból futtasd

node server.js

Böngészőben megnyitod a http://127.0.0.1:8124/ url-t és készen is vagyunk. Node.js API dokumentációt itt találod.

Trafik kereső teszt

2013. május 26. development komment hozzászólás

Kedves Tesztelő,

köszönöm szépen, hogy segítesz munkám befejezésében. Egy sörre máris a vendégem vagy! Próbáltam röviden összeszedni, mi ez az app, mit kéne végigtesztelni.

trafik-app-preview.png

FAQ, RTFM

apple-touch-icon-72x72-precomposed.png

Mi is ez?

Nemzeti dohánybolt kereső alkalmazás. 

Milyen készüléket támogat?

Első sorban iOS-t futtató eszközökre terveztem (iPhone, iPad, iPod), ezeken telepíthető alkalmazásként funkcionál. Másodsorban Androidot ahol - ezen funkció hiányában - normál weboldalként működik. Harmadsorban asztali böngészők. IE-vel meg sem néztem, leszarom.

Mit tud az alkalmazás?

Semmit. Vagyis egy dolgot, de azt remélem jól: elnavigál a közeli trafikba. A térképen más pontokra kattintva tud új helyszínre navigálni. Beállítások alatt kiválasztható, hogy gyalog, tömegközlekedéssel vagy autóval szeretnél útvonalat tervezni.

Mit kell nézni/kipróbálni az alkalmazáson?

Nagyjából kipróbálni a "Mit tud az alkalmazás?" részt, alkalmazást kezdőképernyőhöz tenni, lokáció engedélyezése/tiltása. Kezdőlapon animáció működik-e / szép-e? Typo, kezdőkép, színek rendben vannak? Bármi egyéb amit kipróbálsz. 

Feature requestem van, jöhet?

Igen!

Ez lesz a végleges neve?

Remélem nem. Adjatok ötleteket!

Honnan az adat?

Jelenleg két adatbázisból dolgozik 444 és index által gyűjtött boltok. Amint lesz jobb / használható adatbázis, integrálni szeretném.

Ismert bugok, hiányosságok:

  1. Geolocation tiltásakor hiba lép fel, nincs megfelelően jelezve a felhasználó felé.
  2. Szebb ikon a térképen? Ki rajzolja meg? :)
  3. Jelenleg az alkalmazás cache-elése ki van kapcsolva, offline is működni tud amúgy.
  4. ...

Az alkalmazás

Köszönet

Köszönöm ismét, hogy elolvastad ezt és segítesz befejezni az alkalmazást!

CSS

2013. március 29. development komment hozzászólás

Q3cUg29.gif_640x480

süti beállítások módosítása