O tym, jak zrobiłam swoją pierwszą aplikację

By 17 stycznia 2015Get Things Done, Motywacja

Takie pytanie zadawali mi głównie niepro­gramisty­czni zna­jo­mi :) Ale tak naprawdę pomyślałam, że odpowiedź na nie jest równie cen­na dla tych, co pro­gra­mu­ją. W sum­ie, to jak zaczy­nałam nie miałam jas­no spre­cy­zowanego planu dzi­ała­nia (tu trochę pomógł Kuba, który sug­erował, co ter­az może­my robić), ale dzię­ki temu pow­stała pew­na ścież­ka, która powinien prze­jść każdy piszą­cy włas­ną aplikac­je. Na pewno moż­na to zro­bić “z innej strony”, ale wyda­je mi się, że moja kole­jność jest całkiem sen­sow­na.

Nie przedłuża­jąc, oto moje dzi­ała­nia krok po kroku z competence.today :) wraz z komen­tarza­mi, jak mi szło :D

Pomysł

To w sum­ie nie było takie proste — bo tak naprawdę, nie miałam pomysłu na aplikację, która zmieni świat. Z resztą, zakładam, że gdy­bym miała, Kuba powiedzi­ał by :“ok, to będzie to Two­ja 2 aplikac­ja”. A to dlat­ego, że celem mojej aplikacji było — naucze­nie mnie pro­gramowa­nia. Serio! Jed­nak bez sen­su było­by tworzyć coś w sty­lu Tes­laPic­ture­O­fA­Day, albo coś co w żaden sposób mnie nie intere­su­je ;)

Dawno, dawno temu, kiedy miałam blo­ga o samoroz­wo­ju i ba, włas­ną fir­mę z tym związaną, myślałam z moim ówczes­nym wspól­nikiem o tym, by stworzyć jak­iś taki por­tal szkole­niowy, coś co poz­woli na wymi­anę wiedzy, ale w sum­ie nie mieliśmy pomysłu, jak to może wyglą­dać oraz umiejęt­noś­ci :)

Zas­tanaw­ia­jąc się, co mogę zro­bić Kuba pod­sunął pomysł, że braku­je mu takiej przestrzeni do pub­likacji kursów online, na tyle prostej by dało się z tego korzys­tać, tak o, po pros­tu. Stwierdz­iłam, ok biorę to! Ale wcale nie skończyłam na tym etapie.

Stworzyłam lean mod­el can­vas (nieste­ty nie dogrze­bałam się do niego — ale jeszcze poszper­am). Wiem, że częs­to, pro­gramiś­ci ole­wa­ją mod­el biz­ne­sowy swoich aplikacji i ogól­nie “gardzą biz­ne­sem”, ale umówmy się, nie da się zapro­jek­tować i zapro­gramować dobrze czegoś, co nie jest skon­fron­towane z potrze­ba­mi użytkown­ików. To one defini­u­ją Two­ją aplikac­je. To one potem wery­fiku­ją, czy jest to kole­j­na dzi­w­na rzecz, która ist­nieje w internecie czy coś, co naprawdę może się przy­dać i z czego, będą korzys­tać. Po pros­tu nie da się odd­zielić pro­gramowa­nia od jego rezul­tatu i o ile w fir­mie, na stanowisku pro­gramisty “ktoś to już za Ciebie zro­bi” to w swoich pro­jek­tach — musisz to zro­bić sam. Uwierz, że tak zdoby­ta wiedza pomoże Ci też w samym pro­gramowa­niu — lep­iej zrozu­miesz założe­nia biz­ne­sowe pro­jek­tów, a łatwiej będzie Ci w przyszłoś­ci pra­cow­ać z samym kodem.

To, do czego doszłam sprowadza­ło się do kilku punk­tów: po pier­wsze, że wrzu­canie treś­ci musi być proste. Po drugie, że powin­na być możli­wa opc­ja pro­filu firmy, która to booku­je szkole­nia dla swoich pra­cown­ików.  Po trze­cie, że jeśli chci­ałabym zro­bić z tego biznes, to najważniejszą rzeczą jest tak naprawdę pozyskanie spec­jal­istów, którzy mogli by tworzyć takie kursy, bo to na nich opiera się wartość aplikacji.

Serwer i domena

W dzisiejszych cza­sach wybór nazwy to tak naprawdę sprawdze­nie, czy dana dom­e­na jest wol­na. Ja korzys­tałam z godad­dy, a nazwa, przyz­na­j­cie, wyszła całkiem sexy ;) Ser­w­er mam skolei wyna­ję­ty w usłudze Ama­zon AWS, a z jego kon­fig­u­racją poma­gał mi Kuba (choć poradz­iłabym sobie też sama, bo są fajne tuto­ri­ale).

Projekt

