SlideShare une entreprise Scribd logo
1  sur  22
Télécharger pour lire hors ligne
Concevez rapidement vos
applications mobiles
grâce au développement hybride
Qui suis-je?
Stéphanie Moallic
Développeur
Twitter : @steffy_29
Site web: surfinfoweb
INTRO
La problématique
...
Les solutions
La nouvelle solution
+
=
Concepts
● Conception des interfaces
○ HTML5, CSS3, Sass, LESS, Javascript
○ Ionic framework
● Logique métier
○ Angular JS
● Génération plates-formes cibles
○ Cordova
Les outils
Command-Line Interface
Ionic Lab
Gestion des dépendances
Automatisation et Styles
BlendWebMix - Concevez rapidement vos applications mobiles
Les templates
Structure d’un projet
Ionic Framework
Services :
$ionicModal, $ionicLoading,
$ionicPopup…
Composants :
ion-nav-bar, ion-view, button, ion-
header-bar,...
CSS :
header, tabs, checkbox
Ionicons, splashscreen et icone
…
...
NG-Cordova
✓ File
✓ Media
✓ Camera
✓ iBeacon
✓ Calendar
✓ Geolocation
✓ Bluetooth
✓ OAuth
✓ Contacts
✓ HealthKit
✓ Push notifications
✓ TouchID
✓ Social sharing
✓ Battery
✓ ...
Démo
L’avenir
Ionic 2.0 [alpha]sortie le 20/10/2015
✓ Navigation améliorée
✓ Plus de fonctionnalités natives dans Ionic
✓ Nouveau système de Theming
✓ Material Design
Merci! Des questions?

Contenu connexe

Tendances

Ionic Framework, L'avenir du mobile sera hybride, bdx.io le 16-10-2015
Ionic Framework, L'avenir du mobile sera hybride, bdx.io le 16-10-2015Ionic Framework, L'avenir du mobile sera hybride, bdx.io le 16-10-2015
Ionic Framework, L'avenir du mobile sera hybride, bdx.io le 16-10-2015Loïc Knuchel
 
Ionic, react native, native script
Ionic, react native, native scriptIonic, react native, native script
Ionic, react native, native scriptStéphanie MOALLIC
 
MobileDay - Parcours 1 Hybride (Cordova)
MobileDay - Parcours 1 Hybride  (Cordova)MobileDay - Parcours 1 Hybride  (Cordova)
MobileDay - Parcours 1 Hybride (Cordova)Cellenza
 
Ionic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,SassIonic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,Sassmarwa baich
 
Panorama des solutions mobile hybrides
Panorama des solutions mobile hybridesPanorama des solutions mobile hybrides
Panorama des solutions mobile hybridesekino
 
JavaScript Open Day - Migration Web To App
JavaScript Open Day - Migration Web To AppJavaScript Open Day - Migration Web To App
JavaScript Open Day - Migration Web To AppSébastien Ollivier
 
Firebase par nicolas lehovetzki
Firebase par nicolas lehovetzkiFirebase par nicolas lehovetzki
Firebase par nicolas lehovetzkiCocoaHeads France
 
Human Talks Grenoble 08/09/2015 - AngularJS et Cordova = applications WEB et ...
Human Talks Grenoble 08/09/2015 - AngularJS et Cordova = applications WEB et ...Human Talks Grenoble 08/09/2015 - AngularJS et Cordova = applications WEB et ...
Human Talks Grenoble 08/09/2015 - AngularJS et Cordova = applications WEB et ...Xavier NOPRE
 
Internet mobile : conception de sites et d'applications
Internet mobile : conception de sites et d'applicationsInternet mobile : conception de sites et d'applications
Internet mobile : conception de sites et d'applicationsJean David Olekhnovitch
 
Kinect pour les développeurs Web
Kinect pour les développeurs WebKinect pour les développeurs Web
Kinect pour les développeurs Webekino
 
CocoaHeads Rennes #14: Programmation Responsive par Celedev
CocoaHeads Rennes #14: Programmation Responsive par CeledevCocoaHeads Rennes #14: Programmation Responsive par Celedev
CocoaHeads Rennes #14: Programmation Responsive par CeledevCocoaHeadsRNS
 

