Angular 2 – Angular CLI – pierwsze kroki

Angular CLI

Szybki i przyjemny frontend aplikacji internetowej, to marzenie wielu deweloperów. Na przeciw oczekiwaniom programistów wyszedł Google, z produktem Angular CLI. Dedykowany command-line interface ma jedno zasadnicze zadanie, przyspieszyć i maksymalnie uprościć pracę w standardowych czynnościach związanych z tworzeniem i zarządzaniem projektem.

Instalacja Angular CLI

Pierwszy etap pracy z Angular CLI, to globalne zainstalowanie paczki @angular/cli przez npm:

npm install -g @angular/cli

Jeżeli wszystko przebiegło pomyślnie, odpalenie komendy ng help powinno wyświetlić obszerną pomoc. Już na tym etapie możemy zauważyć, że prefiks ng został zarezerwowany, właśnie na potrzeby Angular CLI.

Pierwszy projekt

Gdy mamy zainstalowaną paczkę @angular/cli, nic nie stoi na przeszkodzie, by szybko stworzyć własny projekt. Do tego celu wykorzystamy komendę ng new my_project, gdzie zamiast my_project podajemy nazwę naszego projektu.

Przy tej okazji warto zaznaczyć, że Angular CLI ma wobec nas kilka wymagań odnośnie nazwy projektu:

New project names must start with a letter, and must contain only alphanumeric characters or dashes. When adding a dash the segment after the dash must also start with a letter.

Nazwa projektu musi zaczynać się od litery, może się składać tylko ze znaków alfanumerycznych lub myślników. Po myślniku CLI oczekuje wyłącznie litery.

Angular CLI - new project

Jeżeli wszystko przebiegło w porządku nasz projekt powinien wyglądać mniej więcej tak:

Tip

Angular CLI domyślnie tworzy nam style w formacie CSS. Jeżeli wolimy pracować np z językiem SASS, nic nie stoi na przeszkodzie. Możemy to ustalić już na poziomie tworzenia projektu deklarując parametr --style. Pełną listę opcjonalnych parametrów znajdziecie w oficjalnej dokumentacji.

Uruchomienie serwera

Aby uruchomić stworzone przez nas środowisko, należy wpisać w konsoli komendę ng serve. Nasz projekt zostanie zbudowany, a aplikacja zostanie wystawiona pod zdefiniowanym przez nas adresem (domyślnie localhost:4200).

Angular CLI - server run

Aplikacja będzie działać do momentu wyłączenia jej przez nas.

Tworzenie komponentu / modułu / dyrektywy / etc

Sercem stworzonego przez nas projektu jest folder src/app. Początkowo znajduje się tam app.component.tsapp.module.ts oraz plik z widokiem, style oraz testy.

Dodanie nowego komponentu czy modułu jest banalnie proste. Wystarczy, że w konsoli wpiszemy ng generate lub w skrócie ng g, a następnie nazwę tego, co chcemy stworzyć.

Angular CLI rozróżnia następujące funkcjonalności:

Component ng g component my-new-component
Directive ng g directive my-new-directive
Pipe ng g pipe my-new-pipe
Service ng g service my-new-service
Class ng g class my-new-class
Guard ng g guard my-new-guard
Interface ng g interface my-new-interface
Enum ng g enum my-new-enum
Module ng g module my-module

 

Podsumowanie

Angular CLI to przyjazne narzędzie, które wspomaga pracę nad frontendem aplikacji tworzone w Angularze. Jest bardzo intuicyjny i wygodny w użytkowaniu. Największego boosta dostajemy na samym początku, kiedy wszystko dostajemy podane na tacy.

Angular CLI - working app

HTTP methods z Go i MongoDB – część 3 – PUT i DELETE

HTTP methods

W poprzednich dwóch częściach cyklu nauczyliśmy się tworzyć produkty, pobierać listę produktów oraz pojedynczy produkt za pomocą ID. Poniższy wpis zademonstruje, w jaki sposób możemy zaaktualizować produkt oraz jak go usunąć, czyli poznamy metody PUT i DELETE.

HTTP methods – PUT

Aktualizacja produktu

Do aktualizacji produktu wykorzystamy wiedzę, którą zdobyliśmy do tej pory – czyli pobieranie produktu po ID.

Na początek wykorzystamy pakiet gorilla/mux, aby dostać się parametrów zapytania. Następnie sprawdzamy czy wsród parametrów znajduje się ID. Jeżeli wszystko przebiegło poprawnie, to konwertujemy ID na ObjectIdHex.