Po anal­izie i wyszczegól­nie­niu, czego potrze­bu­ję przyszedł czas na zapro­jek­towanie struk­tu­ry aplikacji. Zaczęłam od dia­gramów przy­pad­ków uży­cia. Poszukałam jakiegoś prostego narzędzia do tworzenia dia­gramów UML, jest tego masa, na pewno coś zna­jdziecie, ja korzys­tałam ze StarUML. A owoc mojej pra­cy zna­jdziecie poniżej. Wyszczegól­niłam trzy typy użytkown­ików: user, author, com­pa­ny.

Use Cases

Kole­jnym dia­gramem był dia­gram klas, który pokazu­je szczegóły na tem­at danych, jakie prze­chowu­je­my w sys­temie.

Dzię­ki niemu wiedzi­ałam, jak ma wyglą­dać domena(tak, wiem domeną nazy­wamy też adres, pod którym jest on widoczny w sieci, ale tutaj chodzi o domenę, jako wycinek rzeczy­wis­toś­ci) mojej aplikacji. Zaz­nac­zona na różowo klasa Course, została wybrana jako cen­tral­na w aplikacji.

 

Main

 

Cieka­wost­ka: Zobacz­cie jak dia­gramy wyglą­dały po uży­ciu ;) — Miałam je cały czas pod ręką i naprawdę dawały mi duu­użo infor­ma­cji o mojej aplikacji.

20150117_122551

Dia­gramy po napisa­niu aplikacji wyglą­da­ją mniej więcej tak :)

 

Widoki

To chy­ba najbardziej żmud­na (dla mnie!) część związana z aplikacją, a moje jęki słyszeli pewnie wszyscy sąsiedzi. Nieste­ty, albo i ste­ty nie moż­na uciec od front-endu, więc grzecznie edy­towałam htm­le ;)

Nie pory­wałam się z motyką na słońce, nie chci­ałam też wszys­tkiego robić sama więc szablon html kupiłam na The­me­For­est. Eh, ale i tak spędz­iłam mil­iony godzin* na jego edy­cji (*w moim odczu­ciu każ­da min­u­ta pra­cy w HTM­Lu trwa jakieś pół godziny :)).

Stworzyłam więc wszys­tkie wido­ki (a razem z nimi kon­trol­ery), ale w wer­sji staty­cznej, cza­sem też do wiadomej poprawy :). To było coś, co bard­zo ode­j­mowało mi motywacji i było zwycza­jnie żmudne. Nie jestem mis­trzem HTM­La więc pier­wsze godziny były naprawdę walką z niepoza­mykany­mi ami. Potem, było na szczęś­cie tylko proś­ciej, a pod koniec, noo całkiem przy­jem­nie i Kuba śmi­ał się ze mnie, że może jed­nak front-end.

Warto tutaj wspom­nieć o boot­strapie, dzię­ki które­mu wiele rzeczy miałam na gotowo (pom­nik dla twór­ców!).

W rezulta­cie, oga­r­nęłam staty­cznie więk­szość widoków w mojej aplikacji.

Domena

Czyli tworze­nie obiek­tów i encji. Dzię­ki dia­gramom i anal­izie ich było to naprawdę proste. Warto pamię­tać, że na początku nie ma co przewidy­wać wszys­tkiego i zas­tanaw­iać się co jeszcze jest potrzeb­ne. Dobrze napisana aplikac­ja pozwala na dopisy­wanie nowych rzeczy i mody­fikac­je — ja np. zupełnie zapom­ni­ałam o haśle do logowa­nia :) No, ale nie był to prob­lem.

Operacje

Po stworze­niu dome­ny, przyszedł czas na DAO i ser­wisy. Początkowo wynika­ją one z dome­ny — odczyt, zapis, aktu­al­iza­c­ja i nasze przy­pad­ki uży­cia, a później uzu­pełniłam je o konkretne metody i funkc­je, które wynika­ją z bieżą­cych potrzeb. Warto dodać, że moja wiedza w zakre­sie SQL nie jest powala­ją­ca, ale w zupełnoś­ci wystar­czyła do stworzenia obsłu­gi bazy danych — thanks to Spring! I naprawdę, jeśli robi­cie coś swo­jego, to korzys­tanie z  zapy­tań SQLowych powin­no być tym wyjś­ciem awaryjnym, bo mamy tak wspani­ałe narzędzia jak Spring czy JPA (tak, właśnie w takiej kole­jnoś­ci) i jeśli one Ci nie pomogą to dopiero wtedy korzys­taj z zapy­tań ;))

Podpięcie danych

