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

8f7e1a0e97a69d5f7be4885c867b74ba?s=128

Michał Miszczyszyn

July 02, 2014
Tweet

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?