Dawno, dawno temu (lipiec 2017 :P), na grupie wsparcia Programowanie – wsparcie na starcie pojawił się pomysł. Autor zebrał dwie grupy, które miały tworzyć aplikacje webowe, od zera.
Szczerze? Sama miałam ochotę dołączyć i zebrać kolejną taką grupę. Tym bardziej, że chętnych było więcej niż miejsc. Niestety, przy moim obłożeniu czasowym, nie byłam w stanie się tego podjąć.
Mogłam za to zacząć publikować tutorial, który ma za zadanie krok po kroku przeprowadzić Cię przez tą ścieżkę. Ścieżkę tworzenia Twojej pierwszej aplikacji webowej.
Na chwilę obecną seria liczy 11 artykułów. Są to w większości artykuły wprowadzające poszczególne języki, narzędzia i technologie, które wykorzystamy przy budowie naszej aplikacji.
W ramach projektu przedstawiam proces budowy prostej aplikacji To do. Jednak wiedza w nim zawarta jest uniwersalna i każdy z Was może budować własną aplikację! Do czego zachęcam. Może to być świetny sposób motywacji do nauki programowania, webdevelopmentu oraz wpis w CV 😉
W ramach serii bazujemy na jednym z prostszych sposobów budowy aplikacji webowej. Za Backend wykorzystamy Firebase, który dostarczy nam mechanizm autentykacji oraz bazę danych. Bardziej skupimy się nad Front-endem aplikacji.
Nie jest to jedyny sposób! Ale naprawdę to jeden z łatwiejszych i popularniejszych 😉
Dzisiejszy wpis jest podsumowanie tego, co było (zwłaszcza pod kątem osób, które dopiero dołączają) i informacją co będzie dalej.
Ponownie ostrzegam:
Nie będzie to kurs/seria typu: od zera do developera – stwórz swoją pierwszą aplikację webową w 5 dni! Jeśli dopiero zaczynasz – czeka Cię sporo pracy. Ale tworzenie realnej aplikacji webowej może być niezłym sposobem motywacji. Przedstawię Ci ścieżkę, dostarczę narzędzi, dam Ci wędkę – co z nią zrobisz będzie zależało od Ciebie.
Na start warto zapoznać się z założeniami serii. Aplikację webową można tworzyć w oparciu o wiele stosów technologicznych. Może mieć rozbudowany Backend oparty o PHP, Javę, Pythona, itp. My skorzystamy tu z Firebase.
Czy więc osoby, które programują w PHP, Javie, Pythonie i innych językach backendowych, a chcą zbudować swoją aplikację webową mają tu czego szukać? Jak najbardziej tak. Ponieważ w serii bardziej skupiamy się nad częścią Front-endową. Dopiero później pojawi się połączenie z Back-endem – u nas Firebase, ale tą samą aplikację można by połączyć do innego backendu (to też będziemy robić – ale nie wiem za ile miesięcy 😉 ).
Jest to seria również dla osób, które interesuje Front-end czy też JavaScript Development. A już na pewno dla osób zainteresowanych Angularem, TypeScriptem czy też innymi spośród technologii z jakich skorzystamy.
Jakie to technologie? W skrócie: Angular v4, TypeScript, ES6, Bootstrap v4, Sass, oczywiście HTML5, CSS, JavaScript, npm, Firebase (hosting, autentykacja I baza danych – NoSQL), Git, itd. Pełną listę znajdziesz w oddzielnym wpisie. Ponieważ pada tam sporo pojęć, które na starcie mogą nie być dla Ciebie zrozumiałe – polecam ją czytać wraz z otwartym słowniczkiem do projektu.
Czego oczekuję od Ciebie teraz?
Przynajmniej podstawowej znajomości niżej wymienionych elementów.
HTML5 & CSS przyda nam się do zbudowania i ostylowania interfejsu naszej aplikacji. Bez JavaScript ani rusz!
Nie pisałam w tej serii nt. Git’a, jednak nawiązywałam, że ta wiedza będzie Ci również potrzebna. Po pierwsze – do sklonowania repozytorium z Github’a. Warto by również pojęcia: branch, commit, pull, push nie były Ci obce.
Projekt zostanie wygenerowany z Angular CLI. Warto znać jego strukturę. Nie podziałasz również jeśli nie wiesz czym jest npm, który przyda Ci się choćby do instalacji Angular CLI.
Będziemy omawiać realny projekt, aplikację pisaną w Angular v4, z wykorzystaniem TypeScriptu.
No i przyda się działać w czymś innym niż notes 😉
Zanim przystąpimy do dalszej pracy przygotowałam dla Ciebie małą checklistę.
- Znam HTML5 & CSS (przynajmniej podstawy) [1]
- Znam JavaScript (przynajmniej podstawy) [2]
- Korzystam z Command Line [3]
- Wiem jak korzystać z npm do instalacji paczek [4]
- Korzystam z edytoru kodu (innego niż Notepad++) lub IDE [5][B1]
- Znam podstawy TypeScript’u [6]
- Wiem, co to Angular CLI i potrafię wygenerować projekt z jego wykorzystaniem [7]
- Znam podstawową strukturę plików projektu wygenerowanego z Angular CLI [7]
- Znam podstawy Angular v4 [8]
- Znam podstawy Git’a, nie jest mi obce klonowanie repozytorium, działanie na branchach, commitowanie oraz pull/push [B2]
Na chwilę obecną tyle powinno nam wystarczyć 🙂
Numerki obok umiejętności oznaczają artykuły, od których możesz zacząć naukę danej umiejętności. Listę i linki znajdziesz niżej.
Listę postanowiłam przygotować również w formie do wydruku (zwłaszcza jeśli nadal potrzebujesz „odhaczyć” część z wymienionych punktów). I naprawdę, dobrze radzę, opanuj to. To nie jest wiedza na „zaś”, to MUST HAVE do dalszych działań.
Ponieważ jestem fanką Nozbe, przygotowałam również listę w formie szablonu do pobrania i importu w Nozbe (Nozbe do pięciu projektów jest darmowe, także każdy może skorzystać z tej formy, za darmo 😉 ). A jak coś – więcej na temat Nozbe znajdziecie na moim drugim blogu, poświęconym m.in. aplikacjom.
Szablon Nozbe do podglądu i pobrania
Linki do wszystkich wymienionych artykułów (patrz: numerki na checkliście):
- Duża paczka materiałów do nauki HTML5 & CSS
- Duża paczka materiałów do nauki JavaScriptu
- Command Line – co, gdzie i jak? [Materiały do nauki]
- Node JS & NPM na start
- Visual Studio Code na start
- TypeScript od podstaw – nauka & materiały
- Angular CLI & Struktura generowanego projektu
- Angular v4 na start
Artykuły poza serią zawierające informacje na dany temat:
B1. IDE vs. edytor tekstowy. Krótki przegląd. Co na początek?
B2. Git – co, gdzie, jak i dlaczego? [Materiały na start]
Dalszy rozkład jazdy?
Wjeżdża kod 🙂
Bazując na kodzie aplikacji wygenerowanej z Angular CLI, przejdziemy do prostej aplikacji To do.
Długo się zastanawiałam czy w tej części serii (najbliższe 6-8 artykułów) dodawać Bootstrapa. Stwierdziłam jednak, że jest to szybszy sposób ostylowania aplikacji. Gdybym zaczęła ją stylować z wykorzystaniem CSS byłby to materiał na kolejne min. 4 artykuły. Tytuł jednego z nich brzmiałby pozycjonowanie, kolejnym byłby Flexbox… ogólnie dużo tematów do poruszenia. Bootstrapowi poświęcę jeden artykuł wprowadzający (materiały do nauki, itp.) i jeden – wykorzystanie w naszej aplikacji. A nad CSS skupimy się przy innej okazji 😉
Kod już wylądował na Githubie, ale narazie tylko część, którą omówimy za tydzień. Za tydzień mam nadzieję przedstawić Wam docelową, skończoną aplikację (tj. w zakresie najbliższych artykułów). Poszczególne branche będą odpowiadać artykułom, które się teraz ukażą.
Seria potrwa kolejne kilka tygodni. Następnie znowu będzie przerwa. Ja będę pracować nad kolejnymi artykułami (dalej będziemy rozwijać aplikację w wybranym kierunku), a Ty będziesz mieć czas na nadrobienie poprzednich części.
Na potrzeby naszych artykułów, każdy taki spójny fragment nazwę Sezonem. A zatem: artykuły, które już publikowałam na blogu, wprowadzenia opublikowane przed przerwą to Sezon 1. Począwszy od dziś rozpoczyna się Sezon 2. W przyszłości pojawi się jeszcze kilka sezonów 😉
Nie myśl o tutorialu jako pewnej całości, którą musisz przerobić zanim zaczniesz tworzyć swoją aplikację. Pomyśl o nim jako trampolinie na start, pierwszym okruszku na ścieżce do domu. To jego rola. Później rozwinie się w wielu kierunkach, nie wszystkie musisz poznać. Tak naprawdę to ta część, która teraz nastąpi będzie trzonem.
No i to by było na tyle dzisiaj! Czekaj na materiały dotyczące nauki Bootstrapa – już w najbliższą środę. Nadrób zaległości dotyczące poprzedniej części serii artykułów (patrz: powyższa checklista). Za tydzień bierzemy się za kod 🙂
A w razie problemów – wiesz gdzie szukać pomocy?
