Node.js:n käytön aloittaminen PHP-kehittäjälle

Olet PHP-kehittäjä. Ymmärrän kyllä. Niin minäkin. Matkani PHP:n pariin ei kulkenut tavallista tietä, jota useimmat PHP-kehittäjät kulkevat etsiessään täydellistä ohjelmointikieltä. Aloitin aluksi Java-kehittäjänä ja vietin noin 10 vuotta siinä maassa. Olin yksi niistä kovan luokan Java-kehittäjistä, että kun PHP otettiin keskusteluun mukaan, aloin hokea asioita kuten yritys, skaalautuvuus ja muuta hölynpölyä.

Aloitin työskentelyn avoimen lähdekoodin projektissa, jossa tarvittiin sosiaalisen webin etusivu noin viisi vuotta sitten, ja tiimin piti valita ohjelmointikieli sivustolle. Tutkin Javaa ja useimpia muita kieliä, mutta päädyin PHP:hen useista syistä. Oli vaikeaa niellä ylpeyteni ja ryhtyä koodaamaan PHP:llä, mutta se, mitä tuon projektin aikana tapahtui, oli suorastaan ihme. Rakastuin kieleen ja aloin käyttää sitä niin monissa projekteissa kuin vain löysin ja jätin samalla Java-juureni pölyyn. PHP on palvellut minua hyvin viimeisten viiden vuoden aikana, mutta etsin edelleen sitä Graalin maljaa eli ohjelmointikieltä, jolla on nopea kehittää, jolla on yritysten tuki, joka on suorituskykyinen ja skaalautuva ja jolla on myös vahva kehittäjäyhteisö. Uskon, että Node.js täyttää kaikki vaatimukseni ja on samalla nopeasti kasvava ja kehittyvä kieli.

Ensin on ymmärrettävä, että Node.js ei ole vain hipsterikehittäjille tai varhaisille omaksujille. Se on käytössä joillakin Internetin eniten liikennöidyillä verkkosivustoilla nykyään, ja se voittaa edelleen kehittäjien sydämet ja mielet. Se on todella siinä pisteessä, että siihen voi luottaa monimutkaisimmissakin järjestelmissä.

Node.js on JavaScript##

Jos luulet, että sinun täytyy opetella kokonaan uusi kieli ollaksesi tuottava Node.js:n kanssa, olet todennäköisesti väärässä. Useimmat kehittäjät tuntevat jo JavaScriptin, ja se on se kieli ja semantiikka, jonka kanssa tulet työskentelemään koodatessasi Node.js:ssä. Itse asiassa Red Monkin hiljattain julkaisemassa artikkelissa, jossa yritetään selvittää github-projekteja suosituimpien kielten määrittämiseksi, JavaScript on kuningas. Kolme parasta kieltä ovat seuraavat:

• JavaScript
• Java
• PHP

Kun otetaan huomioon JavaScriptin suosio ja sen laajalle levinnyt käyttöönotto teollisuudessamme, jos se ei ole sinulle vielä tuttu, on luultavasti aika ryhdistäytyä ja ryhtyä opiskelemaan sitä.

Jos Node.js käyttää vain JavaScriptiä, mitä se tarkalleen ottaen on?##

Lyhyesti sanottuna Node.js on alusta palvelinpuolen toiminnoille. Se käyttää Javascript-ohjelmointikieltä ja siinä on lukuisia kirjastoja saatavilla npm-moduuleina. Voit ajatella näitä npm-moduuleja kirjastoriippuvuuksina, jotka saattavat tyydyttää Composeria, jos tulet PHP-maasta. Itse asiassa PHP:n oletusriippuvuuksien hallintajärjestelmä (Composer) on virallisen sivuston mukaan saanut vaikutteita Node.js:stä. Todennäköisesti, jos tarvitset hieman toiminnallisuutta etkä halua kirjoittaa kaikkea koodia itse, saatavilla on npm-moduuli, joka tarjoaa jo etsimäsi ominaisuudet.

Node-sovellukset toteutetaan yleensä silloin, kun tehokkuus halutaan maksimoida hyödyntämällä lukkiutumatonta I/O:ta ja asynkronisia tapahtumia. PHP-kehittäjien on hyvä tietää, että Node.js-sovellukset toimivat yhdessä säikeessä. Backendin Node.js-koodi käyttää kuitenkin useita säikeitä esimerkiksi verkko- ja tiedostokäyttöön. Tämän vuoksi Node sopii erinomaisesti sovelluksiin, joissa halutaan lähes reaaliaikaista käyttökokemusta.

