sebbie dev & stuff

Simple cordova (phonegap) & jquery mobile boilerplate:

https://github.com/sebbie1o1/cordova-jquerymobile-boilerplate

auto detection platform version (currently iphone & android only)

My first phonegap & jquery mobile experiment:

• offline storage using websql (a lot of problems, phonegap websql implementation is buggy)
• chat using websockets (faye nodejs backend) - sometimes websockets could crash app, weird
• geolocation api

Android version here:

https://play.google.com/store/apps/details?id=pl.sebbie.euroguide2012poland

Still waiting for review in App Store ;P

Tutorial NodeJS z użyciem frameworka Express

1. Instalacja

Node JS - https://github.com/joyent/node/wiki/Installation

Do instalacji expressa najłatwiej wykorzystać NPM - node package manager (opis instalacji w ostatnim kroku powyższej dokumentacji instalacji node'a)

Express - korzystając z NPM'a wpisujemy w konsoli

1. npm install express

i to wszystko :)

Mało oryginalnie zacznijmy od aplikacji, które wypisze na ekran 'hello world' - przykład skopiowany z nodejs.org ;P

Napiszemy ją na początek bez użycia frameworka, w czystym node

tworzy plik hello.js i wpisujemy:

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

Z wykorzystaniem express'a będzie to wyglądało tak:

var app = require('express').createServer();

  app.get('/', function(req, res){
    res.send('hello world');
  });

  app.listen(3000);

inkludujemy biblioteke express i od razu chainem tworzymy serwer http (osobiście jestem przeciwnikiem chainowania)

korzystając z obiektu app możemy tworzyć routing - w przykładzie do obsługi http get

pierwszy parametr definiuje ścieżkę - możemy wpisać tu string, string z parametrami a także użyć wyrażeń regularnych

Kilka przykładów:

czyli tylko http://moj-adres-w-sieci.com/

czyli http://moj-adres-w-sieci.com/product/10 - gdzie id jest cyfrą, do którego możemy się odwołać poprzez: req.params.id

routing jest sprawdzany po kolei, czyli na końcu możemy dać najbardziej ogólny .*, aby wyświetlić wypasioną stronę -= not found =- ;-)

Warto jeszcze napisać o tym, że korzystając z express'a możemy szybko wygenerować szkielet aplikacji,

dostępnych jest kilka parametrów - włączenie obsługi sesji, wybór silników szablonów i styli css

[ sebbie sebbie ~ ] express --help

  Usage: express [options] [path]

  Options:
    -s, --sessions           add session support
    -t, --template   add template  support (jade|ejs). default=jade
    -c, --css        add stylesheet  support (less|sass|stylus). default=plain css
    -v, --version            output framework version
    -h, --help               output help information

Express umożliwia korzystanie z silnika template'ów i tam umieściemy widoki naszej aplikacji

62 var validate = function(req, res, next) {
63   if (posts[req.params.id]) next();
64   else res.render('index', { title: 'invalid post id', posts: [] });
65 }
66 
67 app.get('/blog/:id([0-9]+)', validate, function(req, res){
68   var post = posts[req.params.id];
69   res.render('blog', {
70     title: post.title,
71     content: post.content
72   });
73 });

Czyli jak widać w przykładzie obsługując request korzystając z res.render - renderujemy widok z zadanego szablonu

Możemy też jako drugi argument przekazać obiekt z danymi do wykorzystania w widoku, w przykładzie tytuł i treść postu

W lini 67 pojawił się jeszcze argument "validate" - jest to możliwość użycia middleware w routingu, np. jak w przykładzie do walidacji parametrów requestu

Więcej informacji i przykładów można znaleźć w dokumentacji http://expressjs.com/guide.html#route-middleware

Z tą wiedzą możemy budować już proste aplikacje, brakuje nam jedynie baz danych - ale to już w kolejnym artykule :)

Kilka ciekawszych WTFów w JavaScript wybranych z http://wtfjs.com

Sposób sprawdzenia czy numer jest intem:

x === Math.floor(x);

jeśli chcielibyśmy dodać jako funkcję  do prototypu Number:

Number.prototype.isInt = function() {
    return this === Math.floor(this);
 }

dostaniemy false, ponieważ wewnątrz this jest obiektem i musimy zrobić Number(this) === Math.floor

http://wtfjs.com/2010/07/15/typeof-number-is-not-number

wyrażenie (![]+[])[0]  daje nam "f"

http://wtfjs.com/2010/07/12/fail

kod, który robi eval z alertem:

var Z = "constructor";

Z[Z][Z]("alert('wtf')")();

Z[Z] - odwołujemy się tablicowo do propertiesa stringa i dostajemy konstruktor stringa - string, konstruktorem stringa jest function, któremu możemy w parametrze podać string z kodem do wykonania, tworząc funkcję, która wykonujemy

idąc dalej:

var x='constructor';x[x][x]('return 1+2').toString() 

x[x][x] wyjaśnione w poprzednim przykładzie, ciekawe jest 1+2, który po toString() w FF i Operze wyświetlane jest jako 3. Prekompilacja? ;-)

i jeszcze kilka przykładów: 

var x='constructor';x[x][x]('return "b"-"c"').toString()

var x='constructor';x[x][x]('var x = 011111111111').toString()

Coraz częściej w różnych serwisach i blogach widzimy buttony umożliwiające podzielenie się artykułem ze znajomymi. Każdy duży serwis dorobił się takiego widżetu, czy to Twitter, Nasza Klasa czy Facebook, Blip.

W tym tutorialu napiszę - jak dodać taki przycisk do NK.

Najprostszym sposobem jest skorzystanie z kreatora na stronie http://nk.pl/widgets. Wybieramy typ widżetu - Button Śledź na NK / Dodaj na NK, konfigurujemy wygląd i dostajemy przykładowy kod:

<script type="text/javascript"> var nk_wg = ({ content: null, host: "http://nk.pl/", image: "http://0.s-nk.pl/img/sledzik/widgets/nk_buttons/nk_button_111", layout: 'nk' }); </script> <script src="http://0.s-nk.pl/script/sledzik/widgets/sledzik_widget_shout" type="text/javascript"></script>

I taki kod wklejamy na naszej stronie w sekcji body dokumentu HTML, w miejscu gdzie chcemy aby button się pokazał.

Możemy zmodyfikować kod, zmieniając obrazek i/lub ustawiając tekst jaki będzie dodawany - poprzez podmianę content: null, np.:
var nk_wg = ({ content: 'tu przykładowy tekst i np. link do naszego artykułu', host: ...

Taki sposób dodania jest najprostszy i nie będzie powodować problemów.

Jeśli z jakichś powodów nie chcemy dodać kodu javascript i chcemy wkleić czysty htmlowy link do NK, musimy pamietać o:

Na stronie mieć ustawione kodowanie UTF-8
W przypadku innego kodowania (ISO) upewnić się, że dostarczany tekst nie spowoduje problemów z dekodowaniem. Czyli zamiast wkleić:
< a href="http://nk.pl/sledzik?shout=Udostępniam stronę kodowaną w ISO">Podziel się na NK</a>

Zakodować tekst z pomocą javascript:

<script type="text/javascript"> document.write('< a href="http://nk.pl/sledzik?shout=' + encodeURIComponent('Udostępniam stronę zakodowaną w ISO') + '">Podziel się na NK</a>'); </script>

Live facebook like & share counters: http://fblike.sebbie.pl

Serwis http://muzakbox.com umożliwia wykorzystanie YouTube'a jako radia. Wpisujemy wykonawce, tag czy dowolny keyword, aplikacja wyszukuje nam piosenki, tworzy playlistę - zaciągając dane z last.fm i puszcza po kolei.

Coraz więcej użytkowników, coraz więcej dodanych punktów. FourSquare w Polsce nie stał się zbyt popularny. Być może uda się to rodzimemu serwisowi.

Szczególnie jeśli wprowadzą możliwość rozmowy między osobami w pobliżu.

Czat to chyba najbardziej brakująca funkcjonalność w FourSquare (która ma być możliwa poprzez osobną aplikację ChatSquare, o której pisałem niedawno)

Tak więc, trzymam kciuki zra powodzenie dla Popla :)

To czego najbardziej brakowało mi w Foursquare - możliwości czatowania z osobami, które zcheckinowały się w tym samym miejscu. 
Np. jesteśmy na konferencji, dużo osób się checkinuje i fajnie, ale co dalej? Nic. Niedawno wypuszczona wersja 2.0 foursquare niestety nie posiada możliwości rozmowy, więc pewnie jeszcze trochę poczekamy na tę funkcję.

Do tego czasu alternatywą może stać się zapowiedziana aplikacja ChatSq wykorzystująca API Foursquare’a.

http://www.mobilecrunch.com/2010/09/21/chatsquare-chat-with-your-foursquare-friends-live

Ruszył polski odpowiednik Foursquare - http://popla.pl , z natywnymi aplikacjami dla iPhone i Androida oraz wersją lajt dla pozostałtch.

Całość jest bardzo prosta i wizualnie przyjemna. Posiada podstawowe funkcjonalności aplikacji do "checkinowania".

Czyli:

- włączamy aplikacje
- wybieramy miejsce niedaleko z dostępnych lub definiujemy nowe
- checkinujemy się z ewentualnym opisem, który będą mogli przeczytać userzy którzy też się tam zcheckinują
- aplikacja może też wysyłać shouty na facebooka
- możemy jeszcze dodawać znajomych

...i to z grubsza wszystko, ciekawe jak się rozwinie i czy przyjmie się na rynku