W kolejnym kroku, podobnie jak przy metodzie POST, tworzymy nasz lokalny produkt, parsujemy i dekodujemy. Otwieramy połączenie z bazą danych i dzięki metodzie UpdateId, aktualizujemy nasz produkt przesyłając kolejno oid i product.

Na koniec standardowe ustawienie nagłówków: "Content-Type", "application/json", odpowiedź 200 - OK. Zamykamy sesję i zwracamy nasz zmodyfikowany produkt w formacie JSON.

Efekt pracy w POSTMANie:

Postman - PUT method- HTTP

HTTP methods – DELETE

Usuwanie produktu

Usuwanie produktów, na podstawie naszych doświadczeń, wydaje się teraz dziecinnie proste.

Metoda remove(), nie różni się niczym znaczącym od wcześniej wspomnianych metod. Całą magię wykonuje RemoveId(), gdzie jako parametr przekazujemy ObjectIdHex. Efekt naszej pracy na screenie poniżej:

Postman - DELETE method- HTTP

Podsumowanie

Powyższy wpis, to trzecia i ostatnia część cyklu HTTP methods. Praca nad tymi kilkoma endpointami dała mi wiele satysfakcji. Zdaję sobie sprawę z tego, że wymagają one poprawy. Poszedłem na duże uproszczenia, ale ucząc się języka Go oraz MongoDB, postawiłem sobie na razie za cel: minimalną, działającą funkcjonalność. To będzie dobry wstęp do czegoś większego.

Shopping Manager mockup

rwd mockup

Pracuję efektywnie, jeśli mam jasno sprecyzowane cele i wymagania. Najwyższy czas skupić się nad logiką aplikacji. Poniższy wpis, to pseudo makieta konkursowego projektu Shopping Manager.

Shopping Manager – Funkcjonalność

Aplikacja Shopping Manager ma na celu pomoc w racjonalnym robieniu zakupów spożywczych, optymalizację wydatków finansowych związanych z żywieniem oraz łatwym i przejrzystym zarządzaniem listą zakupową oraz budżetem przeznaczonym na artykuły spożywcze.

Produkty

[MVP] Jednym z filarów systemu są produkty spożywcze. Będziemy mieli możliwość dodawania produktu, przeglądania listy produktów oraz oznaczania ulubionych. Będziemy mogli określić cenę produktu oraz dostaniemy informację jak cena zmieniała się w czasie.

[V2] W późniejszym etapie rozwoju aplikacji (jeżeli go doczekamy 🙂 ) lista produktów będzie zaciągana z zewnętrznej bazy, a ceny będą różne dla poszczególnych poszczególnych sklepów. Ceny powinny aktualizować się na bieżąco.

Przepisy

[MVP] Kolejny filar, to przepisy. Przepisy zawierają produkty, które są niezbędne do wykonania posiłku. Będziemy mieli możliwość tworzenia własnych przepisów, przeglądania bazy przepisów i oznaczania ulubionych. Określanie wartości energetycznej dla danego posiłku, na podstawie produktów.

Planowanie

[MVP] Określanie tygodniowego budżetu oraz określanie wielkości gospodarstwa domowego. Na tej podstawie zostaną dopasowane przepisy na najbliższy tydzień oraz stworzona lista zakupowa. Produkty długoterminowe, które nie zostaną wykorzystane w całości, będą mogły zostać wykorzystane w kolejnym planowaniu budżetu.

[V2] Dobranie odpowiedniego wzorca, aby skomponować jadłospis na podstawie naszych preferencji żywieniowych.

shopping manager

Interfejs

Interfejs użytkownika powinien być maksymalnie uproszczony. Dashboard powinien składać się z posumowania bieżącego budżetu i kolejnych list zakupowych.

W zakładce Budżet będzie możliwość zdefiniowania budżetu przeznaczonego na produkty spożywcze, sprawdzenie historii wydatków, generowanej na podstawie zatwierdzanej listy zakupowej.

Pozostałe dwie zakładki, to kolejno listy produktów i przepisów wraz z wyżej opisanymi funkcjonalnościami.

W powyższym interfejsie przydałoby się jeszcze umiejscowić gdzieś jadłospis. To miejsce na razie nie jest sprecyzowane Najdogodniejsze znajdzie się w trakcie pracy.

Podsumowanie

Opisane funkcjonalności wydają się realne do zaimplementowania, w trakcie trwania konkursu. Projekt nie wymaga ode mnie zaangażowania ponad miarę. Dowiezienie tej wersji oraz wywiązanie się z założeń opisanych w tym poście wymaga natomiast trzech rzeczy: systematyczności, systematyczności oraz… systematyczności.