Aloittaminen esimerkkiprojektin avulla##

Tässä blogikirjoituksessa näytän, miten pääset vauhtiin Node.js:n kanssa PHP-taustasta käsin. Esimerkkisovellus, jonka aiomme kirjoittaa, on yksinkertainen backend-palvelu, joka tarjoaa jokaisen Walmart-myymälän sijainnin. Valitsin Walmartin tähän esimerkkiin, koska se on yksinkertaisesti kaikkien tavaratalojen Graalin malja. Jos Walmartilla ei ole sitä, et tarvitse sitä.

Tämän blogikirjoituksen loppuun mennessä näet, kuinka helppoa ja nopeaa on luoda Node.js:llä REST-pohjainen sovellusliittymä, joka perustuu suosittuun MongoDB-tietokantaan. Valitsin tämän REST-pohjaisen esimerkin, koska backend API:n luomisesta on tullut nopeasti yleinen käyttötapaus useimmissa nykyaikaisissa sovelluksissa.

Olin alun perin suunnitellut luovani saman sovelluksen sekä PHP:llä että Node.js:llä helpottaakseni siirtymääsi, mutta kattaakseni kaikki erilaiset kehykset ja tavat luoda REST-pohjaisia palveluita PHP:llä, se oikeuttaisi kokonaisen kirjan, eikä sitä yksinkertaisesti voida käsitellä yhdessä blogipostauksessa. Sitten ajattelin käyttää vain Laravel-kehystä, koska sen suosio kasvaa jatkuvasti. Tavoittaisin kuitenkin edelleen vain neljänneksen PHP-kehittäjistä. Henkilökohtaisesti suosikkikehykseni on CodeIgniter, mutta se on nopeasti menettämässä asemaansa ja edustaa enää alle 8 prosenttia PHP-kehittäjistä. Sitepoint julkaisi hiljattain artikkelin, jossa käsitellään juuri tätä asiaa, ja tarjoaa seuraavan kaavion, joka kuvaa kehyksiä, jotka ovat lupaavimpia vuodelle 2014.

Kun otetaan huomioon valtavat erot siinä, miten tietokantayhteyksiä konfiguroidaan ja REST-palveluja luodaan kullekin kehykselle, oletan, että osaat tehdä tämän kehyksellesi PHP:ssä, ja keskityn sen sijaan vain Node.js-koodiin.

Node.js-sovelluksemme luominen##

Loppupuolella tätä viestiä luomme Walmart-paikannussovelluksen käyttäen StrongLoopin LoopBack API -kehystä. Lisäbonuksena käyn läpi Node.js:n asentamisen OSX:lle. Ota siis kuppi kahvia, istu alas, rentoudu ja ryhdytään töihin.

Vaihe 1: Node.js:n asentaminen##

Helpoisin tapa asentaa Node.js on asentaa se jonkin saatavilla olevan binääripaketin kautta, joka on saatavilla useimpiin käyttöjärjestelmiin. Osoita selaimesi seuraavaan URL-osoitteeseen ja lataa käyttöjärjestelmääsi sopiva:

http://nodejs.org/download/

Kun tämä sivu latautuu, sinun pitäisi nähdä seuraava:

Jos käytät Mac OSX:ää, napsauta universaalia .pkg-tiedostoa. Tämä tallentaa asennusohjelman paikalliselle tietokoneellesi. Kun tiedosto on ladattu, käynnistä asennusohjelma kaksoisnapsauttamalla ladattua .pkg-tiedostoa ja sinulle näytetään asennusvalintaikkuna:

Suorita asennusprosessi loppuun käyttämällä kaikkia oletusasetuksia ja poistu lopuksi ohjelmasta napsauttamalla Sulje-painiketta, kun asennus on onnistunut. Aika helppoa, vai mitä?

Vaihe 2: LoopBackin asentaminen NPM:llä

Nyt kun Node.js on asennettu paikalliseen järjestelmäämme, haluamme asentaa StrongLoopin tarjoamat LoopBack-paketit. LoopBack on avoimen lähdekoodin API-kehys, joka tarjoaa toiminnallisuuksia, jotka helpottavat elämääsi, kun alat oppia kirjoittamaan ja ottamaan käyttöön Node.js:llä kirjoitettuja ohjelmistoja.