Tendances (16)

Ionic Framework, L'avenir du mobile sera hybride, bdx.io le 16-10-2015
Ionic Framework, L'avenir du mobile sera hybride, bdx.io le 16-10-2015Ionic Framework, L'avenir du mobile sera hybride, bdx.io le 16-10-2015
Ionic Framework, L'avenir du mobile sera hybride, bdx.io le 16-10-2015
 
Ionic, react native, native script
Ionic, react native, native scriptIonic, react native, native script
Ionic, react native, native script
 
MobileDay - Parcours 1 Hybride (Cordova)
MobileDay - Parcours 1 Hybride  (Cordova)MobileDay - Parcours 1 Hybride  (Cordova)
MobileDay - Parcours 1 Hybride (Cordova)
 
Ionic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,SassIonic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,Sass
 
Ionic
IonicIonic
Ionic
 
Panorama des solutions mobile hybrides
Panorama des solutions mobile hybridesPanorama des solutions mobile hybrides
Panorama des solutions mobile hybrides
 
JavaScript Open Day - Migration Web To App
JavaScript Open Day - Migration Web To AppJavaScript Open Day - Migration Web To App
JavaScript Open Day - Migration Web To App
 
Firebase par nicolas lehovetzki
Firebase par nicolas lehovetzkiFirebase par nicolas lehovetzki
Firebase par nicolas lehovetzki
 
Présentation SoLocal
Présentation SoLocalPrésentation SoLocal
Présentation SoLocal
 
Human Talks Grenoble 08/09/2015 - AngularJS et Cordova = applications WEB et ...
Human Talks Grenoble 08/09/2015 - AngularJS et Cordova = applications WEB et ...Human Talks Grenoble 08/09/2015 - AngularJS et Cordova = applications WEB et ...
Human Talks Grenoble 08/09/2015 - AngularJS et Cordova = applications WEB et ...
 
Internet mobile
Internet mobileInternet mobile
Internet mobile
 
Internet mobile : conception de sites et d'applications
Internet mobile : conception de sites et d'applicationsInternet mobile : conception de sites et d'applications
Internet mobile : conception de sites et d'applications
 
Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4
 
Kinect pour les développeurs Web
Kinect pour les développeurs WebKinect pour les développeurs Web
Kinect pour les développeurs Web
 
Native script
Native scriptNative script
Native script
 
CocoaHeads Rennes #14: Programmation Responsive par Celedev
CocoaHeads Rennes #14: Programmation Responsive par CeledevCocoaHeads Rennes #14: Programmation Responsive par Celedev
CocoaHeads Rennes #14: Programmation Responsive par Celedev
 

En vedette

A World of Imagination - Cinthia oliveira
A World of Imagination - Cinthia oliveiraA World of Imagination - Cinthia oliveira
A World of Imagination - Cinthia oliveiraGerson Moura
 
достлукъ 1990 10 февраля
достлукъ 1990 10 февралядостлукъ 1990 10 февраля
достлукъ 1990 10 февраляAnatol ibn Hottab
 
Engenharia do Futuro: A Engenharia Criativa - Magical Minds
Engenharia do Futuro: A Engenharia Criativa - Magical MindsEngenharia do Futuro: A Engenharia Criativa - Magical Minds
Engenharia do Futuro: A Engenharia Criativa - Magical MindsPorQueNão?
 
Apresentação das Voluntárias do GRAACC no Seminário Internacional Voluntariad...
Apresentação das Voluntárias do GRAACC no Seminário Internacional Voluntariad...Apresentação das Voluntárias do GRAACC no Seminário Internacional Voluntariad...
Apresentação das Voluntárias do GRAACC no Seminário Internacional Voluntariad...Durval Olivieri
 
достлукъ 1990 24 февраля
достлукъ 1990 24 февралядостлукъ 1990 24 февраля
достлукъ 1990 24 февраляAnatol ibn Hottab
 
