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

Transcript

1. MEALSHAKER Mealshaker.com

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

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

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

   miejsce mealshaker.com Mealshaker

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

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

7. MEALSHAKER

8. MEALSHAKER

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)

10. MEALSHAKER jedzenie głodni restauratorzy informacje komentarze oceny 4sq API yelp

    API wskazówki fb API geolokacja Why? Who? How? What?

11. MEALSHAKER jedzenie głodni restauratorzy informacje komentarze oceny 4sq API yelp

    API wskazówki fb API geolokacja Why? Who? How? What? MVP

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

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

14. MEALSHAKER • per feature! • per rodzaj pliku domyślny, dobry

    dla małych projektów lepszy dla większych aplikacji Dwa sposoby organizacji kodu

15. MEALSHAKER Struktura Mealshaker - app - images - scripts -

    controllers - services - styles - views - dist - features - test testy jednostkowe e2e źródła

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

17. MEALSHAKER <div ng-controller="MainCtrl" ng-show="venue"> <a ng-href="{{venue.canonicalUrl}}"> <h1>{{venue.name}}</h1> </a> <button ng-click="getRandomLunchVenue()">Go!</button>

    </div> pokaż/ukryj nazwa kontrolera bind do funkcji wyrażenie

18. MEALSHAKER Demo

19. MEALSHAKER Czym jest Mealshaker dziś? • liczba commitów: 105! •

    mealshaker.com! • responsywna aplikacja webowa! • Cordova! • iOS! • Android (w przygotowaniu)

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ć

21. MEALSHAKER Dziękuję za uwagę
 i zapraszam do kontaktu! Pytania?