Asenntaaksemme LoopBackin käytämme npm-komentoa, joka on osa Node.js:n ydinjakelua. NPM on virallinen paketinhallinta sellaisten kirjastojen tai moduulien asentamiseen, joista sovelluksesi ovat riippuvaisia. Koska tämä viesti on kirjoitettu PHP-kehittäjille, helppo tapa ajatella NPM-moduuleja on liittää se Composeriin. Composerin riippuvuusjärjestelmän avulla kehittäjät voivat määrittää riippuvuudet composer.json-tiedostossaan. Kun paketit on määritelty composer.json-tiedostossa, PHP-kehittäjän tarvitsee vain antaa install-komento, jonka pitäisi olla samankaltainen kuin seuraavassa:

$ php composer.phar install

NPM-moduulit toimii samalla tavalla ja käyttää package.json-tiedostoa, jonka avulla voit määrittää riippuvuudet tietylle sovellukselle. Voit myös asentaa riippuvuudet komentoriviltä, jolloin ne ovat käytettävissä paikallisessa järjestelmässäsi. Älä huoli, jos et vielä ymmärrä tätä, sillä käsittelemme package.json-tiedostoa tarkemmin myöhemmässä vaiheessa.

Voidaksemme asentaa LoopBackin voimme antaa yhden komennon, joka lataa ja asentaa kaikki paketin tarvitsemat riippuvuudet. Avaa terminaali-ikkuna ja anna seuraava komento:

$ npm install -g strongloop

Huomautus: Saatat joutua käyttämään sudo-komentoa asennuksestasi riippuen

Mitä juuri tapahtui? Kerroimme npm:lle, että haluamme asentaa strongloop-paketin ja annoimme samalla -g-vaihtoehdon. -g-vaihtoehto tekee paketista globaalin paketin, jota kaikki järjestelmässä olevat voivat käyttää ja joka on kaikkien sovellusten käytettävissä. Kun suoritat yllä olevan komennon, NPM lataa paketin sekä kaikki tarvittavat riippuvuudet. Järjestelmäsi nopeudesta riippuen tämä voi kestää muutaman minuutin.

Vaihe 3: Sovelluksemme luominen##

Sovelluksen luominen LoopBack API:n avulla on hyvin helppoa ja suoraviivaista. Avaa yksinkertaisesti terminaali-ikkuna ja anna seuraava komento luodaksesi uuden sovelluksen nimeltä locatewalmart.

$ slc loopback _-----_ | | .--------------------------. |--(o)--| | Let's create a LoopBack | `---------´ | application! | ( _´U`_ ) '--------------------------' /___A___\ | ~ | __'.___.'__ ´ ` |° ´ Y ` Enter a directory name where to create the project: locatewalmart create locatewalmart/ info change the working directory to locatewalmart

Hyötyohjelma slc luo nyt uuden LoopBack-pohjaisen projektin nimeltä locatewalmart ja konfiguroi projektin. Kun meitä kysytään sovelluksen nimeä, voimme pitää oletusarvon.

What's the name of your application? locatewalmart

Yllä olevan komennon suorittamisen jälkeen sovellukselle luodaan uusi hakemisto projektia varten. Siirry sovelluksen hakemistoon komennolla cd:

$ cd locatewalmart

Nyt kun sovelluksemme on luotu, haluamme lisätä tuen MongoDB:lle tietolähteenä loopbackia varten.

Vaihe 4: Tietolähteen määrittäminen##

Voidaksemme kommunikoida MongoDB:n kanssa meidän on lisättävä sovellukseemme tietolähde. Teemme sen suorittamalla:

$ slc loopback:datasource mymongo Enter the data-source name: mymongo Select the connector for mymongo:PostgreSQL (supported by StrongLoop)Oracle (supported by StrongLoop)Microsoft SQL (supported by StrongLoop)❯ MongoDB (supported by StrongLoop)SOAP webservices (supported by StrongLoop)REST services (supported by StrongLoop)Neo4j (provided by community)(Move up and down to reveal more choices)

Vaihe 5: Osoittaminen todelliseen tietolähteeseen##

