Wychodząc na przeciw rynkowym potrzebom przygotowaliśmy Workshopper w formie zupełnie innej niż dotychczas.
Waszym zadaniem będzie napisanie prostej aplikacji, opierającej się na narzędziach jakie można napotkać przy pracy z JavaScript. W zadaniu zawarliśmy następujący stack:
- Node.js + Express
- React.js + Bootstrap + Webpack
- Firebase
Oprócz tego korzystać będziemy
- Babel - How to speak in ES6
- Axios - Api, do you copy?
- Lodash - Do whatever you want with collections
- Bluebird - "I Promise you"
Większość z tych narzędzi poznaliście już dzięki specjalnie przygotowanym do tego workshopperom. Tym razem wykorzystamy tę wiedzę w praktyce. Jeśli jakieś zagadnienia są dla Was nowe - Don't Worry! Przez cały czas będziemy Was asystować, a w przypadku problemów służymy pomocą!
Zatem - Do dzieła! :)
W tym kroku skupimy się na konfiguracji środowiska.
Całe zadanie zostało podzielone na Stepy i umieszczone na GitHubie. Pierwszy step masz już za sobą, ale żeby przejść dalej potrzeby jest system kontroli wersji Git. Pomiń ten krok jeśli posiadasz zainstalowanego GITa, w przeciwnym wypadku pobierz wersję odpowiednią dla swojego systemu operacyjnego.
HINT: użytkownicy Windowsa, aby móc korzystać z GITa w konsoli, powinni do zmiennej globalnej PATH
dodać ścieżkę prowadzącą do katalogu, w którym znajduje się git.exe
Do pracy z node.js
potrzebujemy specjalnego oprogramowania.
Pomiń ten krok, jeśli posiadasz już zainstalowego node.js
w wersji 5.x
lub wyższej.
Jeśli jednak nie, możemy go pobrać z oficjalnej strony.
Wybierz wersję odpowiednią dla swojego systemu operacyjnego. Jeśli masz wątpliwości co do wersji, poproś o pomoc jednego z mentorów.
Node.js dostarcza managera pakietów npm
. Służy do pobierania zależności potrzebnych do sprawnego działalnia aplikacji.
- Sklonowanie repozytorium
- Wybierz katalog w którym chcesz przechowywać źródła.
- Otwórz konsolę w tym katalogu i wykonaj komendę
$ git clone https://github.com/imvanzen/nodeschool-webapp-workshopper.git ./
- Git powinien pobrać źródła do wybranego przez Ciebie katalogu
- Objaśnienie jak używać
branch
// Todo @p-janik?
- Objaśnienie podziału struktury aplikacji
\client
- zawiera warstwę kliencką\client\components
- zawiera komponenty react'owe\client\services
- zawiera serwisy do zarządzania danymi w warstwie klienckiej\es6
- zawiera warstwę serwerową\es6\services
- zawiera serwisy do zarządzania danymi w warstwie serwerowej\public
- zawiera pliki statyczne\views
- zawiera szablony serwowane przez warstwę serwerową\webpack
- zawiera konfigurację webpacka
- Instalacja podstawowych zależności
- Po zainstalowaniu
node'a
mamy dostęp do managera pakietównpm
. Manager pakietów pozwala na dodawanie do naszej aplikacji kodu, stworzonego przez różnych użytkowników, udostępnionego na repozytorium npmjs.com - Aby zainstalować pakiety, w katalogu głównym aplikacji wykonaj następującą komendę
$ npm install
- Po zainstalowaniu
- Stworzenie tasków do transpilacji
ES6
->ES5
- Celem jest stworzenie tasków w
package.json
do transpilacji kodu w standardzieES6
doES5
Katalogiem źródłowym jestes6/
, a docelowymes5/
"scripts": { "build-server": "babel es6 -d es5", }
- Dodanie katalogu
es5/
do.gitignore
- Celem jest stworzenie tasków w
- Stworzenie aplikacji
express
- Wrapowanie
express
wPromise
const app = Promise.promisifyAll(express());
- Obsługa wersji Produkcyjnej i Deweloperskiej
- Utworzenie configa dla
express
- Wrapowanie
- Stworzenie podstawowego widoku
views/index.html
Utwórz w wewnątrz pustegodiv'a
z identyfikatorem#WeatherInfoApp
- Stworzenie podstawowego
route
- Stworzenie pliku
es6/routes.js
i zadeklarowanie route'aapp.get('/', (req, res) => res.render('index'))
- Załączenie pliku
es6/routes.js
dodo es6/index.js
i wstrzyknięcie routingu do expressa Mając zmiennąapp
zawierającą instancję expressa, postaraj się przekazać ją doroutes
- Stworzenie pliku
- Instalacja zależności
W tym kroku będziemy potrzebowali następujących zależności
$ npm install webpack@~1.12.9 --save
$ npm install babel-loader@~5.4.0 node-sass@~3.4.2 sass-loader@~3.1.2 style-loader@~0.13.0 webpack-dev-server@~1.14.0 --save-dev
- Konfiguracja
webpack
- Stworzenie katalogu
webpack/
- Stworzenie pliku serwera
webpack/index.js
(Port musi być inny niż serweraExpressa
!) - Stworzenie pliku konfiguracyjnego
webpack.config.js
- Stworzenie katalogu
public/
orazclient/
- Stworzenie pustego pliku
client/index.js
(tymczasowo, aby build webpacka nie wysypał się) - Stworzenie pustego pliku
public/.gitkeep
(public
nie zawsze musi zawierać pliki statyczne, ale mogą być do niego instalowane np. przy pomocybower
)
- Stworzenie pustego pliku
- Dodanie do
Expressa
poniższego middleware'a Czasami mogą wystąpić problemy przyhot-reloadzie
z powoduCORS
. Dodaj poniższy middle ware does6/index.js
aby temu zapobiecif (!IS_PROD) { app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Methods', 'POST,GET,PUT,DELETE'); res.header('Access-Control-Allow-Headers', 'Content-Type'); next(); }); }
- Stworzenie katalogu
- Modyfikacja tasków w celu uruchomienia webpacka
"scripts": { ... "dev-client": "babel-node webpack", "build-client": "NODE_ENV=production webpack -p --config webpack/webpack.config.js", ... }
- Instalacja zależności
W tym kroku zajmiemy się
Reactem
$ npm i react@~0.14.3 react-dom@~0.14.3 react-bootstrap@~0.28.1 --save
$ npm i react-hot-loader@~1.3.0 --save-dev
- Modyfikacja
webpack/webpack.config.js
- Dodanie
react-hot
do loaderów i wstawienie warunku dot. produkcjiloaders: IS_PROD ? ['babel'] : ['react-hot', 'babel'],
- Dodanie
- Stworzenie podstawowego komponentu
react
wclient/index.js
- Instalacja zależności
$ npm install bower --save
- Stworzenie
.bowerrc
{ "directory": "public/bower_components/", // ścieżka instalacji zależności "interactive": false // Wyłączenie zapytania o udzielanie danych statystycznych }
- Stworzenie
bower.json
Można to zrobić przez CreatorPo przejściu przez Creator, dodajemy zależność -$ bower init
bower install bootstrap@^3.0.0 --save
- Modyfikacja tasków w celu uruchomienia instalacji bowera po budowaniu
- Dodanie
bower install
do tasków budujących clienta
- Dodanie
- Dodanie do
views/index.html
styli zbootstrap
<link href="/public/bower_components/bootstrap/dist/css/bootstrap.min.css" media="all" rel="stylesheet" type="text/css">
- Stworzenie
- Stworzenie komponentu
client/components/WeatherInfo.js
i ostylowanie go używającreact-bootstrap
- Omówienie działania natywnego modułu node'a -
EventEmitter
- Stworzenie komponentu
client/components/AddCityForm.js
- Komponent zawiera stany
isLoading
searchedCityName
searchedResult
- Komponent zawiera handlery
onChange
onClick
- Komponent zawiera stany
- Stworzenie komponentu
client/components/CitiesList.js
- Komponent pobiera listę miast przekazaną przez propercje
citiesList
- Komponent zawiera handlery
removeCityHandler
updateCityHandler
- Komponent pobiera listę miast przekazaną przez propercje
- Instalacja zależności
$ npm install lodash --save
$ npm install axios --save-dev
- Stworzenie serwisu
client/services/CitiesService.js
. Zarządza on- Komunikatami
- Listą miast
- Wynikiem wyszukiwania
- Stworzenie
api
dla ClientaGET /cities
GET /cities/:cityName
POST /cities {cityName}
PUT /cities/:cityId
DELETE /cities/:cityId
- Stworzenie
routes
dla SerweraGET /cities
GET /cities/:cityName
POST /cities {cityName}
PUT /cities/:cityId
DELETE /cities/:cityId
- Instalacja zależności
$ npm install [email protected]
- Stworzenie wrappera na
WeatherAPI
- API dostarcza wiele opcji, ale nas interesuje wyłącznie pobieranie aktualnej pogody. W pliku konfiguracyjnym znajdują się enumy które określają "lokalizację" i systemy miar w jakich odczyty mają być zwracane
- Dokumentacja
- Stworzenie serwisu
CitiesService
dla Serwera- Service powinien zapewnić
- wyszukiwanie w API pogody dla nazwy miasta
- dodawanie miasta
- usuwanie miasta
- update odczytów dla miasta
- Service powinien zapewnić
- Instalacja zależności
$ npm install firebase@~2.3.2 fireproof@~3.1.0 --save
- Stworzenie serwisu
CitiesDao
- Test aplikacji
- Deploy na
Heroku
+Toolbelt