Case study aplikacji mobilnej w AngularJS: W 8 godzin od pomysłu do implementacji

http://vimeo.com/album/2826355/video/102002124

http://github.com/mmiszy/lunch-button/tree/meet_js
https://github.com/cometcult/lunch-button/

Transcript

1. MEALSHAKER
   Mealshaker.com
   

   View Slide

2. MEALSHAKER
   Michał Miszczyszyn
   JavaScript Developer w The Comet Cult!
   (głównie AngularJS)

   @mmiszy!
   ! michal@miszczyszyn.com

   Administrator grupy AngularJS na FB

   facebook.com/groups/AngularJS2
   

   View Slide

3. MEALSHAKER
   • Co to jest Mealshaker?!
   • Skąd się wziął?!
   • Co to jest Impact Mapping?!
   • Czy Tworzenie aplikacji w AngularJS
   jest szybkie?!
   • Kod źródłowy Mealshaker
   

   View Slide

4. MEALSHAKER
   • chcę zjeść lunch!
   • potrząsam telefonem,
   aby znaleźć miejsce
   mealshaker.com
   Mealshaker
   

   View Slide

5. MEALSHAKER
   • Wynik jednodniowych warsztatów
   wewnątrz The Comet Cult!
   • 9:00-11:30 — brainstorming!
   • 11:35 — „initial commit”!
   • 17:14 — „Added 4sq formatted data”!
   • używaliśmy w czasie wieczornej
   kolacji w Sopocie!
   • sprawdził się bardzo ciekawie!
   • nazywał się lunchButtonApp
   

   View Slide

6. MEALSHAKER
   Brainstorm
   • Luźne pomysły na whiteboardzie!
   • „Co mnie boli?” „Czego mi brakuje?”!
   • Musi się zmieścić w dzień!
   • Wybraliśmy jeden!
   • Dalej: Impact Mapping
   

   View Slide

7. MEALSHAKER
   

   View Slide

8. MEALSHAKER
   

   View Slide

9. MEALSHAKER
   Co to jest Impact Mapping?
   • To technika planowania strategicznego!
   • Zamiast wymyślać niepotrzebne
   funkcje odpowiedź na 4 pytania:!
   • Why? Who? How? What?!
   • Ważna jest kolejność!!
   • Powstaje graf, który pomaga stworzyć
   dobre oprogramowanie (i nie tylko)
   

   View Slide

10. MEALSHAKER
    jedzenie
    głodni
    restauratorzy
    informacje komentarze
    oceny
    4sq API
    yelp API
    wskazówki
    fb API geolokacja
    Why?
    Who?
    How?
    What?
    

    View Slide

11. MEALSHAKER
    jedzenie
    głodni
    restauratorzy
    informacje komentarze
    oceny
    4sq API
    yelp API
    wskazówki
    fb API geolokacja
    Why?
    Who?
    How?
    What?
    MVP
    

    View Slide

12. MEALSHAKER
    Co to jest Impact Mapping?
    • Pomógł odrzucić złe pomysły!
    • Wymusił myślenie od odbiorcach
    zanim pomyśleliśmy o technologii
    

    View Slide

13. MEALSHAKER
    Czy tworzenie aplikacji w
    AngularJS jest szybkie?
    Tak.
    • Na początek wystarczy:

    yo angular
    • struktura katalogów, grunt, bower
    i spec + źródło
    

    View Slide

14. MEALSHAKER
    • per feature!
    • per rodzaj pliku
    domyślny, dobry dla
    małych projektów
    lepszy dla
    większych
    aplikacji
    Dwa sposoby organizacji kodu
    

    View Slide

15. MEALSHAKER
    Struktura Mealshaker
    - app
    - images
    - scripts
    - controllers
    - services
    - styles
    - views
    - dist
    - features
    - test testy jednostkowe
    e2e
    źródła
    

    View Slide

16. MEALSHAKER
    var position;
    Geolocation.getCurrentPosition()
    .then(function (pos) {
    position = pos;
    return Foursquareapi.getVenues(position);
    }).then(function (venues) {
    var venue = Utils.getRandomArrayItem(venues);
    return Foursquareapi.getOneVenue(venue.id, position);
    }).then(function (venue) {
    $scope.venue = venue;
    $scope.tip = Foursquareapi.getRandomTipForVenue(venue);
    });
    geolokacja
    lista z foursquare’a
    zmienne widoku
    

    View Slide

17. MEALSHAKER
    
    
    {{venue.name}}
    
    Go!
    
    pokaż/ukryj
    nazwa kontrolera
    bind do funkcji
    wyrażenie
    

    View Slide

18. MEALSHAKER
    Demo
    

    View Slide

19. MEALSHAKER
    Czym jest Mealshaker dziś?
    • liczba commitów: 105!
    • mealshaker.com!
    • responsywna aplikacja webowa!
    • Cordova!
    • iOS!
    • Android (w przygotowaniu)
    

    View Slide

20. MEALSHAKER
    Czym jest Mealshaker dziś?
    • kod źródłowy dostępny na GitHubie!
    github.com/mmiszy/lunch-button/tree/meet_js!
    github.com/cometcult/lunch-button!
    • jesteśmy otwarci na forki i pull requesty!
    • sporo rzeczy na pewno można poprawić
    

    View Slide

21. MEALSHAKER
    Dziękuję za uwagę

    i zapraszam do kontaktu!
    Pytania?
    

    View Slide