Voidaksemme kommunikoida MongoDB:n kanssa, meidän on osoitettava tietolähde todelliseen MongoDB-instanssiin. LoopBack määrittelee kaikki datasource-konfiguraatiot datasource.json-tiedostossa, joka sijaitsee sovelluksesi root/server-hakemistossa. Avaa tämä tiedosto ja lisää datasource MongoDB:lle seuraavan koodin mukaisesti:

{ "db": { "name": "db", "connector": "memory" }, "mymongo": { "name": "mymongo", "connector": "mongodb" "url": "mongodb://localhost:27017/locatewalmart" }}

Huomautus: Varmista, että annat MongoDB-tietokannan oikean yhteys-URL-osoitteen. Tässä esimerkissä minulla on paikallisesti luotu tietokanta nimeltä locatewalmart, jota haluan käyttää tietolähteenäni.

Nyt kun olemme määritelleet tietokantamme, meidän on tehtävä pari ylimääräistä asiaa. Ensinnäkin meidän on määritettävä, että sovelluksemme on riippuvainen loopback-connector-mongodb-paketista. Riippuvuuden määrittäminen tapahtuu muokkaamalla package.json-tiedostoa, mikä on samanlaista kuin composer.json-tiedoston muokkaaminen PHP:ssä. Avaa package.json-tiedosto, joka sijaitsee sovelluksesi juurihakemistossa, ja lisää loopback-connector-mongodb riippuvuusosioon. Tämän jälkeen voit suorittaa npm install.

Vaihtoehtoisesti voit vain suorittaa:

$ npm install loopback-connector-mongodb --save

Tämä päivittää package.json automaattisesti. Osion pitäisi näyttää seuraavalta:

"dependencies": { "compression": "^1.0.3", "errorhandler": "^1.1.1", "loopback": "^2.0.0", "loopback-boot": "^2.0.0", "loopback-connector-mongodb": "^1.4.1", "loopback-datasource-juggler": "^2.0.0", "serve-favicon": "^2.0.1" }

Vaihe 6: Tietojen tuominen MongoDB:hen##

Nyt kun tietolähteemme on konfiguroitu, meidän on ladattava tietojoukko MongoDB-tietokantaamme.

Aluksi haluamme ladata JSON-tiedoston, jossa on kaikki haluamamme tiedot. Voit napata sen seuraavasta URL-osoitteesta:

https://dl.dropboxusercontent.com/u/72466829/walmart.json

Kun olet ladannut datajoukon, tuo se yksinkertaisesti tietokantaasi mongoimport-komennolla alla esitetyllä tavalla:

$ mongoimport --jsonArray -d locatewalmart -c store --type json --file walmart.json -h yourMongoHost --port yourMongoPort -u yourMongoUsername -p yourMongoPassword

Näkyviin pitäisi tulla seuraavat tulokset:

connected to: 127.0.0.12014-08-17T13:07:26.301-0400 check 9 31762014-08-17T13:07:26.305-0400 imported 3176 objects

$ slc loopback:model

 Enter the model name: store Select the data-source to attach store to:db (memory)❯ mymongo (mongodb) Expose store via the REST API? Yes Custom plural form (used to build REST URL):

Enter an empty property name when done. Property name:

Ominaisuudet, jotka haluamme lisätä, ovat myymälätyyppi, aukiolopäivämäärä, leveyspiiri ja pituuspiiri.

Näppäilemällä enter- näppäintä sinua pyydetään ilmoittamaan datatyyppi kullekin määritetylle omaisuudelle. Ensimmäinen kohde on opendate, ja haluamme valita, että se on tyyppiä date. Valitse päivämäärä ja paina enter-näppäintä.

 Property type: string number boolean object array❯ date buffer geopoint (other)

Sitten sinulta kysytään, haluatko tämän ominaisuuden vaadituksi ominaisuudeksi skeeman validointia varten. Kirjoitetaan ”kyllä”.

 Required? (y/N) : y

Sitten sinulta kysytään tietotyyppiä jokaiselle jäljellä olevalle ominaisuudelle. Anna seuraavat vastaukset:

 Property name: type_store invoke loopback:property Property type: (Use arrow keys)❯ string number boolean object array date buffer geopoint (other) Required? (y/N) : yLet's add another store property.Enter an empty property name when done. Property name: latitude invoke loopback:property Property type: (Use arrow keys)❯ string number boolean object array date buffer geopoint (other) Required? (y/N) : yLet's add another store property.Enter an empty property name when done. Property name: longitude invoke loopback:property Property type: (Use arrow keys)❯ string number boolean object array date buffer geopoint (other) Required? (y/N) : y

