Własna aplikacja krok po kroku cz. 1

aplikacja krok po kroku

I oto nadchodzi ten moment. Uczysz się kodowania jakiś czas, masz umiejętności i chcesz stworzyć swoją pierwszą aplikację, która najprawdopodobniej ma się stać częścią Twojego portfolio. O tym, czego potrzebujesz i jak wygląda proces realizowania własnego projektu, dowiesz się w nowej serii na blogu pt. Własna aplikacja krok po kroku. A część pierwsza właśnie przed Tobą.

Jakiś czas temu przeprowadziłam ankietę, w której pytałam moich czytelników, o czym najchętniej przeczytaliby na blogu. Bezapelacyjnie wygrał proces tworzenia własnej aplikacji. Ścieżkę krok po kroku będę pokazywać w kolejnych odsłonach serii. Dzisiaj zajmiemy się tym, czego potrzeba na samym początku. A mowa oczywiście o pomyśle na samą aplikację i o wyborze technologii. Żeby nie było sucho i teoretycznie podczas powstawania tej serii sama będę pisać projekt i opisywać dokładnie, co się w nim dzieje.

Chcę podkreślić, że aplikacja, która będzie powstawać w ramach serii ma pomóc ugruntować wiedzę z danej technologii, nauczyć się czegoś nowego, zebrać wszystkie wiadomości razem. Nie będę tu pokazywać, jak stworzyć komercyjną aplikację i zarobić na niej miliony. To ma być projekt, który stanie się częścią portfolio i pokaże Wasze umiejętności.

Zacznijmy od tego, jaki projekt będę realizować. Jeśli śledzicie mnie od początku, wiecie, że blog powstał na potrzeby konkursu Daj Się Poznać 2017, którego celem było napisanie własnej aplikacji i opisywanie tego procesu na blogu. Ja tworzyłam Habit Tracker, czyli aplikację, która pozwala budować dobre nawyki. O tym, skąd wziął się sam pomysł i jakie były losu projektu poczytacie w raportach pisanych w trakcie jego powstawania.

Od razu zaznaczam, że to była moja pierwsza w życiu aplikacja, nigdy przedtem nie realizowałam żadnego tego typu projektu. Pisałam ją zanim jeszcze zaczęłam pracę jako front-end developer, a AngularJS, w którym powstawała był pierwszym frameworkiem, jakiego się uczyłam. Możecie więc w raportach spodziewać się naprawdę dużych podstaw. Dzisiaj, jak patrzę na aplikację z perspektywy (nie jest nawet skończona!), czuję się dość zażenowana. Teraz bym to wszystko napisała inaczej!

I dlatego właśnie postanowiłam zrobić podejście numer dwa do Habit Trackera. Tak technicznie to właściwie numer trzy, bo miałam w planach napisać Habit Tracker w Angularze 2, zaraz po tym jak zaczęłam w nim pracę, ale niestety czas mi na to nie pozwolił i projekt nie został zrealizowany. Tym razem biorę na warsztat inną technologię i podchodzę do projektu dość kompleksowo. W końcu teraz mam już 1,5 roku doświadczenia w branży, pracowałam z różnymi projektami, chcę stworzyć coś kompletnego i nie porzucić tego projektu, zanim dobrze się rozkręci. Jaka będzie rzeczywistość, zobaczymy 😉

O samej idei Habit Trackera i tego, ile może dać nam budowanie dobrych nawyków nie będę się rozpisywać, ponieważ pośrednio poruszałam już ten temat we wpisach (np. tutaj lub tutaj) i dużo pisałam o tym w raportach przy aplikacji pisanej w AngularzeJS. Jeśli jednak chcecie, abym przybliżyła ten temat w osobnym wpisie i dokładnie opisała, jakie są plusy metody śledzenia swoich nawyków, dajcie znać!

