Hey, w ostatnim wpisie pokazałem jak zainstalować NodeJS, jednak nie pokazałem jak można wykorzystać go do stworzenia swoich, legendarnych aplikacji.
Użycie modułów przedstawię na przykładzie prostej aplikacji do zarządzania ulubionymi cytatami(jeśli któs je ma 🙂 ).
A więc zacznijmy.
Początek
Tworzymy katalog, w którym będziemy działać.
mkdir cytaty
Ja go nazwałem cytaty, choć możecie je nazwać jak chcecie.
Następnie wchodzimy do niego
cd cytaty
Dalej jest czas na zainicjowanie projektu NodeJS
W tym celu używamy komendy npm init i klikamy ciągle enter
npm init
W naszym katalogu został utworzony plik package.json, który zawieda dane dotyczące naszego programu. A tak może wyglądać przykładowa zawartość naszego pliku :
{ "name": "cytaty", "version": "1.0.0", "description": "Aplikacja o cytatach", "main": "app/app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "git+https://github.com/legendemil/cytaty.git" }, "author": "Emil Pausz", "license": "ISC", "bugs": { "url": "https://github.com/legendemil/cytaty/issues" }, "homepage": "https://github.com/legendemil/cytaty#readme" }
Nie ma tu nic dziwnego. Znaczenie poszczególnych opcji:
-name – oznacza nazwę naszego modułu(tu określamy jakiej nazwy będa używać inni aby korzystać z naszego modułu)
-version – wersja modułu
-description – opisuje funkcjonalność naszego modułu
-main – określa plik, który odpowiada za wyeksportowanie naszego modułu
-scripts – tutaj możemy umieszczać polecenia powłoki, jakie będziemy często wykonywać(o tym za chwilę)
-repository – okresla nasze repozytorium git
-author – chyba wiadomo 🙂
-license – typ licencji naszego modułu
Stworzenie strony
Dalej stworzymy podstawową stronę html, która będzie wyświetlać naszą aplikację. Tworzymy plik index.html i otwieramy w dowolnym edytorze tekstowym(może być notatnik, ale bardzo gorąco polecam zapoznać się z Sublime Text lub Atom).
Przykładowa zawartość index.html
<!DOCTYPE html> <html lang='pl'> <head> <meta charset="UTF-8"> <title>Najlepsze cytaty</title> <!-- czcionka Roboto z google fonts --> <link href='https://fonts.googleapis.com/css?family=Roboto:400,300&subset=latin,latin-ext' rel='stylesheet' type='text/css'> <!-- załadowanie styli CSS --> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <!-- header --> <header> <div class="wrapper"> <h3>Moje ulubione cytaty</h3> </div> </header> <!-- creating quote form --> <section> <div class="wrapper"> <h3>Dodaj cytat</h3> <form id='addForm' class='center'> <textarea name='quote' id='quote'></textarea> <br> <label for='author'>Autor</label> <input type='text' name='author' id='author'/> <input type='submit' name='submit' value='Dodaj'/> <div style='clear: both;'></div> </form> </div> </section> <!-- displaying quotes --> <main> <div class="wrapper"> <!-- contains quotes --> <div id="quotesContainer"> <!-- list of quotes --> <div class='quote center' id='no-quotes-info'> Nie masz jeszcze ulubionych cytatów </div> </div> </div> </main> <!-- site footer --> <footer> <div class="wrapper"> Created by Emil Pausz </div> </footer> </body> </html>
Dodanie styli CSS(make it beautiful)
Teraz nastał czas na stworzenie arkusza styli CSS. Tworzenie CSS to jedna z przyjemniejszych czynności. Aby jeszcze bardziej upięknić piękno tworzenia CSS wymyślono preprocesory CSS. Jednak tym razem wykorzystam czysty CSS. W przyszłości postaram się stworzyć wpis o tej technologii CSS. Dla zainteresowanych(Stylus, SASS)
Tworzymy plik main.css w folderze css i dodajemy poniższą treść
/* dark-grey #263238 light-grey #eceff1 */ * { font-family: 'Roboto', sans-serif; color: #263238; } .wrapper { width: 1440px; max-width: 80%; margin: 0 auto; } .center{ width: 90%; max-width: 500px; margin: 0 auto; } /* header styles */ header { text-align: left; } /* section styles */ section h3 { text-align: center; } section form { color: #263238; } #addForm textarea { display: block; font-size: 1.2rem; font-weight: 100; width: 100%; background-color: #eceff1; color: #263238; outline: none; border: none; resize: none; padding: 1.2rem; box-sizing: border-box; } #addForm #author { padding: .4rem; font-size: .8rem; } #addForm label { font-weight: 100; font-size: 1.3rem; } #addForm #author, #addForm label { font-weight: 100; } #addForm input[type='submit']{ border: none; padding: .5rem 1rem; background-color: #eceff1; color: #263238; float: right; } /* main styles */ main { margin-top: 3rem; margin-bottom: 3rem; } .quote { margin-top: 1rem; background-color: #eee ; padding: 1rem .4rem; line-height: 150%; } .quote button.deleteQuoteBtn { float: right; border: none; outline: none; padding: .3rem .6rem; background-color: white; color: #263238; cursor: pointer; } /* footer styles */ footer { text-align: center; }
Po dodaniu powyższych stylów strona będzie wyglądać następująco.
Plik main.css zawiera ponadto style dla nowo stworzonych cytatów, których na razie nie ma.
Czas na Javascript!
Przygodę z JS w tym projekcie zaczniemy od stworzenia pliku app.js w folderze app. Plik app.js będzie zawierał całą logikę naszej aplikacji. Będzie on jednak korzystać z innych modułów Javascript. Aplikację oprę na bibliotece jQuery, który w bardzo prosty sposób umożliwia manipulację DOM-em (Document Object Model).
NodeJS udostępnia polecenie npm install <nazwa_modułu>, za pomocą którego możemy instalować moduły NodeJS. Przełącznik -S sprawi, że moduł zostanie zainstalowany lokalnie w obecnej aplikacji, natomiast przełącznik -g instaluje moduł globalnie.
Ponadto przełącznik -S:
-tworzy katalog node_modules, gdzie znajdują się zainstalowane lokalnie moduły,
-dodaje do pliku package.json(aktualizuje obiekt dependencies lub devDependencies) informację, że nowy moduł został zainstalowany.
A więc do dzieła, zainstalujmy jQuery.
npm install -S jquery
Na systemach Linux, MacOS komenda ta może wymagać dodanie na początku sudo.
sudo npm install -S jquery
Jak możemy zobaczyć w naszym folderze stworzył się folder node_modules, a w nim folder jquery.
Teraz możemy użyć modułu w naszej aplikacji, używając funkcji require(nazwa_modułu).
// app/app.js var $ = require('jquery');
Do zmiennej $ przypisujemy moduł jQuery. Jednak gdybyśmy dodali ten skrypt do pliku index.html i włączyli stronę otrzymalibyśmy błąd, gdyż funkcja require() nie jest obsługiwana przez przeglądarki, lecz tylko przez NodeJS.
Aby pozbyć się powyższego błędu musimy użyć innego modułu npm, Browserify. Pozwala on korzystać z modułów npm w przeglądarce. Ponadto nie musimy zaśmiecać pliku html listą tagów typu script[src=’biblioteka.js’], gdyż browserify buduje ze wszystkich zależności(jakich użyliśmy) jeden plik.
A więc do dzieła!
Instalujemy browserify przez npm install -S, jeśli chcemy tylko dla tego projektu
npm install -S browserify
lub jeśli często będziemy korzystać globalnie, dla całego systemu
npm install -g browserify
Następnie tworzymy plik bundle.js, który będzie zawierał nasz wynikowy kod wykonujemy komendę w wierszu poleceń
browserify app/app.js -o bundle.js
Po wykonaniu tej komendy do pliku bundle.js zostanie zapisany po przetworzeniu kod z pliku app.js.
Następnie dołączamy nasz plik bundle.js do pliku index.html, tuż przed zamknięciem znacznika body
<!-- reszta część kodu --> <!-- bundle js --> <script src='bundle.js'></script> </body> </html>
Teraz w konsoli naszej pzeglądarki nie powinno być żadnego błędu.
Jednak po zapisaniu pliku app.js, plik bundle.js pozostaje bez zmian, musimy ciągle przechodzić do terminala i wpisywać komendę
browserify app/app.js -o bundle.js
Aby zmiany na bieżąco były zapisywane należy użyć modułu watchify. Instalacja przebiega analogiczne jak instalacja browserify
npm install -S watchify //instaluje lokalnie
lub
npm install -g watchify //instaluje globalnie
Następnie wydajemy polecenie
watchify app/app.js -o bundle.js -v
Od tej pory każda zmiana w pliku app.js będzie automatycznie zapisywana do pliku bundle.js. Przełącznik -v odpowiada za wyświetlanie na bieżąco w terminalu ile czasu zajęło przetworzenie pliku.
Livereload
Mimo to, że zmiany są zapisane na bieżąco wciąż trzeba odświeżać okno przeglądarki, by zobaczyć zmiany. Aby strona automatycznie się odświeżała po każdej zmianie, należy użyć serwer livereload.
W tym projekcie użyje prostego, lecz skutecznego LiveServera.
Instalujemy go zgodnie z instruckją zamieszczoną na githubie tego projektu
npm install -g live-server
Następnie tworzymy plik live-reload.js, który będzie odpowiadał za nasz lokalny serwer, uruchomiony na porcie 8080
var liveServer = require("live-server"); var params = { port: 8080, // Set the server port. Defaults to 8080. open: true, // When false, it won't load your browser by default. file: "index.html", // When set, serve this file for every 404 (useful for single-page applications) mount: [['/components', './node_modules']], // Mount a directory to a route. logLevel: 2 // 0 = errors only, 1 = some, 2 = lots }; liveServer.start(params);
Teraz czas go uruchomić. Aby to zrobić wydajemy komendę
node live-reload.js // uruchamiamy serwer
watchify app/app.js -o bundle.js -v // watch mode
Po wydaniu tej komendy powinna otworzyć się przeglądarka na adresie http://127.0.0.1:8080/, gdzie będzie się wyświetlać nasza strona. Teraz po każdej zmianie pliku, strona będzie się automatycznie odświeżać.
Awesome!
Jednak gdy zrobimy błąd w naszej aplikacji, to nasza konsola wskaże jako miejsce błędu linijkę kodu w pliku bundle.js, a nie tam gdzie tak naprawdę został popełniony. Nie jest to najlepsze rozwiązanie :/. Jednak z pomocą przychodzą sourcemapy. Umożliwiają one naprawienie tego błędu i miejsce wystąpienia błędu będzie wskazywane prawidłowo.
Za generowanie sourcemapów w browserify odpowiada flaga –debug
browserify --debug app/app.js -o bundle.map.js //lub
watchify --debug app/app.js -o bundle.map.js
To spowoduje utworzenie pliku bundle.map.js, który będzie zajmował więcej miejsca na dysku niż plik bundle.js. Po dodaniu pliku bundle.map.js do strony konsola przeglądarki będzie prawidłowo wskazywać, gdzie popełniliśmy błąd. Plik z sourcemapami powinien być używany tylko w środowisku deweloperskim, gdyż zawiera informacje, które nie są potrzebne w środowisku produkcyjnym.
Do usuwania sourcemapów z pliku służy moduł exorcist.
npm install -g exorcist browserify app/app.js --debug | exorcist bundle.map.js > bundle.map.js
Natomiast do minifikacji plików(sprawienia aby zajmowały mniej) służy minifyify.
npm install -S minifyify
Aby z niego skorzystać, należy wydać polecenie
browserify app/app.js --debug -d -p [ minifyify --map bundle.map.js --output bundle.map.js ] > bundle.js
Ciąg dalszy nastąpi..
Myślę, że pora zakończyć ten wpis. W następnej części aplikacja o cytatach zostanie dokończona. Mam nadzieję, że post się podobał.
Jedna myśl w temacie “Jak korzystać z NodeJS cz.1”
1 Pingback