Kirjoita ”kyllä” ja paina enter-näppäintä.

Onneksi olkoon! olet juuri luonut ensimmäisen malliobjektisi käyttäen LoopBackia yhdessä Node.js:n kanssa. Nähdäksesi, mitä todellisuudessa luotiin peiton alla, avaa store.json-tiedosto, joka sijaitsee sovellushakemistosi root/common/models-hakemistossa. Etsi merkintä stores, joka näyttää seuraavalta:

{ "name": "store", "base": "PersistedModel", "properties": { "opendate": { "type": "date", "required": true }, "type_store": { "type": "string", "required": true }, "latitude": { "type": "string", "required": true }, "longitude": { "type": "string", "required": true } }, "validations": , "relations": {}, "acls": , "methods": }

Kuten näet, meillä on luotu malli ja määrittelemämme ominaisuudet on määritetty store-malliin. Public-kenttä määrittää, että haluamme paljastaa tämän mallin maailmalle REST-verkkopalvelun kautta.

Mallin ja tietolähteen yhdistäminen on määritelty model-config.json sovelluksen juuri-/palvelinkansion alla olevassa model-config.json-kansiossa. Datasource-kenttä määrittää tietolähteen, jota tämä malli käyttää CRUD-operaatioihin.

"store": { "dataSource": "mymongo", "public": true }

Vaihe 8: Testaa REST-pohjainen API##

Arvaa mitä? Olet juuri luonut ensimmäisen REST-pohjaisen verkkopalvelun Node.js:n avulla. Eihän se ollutkaan niin paha? Tarkistetaan se osoittamalla selaimellamme sovellukseen, jonka juuri loimme. Voit tehdä tämän menemällä seuraavaan URL-osoitteeseen:

http://0.0.0.0:3000/api/stores/

Sinä saat näkyviin JSON-edustuksen kaikista tietokantaan tuomistamme Walmartin myymälöistä, kuten seuraavassa kuvassa näkyy:

Käyttämällä StrongLoop Exploreria##

Hienoa. Meillä on REST-päätepiste, joka palauttaa kaikki tietokannassa olevat Walmart-varastot, mutta asiat näyttävät olevan vielä hieman puutteellisia, sillä meillä ei ole hallintaliittymää, jonka avulla voisimme käsitellä tietoja tai tarkistaa, että kaikki CRUD-operaatiot toimivat. Onneksi StrongLoop tarjoaa kätevän selaimen, jonka avulla voit tutkia kaikkia sovelluksessasi olevia päätepisteitä. Voit testata tätä avaamalla selaimesi ja siirtymällä seuraavaan URL-osoitteeseen:

http://0.0.0.0:3000/explorer/

Kun Explorer-sivu on latautunut, laajenna stores API:ta nähdäksesi kaikki käytettävissä olevat operaatiot, jotka ovat sallittuja malliobjektille. Tämä näkyy seuraavassa kuvassa:

Esimerkkinä siitä, mitä Explorerilla voi tehdä, laajenna /stores/findOne API ja napsauta Try it out!-linkkiä, joka tekee tietokantakyselyn ja palauttaa yhden tietueen seuraavan kuvan mukaisesti:

Hieman pidemmälle menemällä lisäämällä karttaesitys##

Hienoa, olemme luoneet REST-pohjaisen päätepisteen, joka palauttaa luettelon kaikista tietokannassamme olevista Walmart-kaupoista. Havainnollistaaksemme edelleen nopeutta, jolla voidaan kehittää kokonaisia sovelluksia StrongLoopin avulla, rakennetaan responsiivinen etusivu, joka sisältää kartan, jossa on pinssejä jokaisesta Walmart-kaupasta.

Vaihe 1: Luo julkinen hakemisto##

Projektin app.js-tiedostossa määritetyn oletusarvon mukaan kaikki sovellusten juurihakemistossa sijaitsevassa julkisessa hakemistossa olevat tiedostot tarjoillaan pyytäjälle. Tätä hakemistoa ei kuitenkaan välttämättä ole oletusarvoisesti olemassa, joten meidän on luotava se. Avaa terminaali ja siirry sovelluksen juurihakemistoon ja anna seuraava komento:

$ mkdir public

Vaihe 2: Responsiivisen kartan luominen##