Przechodzimy do rzeczy! Krok numer jeden, jaki trzeba wykonać, gdy chcecie napisać własną aplikację to oczywiście pomysł na projekt. Może myślicie, że poszłam na łatwiznę nie wymyślając niczego innowacyjnego i realizując ten sam projekt po raz drugi. Już tłumaczę, dlaczego ja uważam, że to całkiem dobre podejście. Otóż, moim celem jest ugruntowanie sobie wiedzy z technologii, którą poznaję. Chcę stworzyć aplikację, która ma pokazać to, co już wiem i nauczyć mnie nowych rzeczy. Nie zależy mi na podbijaniu świata i zarobieniu na projekcie. Dlatego wybrałam sprawdzony pomysł, którego szczegóły już znam, nie muszę się zastanawiać, jakie funkcjonalności ma mieć moja aplikacji, bo zwyczajnie już to wiem.

Jeśli chcecie stworzyć Wasz pierwszy projekt, ważne, aby nie skupiać się aż tak maksymalnie na samym pomyśle, ale na realizacji. To, że chcecie wymyślić coś super oryginalnego może Was naprawdę bardzo zablokować w pracy. Tymczasem potrzebujecie czegoś, co może pokazać Wasze umiejętności, a nie drugiego Facebooka. Jeśli totalnie nie wiecie, co możecie napisać, po prostu zróbcie własną wersję istniejącej już aplikacji. Może Facebook na sam początek to dość duże wyzwanie, ale np. jakiś rodzaj messengera już byłby fajny. No i moje ulubione typy, czyli wszelkie wariacje na temat list zadań (którą jest też Habit Tracker). Pamiętajcie, niech to, że Wasz pomysł nie jest unikatowy, Was nie zajmuje. Macie uczyć się technologii! I to jest cel numer jeden.

Warto jednak zadbać, aby Wasz projekt był zwyczajnie ładny i funkcjonalny (szczególnie, jak chcecie pokazywać front-endowe umiejętności). Ja już nie raz wspominałam, że jestem projektowym antytalentem. Umiem zakodować coś, gdy mam projekt, ale samodzielne wymyślanie grafik i designu totalnie mi nie idzie. I dlatego postanowiłam skorzystać z tak wspaniałego narzędzia, jakim jest moja grupa na Facebooku i zapytałam tam, czy któraś z dziewczyn nie buduje przypadkiem graficzno-UXowego portfolio i nie chce razem popracować nad projektem. Dostałam sporo zgłoszeń i po raz kolejny mi to pokazało, jak wielka siła drzemie w grupie. I jak wiele osób chce pracować nad dodatkowymi projektami, aby zdobywać nowe umiejętności.

Poprosiłam dziewczyny, które się zgłosiły, aby po krótce opisały mi ich pomysły na UXową stronę aplikacji i najbardziej spodobała mi się propozycja Zuzi Mrożewskiej, której portfolio znajdziecie na jej profilu na LinkedIn. Potem okazało się, że Zuzia, zupełnie jak ja, jest filologiem z wykształcenia i buduje właśnie swoje portfolio! W tym poście na FB dzieliłam się z Wam wstępnym projektem landing page’a Habit Trackera, który Zuzia przygotowała. Ogromnie mi się ten projekt podoba i jestem właśnie w trakcie kodowania tej strony powitalnej. I nie mogę się doczekać, jak będą wyglądały dalsze części aplikacji! Dajcie koniecznie znać, jak Wam podoba się nowa estetyka Habit Trackera.

Zuzia pomoże mi od designerskiej i UXowej strony, a do tego opisze ten proces na blogu, więc będziecie też mogli dowiedzieć się, jak wygląda praca UX Designera nad taką aplikacją. Wiem, że wiele osób myśli o pracy UX Designera, więc mam nadzieję, że to będzie dla Was wartościowa lektura.

Częścią pierwszego kroku tworzenia swojej aplikacji jest też wybór technologii. Ja zdecydowałam się podszlifować swoje umiejętności w React i to właśnie w nim powstaje aplikacja. Dodatkowo chcę wypróbować działanie Firebase w praktyce i on wystąpi w roli backendu. Zastanawiam się jeszcze, czy do projektu wprowadzać Reduxa, ponieważ jest jednak dość skomplikowanym pojęciem i wydaje mi się, że zarządzać stanem listy zadań ze spokojem dam radę z poziomu samego Reacta, ale zobaczymy, jak wyjdzie w praniu. Na razie trzon to React plus Firebase. Chcę również pobawić się z nowinkami CSSowymi. Style piszę w SCSS, chcę wykorzystać także CSSGrid i Flexbox, aby zobaczyć, jak dają razem radę w realnym projekcie. Dodatkowo w projekcie chcę tez od razu pisać testy jednostkowe, do czego posłuży mi Jest.

