Skip to main content

[05 MyFood] Hierarchia i podział projektu (docker, flask, react)

We wcześniejszym poście napisałem, że musiałem zrobić krok wstecz. Okazuje się, że musiałem zrobić kolejny krok wstecz.

Dlaczego?

Moim planem jest stworzenie projektu gdzie backend to flask. Będzie on serwował API, z którym komunikować się będzie front.

Na froncie stanie React, czyli technologia JS. Im więcej o nim czytam, i tworze tutoriale, tym bardziej mi się podoba :)

Moim błędnym podejściem było to, że python będzie odpowiadał za API, oraz serwował statyczną stronę. Na tej statycznej stronie miał być React.

Co tu jest błędnego?

Każda część projektu frontend i backend powinna być całkowicie oddzielnym bytem. Nie powinny być ze sobą powiązane. Front nie powinien być zależny od serwera API. Nie powinien być nawet na tym samym serwerze.

To oznacza że muszę przebudować hierarchie projektu.

Muszę wspomnieć, że mój błąd uświadomił mi kolega Dariusz (może kiedyś przekonam go do blogowania ;d )

Plusy:

  • możliwość łatwiejszego skalowania serwerem (baza, itp), wydzielenie backendu na inny serwer niż frontend
  • w razie potrzeby można zmienić technologię api, bez wpływu na front
  • możliwość łatwej modyfikacji wygładu aplikacji, bez ryzyka że coś popsujemy w danych
  • za rok może się okazać, że pojawi się coś lepszego niż React, dzięki oddzieleniu frontu od backendu nic nie stoi na przeszkodzie
  • łatwe stworzenie aplikacji mobilnej w dowolnej technologii dla dowolnego urządzenia (android, ios, windows) , cała komunikacja odbywać się będzie przez API,

Minusy:

  • konieczność poznania 2 technologii
  • … (jak wyjdzie w praniu to dopiszę :) )

Przebudowa repozytorium – zmiany

https://github.com/mfratczak/myfood-generator – wstępne zmiany

  • Docker
    • server backend
    • server frontend
    • server bazodanowy
  • WebClient
    • aplikacja React
  • WebServer
    • aplikacja Flask Api
  • docker-compose.yml (plik konfiguracyjny dockera)

Wstępna hierarchia jak wyżej. Prawdopodobnie się zmieni o elementy CI (Continuous Integration), Testy automatyczne, i kilka innych.

Do testów lokalnych, docker będzie odpalany na dwóch portach.

  • Port 80 -> localhost -> aplikacja web
  • Port 1025 -> localhost:1025 -> api backend

Docelowo jak już projekt zostanie wrzucony na domenę to podział będzie następujący:

  • http://myfood.love – front na porcie 80 (standardowo)
  • http://api.myfood.love – backend na porcie 80 (standardowo)

W kolejnym poście (mam już nadzieję) przygotuje aplikacje front i backend z „hello world”.

 

[01 MyFood] Geneza projektu, i jego cele

Start Projektu MyFood Generator

Jeśli śledzisz mojego bloga, to wiesz, że startuje w konkursie „Daj się poznać” edycja 2017. Dla tego konkursu wybrałem projekt „MyFood Generator” czyli w skrócie „Generator posiłków”.

Projekt będzie dostępny pod domeną: http://myfood.love

Geneza projektu

Walczę aktualnie z nietolerancją pokarmową, i co miesiąc dostaje pełny jadłospis dla dwóch osób, na 30 dni. Każdy posiłek może posiadać 2 warianty [dla każdej osoby inne ilości].

Przygotowanie listy dań, listy zakupów, oraz następnie gotowanie (5 posiłków) zabiera mnóstwo czasu :) . Samego gotowania nie można usprawnić programistycznie, można za to usprawnić przygotowanie posiłków :).