Seuraavaksi meidän on luotava mukava esitys tiedoista. Koska meillä on jokaisen myymälän leveys- ja pituusasteet, olisi hienoa ilmaista tämä sisältö kartalla, jota käyttäjä voi raahata ympäriinsä, suurentaa ja pienentää jne. Tämä tehtävä on itse asiassa paljon helpompi kuin luulisi, jos hyödynnämme joitakin olemassa olevia kirjastoja. Tämän responsiivisen näkymän luomisen päätteeksi lopputulos näyttää seuraavalta:

Lisäksi käyttäjä voi zoomata kartan hyvin yksityiskohtaiselle tasolle nähdäkseen lähimmän Walmartin, kuten seuraavassa kuvassa näkyy:

Sovelluksen verkkonäkymän koodi hyödyntää pituus- ja leveysasteominaisuuksia, jotka määrittelimme malliobjektiin ja jotka tuotiin tietokantaan. Käytämme myös suosittua Leaflet-kirjastoa kartan luomiseen ja nuppineulojen eli merkkien sijoittamiseen kartalle.

Luo kartan luomiseksi uusi tiedosto julkiseen hakemistoon nimellä locatewalmart.html ja lisää siihen seuraava JavaScript-koodi:

<!doctype html><html lang="en"><head> <title>Walmart Stores</title> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" /><!--> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.ie.css" /><!--><script src="https://code.jquery.com/jquery-2.0.0.min.js"></script><link href='http://fonts.googleapis.com/css?family=oswald' rel='stylesheet' type='text/css'><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><style type="text/css">body { padding: 0; margin: 0;}html, body, #map { height: 100%; font-family: 'oswald';}.leaflet-container .leaflet-control-zoom { margin-left: 13px; margin-top: 70px;}#map { z-index: 1;}#title { z-index: 2; position: absolute; left: 10px; }</style></head><body><h1>Walmart Stores</h1><div></div><script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script><script>center = new L.LatLng(39.83, -98.58);zoom = 5;var map = L.map('map').setView(center, zoom);var markerLayerGroup = L.layerGroup().addTo(map);L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18,attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'}).addTo(map);function getPins(e){url = "http://0.0.0.0:3000/api/stores";$.get(url, pinTheMap, "json")}function pinTheMap(data){//clear the current pinsmap.removeLayer(markerLayerGroup);//add the new pinsvar markerArray = ;var lastNumber = 0;for (var i = 0; i < data.length; i++){store = data;if(store.latitude.length > 0 && store.longitude.length>0) {markerArray.push(L.marker());}}markerLayerGroup = L.layerGroup(markerArray).addTo(map);}map.whenReady(getPins)</script></body></html>

<!doctype html><html lang="en"><head> <title>Walmart Stores</title> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" /><!--> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.ie.css" /><!--><script src="https://code.jquery.com/jquery-2.0.0.min.js"></script><link href='http://fonts.googleapis.com/css?family=oswald' rel='stylesheet' type='text/css'><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><style type="text/css">body { padding: 0; margin: 0;}html, body, #map { height: 100%; font-family: 'oswald';}.leaflet-container .leaflet-control-zoom { margin-left: 13px; margin-top: 70px;}#map { z-index: 1;}#title { z-index: 2; position: absolute; left: 10px; }</style></head><body><h1>Walmart Stores</h1><div></div><script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script><script>center = new L.LatLng(39.83, -98.58);zoom = 5;var map = L.map('map').setView(center, zoom);var markerLayerGroup = L.layerGroup().addTo(map);L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18,attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'}).addTo(map);function getPins(e){url = "http://0.0.0.0:3000/api/stores";$.get(url, pinTheMap, "json")}function pinTheMap(data){//clear the current pinsmap.removeLayer(markerLayerGroup);//add the new pinsvar markerArray = ;var lastNumber = 0;for (var i = 0; i < data.length; i++){store = data;if(store.latitude.length > 0 && store.longitude.length>0) {markerArray.push(L.marker());}}markerLayerGroup = L.layerGroup(markerArray).addTo(map);}map.whenReady(getPins)</script></body></html>

