Dzisiaj pierwszy wpis o projekcie, który będę realizował w ramach konkursu  Daj się poznać 2017. Na pierwszy etap idzie planowanie i pierwszy commit do repozytorium.

poprzednim moim wpisie pisałem co to za projekt i dlaczego to robię. Jeśli nie czytałeś tamtego wpisu to zachęcam do nadrobienia zaległości.

Najważniejsze jest logo (i nazwa)

Mój projekt będzie połączeniem forum z mikroblogiem, generalnie użytkownicy będą mogli się w nim dzielić swoją mądrością. 🙂 W związku z tym postanowiłem, że nazwę go Atena od imienia greckiej bogini mądrości. Nie wiem czy to dobra nazwa ale wymyślenie jej zajęło mi mniej niż 5 minut, dlatego będę kontynuował z tą nazwą.

Co do logo to ostatnio oglądałem prezentację Jaya Phelpsa na temat Redux, React i RxJS i urzekło mnie jak Jay opowiadał, że w każdym projekcie najważniejsze jest logo. Niestety na tym etapie nic mi nie przychodzi do głowy i logo będzie po prostu jakimś zwykłym tekstem.

Funkcjonalności projektu

Dobrym pomysłem jest zacząć od zastanowienia się jakie funkcjonalności ma mieć projekt. Pomyślałem o tym chwilę i to jest minimum jakie chciałbym osiągnąć:

  • dodawanie postów
  • możliwość dodawania tagów do posta
  • kategoryzowanie postów
  • możliwość komentowania postów
  • możliwość oceniania postów (coś jak facebook like)
  • możliwość przeglądania postów innych użytkowników (wraz z sortowaniem i filtrowaniem)
  • możliwość śledzenia innych użytkowników
  • możliwość zalogowania przez facebook
  • możliwość edycji swojego konta

Pewnie w trakcie pracy wyjdzie jeszcze coś ale nie boje się, jestem agile! Oczywiście to tylko zarys a poszczególne funkcjonalności będę opisywał dokładniej podczas pracy nad nimi.

Patrząc na te funkcje jestem w stanie wydzielić 3 funkcjonalne obszary mojego portalu:

  • listing
  • widok pojedynczego postu
  • konto użytkownika

Technologie

Poniżej spisałem technologie jakich będę używał w projekcie.

Frontend:

  • HTML 😉
  • CSS kompilowany z SASSa
  • JavaScript (niespodzianka)
  • React
  • Redux
  • Webpack

Backend:

  • NodeJS
  • MongoDb

Kod projektu będzie oczywiście dostępny na Githubie. Muszę jeszcze przemyśleć hosting ale prawdopodobnie skorzystam z Heroku.

Na podstawie tej analizy założyłem projekt na Trello i rozpisałem wstępnie zadania do zrobienia. Możesz w każdej chwili wejść i zobaczyć jak mi idzie. 

Cel: MVP

Projekt będę realizował tak, aby w jak najszybszym czasie zrobić coś co działa i spełnia podstawowe założenia, a następnie będę rozwijał poszczególne funkcjonalności.

Pierwszy commit

Aby wszystko to co napisałem ładnie przypieczętować, przydałoby się coś zrobić…

Zacznę od postawienia projektu. Skorzystam z jakiegoś generatora, który ułatwi mi rozpoczęcie pracy. Moje oczekiwania w stosunku co do generatora:

  • musi być oparty o webpack bo to teraz topowy module bundler. Bawiłem się już nim trochę i wygląda zachęcająco
  • musi transpilować ES6 do ES5
  • musi wspierać kompilację SASS do CSS

Nie trzeba było długo szukać: generator-react-webpack spełnia wszystkie moje wymagania. Użycie generatora jest bajecznie proste. Jedyne wymaganie to zainstalowany NodeJS.

Następnie trzeba przejść do folderu gdzie chcemy zainicjować projekt i wpisujemy:

Generator zada nam kilka pytań.

Pytania od generatora

Grzecznie mu odpowiadamy, a on w zamian wygeneruje nam projekt:

 

Pliki projektu atena

W tym miejscu warto omówić sobie strukturę tych plików:

  • cfg – pliki konfiguracyjne
  • dist – w tym folderze trzymana jet wygenerowana (zbudowana, produkcyjna) wersja projektu
  • node_modules – zależności pobrane poprzez npm
  • src – pliki developerskie
  • test – pliki testów
  • .babelrc – konfiguracja Babel
  • .editorconfig – konfiguracja edytora np. wcięcia
  • .eslint – konfiguracja eslint narzędzia to statycznej analizy kodu JavaScript
  • .gitignore – tutaj określamy pliki/foldery, które mają być ignorowane przez GITa
  • .yo-rc.json – prawdopodobnie jakaś konfiguracja yeomana 😉
  • karma.conf.js – konfiguracja środowiska KARMA służącego do testów jednostkowych
  • package.json – opis naszego projektu, zależności i skrypty npm
  • server.js – plik konfiguracyjny localhosta
  • webpack.config.js – konfiguracja webpacka

Dzięki użyciu generatora mamy możliwość użycia kilku komend, które ułatwiają życie:

Poza tym Yeoman jest w stanie wygenerować nam pliki potrzebne do stworzenia komponentu React ale to będę opisywał w trakcie pracy nad komponentami.

Jak widzisz użycie takiego generatora przyśpiesza start. Gdybym miał to wszystko robić od podstaw to zajęłoby mi to wiele czasu i musiałbym napisać wiele postów. 😉 Nie ma co wymyślać koła na nowo. Prawdopodobnie będę musiał jeszcze coś w tej strukturze zmienić gdy zacznę pracować nad backendem ale teraz się tym nie martwię.

Teraz wystarczy odpalić komendę npm start i cieszyć się życiem. 🙂 

Po odpaleniu tej komendy pod adresem localhost:8000 można zobaczyć coś takiego:

generator-react-webpack

Jak widzisz aplikacja działa i na ekranie widać wyrenderowany komponent AppComponent. Jego kod wygląda tak:

Wystarczy, że zmienię trochę kontent zwracany przez metodę render i wykonam swoje pierwsze zadanie wyświetlając światu „Hello world”. 🙂

Podsumowanie

Dzisiaj udało mi się zaplanować pracę nad projektem i  przygotować podstawowe pliki oraz wyświetlić na ekranie „Hello world”. Następnym razem będę zajmował się konfiguracją Travis CI i continuous integration. Jeśli masz jakieś pytania, sugestie zapraszam do komentowania.

Do zobaczenia!

Share on FacebookTweet about this on TwitterShare on LinkedIn
  • Rafal Makara

    Kodu już jest więcej niż przez ostatnie 17 miesięcy widziałem. 🙂

    • Marcin Kwiatkowski

      Wniosek jest prosty: za mało kodujesz. 😉