Cel

  • wrzucenie wszystkich posiłków do systemu (śniadanie, 2 śniadanie, obiad, kolacja, podwieczorek)
    • możliwość przypisania posiłku do diety, grupy, tag’a
  • stworzenie jadłospisu dla x dni, z istniejących dań w systemie
    • użytkownik sam wybiera listę dań
    • użytkownikowi losuje jadłospis (wg kryteriów, wszystkie w systemie)
  • dla każdego jadłospisu stworzenie możliwości generowania listy zakupów
    • pełna lista zakupów dla wybranych dań, lub wybranych dni
    • możliwość zmiany listy zakupów (np posiadamy marchewkę w lodówce, to nie chcemy aby ona była na liście zakupów)
    • generowanie plików w różnych formatach (pdf, txt), możliwość wysłania listy na email
  • wyszukiwarka
    • możliwość wyszukania dania po wybranych składnikach (np. mamy w lodówce 5 składników, i chcemy znaleźć dostępne dania)
    • szukanie po nazwie
    • szukanie po czasie przygotowania posiłku
    • szukanie po rodzaju posiłku
  • opcje socialmedia: dzielenie się posiłkami z innymi użytkownikami systemu, lub udostępnianie postów na fb (itp)
  • kalendarz / pamiętnik posiłków – oznaczanie posiłku (zjedzony, nie zjedzony, itp), możliwosć dodania opisu do dania, zdjęcia, czasu wykonania
  • statystyki i raporty [czas wykonywania posiłku, zjedzone posiłki w miesiącu, zjedzone kalorie, itp]
  • możliwośc wydruku przepisu, jadłospisu, listy zakupów
  • inne (np podpięcie toggl time tracker do mierzenia czasu wykonywania posiłków, …)

Technologie wykorzystywane w projekcie

Na codzień pracuje z PHP i w nim tworze strony i systemy IT. Postanowiłem więc rozpocząć projekt w którym wszystkiego musze nauczyć się prawie od początku :) a więc:

  • backend: python 3(framework flask) w którym napisane będzie api
  • frontend: react (framework js)
  • docker – do odpalenia projektu w izolowanym wirtualnym środowisku, używając jednego polecenia
  • szablon strony napisany przy wykorzystaniu semantic-ui.com (Semantic UI to zestaw komponentów wspomagający tworzenie interfejsu użytkownika)
  • baza danych mysql
  • testy automatyczne
  • zewnętrzna baza składników (? opcja) – użytkownik wpisuje marchewka do dania, i jak jej nie znajduje to pobiera dane z zewn systemu (kalorie, itp)
  • … (wyjdzie w praniu)

Dlaczego python api? Chciałbym w przyszłości stworzyć aplikacje na komórki. Istniejące API pozwoli zrobić to niższym kosztem :) . W czym to napisze, jeszcze nie wiem. Wstępnie będzie to w Electronie -> https://electron.atom.io/

Posty związane z projektem

W regulaminu konkursu, musza pojawiać się dwa posty tygodniowo z tagiem DSP2017

  • minimum raz na tydzień pojawiać się będzie post dotyczący projektu #MyFood
  • drugi post może być powiązany z projektem, ale nie musi

Moim planem jest rozpisanie krok po kroku tworzenia projektu.  Nie będą to jednak szczegółowe posty typu: to skopiuj, tu wklej, tu zrób to i to. Wpisy mają cię nakierować na rozwiązanie istniejącego problemu, rozpisanie działania, linków do bazy wiedzy / tutoriali z których skorzystałem. Przykładowe problemy:

  • postawienie dockera, posiadające skonfigurowane biblioteki python, mysql (itp)
  • stworzenie środowiska dla semantic-ui do stworzenia szablonu projektu (gulp, npm, less)
  • stworzenie testów automatycznych (jestem całkowicie zielony w tym :(  )

I to tyle na starcie :) , sporo pracy przedemną. Nie wiem czy uda mi się skończyć projekt do końca konkursu. Celem jest stworzenie kompleksowo napisanego kodu, którym będę mógł się pochwalić bez wstydu :) . Przy okazji osoby będą mogli skorzystać z postów i wykorzystać części rozwiązań w swoich projektach.


Repozytorium git: https://github.com/mfratczak/myfood-generator – tutaj możesz obejrzeć kody źródłowe, i odpalić projekt na swoim serwerze.

Google Analytics Alternative