Jeśli Wy nie macie pomysłu, w jakiej technologii napisać aplikację, zastanówcie się, co chcecie osiągnąć. Możecie chcieć nauczyć się czegoś zupełnie nowego albo ugruntować wiedzę, którą już macie. Pamiętajcie tylko, aby się nie zniechęcać i wytrwać w wybranej technologii. Chodzi mi o to, by nie poddawać się przy pierwszym problemie i stwierdzać „Dobra, jednak chcę to robić w tym, co znam najlepiej, nie uczę się nowych rzeczy”. Problemy są nieuniknione! Więc głowa do góry i ruszajcie do przodu!

To tyle, jeśli chodzi o wstępy. Mam zamiar w ciągu dwóch tygodni podzielić się z Wami pierwszym raportem z projektu, który (mam nadzieję) opisze cały proces stawiania aplikacji (to już mam za sobą) i kodowania strony powitalnej. Od razu chcę tworzyć responsywną wersję, więc zakładam, że kodowanie moze trochę zająć. Tym bardziej, że jest to jednak mój dodatkowy projekt, który będę realizować w wolnym czasie. Ale jestem bardzo nim podekscytowana i mam energię do działania, wiec wierze, że pójdzie sprawnie. W pierwszym raporcie podzielę się też z Wami linkiem do projektu na Githubie i będziecie mogli zrobić mi code review.

Liczę, że będziecie śledzić tę nową serię. Jeśli nie chcecie przegapić żadnego wpisu, koniecznie zapiszcie się na blogowy newsletter i polubcie fanpage na Facebooku. I dajcie znać w komentarzach, czy też pracujecie nad własną aplikacją 🙂 Piszcie też śmiało, gdy macie jakieś pytania co do samego procesu pisania swojej aplikacji albo gdy chcecie, żebym jakiś aspekt opisała w kolejnych odsłonach szerzej. I trzymajcie za mnie kciuki!

10 Replies to “Własna aplikacja krok po kroku cz. 1”

  1. O mamo, akurat w momencie w którym pracuje nad własną aplikacją! 😁 Etap projektowania ekranów mam za sobą, od niecałego miesiąca walczę z Angularem i Firebase, żeby wszystko zakodować. Tym bardziej cieszę się, że wybrałaś Firebase jako backend 😊 Na pewno będę śledzić serię!

    1. Powodzenia z Twoim projektem! 🙂

  2. Akurat w weekend przygotowywałem się do rozpoczęcia pisania swojej appki do portfolio. Mam ok 2,5 roku doświadczenia komercyjnego i nie mam za dużo do pokazania w swoim portfolio, wiec postanowiłem to zmienić. Ja tak samo postanowiłem wybrać React, firebase, CSS grid, SASS. Narazie sprawdziłem z czymś się je firebase, ale jestem gotów do działania.

    1. Super! To widzę, że stack właściwie taki sam. A jaka to będzie aplikacja? Powodzenia tak w ogóle! Ja Firebase ogarniałam z kursem Wesa Bosa z podstaw Reacta, bardzo fajnie jest tam wszystko wytłumaczone

      1. Będzie to aplikacja ‚Książka kucharska’, właściwie to będzie tworzona na użytek własny, aby ogarnąć te wszystkie przepis w jednym miejscu.

  3. Będzie coś w blockchainie? 🙂

    1. Nie planuję na razie 😉

  4. Hej, kiedy jakiś wpis z „mięsem programistycznym”, jakimiś pierwszymi linijkami kodu nowej aplikacji? Czekam i czekam 😉

    1. Będzie, cierpliwości. Celuję w przyszły tydzień, ale zobaczymy, jak to realnie wyjdzie 🙂

  5. Motywujesz dziewczyno do programowania i oby tak dalej bo to jest zawód przyszłości w 100%. Własna aplikacja to sporo pracy i również jestem ciekawa tego co tam wykreowałaś

Dodaj komentarz