HE-UFP_presentation
HE-UFP_presentationHE-UFP_presentation
HE-UFP_presentationBruno Soares
 
Ionic: The Web SDK for Develop Mobile Apps.
Ionic: The Web SDK for Develop Mobile Apps.Ionic: The Web SDK for Develop Mobile Apps.
Ionic: The Web SDK for Develop Mobile Apps.Matheus Cardoso
 
B3 - A Rock Concert for India - Book 02
B3 -  A Rock Concert for India - Book 02B3 -  A Rock Concert for India - Book 02
B3 - A Rock Concert for India - Book 02Gerson Moura
 
достлукъ 1990 5 января
достлукъ 1990 5 январядостлукъ 1990 5 января
достлукъ 1990 5 январяAnatol ibn Hottab
 
Mobile Health Services: o consumidor e sua relação com a saúde
Mobile Health Services: o consumidor e sua relação com a saúdeMobile Health Services: o consumidor e sua relação com a saúde
Mobile Health Services: o consumidor e sua relação com a saúdePorQueNão?
 
UAM - Curso Superior de formação Específica em Gestão e Planejamento de Marke...
UAM - Curso Superior de formação Específica em Gestão e Planejamento de Marke...UAM - Curso Superior de formação Específica em Gestão e Planejamento de Marke...
UAM - Curso Superior de formação Específica em Gestão e Planejamento de Marke...Lukas Nakaya
 
Certificado Graduação Anhembi Morumbi - Juliana Maria Lopes
Certificado Graduação Anhembi Morumbi - Juliana Maria LopesCertificado Graduação Anhembi Morumbi - Juliana Maria Lopes
Certificado Graduação Anhembi Morumbi - Juliana Maria LopesJuliana Maria Lopes
 
Ionic, ce n'est pas que de l'UI, meetup PhoneGap le 25-05-2015
Ionic, ce n'est pas que de l'UI, meetup PhoneGap le 25-05-2015Ionic, ce n'est pas que de l'UI, meetup PhoneGap le 25-05-2015
Ionic, ce n'est pas que de l'UI, meetup PhoneGap le 25-05-2015Loïc Knuchel
 
Des maths et des recommandations - Devoxx 2014
Des maths et des recommandations - Devoxx 2014Des maths et des recommandations - Devoxx 2014
Des maths et des recommandations - Devoxx 2014Loïc Knuchel
 
B2/B3 - The Tease Monster - book 01
B2/B3 -   The Tease Monster - book 01B2/B3 -   The Tease Monster - book 01
B2/B3 - The Tease Monster - book 01Gerson Moura
 
Devoxx 2015, Atelier Ionic - 09/04/2015
Devoxx 2015, Atelier Ionic - 09/04/2015Devoxx 2015, Atelier Ionic - 09/04/2015
Devoxx 2015, Atelier Ionic - 09/04/2015Loïc Knuchel
 
Construindo um data warehouse com Pentaho e Docker
Construindo um data warehouse com Pentaho e DockerConstruindo um data warehouse com Pentaho e Docker
Construindo um data warehouse com Pentaho e DockerWellington Marinho
 

En vedette (20)

A World of Imagination - Cinthia oliveira
A World of Imagination - Cinthia oliveiraA World of Imagination - Cinthia oliveira
A World of Imagination - Cinthia oliveira
 
достлукъ 1990 10 февраля
достлукъ 1990 10 февралядостлукъ 1990 10 февраля
достлукъ 1990 10 февраля
 
Engenharia do Futuro: A Engenharia Criativa - Magical Minds
Engenharia do Futuro: A Engenharia Criativa - Magical MindsEngenharia do Futuro: A Engenharia Criativa - Magical Minds
Engenharia do Futuro: A Engenharia Criativa - Magical Minds
 
Apresentação das Voluntárias do GRAACC no Seminário Internacional Voluntariad...
Apresentação das Voluntárias do GRAACC no Seminário Internacional Voluntariad...Apresentação das Voluntárias do GRAACC no Seminário Internacional Voluntariad...
Apresentação das Voluntárias do GRAACC no Seminário Internacional Voluntariad...
 