Pole­ga na wyko­rzys­ta­niu ser­wisów w kon­trol­er­ach, wyświ­et­la­niu na widokach danych z bazy danych, doda­niu wal­i­dacji danych, obsłu­gi for­mu­la­rzy do ich wprowadza­nia. To był chy­ba naj­fa­jniejszy etap, bo łączył ze sobą wszys­tkie poprzed­nie — mogłam w końcu coś przek­likać, sprawdz­ić, dos­tosować, a z drugiej strony dość wyma­ga­ją­cy- w krótkim cza­sie musi­ałam wyszukać bard­zo dużo wiedzy i szy­bko ją dos­tosować do swo­jej aplikacji. Moż­na też powiedzieć, że w tym etapie mieś­cił się kole­jny…

Walidacja wcześniejszych założeń i zmiany

Nagle okaza­ło się, że czegoś braku­je, albo, że wcześniej rozk­miniłam coś zupełnie bez sen­su i jest to niepotrzeb­ne. Np. początkowo nie prze­chowywałam infor­ma­cji o postę­pach danego użytkown­i­ka w ramach kur­su, co ter­az wyda­je mi się pod­sta­wowe i kluc­zowe — for­mu­la­rz oce­ny kur­su powinien być dostęp­ny po ostat­niej lekcji, jak i możli­wość wygen­erowa­nia cer­ty­fikatu :)

Rozwój i utrzymanie :)

O i właśnie, jak widzi­cie, wcale nie skończyłam! Do uru­chomienia pozosta­je mod­uł dla firm, wspom­ni­ane wcześniej oce­ny kursów, możli­wość rekomen­dacji innym użytkown­ikom, czy cho­ci­aż­by pod­pię­cie płat­noś­ci, tu muszę skolei poczekać na pay­pal ;)) ale, to, co zro­biłam w zupełnoś­ci wystar­czyło, by ją uru­chomić. Pier­wszego dnia lin­ka dostali tylko wybrani i podsyłali mi bugi i niedo­pra­cow­a­nia, a ja jak pszczół­ka wszys­tko napraw­iałam. No i jasne, tak to powin­no wyglą­dać. Tes­tu­je­my, szukamy, rozwiązu­je­my prob­le­my, bo znowu nie da się zro­bić w 100% dzi­ała­jącej aplikacji (cho­ci­aż­by literów­ki, popraw­ki w htm­lu).

