udontsay-128

Tutorial node.js i socket.io – system komentarzy „real-time”

Poziom zaawansowany

Poprzednio pisaliśmy o tym jak pracować z node.js i socket.io. Dziś rozwiniemy temat przykładem praktycznym. Stworzymy prosty, wydajny system komentarzy między użytkownikami, który będzie przetwarzał i odświeżał listę komentarzy wszystkim użytkownikom, którzy mają otwartą naszą aplikację web.

Tutorial node.js i socket.io – real-time comments

Krok po kroku, od podstaw. Oczywiście sama strona i funkcjonalność komentarzy będzie uproszczona – każdy może łatwo dostosować je do własnych potrzeb, począwszy od danych, jakie chce trzymać w bazie danych.

Skupiamy się tutaj na wykorzystaniu node.js i socket.io. Zakładamy że nasz system komentowania podpięty będzie do artykułów.

Krok 1 – start

Stwórzmy folder na nasz projekt, otwórzmy konsolę i przejdźmy do tego folderu. Z poziomu wiersza poleceń instalujemy potrzebne moduły node.js:

$ npm install socket.io

oraz

$ npm install mysql

Nie konieczne gdy mamy już zainstalowane te moduły globalnie.

Krok 2 – schemat bazy MySQL

Stwórzmy bazę danych (np. node_tests) oraz prostą tabelę (np. tbl_comments). Przykładowy kod SQL zaprezentowany poniżej.

