WeatherQuotes

Deadline: 19.01.2020

Role w projekcie:

TechLead- Radek
Product Owner - Tomek
Development Manager - Maciej
Klient - Arek

Opis projektu

Strona Weather Quotes informuje użytkownika o stanie pogody w wybranym przez niego miejscu oraz stara się go zainspirować cytatem generowanym losowo w zależności od pogody. Wstępny podgląd projektu można znaleźć tutaj.

Cele

W projekcie każdy z uczestników powinien zaprezentować praktyczną znajomość poniższych zagadnień związanych z JavaScript:

zmienne
operatory porównania
pętle
obiekty, atrybuty
warunki
funkcje
operatory logiczne
tablice
iteracja i/lub rekurencja
console
return
"===" vs "=="
integracja z zewnętrznym REST API
interakcja z domem
odwoływanie się do elementów DOM z JavaScript
zmiana stylów z poziomu JSa
zmiana zawartości HTML z poziomu JSa
animacje
zewnętrzne biblioteki
async await i/lub Promise
funkcje callback
metody HTTP
pisanie testów jednostkowych

Użyte biblioteki:

snap

gsap

Użyte narzędzia:

Użyte API (linki):

pogoda: Current weather data

60 calls /minute

1,000,000 calls /month

cytaty: Ron Swanson Quotes Breaking Bad Quotes

API pogodowe:

dane:
nazwa miasta!
temperatura!
dczuwalna temperatura!
stopień zachmurzenia

Flow Git'a

działanie na trzech branchach: develop, main oraz własny z wybraną funkcjonalnością/ nowym ficzerem
Jedna funkcjonalność - jeden branch
gdy funkcjonalność jest gotowa, wystawiamy pull request z mergowaniem go do brancha develop.
co najmniej 2 osoby robią code review danego kodu
jeśli pozytywnie przejdzie on przez dwie osoby, wtedy osoba która wystawiła pull request może zmergować brancha, lub TechLead

Etapy

1.Zrobienie mockupu

Stworzenie wstępnego projektu Weather Quotes z użyciem Figmy oraz rozpisanie zadań do wykonania z użyciem Trello.

2.Zrobienie funkcjonalności

Napisanie kodu, który pobiera dane z API i wyświetla je na stronie.
Wykonanie animacji w zależności od prognozy pogody.
Zmiana tła w zależności od prognozy pogody.

Kod startowy projektu

Nad aplikacją pracę wcześniej zaczęli też inni programiści, po których otrzymujecie mały kawałek kodu. Oto co zostało już przygotowane (możecie oczywiście dowolnie to zmieniać i konfigurować zgodnie z potrzebami zespołu):

Zostały skonfigurowane GitHub Actions. W podobny sposób jak w pierwszym projekcie. Po wykonaniu kroków opisanych poprzednio Wasza aplikacja powinna zostać wdrożona na GitHub Pages.
Aplikacja jest budowana przy pomocy narzędzia Parcel, z którym mieliście okazję się zapoznać w materiałach.
Został dodany framework do testów — Jest w sposób opisany TUTAJ.

Testy powinny zostać umieszczone w katalogu test. Kod produkcyjny (testowany) w katalogu src.

SWApi, z którego będziecie korzystać, ma ograniczenie do 1000 zapytań z jednego adresu IP na dzień. Dlatego, jeśli przekroczycie tę liczbę w trakcie developmentu, przydatne możecie się okazać użycie JSON SERVER z katalogu swapi-json-server.
SWApi nie zwraca wam obrazków dla poszczególnych zasobów, dlatego w katalogu static/assets/img znajdziecie obrazy odpowiadające konkretnym zasobom.
W katalogu static/images/ui znajdziecie wszystkie grafiki, jakie będą Wam potrzebne do wykonania interfejsu użytkownika wg projektu. Jednakże jeśli jesteście w stanie zaproponować lepszy Interfejs Użytkownika, może zaproponować i wykonać alternatywny widok oraz zrezygnować z wcześniej przygotowanego.

Skotee/CodersCamp2020.Project.JavaScript.WeatherQuotes