<!doctype html><html lang="en"><head> <title>Walmart Stores</title> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" /><!--> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.ie.css" /><!--><script src="https://code.jquery.com/jquery-2.0.0.min.js"></script><link href='http://fonts.googleapis.com/css?family=oswald' rel='stylesheet' type='text/css'><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><style type="text/css">body { padding: 0; margin: 0;}html, body, #map { height: 100%; font-family: 'oswald';}.leaflet-container .leaflet-control-zoom { margin-left: 13px; margin-top: 70px;}#map { z-index: 1;}#title { z-index: 2; position: absolute; left: 10px; }</style></head><body><h1>Walmart Stores</h1><div></div><script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script><script>center = new L.LatLng(39.83, -98.58);zoom = 5;var map = L.map('map').setView(center, zoom);var markerLayerGroup = L.layerGroup().addTo(map);L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18,attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'}).addTo(map);function getPins(e){url = "http://0.0.0.0:3000/api/stores";$.get(url, pinTheMap, "json")}function pinTheMap(data){//clear the current pinsmap.removeLayer(markerLayerGroup);//add the new pinsvar markerArray = ;var lastNumber = 0;for (var i = 0; i < data.length; i++){store = data;if(store.latitude.length > 0 && store.longitude.length>0) {markerArray.push(L.marker());}}markerLayerGroup = L.layerGroup(markerArray).addTo(map);}map.whenReady(getPins)</script></body></html>

<!doctype html><html lang="en"><head> <title>Walmart Stores</title> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" /><!--> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.ie.css" /><!--><script src="https://code.jquery.com/jquery-2.0.0.min.js"></script><link href='http://fonts.googleapis.com/css?family=oswald' rel='stylesheet' type='text/css'><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><style type="text/css">body { padding: 0; margin: 0;}html, body, #map { height: 100%; font-family: 'oswald';}.leaflet-container .leaflet-control-zoom { margin-left: 13px; margin-top: 70px;}#map { z-index: 1;}#title { z-index: 2; position: absolute; left: 10px; }</style></head><body><h1>Walmart Stores</h1><div></div><script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script><script>center = new L.LatLng(39.83, -98.58);zoom = 5;var map = L.map('map').setView(center, zoom);var markerLayerGroup = L.layerGroup().addTo(map);L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18,attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'}).addTo(map);function getPins(e){url = "http://0.0.0.0:3000/api/stores";$.get(url, pinTheMap, "json")}function pinTheMap(data){//clear the current pinsmap.removeLayer(markerLayerGroup);//add the new pinsvar markerArray = ;var lastNumber = 0;for (var i = 0; i < data.length; i++){store = data;if(store.latitude.length > 0 && store.longitude.length>0) {markerArray.push(L.marker());}}markerLayerGroup = L.layerGroup(markerArray).addTo(map);}map.whenReady(getPins)</script></body></html>

>Mikäli huomaatte, että koodissa on kyse pelkästä tavallisesta HTML:stä ja JavaScriptiin. Mielenkiintoinen osa on getPins(e)-funktio, jossa teemme REST-kutsun API:lle, jonka loimme aiemmin tässä blogikirjoituksessa. Sen jälkeen käymme läpi jokaisen myymälän ja luomme nastan kunkin myymälän leveys- ja pituusasteen perusteella. Aika näppärää, eikö?

Johtopäätös##

Tässä blogikirjoituksessa näytin, miten luodaan REST-pohjainen verkkopalvelu, joka palauttaa luettelon Walmartin myymälöistä Yhdysvalloissa. Kun olimme luoneet verkkopalvelun Loopbackin avulla, lisäsimme tietojen etupään esityksen. Pystyimme kehittämään täysin toimivan sovelluksen hyvin pienellä työmäärällä paljon nopeammin kuin nykyisellä käyttämällämme kielellä. Keskustelimme myös joistakin Node.js:n ja PHP:n välisistä yhtäläisyyksistä. Vaikka pidän PHP:tä edelleen loistavana kielenä, olen itse havainnut, että Node.js on loistava seuraava kieli opeteltavaksi, koska siinä on rikas kirjastojen ekosysteemi ja sovellusten luomisen nopeus.

Olen liittänyt mukaan nopean taulukon, johon voit viitata vertaillessasi Node.js:ää ja PHP:tä.

• Valmiina kehittämään API:ita Node.js ja saada ne yhdistettyä tietoihin? Tutustu Node.js:n LoopBack-kehykseen. Olemme tehneet siitä helpon päästä alkuun joko paikallisesti tai suosikkipilvessäsi yksinkertaisella npm-asennuksella.