Artig solninguémmotivaninguémmar11
Artig solninguémmotivaninguémmar11Artig solninguémmotivaninguémmar11
Artig solninguémmotivaninguémmar11
 
достлукъ 1990 24 февраля
достлукъ 1990 24 февралядостлукъ 1990 24 февраля
достлукъ 1990 24 февраля
 
HE-UFP_presentation
HE-UFP_presentationHE-UFP_presentation
HE-UFP_presentation
 
Ionic: The Web SDK for Develop Mobile Apps.
Ionic: The Web SDK for Develop Mobile Apps.Ionic: The Web SDK for Develop Mobile Apps.
Ionic: The Web SDK for Develop Mobile Apps.
 
B3 - A Rock Concert for India - Book 02
B3 -  A Rock Concert for India - Book 02B3 -  A Rock Concert for India - Book 02
B3 - A Rock Concert for India - Book 02
 
достлукъ 1990 5 января
достлукъ 1990 5 январядостлукъ 1990 5 января
достлукъ 1990 5 января
 
Data Warehouse
Data WarehouseData Warehouse
Data Warehouse
 
Mobile Health Services: o consumidor e sua relação com a saúde
Mobile Health Services: o consumidor e sua relação com a saúdeMobile Health Services: o consumidor e sua relação com a saúde
Mobile Health Services: o consumidor e sua relação com a saúde
 
UAM - Curso Superior de formação Específica em Gestão e Planejamento de Marke...
UAM - Curso Superior de formação Específica em Gestão e Planejamento de Marke...UAM - Curso Superior de formação Específica em Gestão e Planejamento de Marke...
UAM - Curso Superior de formação Específica em Gestão e Planejamento de Marke...
 
Certificado Graduação Anhembi Morumbi - Juliana Maria Lopes
Certificado Graduação Anhembi Morumbi - Juliana Maria LopesCertificado Graduação Anhembi Morumbi - Juliana Maria Lopes
Certificado Graduação Anhembi Morumbi - Juliana Maria Lopes
 
Ionic, ce n'est pas que de l'UI, meetup PhoneGap le 25-05-2015
Ionic, ce n'est pas que de l'UI, meetup PhoneGap le 25-05-2015Ionic, ce n'est pas que de l'UI, meetup PhoneGap le 25-05-2015
Ionic, ce n'est pas que de l'UI, meetup PhoneGap le 25-05-2015
 
Des maths et des recommandations - Devoxx 2014
Des maths et des recommandations - Devoxx 2014Des maths et des recommandations - Devoxx 2014
Des maths et des recommandations - Devoxx 2014
 
B2/B3 - The Tease Monster - book 01
B2/B3 -   The Tease Monster - book 01B2/B3 -   The Tease Monster - book 01
B2/B3 - The Tease Monster - book 01
 
Value words
Value wordsValue words
Value words
 
Devoxx 2015, Atelier Ionic - 09/04/2015
Devoxx 2015, Atelier Ionic - 09/04/2015Devoxx 2015, Atelier Ionic - 09/04/2015
Devoxx 2015, Atelier Ionic - 09/04/2015
 
Construindo um data warehouse com Pentaho e Docker
Construindo um data warehouse com Pentaho e DockerConstruindo um data warehouse com Pentaho e Docker
Construindo um data warehouse com Pentaho e Docker
 

Similaire à BlendWebMix - Concevez rapidement vos applications mobiles

Developper une application mobile
Developper une application mobileDevelopper une application mobile
Developper une application mobileEutech SSII
 
Les secrets du développement d'une application mobile
Les secrets du développement d'une application mobileLes secrets du développement d'une application mobile
Les secrets du développement d'une application mobileEutech SSII
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8davrous
 
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2bduverneuil
 
Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?NiceToMeetYou
 
Demarrer ionic en 5 etape
Demarrer ionic en 5 etapeDemarrer ionic en 5 etape
Demarrer ionic en 5 etapeZaïd BOUDAMOUZ
 
Visual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œil
Visual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œilVisual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œil
Visual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œilMicrosoft Technet France
 
Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5davrous
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)Khaled Djebloun
 
