Un jour pour prototyper une application mobile

@loicknuchel

Loïc Knuchel

● Entrepreneur

● Développeur web freelance

● Organisateur des HumanTalks, Bagger, Blogger...

Me contacter : loicknuchel@gmail.com - @loicknuchel - http://loic.knuchel.org/blog/

Application mobile

Framework UI spécialisé mobile et basé sur Angular

- Styles- Directives- Outils

Quelques composants Ionic

Natif

Web

Téléphone & APIs natives

Cordova : webview +JavaScript bridges

AngularJS

Ionic

Votre applicationStack technologique

Code ...

<ion-view>

<ion-header-bar class="bar-positive"> <h1 class="title">Header</h1> <button class="button button-clear icon ion-settings"></button> </ion-header-bar>

<ion-content> </ion-content>

<ion-footer-bar class="bar-dark"> <div class="title">Footer</div> </ion-footer-bar>

</ion-view>

Header, Footer & Content

● collection-repeat: un ng-repeat efficace pour de longues listes

<div class="list"> <div class="item item-avatar" collection-repeat="user in users"> <img ng-src="{{user.avatar}}"/> <h2>{{user.name}}</h2> <p>{{user.description}}</p> </div></div>

Listes

<ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()"></ion-refresher>

$scope.doRefresh = function(){ $scope.users = [ ... ]; // Stop the ion-infinite-scroll from spinning $scope.$broadcast('scroll.infiniteScrollComplete');};

Pull-to-refresh

<ion-tabs class="tabs-icon-top tabs-positive">

<ion-tab title="Status" icon="ion-ios-pulse-strong"> <ion-nav-view name="tab-dash"></ion-nav-view> </ion-tab>

<ion-tab title="Chats" icon="ion-ios-chatboxes"> <ion-nav-view name="tab-chats"></ion-nav-view> </ion-tab>

<ion-tab title="Account" icon="ion-ios-gear"> <ion-nav-view name="tab-account"></ion-nav-view> </ion-tab>

</ion-tabs>

Navigation Tabs

<ion-popover-view> <ion-content> <div class="list"> <div class="item">Menu 1</div> <div class="item">Menu 2</div> <div class="item">Menu 3</div> </div> </ion-content></ion-popover-view>

$ionicPopover.fromTemplateUrl('popover.html', { scope: $scope}).then(function(popover){ $scope.popover = popover;});

<button class="button icon ion-more" ng-click="popover.show($event)"></button>

Navigation Popover

Et bien d’autres...

● Sidemenu● Popover● Modal● ActionSheet● Infinite-scroll● Swapable liste● Popup

● Checkbox● Radio● Slidebox● Spinner● Gestures● Select● ...

Ainsi qu’un ensemble d’outils...

SalooN (Android only…)

http://bit.ly/saloon-app