CREATE TABLE IF NOT EXISTS `tbl_comments` (
  `comment_id` int(11) NOT NULL AUTO_INCREMENT,
  `article_id` int(11) DEFAULT '0',
  `sender` varchar(100) NOT NULL,
  `body` TEXT NOT NULL,
  `created_at` datetime DEFAULT NULL,
  PRIMARY KEY (`comment_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
node-js

Node.js i socket.io

Poziom zaawansowany

Node.js to rewelacja sama w sobie. Dodajmy jeszcze do tego socket.io, a otrzymamy możliwości o których dawniej nawet nam się nie śniło.

Node.js i socket.io

Po omówieniu podstaw node.js oraz pracy z bazami danych z poziomu tej technologii, pora sięgnąć po jeszcze ciekawsze rzeczy.

Jedną z nich z pewnością jest socket.io. Wystarczy nawiązać połączenie pomiędzy naszą stroną (front end) a skryptem node uruchomionym na serwerze:

var socket = io.connect('//localhost:1337');

Zacznijmy jednak od podstaw node.js i socket.io, krok po kroku.

Wpierw dostosujmy naszą konfigurację o elementy potrzebne dla gniazdek. Konfigurację przedstawiliśmy w poprzednim artykule, teraz ją tylko rozszerzymy…

node-js

Node.js i MySQL oraz MongoDB

Poziom zaawansowany

Po wprowadzeniu do node.js pora na bardziej zaawansowane i praktyczne informacje. Dziś zajmiemy się komunikacją node.js z bazami danych MySQL, a także wspomnimy o MongoDB.

Node.js i MySQL

Jeżeli programujemy np. w PHP, mamy zapewne w systemie środowisko LAMP, mamy więc też MySQL. Potrzebujemy jeszcze tylko node.js oraz modułu MySQL:

$ npm install mysql

Konfiguracja

Dla wygody, stwórzmy sobie od razu plik konfiguracyjny config.js:

var config = {};
config.db = {};

config.db.type = 'mysql';
config.db.charset = 'utf8';

config.db.username = 'user';
config.db.password = 'pass';
config.db.host = 'localhost';
config.db.dbname = 'node_tests'; // DB name

config.db.users_tbl = 'users'; // table name
// config.db.another_tbl = 'next_table'; // ...

// export
module.exports = config;

Stworzyliśmy prosty obiekt przechowujący konfigurację. Ważne jest, aby go „wyeksportować”:

module.exports = config;

Napiszmy zatem testowy skrypt, który połączy się z bazą danych.

books

Dobre książki o JavaScript, jQuery, HTML5

Poziom podstawowy

Czasami przysyłane są nam pytania o dobre książki o JavaScript, tudzież takie z obszaru jQuery lub HTML5.

W dzisiejszym wpisie chcieli byśmy przedstawić mały zbiór dobrych książek w języku polskim. Znajomość JavaScript jest i będzie cechą coraz bardziej pożądaną. Ważne więc aby dobrze opanować język i jego detale.

Dobre książki o JavaScript i nie tylko

Na początek świetne książki od Stoyana Stefanova.

1. JavaScript. Programowanie obiektowe

Autor wziął pod lupę język JavaScript i programowanie obiektowe, przedstawiając ogrom interesujących informacji.

jascob

Książka pokrywa szeroki zakres tematyczny, m.in. pojęcia związane z programowaniem obiektowym, typy danych i tablice, funkcje, domknięcia, zastosowanie konstruktorów, użycie prototypów, rozszerzanie obiektów wbudowanych, dziedziczenie, praca w środowisku przeglądarki (modele BOM i DOM), wzorce projektowe i inne.

Konkretnie i na temat – od podstaw do sprawnego programowania obiektowego:

http://helion.pl/view/8448w/jascob.htm

Książka ma bardzo dobre opinie – znakomite źródło, które dobrze się czyta, choć trafiają się w niej błędy.

2. JavaScript dla programistów PHP

Książka z nieco innym punktem odniesienia, mianowicie przeznaczona dla programistów PHP chcących szybko nauczyć się programowania w języku JavaScript.

javphp

node-js

Node.js wprowadzenie

Poziom podstawowy

Popularność języka JavaScript jest oczywista. A przyczyniają się do tego m.in. takie zastosowania jak node.js. Od dłuższego czasu widać i słychać dookoła o tej technologii.

Sami pracujemy od jakiegoś czasu z node i robimy naprawdę fajne rzeczy, więc z pewnością jest to coś godnego uwagi! I w końcu mam trochę czasu, aby o tym napisać. Jako osoba głęboko wierząca, że JavaScript ma świetlaną przyszłość w programowaniu i swoje stabilne miejsce, myślę że node.js można uznać za *mandatory* skill.

node.js – wprowadzenie

Node.js jest platformą, która pozwala uruchomić kod JavaScript. Zbudowana jest na tym samym silniku JS, który używany jest choćby w Google Chrome – V8.

I co w tym fajnego? Otóż owy kod JavaScript możemy uruchamiać poza przeglądarką, a dzięki API i modułom node.js mamy masę możliwości typowych dla server-side, jak interakcja z systemem plików, komunikacja z bazami danych czy socket.io.

Node to po prostu środowisko do uruchamiania JS nie będące przeglądarką! Do tego rozszerzenia i mamy potężny zestaw narzędzi.

Do instalacji rozszerzeń używamy NPM:

https://www.npmjs.com/

Node.js jest środowiskiem programistycznym zaprojektowanym do tworzenia wysoce skalowalnych aplikacji internetowych, szczególnie serwerów WWW napisanych w języku JavaScript. Node.js umożliwia tworzenie aplikacji sterowanych zdarzeniami wykorzystujących asynchroniczny system I/O. Oczywiście jest to projekt open source.

Dość gadania – przejdźmy do programowania.

Wydawnictwo Strefa Kursów

Jak używać node.js

Pracę z node.js możemy rozpocząć w mgnieniu oka. Potrzebujemy narządzi npm oraz node – zainstalowanych i dostępnych z poziomu wiersza poleceń.

W tym celu po prostu pobieramy i instalujemy wersję node dla naszego systemu:

http://nodejs.org/download/

Mając zainstalowane node.js, możemy uruchomić kod testowy.

Najprostszy przykład – uruchamiamy node w wierszy poleceń i piszemy:

console.log("Hello node!");
// -> Hello node!

Lepszym pomysłem będzie zapisanie kodu w pliku, np. test1.js. Możemy następnie wywołać:

$node test1.js
// -> Hello node!

Można także uruchomić skrypt w trybie debug:

$ node debug test.js

Funkcja console.log to podstawowa metoda wyświetlania użytkownikowi komunikatów.

xmas

Wesołych Świąt! I trochę JavaScriptu :-)

Chcę z tego miejsca życzyć Wszystkim Wesołych Świąt i udanego Nowego Roku. Niech spełniają się nasze cele i marzenia.

A żeby był do tego akcent JavaScript, prezentuję kilka ciekawostek i świątecznych efektów właśnie z użyciem tego języka.

– js1k to challenge dla programistów, a tutaj piękny efekt choinki:

http://js1k.com/2010-xmas/demo/856

jQuery let it snow – efekt padającego śniegu

http://www.thepetedesign.com/demos/let_it_snow_demo.html

– efekt ale w Zepto.js

https://github.com/madrobby/zepto/blob/gh-pages/let-it-snow/index.html

– również piękny DOM Tree 😀

http://hakim.se/experiments/css/domtree/

– i jeszcze coś fajnego m.in. z jQuery i CSS3

http://demo.web3canvas.com/html5-css3/christmas-snow-falling-with-css3-jquery/

http://tympanus.net/codrops/2013/12/24/merry-christmas-with-a-bursting-gift-box/

Merry-Christmas-pic

Merry Christmas Everyone! 🙂

tutorial-js

Tutorial Backbone.js w pigułce. Część 2/2.

Poziom średnio-zaawansowany

Dziś część druga, w której zgłębiamy tajniki Backbone.js.

Tutorial Backbone.js

Po omówieniu podstaw i kluczowych aspektów, takich jak modele i kolekcje, zajmiemy się kolejnymi – Router, Views oraz Events.

Routing – Backbone.Router

Czym była by aplikacja bez możliwości interakcji.

Backbone.Router dostarcza metod routingu stron na client-side, połączenia z akcjami i zdarzeniami. Jest także rozwiązanie (graceful fallback) dla przeglądarek bez obsługi History API.

Przykład:

MyRouter = Backbone.Router.extend({
  routes: {'hello' : 'sayHello'},
  sayHello: function() {
    console.log('Saying hello');
  }
});

var router = new MyRouter();
Backbone.history.start();

A zatem definiujemy route oraz powiązaną funkcję do wykonania, następnie inicjujemy Backbone.history:

Backbone.history.start();

I to wszystko – możemy przetestować nasz kod.

backbone

Tutorial Backbone.js w pigułce. Część 1/2.

Poziom średnio-zaawansowany

Backbone.js to dość popularna biblioteka JavaScript, wykorzystywana do tworzenia aplikacji internetowych na pojedynczej stronie (Single-page application).

Biblioteka została zbudowana z użyciem interfejsu RESTful JSON i bazuje na wzorcu model–view–presenter (MVP). Twórcą biblioteki jest Jeremy Ashkenas – autor underscore.js i CoffeeScript.

Tutorial Backbone.js – wprowadzenie

Backbone.js potrzebuje do działania jednej zależności – Underscore.js (>= 1.5.0).

Przykład – praca z Backbone.js

var object = {};
_.extend(object, Backbone.Events);

object.on("alert", function(msg) {
  alert("Triggered " + msg);
});

object.trigger("alert", "an event");

Biblioteka wprowadza nas na inny poziom abstrakcji. Pracując z nią uczymy się patrzeć na naszą aplikację Web w oderwaniu od JavaScript DOM.

Z Backbone reprezentujemy nasze dane jako model, który może być tworzony, weryfikowany (walidacja), kasowany czy też zapisywany na serwerze.

Backbone.js posiada cztery podstawowe koncepcje (warstwy):

– Backbone.Model

– Backbone.View

– Backbone.Router

– Backbone.Collection.

underscorejs

Programowanie funkcyjne w JavaScript i biblioteka underscore.js

Poziom średnio-zaawansowany

Programowanie funkcyjne (lub programowanie funkcjonalne) to metodyka programowania będąca odmianą programowania deklaratywnego, w której funkcje należą do wartości podstawowych, a nacisk kładzie się na wartościowanie (często rekurencyjnych) funkcji.

Korzysta na tym także biblioteka underscore.js, która również wspiera programowanie funkcyjne w JavaScript.

Biblioteka underscore.js i programowanie funkcyjne

Underscore.js jest biblioteką JavaScript, oferującą wiele ułatwień, które oferuje Prototype.js (czy też np. język Ruby!), jednak nie przeciąża natywnych obiektów JS.

Na bibliotece tej bazuje inna popularna biblioteka – Backbone.js. Autor obu bibliotek stworzył także CoffeeScript.

Przykłady użycia

_.map([1, 2, 3], function(num){ return num * 3; });
// => [3, 6, 9]

W tak prosty sposób następuje mapowanie po wszystkich wartościach z listy podanej jako argument.

_.times(4, function() { console.log("JS") });

Ten przykład wypisze w konsoli cztery razy napis „JS”.

Underscore.js zawiera ponad 100 użytecznych funkcji, takich jak each, map, filter, find, invoke.

qr

Kody QR w JavaScript

Poziom średnio-zaawansowany

Kod QR / QR Code (ang. Quick Response, QR: szybka odpowiedź) jest to alfanumeryczny, dwuwymiarowy, kwadratowy kod graficzny wynaleziony przez japońską firmę Denso-Wave w 1994 roku.

Z takimi kodami spotykamy się coraz częściej. Dziś zajmiemy się właśnie tym tematem – jak pracować z kodami QR w JavaScript.

Kody QR w JavaScript

Istnieje sporo rozwiązań do tego celu, warto więc sięgnąć po gotowe, sprawdzone rozwiązanie w postaci biblioteki JavaScript / pluginu jQuery. Pisanie takiej biblioteki na własną rękę jest zadaniem ambitnym, na które potrzeba mieć trochę czasu.

Kody QR w JavaScript pomoże nam obsługiwać jedno z wybranych rozwiązań, przyjrzyjmy im się zatem.

QRCode.js

Jest to biblioteka JS do generowania kodów QR. Nie posiada zależności. Poniżej przykład użycia z konfiguracją opcji:

var qrcode = new QRCode("test", {
    text: "http://javascript-html5-tutorial.com/",
    width: 128,
    height: 128,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});

Strona projektu:

http://davidshimjs.github.io/qrcodejs/