Myślę, że dość istotną kwestią w problemach, do których będę nawiązywać, rozwiązań oraz ogólnie raportów z postępów ma moje środowisko pracy. Wiadomo, że inaczej konfiguruje się wszystko na Windowsie, inaczej na Macu, a inaczej na Linuxie.

A więc….

Moje środowisko pracy

Pracuje na Ubuntu 14.04LTS.

Czemu Ubuntu?

Przyzwyczajenie? Lata pracy? 😀

Był czas, gdy praca z Emulatorem Android’a na Windowsie to była jakaś masakra. Zawodowo już siedziałam na Ubuntu, prywatnie – jeszcze na Windowsie. Windows nie zawsze dawał radę. Albo były jakieś przeboje z konfiguracją. Zniechęciłam się.

Nie to, żeby Ubuntu był pod tym kątem marzeniem. Też trzeba się nieraz nagłowić 😉 Jednak wydaje mi się, że daje większe możliwości.

WebStorm

No i znowu może wydawać się, że wybieram kombajn do koszenia trawy. Tak, muszę przyznać, że nie dałam bardzo szansy Atom’owi czy Bracket’sowi. W ogóle z nich nie korzystałam. Jednak lata pracy z IDE (głównie Eclipse, Netbeans) sprawiły, że nie potrafię pożegnać się z pewnymi oferowanymi udogodnieniami. Nawet jeśli te udogodnienia trochę kosztują… (Webstorm jest płatnym narzędziem)

 

Working night 💻❤ Work on project for #dajsiepoznac competiton in progress 🖒👌

Post udostępniony przez Żaneta Jażdżyk (@nettecode)

Node w wersji v6, ponieważ:

„Note: There are known issues with Node.js v7 and webpack / webpack-dev-server. Please use Node.js v6 for the moment.”

Doszukałam się oczywiście jak już miałam problem z instalacją webpack-dev-server. Musiałam zrobić downgrade z v7 do v6. I działa 😉

Git – linia komend oraz Gitg.

Gita podpinam pod każdy swój projekt, niezależnie od tego czy lokalny czy ląduje na repozytorium. Kontrola wersji i możliwość cofnięcia ostatnich zmian to jak dla mnie bezcenna funkcja.

Z Gitg korzystam do:

  • przeglądania zmian przed scommitowaniem kodu (tak, wiem, że mogłabym to robić w WebStorm’ie – przyzwyczajenie)
  • commitowania kodu.

Wygoda 🙂

Push, pull, itp. już z linii komend.

Ale się rozpisuje co? Ale wiem, że wśród czytelników bloga są osoby, które dopiero zaczynają. Dla nich to może być niejasne. A innym również ułatwić życie 😉

Jeśli coś nadal byłoby niejasne – dawajcie znać w komentarzu. A tematowi samego Git’a zamierzam poświęcić cały artykuł.

 

Uruchomienie projektu

Ponieważ na Github wylądował już mój zalążek projektu – możesz chcieć go uruchomić. Jak to zrobić?

Gdy już masz mój kod u siebie przechodzisz do folderu, w którym znajduje się projekt i (z wykorzystaniem Terminala) uruchamiasz:

npm install

Polecenie instaluje wszystkie niezbędne paczki. (jeśli nie rozumiesz o czym mowa – o NPM jeszcze będę pisać, tymczasem polecam artykuł: What is npm? albo po polsku: Co to jest NPM? na blogu Jakuba Gutkowskiego ).

Kiedy paczki są zainstalowane, projekt uruchomisz komendą:

npm start

Po uruchomieniu znajdziesz go pod adresem:

http://localhost:1234

Voilla!

Dokładna instrukcja i wymagania jeszcze dzisiaj wylądują w Readme.md na Github’ie. Kod wrzuciłam jednak w nocy, a byłam już zbyt zmęczona, by pisać szczegółowe Readme.

 

