Címkék » javascript


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.

CoffeeScript Source Map with Redux

2013. február 13. javascript development coffee komment hozzászólás

Nagy hiányossága a CoffeeScript-nek, hogy nehezen debuggolható. Ezen segíthetünk némileg Source Map használatával. Ehhez segítségünkre van a Coffee Script Redux projekt, melyet Kickstarker-en sikeresen szedett össze közel 14e dollárt az indulásához. Jelenleg 2.0-beta2 verziónál tart, kis lemaradásban a kiírt ütemtervvel. Telepítése egyszerű.

$ git clone git: //github.com/michaelficarra/CoffeeScriptRedux.git
$ cd CoffeeScriptRedux
$ make deps
$ make test

vagy ha hibát dobna deps vagy test generálás, használd a következőt:

$ make install

Fájlok fordítása JS-re

Redux fordító eltérő szintaktikával bír, mint az eredeti CS. Az előző mappából futtathatjuk az alábi kódot. Amely létrehozza /path/to/test.js fájlt.

$ ./bin/coffee --js --input /path/to/test.coffee > /path/to/test.js

Source Map generálása

$ ./bin/coffee --source-map --input /path/to/test.coffee > /path/to/test.js.map

Használatához két dologra van szükség. Az source-map modulra, amit npm-el telepíthetünk.

$ npm install source-map

A böngészőnek jelezni kell, hogy van elérhető forrás kép az adott kódsorhoz. Ez legegyszerűbben úgy kivitelezhető, hogy az generált JavaScript fájlok utolsó sorába beillesztünk egy ilyen kódot:

//@sourceMappingURL=test.js.map

Jelenleg csak Chrome böngésző támogatja ezt, alapból kikapcsolt funkció. Engedélyezéséhez nyisd meg a console-t, jobb alsó sarokban fogaskerékre katt, majd "Enable Source Maps" checkbox pipa.

source-map.png

Pro

  • Az eredmény kipróbálható a "Source" fül alatt.
  • Beállíthatunk törés pontokat maguknak a .coffee fájloknak.
  • Megkönnyíti a hiba helyének azonosítását, ezzel gyorsítva a fejlesztést.

Kontra

  • Build folyamatot Developer és Staging/Public folyamatokra kell bontani, hasznavehetetlen a Source Map egy spagetti kódban.
  • Nem futtatható console-on Coffee kód. Segítségünkre lehet a CoffeeConsole extension. Rossz hír, hogy forkolni kell, mert az eredeti fordítóval operál.

Példa alkalmazás innen tölthető le.

FYI: Ez a bejegyzés jóformán egy fordítás, de elengedhetetlen előzménye saját build folyamatomatom bemutatásának, melyet hamarosan publikálok. Eredeti cikk itt olvasható, angol nyelven. 

Playcraft HTML5 Game Engine

2012. október 30. javascript html5 komment hozzászólás

playcraft-optimized.jpg

Megérkezett a béta meghívóm Playcraft game engine-hez. Régóta követem a projektet, anno gamecore névre hallgatott. Történt tehát egy átnevezés, namespace váltás és mögé rittyentettek egy új oldalt is. Jelenleg a 0.5.3-as verziószámnál járnak. Meglepő módon, játékfejlesztésre van kihegyezve az egész. Közel sem production ready, hiányoznak fontos komponensek, de jópár hasznos már elérhető. Leírások szerint Component-Based Development irányelvet használjunk, ezzel robosztusabb játékok esetén is könnyedén újrahasznosítható és átlátható kódbázist kaphatunk.

Folytatás »

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