Passage aux applications mobiles
Passage aux applications mobilesPassage aux applications mobiles
Passage aux applications mobilesneuros
 
Power point test pk
Power point test pkPower point test pk
Power point test pkpratikmedia
 
Pourquoi choisir les technologies Microsoft
Pourquoi choisir les technologies MicrosoftPourquoi choisir les technologies Microsoft
Pourquoi choisir les technologies MicrosoftSofteam agency
 
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?Chambé-Carnet
 
Le développement mobile multiplateforme avec cordova
Le développement mobile multiplateforme avec cordovaLe développement mobile multiplateforme avec cordova
Le développement mobile multiplateforme avec cordovaSébastien Ollivier
 
L'histoire d'HTML5 pour les développeurs Windows Phone 8
L'histoire d'HTML5 pour les développeurs Windows Phone 8L'histoire d'HTML5 pour les développeurs Windows Phone 8
L'histoire d'HTML5 pour les développeurs Windows Phone 8Microsoft
 
Stage de fin d’études – dotcloud
Stage de fin d’études – dotcloudStage de fin d’études – dotcloud
Stage de fin d’études – dotcloudJoffrey Fu Hrer
 
Stage de fin d’études – dotcloud
Stage de fin d’études – dotcloudStage de fin d’études – dotcloud
Stage de fin d’études – dotcloudJoffrey Fu Hrer
 
IOT Seminar Paris 2015 - AXA France Presentation
IOT Seminar Paris 2015 - AXA France PresentationIOT Seminar Paris 2015 - AXA France Presentation
IOT Seminar Paris 2015 - AXA France PresentationMongoDB
 

Similaire à BlendWebMix - Concevez rapidement vos applications mobiles (20)

Developper une application mobile
Developper une application mobileDevelopper une application mobile
Developper une application mobile
 
Les secrets du développement d'une application mobile
Les secrets du développement d'une application mobileLes secrets du développement d'une application mobile
Les secrets du développement d'une application mobile
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
 
Meetup sencha
Meetup senchaMeetup sencha
Meetup sencha
 
Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?
 
Demarrer ionic en 5 etape
Demarrer ionic en 5 etapeDemarrer ionic en 5 etape
Demarrer ionic en 5 etape
 
Visual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œil
Visual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œilVisual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œil
Visual Studio 2013 / SharePoint 2013 duo de choc de 2010 à 2013 en un clin d’œil
 
MEAN_Stack_IOT
MEAN_Stack_IOTMEAN_Stack_IOT
MEAN_Stack_IOT
 
Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
 
Passage aux applications mobiles
Passage aux applications mobilesPassage aux applications mobiles
Passage aux applications mobiles
 
Power point test pk
Power point test pkPower point test pk
Power point test pk
 
Pourquoi choisir les technologies Microsoft
Pourquoi choisir les technologies MicrosoftPourquoi choisir les technologies Microsoft
Pourquoi choisir les technologies Microsoft
 
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
 
Le développement mobile multiplateforme avec cordova
Le développement mobile multiplateforme avec cordovaLe développement mobile multiplateforme avec cordova
Le développement mobile multiplateforme avec cordova
 
L'histoire d'HTML5 pour les développeurs Windows Phone 8
L'histoire d'HTML5 pour les développeurs Windows Phone 8L'histoire d'HTML5 pour les développeurs Windows Phone 8
L'histoire d'HTML5 pour les développeurs Windows Phone 8
 
Stage de fin d’études – dotcloud
Stage de fin d’études – dotcloudStage de fin d’études – dotcloud
Stage de fin d’études – dotcloud
 
Stage de fin d’études – dotcloud
Stage de fin d’études – dotcloudStage de fin d’études – dotcloud
Stage de fin d’études – dotcloud
 
IOT Seminar Paris 2015 - AXA France Presentation
IOT Seminar Paris 2015 - AXA France PresentationIOT Seminar Paris 2015 - AXA France Presentation
IOT Seminar Paris 2015 - AXA France Presentation
 

BlendWebMix - Concevez rapidement vos applications mobiles