Na Githubie dużo na chwilę obecną nie ma 😀 Ale tak jak pisałam, projekt bazuje na technologiach, których właśnie się uczę. Konkretniej w tym momencie React + Redux. Jeśli będzie już na tyle zaawansowany by było warto to pokazać – zaprzęgnę Firebase i uruchomię ją w formie DEMO do podglądu dla każdego.

Firebase to też dość nowy temat dla mnie. W ramach testów jakiś czas temu zdeploy’owałam sobie tam przykładową aplikację.

Aaa… ogólnie artykuły powstają właśnie w oparciu o moją naukę. Na bieżąco robię notatki, zbieram przydatne materiały. Gdy zamknę dany temat – pojawi się artykuł 😉

Z tyłu głowy mam Progressive Web Apps, ale myślę, że na razie będę się skupiać by była to po prostu app. A progresywnością zajmę się później. Ktoś wie czy to dobry pomysł? Czy też dużym błędem będzie niezakładanie progresywności od razu?

Dobrze, że ktoś mi wybił z głowy testowanie w ramach projektu podejścia TDD (Test Driven Development). Bo chyba już w ogóle bym nie miała szans się wyrobić 😀

 

P.S. Aktualny status projektu można było podejrzeć w ciągu ostatnich godzin na Facebooku, Instagramie, Twitterze czy Snapchacie. Jeśli ktoś jest zainteresowany relacjami z przebiegu prac – zapraszam na te kanały 😉 A jak coś skondensowana forma raportu będzie pojawiać się we wtorki 😉

Wszelkie uwagi odnośnie projektu mile widziane 🙂

P.S. Jeśli nie rozumiesz o czym ja do Ciebie mówię – a chciałabyś / chciałbyś – nie przejmuj się. Wszystko przychodzi z czasem. W ramach konkursu będę publikować również artykuły, które mogą ułatwić Ci drogę do takiej aplikacji 😉 Jeśli masz jakieś pytania – śmiało zadawaj je w komentarzach albo zapraszam na grupę wsparcia, którą prowadzę:

 

Series Navigation<< Daj się poznać! 2017 Projekt – czas – start 🙂DSP: SMPlanner – tydzień 1. – React JS, Material UI & Redux >>
  • Cześć! Faktycznie się rozpisałaś 😀 Tak teraz czytam i mam wrażenie, że nam wyszły podobne posty. Ale ciężko pisać na początku o czymś innym niż konfiguracji. W sprawie Firebase – miałam dziś rano dyskusję na ten temat, przekierowałam na Ciebie. Dostałaś jakieś wiadomości?
    I jak robisz te fajne snippety z FB? :<

    • A zaraz idę sprawdzić 😛 Ciężko jak ciężko, ale to istotny temat z punktu widzenia tego co będzie za chwile 🙂 A tak można odesłać do artykułu zamiast we wstępie powtarzać to samo 😉
      Tak, tak, dostałam wiadomość i chyba pomogłam 😉 Nie wiem, bo nie dostałam potwierdzenia.
      Na Facebooku w strzałce w prawym górnym rogu masz opcję osadź 🙂 Wystarczy przekleić kod 😉

      • Aleksandra Bielak

        Ja prosiłam o potwierdzenie, czy się temu Panu udało 😉 Może napisze, zobaczymy.
        Dzięki za tego Facebooka, człowiek się uczy całe życie 😀

  • Kordian Bober

    Jak korzystać z tego gdy chcę zuploadować to na stronę, a nie tylko mieć to na localhost?

    • Pierwsze pytanie, które mi się nasuwa to: po co?
      Demo jest już dostępne na stronie: https://smplanner-5183f.firebaseapp.com/ 🙂
      Gdybyś chciał wgrać aplikację na stronę, musisz załatwić odpowiedni hosting, dla aplikacji Node JS. Przykładem takiego hostingu jest Firebase (z którego korzystam) czy np. Heroku.