AngularJS #1 – Wprowadzenie

AngularJS



AngularJS to framework JavaScript stworzony przez inżynierów z Google. Służy on do szybkiego i łatwego budowania aplikacji internetowych, tak zwanych – single app. Model oparty o MVW (Model – View – Whatever) pozwala pogodzić idee JavaScript i modelu MVC. Postaram się to Wam pokazać w kolejnych wpisach.

AngularJS – Superheroic JavaScript MVW Framework

HTML na sterydach

To co wyróżnia AngularJS spośród innych tego typu frameworków, to własny kompilator HTML. Pozwala nam on “nauczyć” naszego HTML nowych sztuczek, zachowań i dodać mu kilka funkcjonalności. W ten sposób jesteśmy w stanie zbudować dynamiczną web aplikację.

Two Way Data-Binding

Najlepszym sposobem na oddanie zasady działania będzie oficjalny schemat:

Two Way Data-Binding

Podwójne bindowanie pozwala na automatyczną synchronizację danych, które mamy po stronie widoku, a naszym kontrolerem / modelem danych po stronie JavaScript.

Ciężko opisać ten mechanizm słowami, dlatego zapraszam do pierwszej lekcji kursu na http://egghead.io/ (polecam!), która pokazuje ten element w działaniu.

[youtube_sc url=”https://www.youtube.com/watch?v=Lx7ycjC8qjE”]

AngularJS $scope

$scope to swego rodzaju obiekt, w którym przechowane są dane tworzone przez kontroler. Dane układane są hierarchicznie. Weźmy za przykład następujący kod HTML:

<div ng-controller="ParentController">
	<h1>{{ title }}<h1>

	<div ng-controller="ChildController">
		<h2>{{ heading }}<h2>
	</div>
</div>

Tym samym mamy dwa div-y. Jeden osadzony w środku drugiego. Za ten zewnętrzny odpowiada kontroler ParentController, który wyglądać może tak:

var ParentController = function ($scope) {
	$scope.title = 'Parent Controller';
};

ChildController w środku prezentuje się następująco:

var ChildController = function ($scope) {
	$scope.heading = 'Child Controller';
};

Oba jako argument funkcji przyjmują zmienną $scope, czyli specjalny obiekt AngularJS, który wstrzykiwany jest do funkcji na etapie kompilacji. O tyle, o ile ChildController w swoim $scope posiada zmienną title z kontrolera ParentController, o tyle ParentController nie ma dostępu do zmiennej heading z ChildControllera ponieważ jest jego kontrolerem nadrzędnym.

O samym $scope można pisać sporo. Jestem pewien, że kolejne wpisy przybliżą ten element frameworka znacznie lepiej.

Dyrektywa?!

Dyrektywa, to właśnie sposób na nauczenie HTML nowych sztuczek. Jedną już poznaliśmy. Mam tutaj na myśli ng-controller, który wygląda jak zwykły atrybut HTML. AngularJS podczas fazy interpretacji kodu HTML rozpoznaje takie elementy i buduje dla nich $scope, w który to wstrzykiwany jest kod odpowiedzialny za obsługę dyrektywy. Tym samym jesteśmy w stanie tworzyć dyrektywy, które mogą być atrybutami istniejących tagów HTML, nazwami klas CSS, nowymi tagami HTML, czy zwykłymi komentarzami. Na początku może to wyglądać na nieco skomplikowane i niepotrzebne, ale zapewniam, że po bliższym poznaniu zrobi się wręcz niezbędnym i ulubionym sposobem na tworzenie logiki biznesowej dla naszego HTML.

Hello {{ name }}!

Czas na pierwszy swoisty przykład działania. Posłużę się w tym celu JSFiddle, w którym to ładuję kod AngularJS, tworzę bardzo prosty HTML i dodaję kontroler ApplicationCtrl, gdzie ustawiam wartość dla zmiennej name. W samym HTML pobieram (binduję) wartość zmiennej {{ name }} ze $scope naszego kontrolera. Ot co, proste Hello World!

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/snL46/7/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Podsumowanie

Rosnąca popularność AngularJS nie jest przypadkiem. AngularJS daje nam możliwość modułowej budowy naszej aplikacji, która testowana może być w równie łatwy sposób, co samo pisanie kodu biznesowego. AngularJS nie trzeba się uczyć od razu w całości. Próg wejścia jest stosunkowo niski, a w miarę rozbudowy naszego projektu / aplikacji możemy poznawać kolejne funkcjonalności i elementy frameworka. Nasza aplikacja otrzymuje tchnienie życia, a my możemy się świetnie bawić pisząc kod JavaScript. Tak, JavaScript.

Zachęcam do nauki i do czytania kolejnych wpisów.

Pobranie treści strony niczym Facebook – PHP / jQuery

pobranie-tresci-strony-niczym-facebook-php-jquery

Z pewnością wszyscy widzieli i znają sposób dodawania adresów URL do naszych statusów na Facebooku lub Google+. Mam oczywiście na myśli sytuację, gdy po chwili od wklejenia adresu URL w okno, gdzie tworzymy nasz status sprarsowana zostaje i pobrana treść ze strony, której adresu użyliśmy. Jest to zarazem efektowne i bardzo użyteczne, bo od razu widzimy zajawkę informacji, która kryje się pod danym URL. Pokażę Wam dzisiaj prosty sposób, który wykorzystuje język PHP i bibliotekę  jQuery wraz z zapytaniem Ajax. Już dawno przymierzałem się do podobnego wpisu i wreszcie finalnie mogę go Wam przedstawić.

Zacznijmy od obsługi pola, gdzie użytkownik podaje swój adres URL. Obsługiwać będzie je oczywiście kilka linijek kodu w jQuery, gdzie w pierwszej kolejności sparsować musimy wprowadzoną treść oraz sprawdzić istnienie w niej poprawnego adresu URL, a następnie wykonać zapytanie Ajax do skryptu w języku PHP.

Pobieramy treść

$(document).ready(function() {
    var getUrl = $('#get_url') // url to extract from text field
        match_url = /\b(https?):\/\/([\-A-Z0-9.]+)(\/[\-A-Z0-9+&@#\/%=~_|!:,.;]*)?(\?[A-Z0-9+&@#\/%=~_|!:,.;]*)?/i // url to match in the text field
    ;

    getUrl.keyup(function() { // user types url in text field        
        // continue if matched url is found in text field
        if (match_url.test(getUrl.val())) {
            $("#results").hide();
            $("#loading_indicator").show(); // show loading indicator image

            var extracted_url = getUrl.val().match(match_url)[0]; // extracted first url from text filed

            // ajax request to be sent to extract-process.php
            $.post('extract-process.php', {'url': extracted_url}, function(data) {
                extracted_images = data.images;
                total_images = parseInt(data.images.length - 1);
                img_arr_pos = total_images;

                if (total_images > 0) {
                    inc_image = '<div class="extracted_thumb" id="extracted_thumb"><img src="' + data.images[img_arr_pos] + '" width="100" height="100"></div>';
                } else {
                    inc_image = '';
                }
                // content to be loaded in #results element
                var content = '<div class="extracted_url">' + inc_image + '<div class="extracted_content"><h4><a href="' + extracted_url + '" target="_blank">' + data.title + '</a></h4><p>' + data.content + '</p><div class="thumb_sel"><span class="prev_thumb" id="thumb_prev"> </span><span class="next_thumb" id="thumb_next"> </span> </div><span class="small_text" id="total_imgs">' + img_arr_pos + ' of ' + total_images + '</span><span class="small_text">  Choose a Thumbnail</span></div></div>';

                // load results in the element
                $("#results").html(content); // append received data into the element
                $("#results").slideDown(); // show results with slide down effect
                $("#loading_indicator").hide(); // hide loading indicator image
            }, 'json');
        }
    });
});

Wybieramy miniaturę

Skrypt w PHP “wypluje” nam takie dane jak tytuł, zajawkę oraz zdjęcie(-a) w formacie JSON. Jeżeli zdjęć jest kilka, to byłoby dobrze dać użytkownikowi wybór konkretnej miniatury.  Zróbmy to.

$(document).ready(function() {
    // user clicks previous thumbail
    $("body").on("click", "#thumb_prev", function(e) {
        if (img_arr_pos > 0)
        {
            img_arr_pos--; // thmubnail array position decrement

            // replace with new thumbnail
            $("#extracted_thumb").html('<img src="'+extracted_images[img_arr_pos]+'" width="100" height="100">');

            // replace thmubnail position text
            $("#total_imgs").html((img_arr_pos)+' of '+total_images);
        }
    });

    // user clicks next thumbail
    $("body").on("click", "#thumb_next", function(e) {
        if (img_arr_pos < total_images)
        {
            img_arr_pos++; // thmubnail array position increment

            // replace with new thumbnail
            $("#extracted_thumb").html('<img src="'+extracted_images[img_arr_pos]+'" width="100" height="100">');

            // replace thmubnail position text
            $("#total_imgs").html((img_arr_pos)+' of '+total_images);
        }
    });
});

HTML

Poniżej dosłownie 5 linijek HTML, który pozwoli użytkownikowi na wklejenie swojego aresu URL.

<div class="extract_url">
    <img id="loading_indicator" src="images/ajax-loader.gif" />
    <textarea id="get_url" placeholder="Enter Your URL here" class="get_url_input" spellcheck="false"></textarea>
    <div id="results"></div>
</div>

Czas na skrypt w PHP

Do pobrania treści z innej strony w naszym skrypcie PHP wykorzystamy PHP Simple HTML DOM Parser, który w niezwykle łatwy sposób pozwala sparsować drzewo DOM na podstawie przekazanego URL. Trzeba nadmienić, że wymaga on PHP w wersji 5+, ale chyba nie powinno być to dla nikogo problemem. Wszystkie zebrane dane są oczywiście zwracane w formacie JSON.

<?php
if (isset($_POST["url"])) {
    $get_url = $_POST["url"];

    // include PHP HTML DOM parser (requires PHP 5 +)
    include_once("include/simple_html_dom.inc.php");

    // get URL content
    $get_content = file_get_html($get_url);

    // get page title 
    foreach ($get_content->find('title') as $element) {
        $page_title = $element->plaintext;
    }

    // get body text
    foreach ($get_content->find('body') as $element) {
        $page_body = trim($element->plaintext);
        $pos = strpos($page_body, ' ', 200); // find the numeric position to substract
        $page_body = substr($page_body, 0, $pos); // shorten text to 200 chars
    }

    $image_urls = array();

    // get all images URLs in the content
    foreach ($get_content->find('img') as $element) {
        // validate image name
        if (!preg_match('/blank.(.*)/i', $element->src) && filter_var($element->src, FILTER_VALIDATE_URL)) {
            $image_urls[] = $element->src;
        }
    }

    // prepare for JSON 
    $output = array('title' => $page_title, 'images' => $image_urls, 'content' => $page_body);
    echo json_encode($output); // output JSON data
}
?>

Tym oto sposobem mamy gotowe rozwiązanie! Poniżej link do pobrania całości.

Pobranie treści strony niczym Facebook – PHP / jQuery

Pobranie listy email z Gmail używając PHP i IMAP

gmail

Jeżeli czujecie potrzebę (na pewno ją czujecie!) pobierania swoich emaili ze swojej skrzynki Gmail z wykorzystaniem IMAP, to mam coś dla Was!

Poniżej znajdziecie (naprawdę) prostą  funkcję, która pozwala pobierać wiadomości od wujka Google. Pamiętajcie jednak, że wykorzystuje ona IMAP i konieczne jest zainstalowanie rozszerzenia php_imap oraz włączenia go w swoim php.ini, a następnie zrestartowanie serwera.

function loadGmailMails($from = 0, $to = 0) {
    $hostname = '{imap.gmail.com:993/imap/ssl}INBOX';
    $username = 'USERNAME';
    $password = 'PASSWORD';

    $inbox = imap_open($hostname, $username, $password) or die('Cannot connect to Gmail: '.imap_last_error());
    $e = imap_search($inbox, 'ALL');
    $emails = array();
    if ($e) {
        rsort($e); // najnowsze na gorze

        if ($to == 0) {
			$to = sizeof($e);
		}

        for ($i = $from; $i < $to; $i++) {
            $overview = imap_fetch_overview($inbox, $e[$i], 0); // pobieramy naglowek
            $message = imap_fetchbody($inbox, $e[$i], 1); // pobieramy tresc

            preg_match('/(?P<name>[a-zA-Z ]+)<(?P<address>.+)>/', $overview[0]->from, $match); // wyciagamy nadawce oraz jego email
            $name = isset($match['name']) ? trim($match['name']) : '';
			$address = isset($match['address']) ? trim($match['address']) : '';

			// tworzymy tablice z danymi konkretnego emaila
            $emails[] = array(
				'read' => $overview[0]->seen,
				'subject' => $overview[0]->subject,
				'from' => array(
					'name' => $name,
					'address' => $address
				),
				'date' => $overview[0]->date, 
				'message' => $message
			);
        }
    }
    imap_close($inbox);

    return $emails;
}

Staż w Google – czemu nie!

The-Intership

Ten przewrotny tytuł dzisiejszego wpisu, to tak naprawdę namiastka tego co przygotowują dla nas twórcy filmu The Intership.

Wczoraj w sieci pojawił się pierwszy trailer, który obejrzeć możecie poniżej. Główne role zagrają Vince Vaughn i Owen Wilson, którzy znani są z roli w wielu komediach. Sam film również należeć ma do tego gatunku. Historia opowiadać będzie historię dwóch sprzedawców, którzy po zamknięciu firmy, w której pracowali spróbują swych sił właśnie na stażu w Google. Wszystkie śmieszne sytuacje związane będą z sytuacją starszych osób, które z technologią i Internetem mają mało wspólnego, a próbując szczęścia na stażu w Google poznają o wiele młodszych kolegów i szefów, którzy znacznie przewyższają ich swoją wiedzą.

[youtube_sc url=”https://www.youtube.com/watch?v=a8DjuGlVknQ”]

Przyznać muszę, że Google stara się dzięki temu filmowi zrobić niezły marketing swojej firmy. Wiele scen nagrywanych jest właśnie w głównej siedzibie Google w Mountain View. Zawsze intrygowało mnie jak to wygląda od środka i wprawdzie Google stworzyło wiele filmików na ten temat i są one dostępne w sieci, ale w tym wypadku mam nadzieję, że uda zobaczyć się jeszcze więcej. Tak jak Facebook nie identyfikował się z The Social Network, tak Google robi to w pełni i miejmy nadzieję, że w czerwcu 2013 przekonamy się o tym sami.

Pobranie ilości udostępnień danego URL dla Facebook, Twitter, Delicious, Pinterest, Google+ w PHP

Pobranie ilości udostępnień danego URL dla Facebook, Twitter, Delicious, Pinterest, Google+ w PHP

Ideą skryptu napisanego w PHP jest pobranie ilości udostępnień dla danego URL w popularnych serwisach społecznościowych oraz zwrócenie tych danych w JSON.

<?php
$url = $_GET['url'];
$finfo = json_decode(file_get_contents('http://api.ak.facebook.com/restserver.php?v=1.0&method=links.getStats&urls='.$url.'&format=json'));
$tinfo = json_decode(file_get_contents('http://urls.api.twitter.com/1/urls/count.json?url='.$url));
$dinfo = json_decode(file_get_contents('http://feeds.delicious.com/v2/json/urlinfo/data?url='.$url));
$pinfo = json_decode(preg_replace('/^receiveCount\((.*)\)$/', "\\1",file_get_contents('http://api.pinterest.com/v1/urls/count.json?callback=receiveCount&url='.$url)));
$gplus = gplus_shares($url);


// http://papermashup.com/google-plus-php-function/
function gplus_shares($url){
    // G+ DATA
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, "https://clients6.google.com/rpc?key=AIzaSyCKSbrvQasunBoV16zDH9R33D88CeLr9gQ");
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_POSTFIELDS, '[{"method":"pos.plusones.get","id":"p",
"params":{"nolog":true,"id":"' . $url . '","source":"widget","userId":"@viewer","groupId":"@self"},
"jsonrpc":"2.0","key":"p","apiVersion":"v1"}]');
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-type: application/json'));
    $result = curl_exec ($ch);
    curl_close ($ch);
    return json_decode($result, true);
}

$output = array(
    'facebook'=> isset($finfo[0]) ? $finfo[0]->total_count : NULL,
    'twitter'=> isset($tinfo->count) ? $tinfo->count : NULL,
    'delicious'=> isset($dinfo[0]) ? $dinfo[0]->total_posts : NULL,
    'pinterest'=> isset($pinfo->count) ? $pinfo->count : NULL,
    'googlePlus'=> isset($gplus[0]['result']) ? $gplus[0]['result']['metadata']['globalCounts']['count'] : NULL

);

header('Content-Type: text/javascript');

echo "[".json_encode($output)."]";
?>

Roundup #5 – Responsive Google Map, Speakke, 3D jQuery Image Slider, Wordsmith, Peerbind, MobileCartly

Roundup #5 - Responsive Google Map, Speakke, 3D jQuery Image Slider

Responsive Google Map

Responsywne mapy od Google, przygotowane dla ekranu Retina w najnowszym iPadzie 3, to tutorial od serwisu Webdesigntuts+. Wykorzystując możliwości HTML5 i CSS3 jesteśmy w stanie stworzyć świetnie wyglądające mapy i zaprezentować je na naszej stronie. Niezwykle przydatna rzecz dla stron mobilnych, budowanych w oparciu o responsive design. Dodatkowo – dzięki meta tagom w nagłówku naszego dokumentu HTML5 dostajemy także wsparcie dla ekranów Retina.

Responsive, Retinafied Google Maps Images


Speakke

To naprawdę świetnie wyglądający player audio. Po raz kolejny wykorzystano tutaj możliwości HTML5, a pewnie będzie tak tylko częściej, w związku, że od wczoraj Flash nie jest już wspierany na platformie Android (Huraa!). Trochę CSS, kilka linii JavaScript i trochę własnych ustawień i możemy osadzić na swojej stronie pełnoprawny odtwarzacz plików audio. Poza tym – wsparcie dla wielu przeglądarek, możliwość tworzenia playlist oraz integracji z  Last.fm. Chcecie czegoś więcej?

Speakker: A Crossbrowser Audio Solution with HTML5


3D jQuery Image Slider

No i mamy kolejny ciekawy tutorial od serwisu Codrops. Tym razem jest to trzyczęściowy panel 3D, na którym prezentować możemy nasze obrazki, a zarazem osadzić możliwość ich przewijania. Całość prezentuje się bardzo efektownie. Zresztą – nie spotkałem jeszcze się na tym serwisie ze słabej jakości treścią. Myślę, że takie rozwiązanie przyda się grafikom oraz ludziom chcącym urozmaicić jakoś swoje portfolio, a może nawet i CV. Skorzystalibyście z takiego rozwiązania?

TRIPLE PANEL IMAGE SLIDER


Wordsmith

Biblioteka jQuery, która pozwala tagować słowa na naszej stronie i pobierać ich definicje z zewnętrznego serwera. Całość prosta i intuicyjna w obsłudze. Demo rozwiązania zaprezentował sam autor na swojej stronie.


Peerbind

To kolejny projekt wykorzystujący bibliotekę jQuery. Pozwala na przypisywanie zdarzeń konkretnym elementom lub strukturom na naszej stronie. Obsługuje zdarzenia już wbudowane, ale pozwala tworzyć także własne oraz definiować sposób ich działania. Demonstrację działania oraz dokumentację znaleźć można na stronie oficjalnej.

Peerbind: Share Events with All Visitors on Same Page


MobileCartly

Jest to projekt e-Commerce mający umożliwić sprzedaż naszych produktów na urządzeniach mobilnych, na platformach takich jak iPhone, Android, Blackberry, czy Windows Mobile. Jako źródło danych przyjmuje dokumenty CSV, więc dane możemy budować przy pomocy zwykłego Open Office, czy Google Docs.

Open Source Mobile E-Commerce App: MobileCartly


[1], [2], [3], [4]

Google Fiber w rzeczywistości – kolejny poziom?

Google Fiber RabbitJeżeli nie słyszeliście jeszcze o projekcie Google nazwanym Google Fiber, to jest to usługa, którą Google jakiś czas temu zaoferował mieszkańcom Kansas City. Mogą oni korzystać z najszybszego łącza internetowego w Stanach Zjednoczonych, właśnie za sprawą giganta z Mountain View.

W Google Fiber można znaleźć szereg innowacyjnych rozwiązań, które pod tę usługę Google specjalnie przygotował. Jest więc brandowany przez giganta router oraz dekoder telewizyjny. Na uwagę zasługuje szczególnie ten drugi – nie dość, że wstawiono do niego dysk o pojemności 2TB, to jeszcze potrafi nagrywać naraz aż do 8 programów. Co ciekawe – całym zestawem steruje się za pomocą tabletu Nexus 7.

Jak prezentuje się całość? Można to zobaczyć na filmiku, które Google udostępniło niedawno na swoim kanale YouTube.

[youtube_sc url=”https://www.youtube.com/watch?v=ffHLIZh0PHg”]

Tłumaczenie ze zdjęć w nowym Google Translate na Androida!

Google Translate AndroidTłumacz Google (Google Translate) jest to serwis internetowy Google umożliwiający tłumaczenie tekstów, plików tekstowych oraz całych stron internetowych na różne języki. W przypadku wpisania tekstu, serwis tłumaczy go w czasie rzeczywistym (bez potrzeby klikania w przycisk “tłumacz”). Po wpisaniu w okienko translatora pojedynczego słowa działa on jak słownik – podając zwykle kilka lub kilkanaście propozycji tłumaczenia.

W najnowszej wersji Google Translate dodano nową opcję, jaką jest tłumaczenie ze zrobionego za pomocą mobilnego urządzenia zdjęcia. Wystarczy, że w aplikacji wybierzemy opcję robienia zdjęcia i dokonamy tego, fotografując zdanie, dokument, okładkę itp. Następnie, na zrobionym zdjęciu zaznaczamy palcem, który fragment chcemy aby aplikacja dla nas przetłumaczyła i.. gotowe!

Google Translate Image Example

Z pewnością takie rozwiązanie jest znacznie szybsze niż tradycyjne przepisywanie tekstu ręcznie, a na pewno niezbędne dla osób podróżujących chociażby do krajów, gdzie alfabetem są tzw. “krzaczki”. Mam tutaj na myśli kraje takie jak Chiny, Japonia itp.

Co myślicie o takim rozwiązaniu? Mi, nowa funkcja bardzo się podoba i zachęcam do aktualizowania swoich aplikacji na urządzeniach z Androidem.