Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Michał Miszczyszyn

July 02, 2014
Tweet

More Decks by Michał Miszczyszyn

Other Decks in Programming

Transcript

  1. MEALSHAKER
    Mealshaker.com

    View full-size slide

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

    @mmiszy!
    ! [email protected]
    Administrator grupy AngularJS na FB

    facebook.com/groups/AngularJS2

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size slide

  7. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  10. 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 full-size slide

  11. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  14. 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 full-size slide

  15. MEALSHAKER


    {{venue.name}}

    Go!

    pokaż/ukryj
    nazwa kontrolera
    bind do funkcji
    wyrażenie

    View full-size slide

  16. MEALSHAKER
    Demo

    View full-size slide

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

    View full-size slide

  18. 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 full-size slide

  19. MEALSHAKER
    Dziękuję za uwagę

    i zapraszam do kontaktu!
    Pytania?

    View full-size slide