Auditor – Uruchamiamy projekt

Uruchomienie projektu AUDITOR będącego implementacją Single-page application. Backend oparty został o framework Symfony, a część frontendowa wykorzystuje AngularJS 1.5 w oparciu o praktyki zaproponowane przez John Papa.

Postanowiłem rozdzielić interfejs użytkownika od części backendowej. Dlatego też, będę tworzył aplikację składającą się z dwóch elementów – backend oraz frontend. Pamiętaj, że tworzę aplikację typu SPA (Single-page application).

Backend – API

Aplikację backendową napędza framework Symfony 3, wykorzystujący wzorzec architektoniczny MVC (Model-View-Controller). Będzie to swoiste API dla aplikacji frontendowej. Całość oparta o zasadę (en. priniciple) – CQRS (Command Query Responsibility Segregation). Czyli w wielkim skrócie mówiąc – rozdzielam model zapisu od odczytu, a wszystko co dzieje się w aplikacji może być przyporządkowane do jednego rodzaju akcji – odczytu (Query) lub zapisu (Command).

O samej implementacji, rozpiszę się w dwóch zupełnie niezależnych artykułach. Jednak będzie to omówienie implementacji w języku PHP. Na teraz polecam z zapoznaniem się z ebookiem Maćka z devstyle.plCQRS Pragmatycznie.

Frontend – WebUI

AngularJS jak wszystko, ma swoje wady i zalety. Jedną z wad jest zdecydowanie bardzo ubogi routing. Dlatego też, od początku będę używał rozbudowanej wersji, usprawniającej routing aplikacji – AngularUI Router. W utrzymaniu Clean Code pomogą mi reguły zaproponowane przez John Papa, choć będzie to raczje wybór kilku z nich, niżeli próba implementacji każdej. Możesz o nich poczytać tutaj – Angular 1 Style Guide.

Wymagania

Co jednak jest niezbędne aby uruchomić aplikację? Aktualnie po stronie backendowej, wymagany jest interpreter PHP w wersji 7.1 oraz PHPowy dependency manager – composer. That’s all.

Aplikacja frontendowa jest nieco bardziej wymagająca. Należy zainstalować Node.js wraz z managerem pakietów npm. Następnie doinstalować globalnie task runnera – gulp.js oraz bundlera browserify. Najlepiej wszystko w najnowszej, stabilnej wersji.

$: npm install gulp -g
$: npm install browserify -g

Uff… Na początek to tyle. Tworzenie frontendu staje się coraz bardziej wymagające pod kątem stosowanych narzędzi 😉

Uruchomienie

Jeżeli jesteśmy pewni, że wszystkie niezbędne elementy układanki zostały zainstalowane, pozostaje nam ściągnięcie repozytorium kodu i uruchomienie aplikacji.

$: git clone [email protected]:devenvpl/auditor.git
$: cd auditor

Uruchomienie backendu, jest banalnie proste. Composer pobiera niezbędne zależności, a następnie wykorzystując wbudowany serwer HTTP w interpreterze PHP, uruchamiana jest aplikacja.

$: cd api && composer install && php bin/console server:run

Start aplikacji frontendowej, wygląda bardzo podobnie. Npm instaluje wszystkie potrzebne biblioteki, gulp przygotowuje pliki (m.in konkatenacja bibliotek), a następnie zaczynamy serwować pliki statyczne.

$: cd webui && npm install && gulp dist && gulp serve

Od tej pory dwa elementy aplikacji dostępne są pod adresami:

Na razie jednak pusto. Mam szkielet. Nic się nie dzieje, ale to do czasu 🙂

Na co dzień Software Engineer, jeszcze programujący CTO w firmie Emphie Solutions. Fascynat programowania, architektury, metodyk zwinnych i dobrych praktyk w szerokim ujęciu. Polyglot Programer kochający poznawać nowe języki jednocześnie wykorzystując ich najlepsze strony. Założyciel DevEnv i współautor podcastu DevEnv.
PODZIEL SIĘ