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
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?