Tak wyglą­dało tworze­nie com­pe­tence. today. I właśnie moja dro­ga od pomysłu do real­iza­cji zain­spirowała nas do stworzenia ebooka o takiej pra­cy. Chce­my w sposób przys­tęp­ny i zwięzły opisać wszys­tko, co niezbędne do stworzenia pier­wszej aplikacji, nieza­leżnie od wybranej tech­nologii ;) To nasz pro­jekt na wios­nę, ale już niedłu­go zbierze­my grupę do pomo­cy nam — więcej zna­jdziecie na blogu.

  •  
  •  
  •  
  •  
  •  
  • pra­cowi­ta pszc­zol­ka

    Hej, dom­e­na swo­ją drogą, a co z hostingiem? Ponoć hos­towanie javows­kich webappek to nie taki tani interes, czy mogłabyś coś o tym powiedzieć?

    • Cześć,
      fak­ty­cznie, hos­towanie aplikacji w Javie nie jest tak proste jak w przy­pad­ku np. PHP, które moż­na zain­stalować na każdym hostin­gu.

      Ale też bez prze­sady, jest np. chmu­ra Ama­zon AWS — przez pier­wszy rok mozesz hos­tować jed­ną (nawet więcej, ale na jed­nym ser­w­erze) aplikację za dar­mo (http://aws.amazon.com/free/), później koszt to 10$ miesięcznie — nie jest to powala­ją­ca suma :)

      Jeśli chodzi o kon­fig­u­rację, jest to nieco bardziej skom­p­likowane, ale są firmy, które pozwala­ją w miarę bezboleśnie uru­chomić np. host­ing aplikacji w Javie (zobacz np. https://bitnami.com/stack/tomcat/cloud/amazon). W przyszłoś­ci planu­je­my opisać ten pro­ces, ale nie będzie to jeden z najbliższych wpisów. W razie prob­lemów daj znać, może­my pomóc w kon­fig­u­racji :)

      Jest też Google App Engine (z cen­ni­ka wynikało by, że opc­ja dla prostych aplikacji też jest bezpłat­na — https://cloud.google.com/appengine/#pricing), nato­mi­ast ciężko mi się wypowiedzieć na ten tem­at, nie korzys­tałem nigdy z ich usług. Kiedyś był prob­lem, ponieważ nie ofer­owali nor­mal­nych baz danych. Czy to się zmieniło — szcz­erze powiem, że nie wiem, ale warto zerknąć, może aku­rat to jest to, czego potrze­bu­jesz :)

      Ogól­nie pole­cam chmurę Ama­zon AWS — stale rozsz­erza­ją zakres usług, mają świet­ną doku­men­tację i nal­iczanie opłat z dokład­noś­cią do min­ut (płacimy tylko za to, co fak­ty­cznie wyko­rzys­tamy) oraz najniższe ceny jakie znalazłem. Minusem dla początku­ją­cych użytkown­ików jest to, że usłu­gi te są przez­nac­zone raczej dla firm, które mają kom­pe­tenc­je w admin­is­tracji ser­w­erów czy też inte­gracji — ’ naucze­nie się AWS’a ’ może okazać się karkołomne, jeśli jed­nocześnie uczysz się pro­gramować.

      • pra­cowi­ta pszc­zol­ka

        Hej, dzię­ki! Nie spodziewałem się tak szy­bkiej odpowiedzi. Rozsz­erzyłeś mi trochę hory­zon­ty, dotąd słysza­łem tylko o Google App Engine. Dobrze, że moż­na gdzieś postaw­ić swo­ją twór­c­zość w sytu­acji, gdy jest się tylko małą pszc­zołą, a nie rekinem biz­ne­su. Tak uru­chomioną już app­kę moż­na pokazać bez wsty­du potenc­jal­ne­mu pra­co­daw­cy (oczy­wiś­cie w kodzik na pewno też będą chcieli zajrzeć, wiado­mo)

        Grat­u­lu­ję zre­al­i­zowanego celu i życzę dal­szej wytr­wałoś­ci.
        Co do Waszew­go blo­ga to jest to bard­zo intere­su­ją­cy pro­jekt, z dużym potenc­jałem — na pewno będę tu częś­ciej goś­cił :)

        • andy

          Witam. Ciekawy artykuł. Dużo wspól­nych tem­atów. Bo też szukałem jakiegoś sen­sownego hostin­gu i znalazłem Open­Shift. W ramach dar­mowego planu moż­na mieć trzy apki. Napisałem sobie prostego CMS-a właśnie po to, aby móc pokazać ew. przyszłe­mu pra­co­daw­cy.
          Link do apki: http://cms-jfrmwrk.rhcloud.com
          Link do kodu na githu­bie zna­jdziecie w apce.
          Poz­draw­iam.

      • agraf­ka

        Pytanie lai­ka: czy host­ing jest potrzeb­ny do każdej aplikacji? Co z aplikac­ja­mi mobil­ny­mi, np. w Google Play?
        Jeśli na przykład chci­ałabym pouczyć się Pythona i napisać w tym języku swo­ją pier­wszą prostą aplikację, to czy już na etapie pisa­nia — i sprawdza­nia, jak ona wyglą­da — muszę wykupy­wać dla niej host­ing?
        Poz­draw­iam i przepraszam za głupie pyta­nia :)

        • nie, host­ing jest potrzeb­ny (a raczej przy­dat­ny) tylko, jeśli chcesz swo­ją aplikację udostęp­ni­ać pub­licznie. Tylko do devel­op­men­tu host­ing nie jest potrzeb­ny i możesz spoko­jnie pro­gramować tylko na swoim kom­put­erze :)

          • agraf­ka

            O, to super. Bard­zo dzięku­ję za pomoc :)

  • Cre­ator­rr

    napisal­iś­cie już tego e-booka? Gdzie go moż­na zakupić?

    • Nieste­ty jeszcze nie jest ukońc­zony, ponieważ pisze­my w cza­sie wol­nym, nieste­ty nie potrafimy dokład­nie powiedzieć kiedy będzie on ukońc­zony :(

  • pm

    Stary post, ale muszę zadać pewne pytanie. Kod i struk­tu­ra Two­jej pier­wszej aplikacji prezen­tu­ją się bard­zo dobrze, dla oso­by zaczy­na­jącej przy­godę z pro­gramowaniem wręcz onieśmiela­ją­co. Mój pier­wszy pro­gram był znacznie niższej jakoś­ci. Czy pod­czas tworzenia tej aplikacji mogłaś liczyć na pomoc Jaku­ba? Jeśli tak, w jakim zakre­sie?

    • Cześć! Jasne, że Kuba mi poma­gał, niem­niej było to jed­nak wskazy­wanie dobrych prak­tyk czy Tworze­nie lekcji kur­su, nie siadał do mojego kodu i go nie pisał. Cały kurs Javy jaki mamy na blogu pow­stał właśnie bym nauczyła się na tyle dobrze by móc stworzyć swo­ją pier­wszą aplikac­je. Był on dla mnie spisem wyty­cznych, jak i źródłem mate­ri­ałów dodatkowych od nau­ki. Także pomoc była, ale bard­zo podob­na do tej jaką możesz uzyskać z kur­su. Co do struk­tu­ry kodu to przyję­ty został chy­ba dość pop­u­larny podzi­ał, a jeśli chodzi o samą architek­turę to no cóż jak widać na zdję­ci­ach pro­jek­towałam to trochę, pewnie również na to spo­jrzał Jakub, trochę nie pamię­tam :)