SlideShare une entreprise Scribd logo
    Comprendre l'émergence de l'Internet Mobile et expérimenter la fabrication éclair de son application iPhone. http://www.flickr.com/photos/ucumari/2317386162/ Workshop du 12, 13 & 14 janvier 2011, Télécom ParisTech
Comprendre l'émergence de l'Internet Mobile et expérimenter la fabrication éclair de son application iPhone. http://bit.ly/CPM2011 Stéphane Rouilly, @starcrouz Charles Delalonde, @delalonde Sauf les grandes images (c)
Planning simplifié Mercredi Jeudi Vendredi Cours Workshop : wireframing Lo-Fi Développement de la fonction 2 Cours Choix des éléments dans Kitchensink PRESENTATION Développement de la fonction 3 TD Wireframing Wireframing Hi-Fi dans Titanium PRIORISATION Finalisation du développement de l ’application TD Codage Titanium Développement de la fonction 1 PRESENTATION Bonus track, Export IPA / APK
1  -  Eléments de contexte A - Introduction économique et stratégique.B - Une solution pour prototyper.C - De l'innovation mobile. 2  -  Apprivoiser les applications : 2TDs A - Un beau wireframing ? B - Tous les outils. C - Coder par l'exemple. 3  -  Workshop & bonus Plan du cours
1 - Eléments de contexte  A - Introduction économique et stratégique Contexte et chiffres marquants. Différents OS,modèles de distribution, terminaux. Les applications Store et les apps : clés du succès.  B - Une solution pour prototyper Différentes approches (applications natives vs. Web Apps). Différents langages, différentes plate-formes. Un framework privilégié : Titanium.  C - De l'innovation mobile  Produire des idées. Analyser l ’existant. Wireframer. Industrialiser. > Plan de la matinée
A - Introduction économique et stratégique Contexte et chiffres marquants. Les applications Store et les apps : clés du succès. Différents OS, modèles, terminaux, apps marquantes.  B - Une solution pour prototyper C - De l'innovation mobile  http://www.flickr.com/photos/farbwahl/5158059489/
L ’internet  mobile Des chiffres vertigineux
Décollage de l ’internet mobile
Un média ultra répandu De 3 milliards d ’abonnements en 2008 à 5 milliards en 2010 (la planète comporte 6,8 milliards d’habitants)
Une profonde révolution En 10 ans à peine, le mobile a déjà cannibalisé  ¼ de la production de musique  1/6 de la production de jeux vidéo  20% des contenus achetés sur internet Le mobile, 31milliards de $ de revenus (contenus), est à lui seul plus important  que l ’industrie du disque du jeux vidéo  du cinéma
Le 7 ème  média de masse Particularités Le 1er média de masse personnel Le 1er média embarqué et toujours allumé Le 1er média comportant nativement un système de paiement Le 1er média où l ’audience peut être précisément quantifiée et identifiée http://blog.jeanbaptistedumont.com/2009/06/la-soci%C3%A9t%C3%A9-mobile-de-gutenberg-%C3%A0-l-iphone.html
Expérience utilisateur, comme pour la Wii ? - Au lieu d ’une course à la vitesse, à la puissance ou aux fonctionnalités, la Wii et l’iPhone s’intéressent aux utilisateurs : simplification du gameplay, de l’usage et des interfaces…  Quand la technologie est suffisante, on peut s ’intéresser à l’expérience utilisateur, au plus grand nombre http://www.kieweconsulting.com/images/what.jpg
L ’internet mobile va dépasser l’autre
Usage Social (UGC) : Facebook draine 50% du trafic mobile en Angleterre En Europe, les possesseurs de mobile passent plus de temps sur l ’internet mobile (6,4h/sem) qu’à lire des journaux (4,8) ou des magazines (4,1) Les utilisateurs passent moins de temps à téléphoner et envoyer des SMS qu ’à autre chose Usage du mobile aux USA, chez les plus de 18 ans : Prendre une photo 76% Envoyer des SMS 72% Aller sur internet 38% Mails 34% Filmer 34% Ecouter de la musique 33% Chatter 30% Utiliser des applications diverses 29%
A - Introduction économique et stratégique Contexte et chiffres marquants. Les applications Store et les apps : clés du succès. Différents OS, modèles, terminaux, apps marquantes.  B - Une solution pour prototyper C - De l'innovation mobile 
Des applications en masse Sous-titre intermédiaire Un modèle qui fonctionne
Les magasins d ’applications mobiles Quelques chiffres : 300 000 applications disponibles (fin oct 2010) En 9 mois, l ’Apple app store a distribué 1 milliard d’applications  Aujourd ’hui 7 millards d’applications distribuées Un modèle copié : Android (Google), OVI (Nokia), Microsoft, RIM… Raisons du succès : Services performants, utilisables hors connexion, facilement installés, monétisables, liés à l ’appareil (API : accéléromètre, appareil photo, GPS, carnet d’adresse) Facturation transparente : achat d ’impulsion Et…
…  des services unitaires (vs. sites mobiles) Une app = une seule fonctionnalité : plus de parcours client, il fait son marché de fonctionnalités ! Clarté, simplicité, facturation au plus juste L ’atomisation des contenus et des services devient indispensable : déportalisation via RSS et  webservices Maquette pour EDF Entreprises : file d ’informations et FAQ en langage naturel (Avatar Laurent)
L ’App Store… et les autres ! http://www.billshrink.com/blog/10071/how-popular-is-iphone/ Win - Win - Win : Les développeurs ont accès à une nouvelle clientèle Les clients ont un appareil « ouvert » aux fonctionnalités illimitées Apple « est rémunéré » pour enrichir les fonctionnalités de son produit (30% par téléchargement)
Une tendance lourde Téléchargements de musique et d'apps sur iTunes, par jour et en milliers http://techcrunch.com/2010/09/08/itunes-apps-songs/
Quelles applications ?
Les fonctionnalités sociales fidélisent
Un phénomène extrême, une bulle ? 15 - Document name - Chapter - 00 Mois 2009 La moitié des applications payantes rapportent moins de 500€ par an. Full Analysis of iPhone Economics - it is bad news. And then it gets worse, 22 juin 2010
A - Introduction économique et stratégique Contexte et chiffres marquants. Les applications Store et les apps : clés du succès. Différents OS, modèles, terminaux, apps marquantes.  B - Une solution pour prototyper C - De l'innovation mobile 
Un marché ultra fragmenté Systèmes d'exploitation (OS) Appareils Opérateurs Constructeurs
Beaucoup de technologies à maîtriser  
Nokia résiste  
...pas si bien que ça  
Android (de Google) à moyen terme Créer des applications pour toutes les plate-formes !
Mais pour l'instant... 300K iOS vs. 100K Android (forte croissance) http://www.androlib.com/appstats.aspx
La hauteur de l'enjeu  
Durée de vie limitée ? Opportunité ! Agir ! Pas d ’effet tunnel, time to market faible Profiter du buzz D'ici 2012, plus de 25% des contenus seront user-generated
BNP Paribas Lentement mais sûrement
BNP : Les bons comptes entre amis (avril 2009)   Sa partager les frais entre amis 1 ère  appli d ’une banque française sur l’AppStore Téléchargée plus de 60 000 fois Pas de connexion SI
BNP : Site mobile iPhone (nov 2009)
BNP : SPOT (fév 2010) Localisation des DAB et des agences en réalité augmentée Itinéraire (guidage GPS)  Horaires d'ouverture, numéros de téléphone Atomisation de leur offre ! Vidéo
BNP : Mes comptes (juin 2010)   Fonctionnalités Consultation comptes  Historique 30 derniers jours Opérations à venir Encours CB Virements en France Simulations crédit + souscrire en ligne  Déposez demande de crédit immo  Simulations d ’épargne Recherche d ’agence Téléchargée 100 000 fois pour iPhone et 10 000 fois pour iPad
Quelques applications remarquables (en toute objectivité ;-) *Snaptell  : reconnaissance de produit culturel via photo *Google Mobile  : reconnaissance vocale et visuelle ( Goggles ) Sncf direct  : panneaux d'affichage gare en tps réel *Soundhound  : reconnaissance de musique, même fredonnée *Meebo  : messagerie unifiée, always on BFMTV  : un télévision interactive et temps réel Calengoo  : un calendrier enfin utilisable Cydia  : jailbreak *Install0us  (cydia) : tester toutes les applis de l'appstore Canabalt  : jeu ultra simple, ultra efficace Babo Crash  : un Bejeweled plus évolué (un style de Tétris) iShoot 2 : jeu de balistique, se joue aussi à plusieurs via Wifi Labyrinth 2 : jeu de labyrinthe 3D Pipe Mania  : pipe *Plants vs zombies  : le plus addictif des tower defense
SnapTell  
Google Goggles  
SoundHound (ex Midomi)  
Meebo  
Installous 3.3.5
Plants vs. Zombies  
Quelques applications remarquables(2/3) Gas Tycoon 2: jeu  de réfléxion addictif *Warfare inc  : jeux de stratégie (Age of empire, Redalert, C&C) Pulse news  : se tenir au courant, joliment Où sont les toilettes  : toilettes les plus proches *Paris-ci la sortie du métro  : prendre le bon wagon MyWi  (cydia) : on en reparle en bonus ScreenSplitr  (cydia) : on en reparle en bonus VNC  : client pour prendre le controle d'un ordi à distance My3G  (cydia) : fake la 3G en Wifi (pour Skype par ex) IncarcerApp  : bloque le bouton home (enfants) SmackTalk  : répète tout ce qu'on dit (enfants) Wideo  : vidéos en streamings (Kamelot, caméra café...) Ustream Broadcaster  : partager ce que l'on filme en tps réel VLC  : lire des films ou de la musique dans tous les formats Harmonica  ;-)
Warfare inc.  
Paris-ci la sortie du métro  
Quelques applications remarquables (3/3) Remote  : télécommander iTunes Facebook  : fb... Fring  : messagerie unifiée, SIP et vidéo conférence QuickOffice  : suite office + Google docs *Layar  : navigateur en réalité augmentée. A tester, le prix du m2 en IDF via meilleurs agents. Drunk snipper  : jeu d'adresse humoristique *Rollercoaster extreme  : montagnes russes 3D RunKeeper  : traçage GPS sur carte et challenges Dragon dictation  : reconnaissance de la parole Acrobits Softphone  : téléphonie SIP Look-up  : space invader en réalité augmentée !
Layar / Meilleurs agents  
Rollercoaster extreme  
A - Introduction économique et stratégique B - Une solution pour prototyper Différents languages pour différentes plateformes.  Un framework privilégié : Titanium. C - De l'innovation mobile  http://www.flickr.com/photos/coreydorsey/5163930215/
Définitions & Clarifications  (1/2) OS Mobile :  ensemble de programmes permettant l'interface entre l'utilisateur final et le téléphone. Les plus connus sont iOS (Apple), Android (Google), Symbian et Bada (Nokia), BlackBerry OS. OS & Languages :  iOS => Noyau Mac OSX => dev Objective C et Cocoa. Android => Noyau Linux => dev Java. Cross-Platform : méthode de développement d'une application mobile permettant son déploiement sur plusieurs OS.
Définitions & Clarifications  (2/2) Web App : Site Web optimisé pour l'affichage sur navigateur mobile. Accède au GPS (si HTML5). Ne peut être vendu sur un magasin d'applications. Application native : Développée spécifiquement pour un OS mobile. Installée sur le téléphone. Accède aux capteurs du téléphone. Améliore l'experience utilisateur. Se télécharge sur un magasin d'applications. API : accès aux méthodes et propriétés des SDK mobiles.
API - SDK - Bibliothèques ... ?? API = Application programming interface SDK = Software development kit
Développement iPhone selon Jobs Exige : Installation du SDK iPhone sur Xcode. Construction des IHM sur Interface Builder. Développement du code avec Objective C. Signifie : Apprentissage d ’un outil et d’un langage. Indispensable pour créer des applications natives et accéder aux capteurs du téléphone. Conclusion : Web Apps ou développement cross-platform.
ADN classique du développeur Ne pas apprendre de nouveau langage : capitaliser. Ne pas être prisonnier d ’une technologie ou d’une plateforme. Jouer l ’ouverture et la communauté.
Les développeurs parlent aux développeurs Objectifs : Develop once, run everywhere (iPhone, Android…) Création d ’applications natives Utilisation des standards du Web (HTML, JS, CSS) Pionniers : jQTouch (Web Apps) / Phone Gap (Web Apps) Game Salad (Natif) : flash pour jeux mobiles. Titanium
Progression du plus simple au plus riche, du plus standard au plus spécifique aussi. Du web > qui ressemble à une app > intégré dans une app > une app restreinte > une app riche Game Salad : une app limitée aux jeux simples Xcode Titanium PhoneGap Game Salad jQTouch WebApp
jQTouch : une librairie javascript  
GameSalad
 
 
A - Introduction économique et stratégique B - Une solution pour prototyper Différentes approches (applications natives vs. Web Apps). Un framework privilégié : Titanium. C - De l'innovation mobile 
Développement selon Titanium Création d ’applications natives :  accès aux capteurs du téléphone. interfaces sophistiquées. Développement du code avec les standards du Web (Javascript, HTML, CSS). Installation du framework Titanium qui compilera le code. Installation des SDK, utilisés de manière transparente: SDK iPhone sur Xcode SDK Android SDK BlackBerry (non testé) Ecriture d ’un code unique (Android,  iPhone, RIM).
Fiche d'identité :  Framework de développement cross-plaftorm, Open Source "Desktop" et "Mobile" permettant la création d'applications natives. Outils de développement gratuits et un modèle économique construit sur un support aux utilisateurs Premium. 
En bref  
Titanium : un code simplifié 1 Définition de la page 2 Définition d'un élément 3 Logique 4 Ajout dans la page
Richesse des fonctionnalités  
Une API Cross plateforme   
App native contre webapp : gmail triche Mise à jour de la webapp gmail d'octobre 2010
...et Digg sort son app native (04/2010)
Quelques une de nos réalisations ou idées Avec Titanium... ou sans !
Révélation du potentiel photovoltaïque Permettre aux clients d ’évaluer en situation ( face à leur toiture ) l’intérêt de placer des panneaux photovoltaïques sur leur toit. Evaluer la production  en kWh, le gain en € (au tarif EDF de rachat pour les particuliers) et le retour sur investissement. Vidéo
Révélation du potentiel photovoltaïque
Potentiel PV : Making Off 5 jours de développement avec aucune expérience préalable sur le développement mobile et Titanium. 80% de Pomme + C & Pomme + V Accès à trois capteurs de l'iPhone : Accéleromètre, Boussole, GPS. 6 fichiers javascript, 400 lignes de code. 740Ko avec les images.
De l'iPhone à l'iPad
Comprendre mon énergie Idée : un Linky virtuel pour comprendre de manière ludique les répercussions de ses activités domestiques sur sa consommation 2 parties Jouer avec sa puissance instantanée (allumer ses appareils sans dépasser sa puissance souscrite) Appréhender ses consommations par usage (simuler son installation et voir les variations de sa consommation) Sensibilisation sur un mode ludique Interactivité (glisser/déplacer, transitions…) Réalisme (clignotement, valeurs… sur l ’afficheur Linky) Démo   « jouer avec la puissance » Elise, Juan, Edouard & Stéphane, EDF R&D 2010
Comprendre mon énergie
Etiquette énergie L'application Etiquette Energie délivre une estimation personnalisée pour chaque équipement en kWh, euros et en CO2.  Les fiches produits permettent de facilement comparer les produits entre eux.  Brevet français déposé le 01/02/2010 Extension européenne en cours de dépôt Disponible sur l'App Store
Etiquette énergie
Etiquette énergie - Page iTunes  
A - Introduction économique et stratégique B - Une solution pour prototyper C - De l'innovation mobile  Produire des idées. Analyser l ’existant. Wireframer. Industrialiser. http://www.flickr.com/photos/47181226@N05/5173193974/
Maquette         Prototype           Pilote          Pré-série      Production
Workshop "Arduino" Produire en une semaine quatre concepts de produits ou services dédiés à l'éco-efficacité énergétique, construits à l'aide du hardware Open Source : Arduino
Workshop  “Arduino” 4  mock-ups (functional prototypes) 5 days + + +  =
Workshop  “Arduino” Arduino http://www.arduino.cc Arduino is an  open-source electronics prototyping platform  based on flexible, easy-to-use hardware and software. It's intended for  artists, designers, hobbyists , and anyone interested in  creating interactive objects or environments .  Created in 2005 in Italy
Workshop  “Arduino” Objectives of the week Process : Multidisciplinary work team “ Learning by doing” process Creative process based on iterative trials and experimentations “ Quick and dirty” prototyping process Functional results by the end of the week Outputs : Concepts of product/service enabling the user to manage his/her energy consumption User-centric design of this product/service
Workshop Arduino process Monday identification of internal challenges + Arduino introduction Tuesday team creation + brainstorming Wednesday prototyping day 1 Thursday prototyping day 2 Friday exhibition of the projects
Workshop Arduino process
Projet "HomeSense" Mettre à disposition d'un binôme "expert - foyer" un kit Hardware Open Source pour qu'ils construisent leurs propres  "habitats intelligents" 
Homesense Project process http://www.homesenseproject.com/
A - Introduction économique et stratégique B - Une solution pour prototyper C - De l'innovation mobile  Produire des idées. Analyser l ’existant. Wireframer. Industrialiser.
Benchmark Réaliser un état de l'art des différents services mobiles de visualisation de sa consommation électrique
TED-O-Meter Affiche la consommation collectée par la passerelle TED. Trois unités : kWh, CO2, coût. Consommation totale et consommation estimée.
Mirawatt T5K Affiche la consommation collectée par la passerelle TED. Change le pas : heure, jour , mois.
Meter Read Interface de relève ludique mais inutilisable.
British Gas Meter Mode opératoire illustré pour relever son compteur. Relève d ’index personnel.
Utility Buddy Multi fluide, coûts pour une période donnée, montant estimé.
Utility Buddy Comparaison avec un compétiteur, peu détaillé sur le site.
A - Introduction économique et stratégique B - Une solution pour prototyper C - De l'innovation mobile  Produire des idées. Analyser l ’existant. Wireframer. Industrialiser.
Wireframing : dessinez c'est gagné ! Une maquette vaut souvent mieux qu'un long discours. Un wireframing est une première matérialisation du concept : Analyse de la faisabilité Communication interne Cahier des charges illustré Un wireframing permet d'éprouver les enchainements fonctionnels de l'application.
Wireframing Low Fidelity : MockingBird Intérêt :  Produire rapidement un concept sans se soucier des éléments d'interface.  Un outi l  :   Go Mocking Birds . Processus  :  Inscription en ligne. Edition d'éléments d'interface. Export de ces éléments au format PDF.
 
 
 
Wireframing Collaboratif : Google Docs Intérêts :  Produire à plusieurs un concept d'applications. (pas de versions, pas d ’envoi, travail en équipe), pas de risque de perte, standard (pas d’installation de logiciel ni de téléchargement de documents). Un outi l  :  Google Docs. Processus  :  Trouver les modèles : dossier partagé  ici Copier, dessiner  ici  et résultat  là Assembler et partager : presse papier et Google docs.
Un modèle type
Copie d ’un modèle vierge
Résultat
Wireframing High Fidelity : Mock App Intérêts :  Produire un concept d'applications iPhone au plus proche de l'application finale. Un outil   :   Mock App . Processus  :  Téléchargez et utilisez les « Stencils » du site. Construisez, sur Powerpoint, la présentation de votre application en intégrant des liens entre les écrans. Enregistrez votre présentation au format PDF et "Uploadez" la sur le site Mock App. Visionez-la, sur votre iPhone avec GoodReader App.
Welcome The comments in this file are meant as handy reminders ONLY.  You must refer to Apple ’s latest iPhone Interface Guidelines document as the definitive guide in the matter. If there ’s a UI element you can’t find here, email me at  [email_address]  and I’ll do my best to include it in the next release. Hello, This library file contains iPhone UI elements you ’ll want to copy and paste into your MockApp Template file. Vector format:  Most UI elements you ’ll find here have been recreated in vector format so you can edit their text and even modify their shape, color, gradient, etc. Grouping / ungrouping:  Note that most of the UI elements have been created by grouping several shapes together. You may want to copy and paste the UI element you ’re working on into your app template before ungrouping it. That way you always keep a clean grouped copy here. Enjoy MockApp! Dotan Saguy
Les limites du wireframing Bel aspect mais aucune logique (programmationnelle). Les composants complexes (pickers, sliders…) ne fonctionnent pas (liste de choix impossibles). Les capteurs ne sont pas accessibles. Peut être chronophage. Se limiter au Low-Fi dans le cadre d'une petite application. Idée de brouillon. (Pas le moment pour discuter de la charte graphique).
A - Introduction économique et stratégique B - Une solution pour prototyper C - De l'innovation mobile  Produire des idées. Analyser l ’existant. Wireframer. Industrialiser.
Industrialisation raisons et méthodes Raisons Se concentrer sur la Recherche et non le Développement Confier à des spécialistes la distribution sur l'App Store S'assurer de la QOS du code proposé   Méthodes Cahier des charges papier Cahier des charges de type Wireframing
 
 
 
 
 
 
Fin de la partie 1 :  Eléments de contexte
1  -  Eléments de contexte A - Introduction économique et stratégique.B - Une solution pour prototyper.C - De l'innovation mobile. 2  -  Apprivoiser les applications : 2 TDs A - Un beau wireframing ? B - Tous les outils. C - Coder par l'exemple. 3  -  Workshop & bonus Plan du cours
2 - Apprivoiser les applications : 2 TDs A - Un beau wireframing (le vôtre !)B - Tous les outils Titanium Developer Editeur (NetBeans) Export iPhone, Android Kitchensink (dans l ’émulateur et en IPA)  Aide en ligne (Documentation et Forum) C - Coder par l'exemple Anatomie d'un code d'application Titanium Construire onglet, label, bouton, slider et tester sur l'émulateur Capter la position géographique, afficher sur une carte... [GPS] Capter l'orientation, la pente [boussole, Accéleromètre] Construire l'appli complète avec ses 4 onglets, calculer les gains Exporter vers iPhone Emuler Android > Plan de l'après-midi
A - Un beau wireframing (le vôtre !) B - Tous les outils C - Coder par l'exemple http://www.flickr.com/photos/35824647@N03/5161011400/
Construction de votre application en utilisant Powerpoint et Mockapp Téléchargez  et utilisez les « Stencils » du site  mockapp.com Construisez, sur Powerpoint, la présentation de votre application en intégrant des liens entre les écrans. Enregistrez votre présentation au format PDF. Uploadez sur le site votre présentation au format PDF. Login  : majeure.strategie.2009 et  PWD  : charles http://mockapp.com/u/your-file-name.pdf Regardez sur votre iPhone avec GoodReader App la maquette de votre application
Welcome The comments in this file are meant as handy reminders ONLY.  You must refer to Apple ’s latest iPhone Interface Guidelines document as the definitive guide in the matter. If there ’s a UI element you can’t find here, email me at  [email_address]  and I’ll do my best to include it in the next release. Hello, This library file contains iPhone UI elements you ’ll want to copy and paste into your MockApp Template file. Vector format:  Most UI elements you ’ll find here have been recreated in vector format so you can edit their text and even modify their shape, color, gradient, etc. Grouping / ungrouping:  Note that most of the UI elements have been created by grouping several shapes together. You may want to copy and paste the UI element you ’re working on into your app template before ungrouping it. That way you always keep a clean grouped copy here. Enjoy MockApp! Dotan Saguy
Tab Bar Icon Library Music Videos Podcasts Search More Music Videos Podcasts Search More iTunes U Downloads Ringtones iTunes U Downloads Ringtones Genres Genres Artists Artists Audiobooks Albums Audiobooks Albums Compilations Composers Playlist Compilations Composers Playlists 6 More More Most Recent Featured Favorites Top Rated Top Rated Most Recent Featured Favorites Updates Categories Categories Updates Playlists Subscriptions Subscriptions My Videos My Videos Playlists Voicemail Keypad Keypad Contacts Contacts Voicemail World Clock Alarm Stopwatch Timer Timer World Clock Alarm Stopwatch Clock App  tab bar controller . iDisk App  tab bar controller . iDisk Recents Shared Files Public Folders Recents Public Folders Shared Files iDisk iTunes store  and  iPod  tab controllers + icons  (including  “table view” black on white versions) Youtube ,  App Store  and  Phone  additional tab controller + icons  (including  “table view” black on white versions) More tab bar icons coming soon!
Action sheets, Bubbles Action sheets An action sheet the user a set of choices for a task he/she just selected. It appears at the bottom of the screen by sliding upwards and over the current view. Action sheets can be used either to provide a selection of ways a task can be completed or to get confirmation before completing a potentially destructive task (i.e. delete or cancel). The most important or common action should appear as the top button. If the action is destructive (i.e. Delete), a red button might be called for. Action sheet Primary action you can also do this or maybe this or why not that Cancel Cancel Delete Bubbles Paste Select Select All MockApp I ’m hoping this one will help put MockApp on the map ;-) OK Delete 0:00 0:28 Play Record
Regular Table Views Regular Table Views Regular table views (as opposed to grouped table views - next slide) are most useful to display long lists of items such as messages, contacts, etc. which users must easily scroll.  Each row is an item. The list can be divided into sections (i.e. alphabetical) separated by grey headers as below. Hierarchical items let the user  “drill down” and are indicated by a ‘>’ icon to the right of the item. M N O A B C D E F G H I J K L M N O P Q R S T U This is a regular table view Divided into sections  (the letters are the sections) and can contain several data elements (image, text, etc.) Each row is an item of the list This is a regular table view With icons like in  The  “more” tab of the iPod app Podcasts G Pete  Gardener Tess  Grady M.J.  Grey Jenn  Guggenheim H Sara  Hashimoto A B C D E F G H I J K L M N O P Q R S T U V W Em  Hirsch Unread Item to delete or move Ready to be deleted Delete First  Last name mobile it highlights When pressed Not pressed yet Current status 29
Date, Time and other Pickers Date and Time Pickers Sat  Oct 3 Sun  Oct 4 Today Tue  Oct 6 Wed  Oct 7 7 8 9 10 11 50 55 00 05 10 AM PM August September October November December 03 04 05 06 07 2007 2008 2009 2010 2011 7 8 9 10 11 45 46 47 48 49 AM PM 28 29 30  mins 31 32 0  hours 1 2 Value Picker First & default value Second value Third value Analogous to  “pull-downs” frequently used on websites and desktop applications.
A - Un beau wireframing (le vôtre !) B - Tous les outils Titanium Developer Editeur (NetBeans) Kitchensink (dans l ’émulateur et en IPA)  Aide en ligne (Documentation et Forum) C - Coder par l'exemple http://www.flickr.com/photos/muzuto/2921028949/
Tours de main Créer un nouveau projet Importer le nouveau Kitchen Sink Mettre l'application de travail dans le DOCK Utiliser le KS déjà compilé - sans avoir à le recompiler Récupérer la nouvelle IPA de KS et la mettre en ligne pour que les étudiants l'installent sur leur téléphone
To get the mobile application in iphone to  close when the home button is clicked instead of continuing to run in the background  first build your project for iphone. Next go into the iphone's build folder and copy the info.plist file build/iphone/Info.plist.  P aste this file in the root directory for the whole project (the folder above the Resources folder). Edit the file with a text editor (not xcode nor property list editor) and add this xml code before the  </dict>  element : <key>UIApplicationExitsOnSuspend</key><true/> ans Save the file. Delete all files in the build/iphone directory and rebuild. Now it will close the application instead of suspending it to the background. answered 3 months ago by  John Saterfiel permalink Tester ses modifs très rapidement
Lancement Titanium Liste Projets Nouveau Projet Import Projet
Création d ’un nouveau projet
Import d ’un nouveau projet Emplacement Projet Existant
Import d ’un nouveau projet
Exécution d ’un projet Messages Console Choix SDK
Projet simulé (iPad) Simulateur iPad
Fonctionnement simulateur Accueil simulateur
A - Un beau wireframing (le vôtre !) B - Tous les outils Titanium Developer Editeur (NetBeans) Kitchensink (dans l ’émulateur et en IPA)  Aide en ligne (Documentation et Forum) C - Coder par l'exemple
IDE Netbeans Code dans Ressources
Création nouveau projet Netbeans
Création nouveau projet Netbeans
Création nouveau projet Netbeans
Création nouveau projet Netbeans
Fichiers nouveau projet Netbeans
App.js, page principale d'un nouveau projet Titanium
A - Un beau wireframing (le vôtre !) B - Tous les outils Titanium Developer Editeur (NetBeans) Kitchensink (dans l ’émulateur et en IPA)   Aide en ligne (Documentation et Forum) C - Coder par l'exemple
KitchenSink Vidéo de présentation disponible  : 6'25''. KitchenSink doit se trouver accessible dans Titanium developer.  Il est très pratique de le retrouver en IPA dans son iPhone car il devient utilisable sans changer de projet titanium.
A - Un beau wireframing (le vôtre !) B - Tous les outils Titanium Developer Editeur (NetBeans) Export iPhone, Android Kitchensink (dans l ’émulateur et en IPA)  Aide en ligne (Documentation et Forum) C - Coder par l'exemple
Bibliothèque des API  http://developer.appcelerator.com/apidoc/mobile/latest  
Communauté en ligne http://developer.appcelerator.com/questions/  
A - Un beau wireframing (le vôtre !)B - Tous les outils C - Coder par l'exemple Anatomie d'un code d'application Titanium Construire onglet, label, bouton, slider et tester sur l'émulateur Capter la position géo, afficher sur une carte... [GPS] Capter l'orientation, la pente [boussole, Accéleromètre] Construire l'appli complète avec ses 4 onglets, calculer gains  Exporter vers iPhone, vers Android (émulateur) http://www.flickr.com/photos/peterbox/175801757/
 
On se met à coder ? Une appli de révélation du potentiel solaire ?  (un exemple complet)
Les fichiers pour coder Pendant les 3 premières étapes, notre fichier de travail est,  myApp.js Projet vierge myApp1.js myApp2.js myApp3.js myApp4.js app-1tab.js Pour travailler myApp.js myApp.js myApp.js myApp.js app.js En fin d'étape vous myArea.js myLocation.js myOrientation.js myEarnings.js app-4tabs.js En fin d'étape nous area.js location.js orientation.js earnings.js app-4tabs-final.js
Anatomie d'un code Titanium Syntaxe javascript (permissive) app.js est le fichier lancé en premier (le &quot;main&quot; en C) Il peut appeler d'autres fichiers .js (inclusion ou appel) Dans le cas d'un appel, il n'a lieu qu'une fois (création/instanciation) même si on change d'onglet et qu'on y reviens par la suite. Les contexte des variables, dans le cas d'un appel, n'est pas conservé : utilisation de variables globales par exemple. (Ti = Titanium) comme préfixe aux éléments du SDK Titanium
Anatomie  (2/2) Récupération de l'espace d'affichage : var win = Titanium.UI.currentWindow; Création/déclaration différents éléments (boutons, labels...) var toto = Titanium.UI.createView({ height:200, width:200 }); Mise en place des évènements, de la logique (au clic, saisie...) toto.addEventListener('return', function(e){ alert('coucou') } ); Instanciation des éléments, ordre win.add(toto);
Rappel 1 Définition de la page 2 Définition d'un élément 3 Logique 4 Ajout dans la page
A - Un beau wireframing (le vôtre !)B - Tous les outils C - Coder par l'exemple Anatomie d'un code d'application Titanium Construire onglet, label, bouton, slider et tester sur l'émulateur Capter la position géo, afficher sur une carte... [GPS] Capter l'orientation, la pente [boussole, Accéleromètre] Construire l'appli complète avec ses 4 onglets, calculer gains  Exporter vers iPhone, vers Android (émulateur)
Etape 1 : La surface du panneau  Utiliser un slider pour saisir la surface du panneau solaire.  En fonction de la surface choisie, modifier la taille de l'image de panneau solaire. Afficher la valeur choisie et la stocker dans une variable globale (pour l'utiliser pour le calcul ensuite)
1 - Quoi coder : de l'UI pure ! Renommer myApp1.js en myApp.js Créer une view, un label    sans se soucier de leur positionnement (ils vont se centrer) et un slider en bas (bottom:40) Donner une taille par défaut à la view et y insérer l'image du panneau solaire (backgroundImage:images/pv.png), afficher une valeur par défaut dans le label (en m2) et une plage et une valeur par défaut au slider (de 10 à 30m2) Créer un évènement sur le slider (qui se déclenche dès qu'on le bouge) qui affiche sa valeur dans le label (label.text = slider.value) et modifier la taille de la view contenant l'image du panneau solaire (view.width = slider.value * 10). Garder la valeur en global (dans Ti.App.area). Ajouter la view, le label et le slider dans la window (window.add) Liens vers la docs Ti.UI.currentWindow Ti.UI.createView Ti.UI.createLabel Ti.UI.createSlider slider.addEventListener win.add Exemples kitchenSink slider.js 2d_transform.js (juste la 1ère view) Résolutions, - iPhone 3GS : 320 x 480 - iPhone 4G : 640 x 960 - iPad : 768 x 1024
1 - Focus sur... Un code source typique : montrer un code avec les éléments puis les évènements puis les ajouts à la window Attention aux caractères accentués et aux majuscules. Indenter. Tester. Placer les valeurs en global : Ti.App.area Un évènement et un callback: slider.addEventListener('change',function(e) {...}); Modifier une propriété : view.width = 45; view.height = valSlider * 10; // 100 à 300
Vous devriez obtenir... Il vous reste à  garder votre code  en le renommant :            Renommer myApp.js => myArea.js puis à  tester notre version  en la dupliquant (sur Aptana, copy/paste) puis en la renommant :              Dupliquer area.js => myApp.js Pour préparer l'étape 2, renommer le fichier vierge de départ au nom de notre fichier de travail             Renommer myApp2.js => myApp.js
A - Un beau wireframing (le vôtre !)B - Tous les outils C - Coder par l'exemple Anatomie d'un code d'application Titanium Construire onglet, label, bouton, slider et tester sur l'émulateur Capter la position géo, afficher sur une carte... [GPS] Capter l'orientation, la pente [boussole, Accéleromètre] Construire l'appli complète avec ses 4 onglets, calculer gains  Exporter vers iPhone, vers Android (émulateur)
Etape 2 : L'ensoleillement (le lieu) Capter la position géographique avec le GPS ou donner la possibilité de saisir n'importe quelle adresse et de la géocoder pour obtenir sa position géographique (forward-géocoder l'adresse). Afficher une carte Google map centrée sur la position trouvée. Afficher le nom de la ville englobant la position (réverse-géocoder l'adresse). Afficher un indicateur de progression tant que la carte n'est pas chargée.    Tester dans l'émulateur à chaque étape !
2 - Quoi coder : géoloc et mapview Créer une view de type Map sur la moitié haute (bottom:120). Créer une searchBar au dessus de la carte (top:80 et zIndex:2) et cachée (visible:false) Créer 2 button (en bas), un pour taper une adresse, un pour localiser avec le GPS. Créer un évènement click sur le button d'adresse qui découvre la searchBar (search.show()) et affiche le clavier (search.focus()). Créer un évènement return sur la searchBar (search.addEventListener('return'...) qui déclenche une géolocalisation (forward...) de l'adresse (search.value). Créer ensuite un callback (qui se déclenche donc quand la géoloc est finie) qui place mapView sur les lon/lat trouvées (mapview.setLocation) et qui cache la searchBar (search.hide()) et le clavier (search.blur()). Créer un évènement click sur buttonGPS qui trouve la position géo de l'iPhone (getCurrentPosition). Créer ensuite un callback (qui se déclenche donc quand la géoloc est finie) qui garde cette position en global (Ti.App.longitude = e.coords.longitude...) et place la mapView sur les lon/lat trouvées. Ajouter tous les éléments dans la window (mapview, search, buttonAddress, buttonGPS)   Liens vers la docs Ti.Map.createView Ti.UI.createSearchBar Ti.UI.createButton Ti.Geolocation. forwardGeocoder mapview.setLocation Ti.Geolocation. getCurrentPosition Exemples kitchenSink geolocalisation.js map_view.js searchbar.js
2 - Focus sur... Localiser une adresse venant d'un champs de saisie Ti.Geolocation.forwardGeocoder(search.value, function(evt){      Ti.App.longitude = evt.longitude;      Ti.App.latitude = evt.latitude; Localiser l'iPhone (GPS, Wifi ou GSM) Ti.Geolocation.getCurrentPosition(function(e) {      Ti.App.longitude = e.coords.longitude;      Ti.App.latitude = e.coords.latitude; Placer la carte sur des coordonnées géographiques mapview.setLocation({latitude:Ti.App.latitude, longitude:Ti.App.longitude, animate:true});
Vous devriez obtenir... Il vous reste à  garder votre code  en le renommant :            Renommer myApp.js => myLocation.js puis à  tester notre version  en la dupliquant (sur Aptana, copy/paste) puis en la renommant :              Dupliquer location.js => myApp.js Pour préparer l'étape 3, renommer le fichier vierge de départ au nom de notre fichier de travail             Renommer myApp3.js => myApp.js
A - Un beau wireframing (le vôtre !)B - Tous les outils C - Coder par l'exemple Anatomie d'un code d'application Titanium Construire onglet, label, bouton, slider et tester sur l'émulateur Capter la position géo, afficher sur une carte... [GPS] Capter l'orientation, la pente [boussole, Accéleromètre] Construire l'appli complète avec ses 4 onglets, calculer gains  Exporter vers iPhone, vers Android (émulateur)
Etape 3 : L'orientation du toit Créer un label en bas pour afficher les valeurs et 4 button pour faire varier les valeurs à la main. Capter la pente (en degrés) de l'iPhone via l'accéléromètre ou, à défaut (sur l'émulateur par exemple), donner la possibilité de modifier la pente avec des button haut et bas. Capter l'orientation (en degrés) de l'iPhone avec la boussole ou, à défaut  (iPhone 2G et 3G par exemple), permettre de modifier l'orientation avec des button gauche et droite. Créer un label pour afficher régulièrement (timer) les 2 valeurs et les stocker en global (Ti.App.slope, Ti.App.heading) Pour le fun, afficher une view d'un panneau solaire et lui appliquer des rotations en z (pente) et en x (orientation)
3 - Quoi coder :  accéléromètre et boussole Créer une view sans positionnement (donc au centre) contenant une image de panneau solaire. Créer 4 button en les positionnant sur les 4 bords (left, right, top et bottom chacun). Créer un label pour afficher la pente et l'orientation Créer des évènements sur chacun des button qui modifient les Ti.App.slope (- 5 pour buttonBottom par ex) et Ti.App.heading  Capter l'accéléromètre et récupérer uniquement la valeur z pour pouvoir calculer la pente. Stocker la résultat du calcul en global (Ti.App.slope). Capter la boussole et récupérer uniquement l'orientation (e.heading.magneticHeading) et la stocker en global (Ti.App.heading). Mettre à jour régulièrement (timer) le label avec les valeurs (label.text = Ti.App.heading..)  et modifier le positionnement de la view 3D. Ajouter tous les éléments dans la window   Liens vers la docs Titanium.Accelerometer. addEventListener Ti.Geolocation. getCurrentHeading Exemples kitchenSink button.js accelerometer.js geolocation.js (heading) 3d_transform.js (animate)
3 - Focus sur... Concaténer une chaine de caractères label.text = 'Pente : ' + Ti.App.slope + 'degres' + 'orientation : &quot; + Ti.App.heading +  ' degres'; Un évènement sur un bouton de réglage manuel buttonLeft.addEventListener('click', function(){ Ti.App.heading += 20; if (Ti.App.heading > 359) {Ti.App.heading = 5;} }); Capter la pente fonction de l'accéléromètre (et calculer !) Ti.Accelerometer.addEventListener('update',function(e){      Ti.App.slope = Math.round(Math.acos(-e.z) * 180 / Math.PI); }); Capter l'orientation en fonction de la boussole Ti.Geolocation.showCalibration = false; // Avoid calibration // fire event when angle exceeds this value Ti.Geolocation.headingFilter = 2; Ti.Geolocation.addEventListener('heading', function(e){      Ti.App.heading = Math.round( e.heading.magneticHeading);
3 - Focus sur... (suite) Fun en 3D (panneau solaire en mouvement) setInterval( function() {      var matrix = Ti.UI.create3DMatrix();      matrix = matrix.rotate(Ti.App.heading?Ti.App.heading:0,0,1,0); // '?' to avoid crash with iSimulate      matrix = matrix.rotate((90 - Ti.App.slope),1,0,0);           var animation = Titanium.UI.createAnimation();      animation.transform = matrix;      animation.duration = 200;      view.animate(animation); },200);
Vous devriez obtenir... Il vous reste à  garder votre code  en le renommant :            Renommer myApp.js => myOrientation.js puis à  tester notre version  en la dupliquant (sur Aptana, copy/paste) puis en la renommant :              Dupliquer orientation.js => myApp.js Pour préparer l'étape 4, renommer le fichier vierge de départ au nom de notre fichier de travail             Renommer myApp4.js => myApp.js
A - Un beau wireframing (le vôtre !)B - Tous les outils C - Coder par l'exemple Anatomie d'un code d'application Titanium Construire onglet, label, bouton, slider et tester sur l'émulateur Capter la position géo, afficher sur une carte... [GPS] Capter l'orientation, la pente [boussole, Accéleromètre] Construire l'appli complète avec ses 4 onglets, calculer gains   Exporter vers iPhone, vers Android (émulateur)
Etape 4 : Calculer et assembler l'appli importer une bibliothèque javascript (nrjProduction.js) dans le fichier myApp.js. Ce fichier contient les calculs et les valeurs necessaires pour calculer les gains. Lancer régulièrement le calcul pour  récupérer les 3 résultats annuels: - la production en kWh - la réduction de CO2 en kg - le gain en Euros en cas de revente et les afficher dans le label. Assembler les 4 tabs dans app.js Tester l'application complète !
4 - Quoi coder : inclusion et tabs Inclure nrjProduction.js dans myApp.js (Titanium.include( 'nrjProduction.js');). Créer un timer (setInterval()) qui lance périodiquement le calcul et affiche les résultats dans le label. Le calcul, contenu dans nrjProduction.js, se trouve dans une function qui se nomme compute(). Les paramètres n'ont pas besoin d'être passé à cette fonction (ils sont globaux : Ti.App.area, .longitude, .latitude, .heading, .slope). Par contre cette fonction retourne un objet qui contient les 3 résultats : resultat.outcome,  resultat.co2 et resultat.earnings. Les afficher dans le label (les mettre bout à bout : les concaténer) Renommer myApp.js => myEarnings.js.  Pour assembler l'application avec des onglets, récupérer app-4tabs.js et la renommer app.js. Reste à nommer les tabs (title) , leur affecter une icone chacun (icon) : area.js : images/house.png, location.js : images/pin.png, orientation.js : images/compass.png, earnings.js : images/brightness.png. L'application se base sur nos fichiers. Si vous voulez tester certains des vôtres (myArea.js par exemple), il suffit de modifier les url: en remplaçant area.js par myArea.js   Liens vers la docs Titanium.include Titanium.UI.createTab Titanium.UI.createWindow Exemples kitchenSink js_include.js tab_groups.js
4 - Focus sur... Importer une bibliothèque js externe (fichier javascript) Ti.include('nrjProduction.js'); Appeler la fonction de la bibliothèque et voir les résultats var result = compute(); label.text = result.outcome + result.co2 + result.earnings; Créer des onglets et une window dans chacun var tabGroup = Ti.UI.createTabGroup( {      barColor:'#336699' }); var win1 = Ti.UI.createWindow({      url:'area.js' // ou le votre : myArea.js }); var tab1 = Ti.UI.createTab({      icon:'images/house.png',      title:'area',      window:win1 });
Vous devriez obtenir... Tester en 2 fois : le calcul et son affichage dans myApp.js puis l'assemblage des tabs dans app.js et les 4 tabs : area.js, location.js, orientation.js et earnings.js
A - Un beau wireframing (le vôtre !)B - Tous les outils C - Coder par l'exemple Anatomie d'un code d'application Titanium Construire onglet, label, bouton, slider et tester sur l'émulateur Capter la position géo, afficher sur une carte... [GPS] Capter l'orientation, la pente [boussole, Accéleromètre] Construire l'appli complète avec ses 4 onglets, calculer gains  Exporter vers iPhone, vers Android (émulateur)
5.1 - Une icone et une image d'accueil Paufiner un peu l'application pour la rendre présentable  : Affecter une icone pour l'application (resources/images/appicon.png) en choisissant l'onglet Edit de Titanium Developer puis en cliquant sur le petit dossier à droite du champs &quot;Application Icon&quot;.  Copier l'image à faire apparaitre comme écran d'accueil de l'app (resources/images/Default.png) dans resources/iphone et dans resources/android Tester dans l'émulateur. Profiter pour faire durer (setTimeout) l'affichage de l'image d'accueil et lui ajouter un effet de transition.
5.1 - Focus sur... Ajouter un effet de transition à l'ouverture de l'app et faire durer l'affichage de l'image d'accueil 5 secondes de plus: setTimeout(function(){      tabGroup.open({          transition:Titanium.UI.iPhone.AnimationStyle. FLIP_FROM_LEFT      }); }, 5000);
Export Android  
Export Android  
Fin de la partie 2 :  Apprivoiser les applications
1  -  Eléments de contexte A - Introduction économique et stratégique.B - Une solution pour prototyper.C - De l'innovation mobile. 2  -  Apprivoiser les applications A - Un beau wireframing ? B - Tous les outils. C - Coder par l'exemple. 3  -  Workshop & bonus Plan du cours
3 - Workshop Maquettage et développement, en équipe, d ’applications mobiles natives. A - Les équipes Constitution, matos Choix du sujet B - Déroulement Lo-Fi & priorisation Interactions & construction Production d'éléments & logique iTunes, wireframe run & assemblage C - Conclusion Livraison des applications Bonus Track > Plan de la journée
&quot;Blood sweat tears&quot;, why ? Raisons Techniques : Nécessité, de prototyper ses idées : le maquettage ne permet pas de tester avec efficacité.  Faisabilité : User expérience. Faisabilité : Technique.  Raisons Symboliques : Crédibilité auprès des personnes à encadrer. Meilleure compréhension / bienveillance de vos interlocuteurs techniques (jargon) (artisanat dans le développement). Possibilité de couvrir ou comprendre toute la chaîne de production, de l ’idée jusqu’à la réalisation.
Nos objectifs pédagogiques Appréhender l ’ éco système  compétitif de l’Internet Mobile.  Identifier les  facteurs clés de succès  des applications mobiles dans un contexte de surabondance d ’applications.  Proposer des  idées d ’applications innovantes .  Vous livrer des outils  pour concrétiser vos idées d'applications Mobiles.  Découvrir l ’intérêt du  wireframing  et ses limites. Comprendre les caractéristiques techniques des applications  natives vs. Web Apps  (construction d ’Interfaces Utilisteurs sophistiquées ; intégration d’applications tierces). Prototyper une application iPhone  en utilisant les standards du Web  et un framework performant : Titanium. Compiler puis  exporter son application sur son mobile  pour convaincre d ’éventuels décideurs ou investisseurs.
A - Les équipes Constitution, matériel Choix des sujets B - Déroulement C - Conclusion
Une équipe de 2 personnes Nom de l'équipe  Développer à 2, sur le même Mac, la plupart du temps  Bien gérer son temps et rendre au fur et à mesure des périodes les éléments demandés.  Tout est expliqué ici . 2 présentations devant les autres groupes : une du wireframing, l'autre de l'application. 6 choses à rendre : la page iTunes, le wireframing Lo-Fi (photo), la liste des exemples Kitchensink sur lesquels vous vous appuyez, la priorisation des fonctions à développer, l'application elle même, une vidéo de l'application. Une méthode de rendu unique : un dossier Google Docs par équipe, partagé avec nous.
6 équipes de 2 : Nom du groupe  : 15°5, Jean-Luc et Véronique : SaoulCool,  Priorisation : xx, xx, xx, (xx) Nom du groupe  : DreamTeam, David et Fabienne : DiGUGRAVE,  Priorisation : xx, xx, xx, (xx) Nom du groupe  : OléOlé, Maryem et Bernadette : MetroSwing,  Priorisation : xx, xx, xx, (xx) Nom du groupe  : Simon et Gaëlle : DrinkMe,  Priorisation : xx, xx, xx, (xx) Nom du groupe  : Julie et Leïla : InYourMind,  Priorisation : xx, xx, xx, (xx) Nom du groupe  : Falafel, Yasmine et François-Xavier : P-Dakar,  Priorisation : xx, xx, xx, (xx)
Du matériel Un Mac pour développer (XCode, Titanium, éditeur)  Un PC/Mac avec une suite graphique ou picpick (par exemple) pour fabriquer de jolis éléments [un iPhone pour tester (iSimulate ou export IPA et kitchensink)]
A - Les équipes Constitution, matériel Choix des sujets B - Déroulement C - Conclusion
Choix d'un cas par équipe Cas 1 - Petite entreprise, site mobile  “Le Cristal De Sel” Construire une application mobile pour un restaurant Parisien. Cas 2 - Grande entreprise, outil  “Le juste prix des charges&quot; Proposer une application de partage du coût des charges d'une location saisonnière. Cas 3 - Evènement, témoin  “Route du Rhum” Imaginer une application de suivi d'un évenement sportif comme la Route du Rhum. > Télécharger les 3 cas en PDF
Cas 1 - Le Cristal de Sel Description Le cristal de sel est un restaurant de bonne tenue situé dans le 15e arrondissement de Paris.  Ce restaurant dispose d ’une clientèle d’habitués, à la recherche d’un dîner de bonne qualité et d’un service irréprochable, pour un budget mesuré. Les midis, le restaurant dispose également d’une clientèle travaillant à proximité et qui apprécie une formule à 18 euros plat et dessert / entrée. Le chef, Karil Lopez, et le responsable de la salle Damien Crépu ont identifié l ’importance des technologies de l’information et de la communication pour capter, informer puis conserver une clientèle. Le site web : http://www.lecristaldesel.fr est soigné et permet de partager la carte et les actualités du restaurant.  Une page de Fan Facebook http://www.facebook.com/lecristaldesel est également très active et créé un lien agréable entre le chef et ses convives.  Consignes Site Web, page de Fan Facebook, le cristal de sel sait se positionner sur les médias sociaux classiques. Aujourd ’hui l’Internet Mobile constitue pour Karil et Damien un nouveau support à investiguer permettant d’attirer une nouvelle clientèle ou de maintenir un lien avec une clientèle existante. Votre mission, si vous l’acceptez, sera donc de dessiner puis développer la maquette de l’application mobile le cristal de sel.
Cas 2 - Le juste prix des charges Description Lors d ’une location de vacances, du prêt d’un logement ou d’une voiture par un ami, il est toujours délicat d’estimer les charges que l’on doit en tant qu’occupant ou utilisateur au moment du rendu des clés. Et même s’il s’agit d’un prix convenu à l’avance, il est toujours intéressant d’estimer ce que l’on a vraiment consommé. Pour aller plus loin, on peut même avoir envie de se fier à une application qui vaut preuve (photos horodatées des compteurs) pour s'acquitter de ses charges. Cette question simple peut tout à fait s’imaginer pour l’eau, l’électricité, le gaz ou l’essence par exemple.  Consignes Imaginez une application pratique, aisée d ’utilisation, astucieuse voire ludique qui compare des indices de compteurs avant et après un séjour ou un prêt. Tenez compte des contrats souscrits, du temps passé, du prix fluctuant des énergies, du nombre d’occupants peut être, du temps qu’il fait pourquoi pas (corrélation du chauffage avec la météo), de l’usure s’il le faut et présentez graphiquement des résultats qui pourront être envoyés au prêteur, simplement consultés, ou même utilisés à titre de challenge sur des réseaux sociaux ! Et pourquoi pas en faire le chiffreur CO2 de vos vacances ?
Cas 3 - La route du Rhum Description La route du rhum est un événement nautique incontournable : une course en solitaire, sans escale et sans assistance de 3510 miles entre Saint-Malo et Pointe-à-Pitre. Comme tout évènement sportif de ce type (Paris Dakar) un  site Interne t fourni avec détails les prestations des participants. Autrefois publié de manière déclarative par les organisateurs ou les skippers, le site propose désormais des indications de positionnement géographique ou d ’allure automatiquement collectés par les équipements de bord des voiliers.  Consignes Votre mission, si vous l ’acceptez, est de devenir fan d’un des participants de l'évènement :  Julien Mabit . En tant que fan, vous souhaitez suivre en temps réel ses actualités, son classement, son positionnement GPS depuis votre téléphone. Vous choisissez dont de construire une application mobile pour suivre Julien dans sa course en solitaire.
A - Les équipes B - Déroulement Lo-Fi Choix des éléments Hi-Fi Codage C - Conclusion http://www.flickr.com/photos/dusseldorfer/4699321174/
Période 1 : 9h00 à 10h30h Choisir son équipe, la nommer et choisir son cas. Ecrire la page iTunes de son appli. Concevoir les quelques écrans de son application en Lo-Fi, penser à une vue d'ensemble, sons trop de précisions.
A - Les équipes B - Déroulement Lo-Fi Choix des éléments Hi-Fi Codage C - Conclusion
Période 2 : 10h45 à 12h15 Choisir les éléments nécessaires (boutons, cartes géographiques...) en s'aidant de l'application Kitchensink.  Découper et coller ou dessiner ces éléments sur le wireframing Lo-Fi. Identifier les exemples Kitchensink par leurs noms sur le wireframing. Prendre en photo le wireframing et l'ajouter à la présentation powerpoint de rendu PRESENTATION à tous de votre wireframing (photo) et de votre page iTunes
A - Les équipes B - Déroulement Lo-Fi Choix des éléments Hi-Fi Codage C - Conclusion
Période 3 : 13h30 à 15h00 Collecter les exemples Kitchensink retenus et les coller dans son propre projet Titanium Créer les différents écrans de l'application (un ecran = un fichier javascript) et les remplir des éléments choisis dans les exemples retenus. Positionner les éléments les uns par rapport aux autres dans les écrans. Ajouter les textes et images ou au moins leurs emplacements. PRIORISATION des fonctions qui seront vraiment développées
A - Les équipes B - Déroulement Lo-Fi Choix des éléments Hi-Fi Codage C - Conclusion
Période 4, 5 et 6: 15h15 à 16h45 et de 9h à 12h15 vendredi Prise en main de l'environnement Titanium : Titanium developpeur, Netbeans, l'émulateur iPhone développement des 3 fonctions choisies
Période 7 : 13h30 à 15h00 Abandon des fonctions bloquantes Intégration des différents écrans de l'appli débugage et paufinage 
A - Les équipesB - Déroulement C - Conclusion Livraison des applications Bonus Track http://www.flickr.com/photos/loswl/2422533408/
Rendu de fin de workshop PRESENTATION à tous de son application Livraison de l'application : tous le dossier &quot;resources&quot; du projet zippé. Livraison du  Powerpoint de rendu , complet.
A - Les équipesB - Déroulement C - Conclusion Livraison des applications Bonus Track Présenter son application Distribuer son application http://www.flickr.com/photos/loswl/2422533408/
Veency  (Cydia)  / VNC  (Mac/Pc/Linux) Transmission temps réel de l'écran de l'iPhone en Wifi vers un ordinateur fixe connecté à un vidéo projecteur. Lag un peu. Ne transmet pas les vidéos jouées sur l'iPhone.
Screensplitr  (Cydia)  / iDemo  (Mac/Pc, $9,99) Transmission temps réel de l'écran de l'iPhone en Wifi vers un ordinateur fixe connecté à un vidéo projecteur. Permet de transmettre même des vidéo lues sur l'iPhone (mode appareil photo par exemple). Ne fonctionne pas en iOS4.1 pour l'instant.
ScreenRecorder  (Cydia, 2$) Enregistrement vidéo de l'écran de l'iPhone depuis l'iPhone.
MyWi  (Cydia, $20) Transformer sa 3G en point d'accès Wifi. Utile aussi lors de démo avec aucun résau wifi à proximité. Permet l'utilisation de Screensplitr, de Veency et d'iSimulate. Application proposée en natif sur Android : Point d'accès Mobile.
Incarcérer un iPad pour une démo libre Incarcerapp  (Cydia, gratuit) Berceau        ( RAM Mount ) iScheduler    (Cydia, $7,99)  
A - Les équipesB - Déroulement C - Conclusion Livraison des applications Bonus Track Présenter son application Distribuer son application Export de VOTRE IPA et test ANDROID ! http://www.flickr.com/photos/loswl/2422533408/
Compilation avant la distribution La compilation exige un Provisioning Profile   Le Provisioning Profile requiert l' iOS Developer Program   L'adhésion à l'iOS Developer Program coût $99 / an
Distribution d'une application App Store Distribution 30% revenus à Apple gratuit pour les applications gratuites Add Hoc Distribution limité à 99 licences exige de pré-enregistrer les  UDID des utilisateurs Entreprise Distribution distribution intra-entreprises (+ de 500 collaborateurs) inscription base  D-U-N-S  
Enregistrement des UDID
Export iPhone et Android :  plusieurs solutions Sans clé développeur avec iSimulate : test de capteurs. Sans iTunes en SSH : iPhone jailbreaké. Avec iTunes. Vers Android.
Sans clé développeur : iSimulate Pour ne pas payer une clé développeur (99$), ni devoir jailbreaker son iPhone, nous pouvons utiliser iSimulate ($16), présente sur l'Appstore.  Cette app va permettre de tester l'app sur l'émulateur mais avec les capteurs d'un vrai iPhone (boussole, accéléromètre, GPS, multitouch...).  Elle permet de voir le résultat sur l'iPhone, sans exporter l'application, uniquement par recopie d'écran.
iSimulate Voir la présentation de l'install  d'iSimulate  ou  celle-ci .
Encoder en IPA Provisioning Profile
Export automatique vers iTunes Installing App onto iTunes
Récupérer IPA depuis iTunes Nouvelle IPA Générée
Sans iTunes, en SSH Il faut un iPhone jailbreaké, c'est à dire capable d'installer des applications non vérifiées par Apple. En particulier, un serveur SSH (openSSH app) pour communiquer sans passer par iTunes, en Wifi. L'intérêt et d'éviter de synchroniser iTunes à chaque test et d'avoir peur de perdre ses applications déjà installés si elles le sont depuis un autre iTunes (on ne peut pas les synchroniser sur 2 iTunes). Pour cette méthode il faut cependant obtenir d'Apple sa clé développeur (payante). Par contre, les applis n'ont pas besoin d'être &quot;signées&quot; pour un iPhone en particulier, elles fonctionnent sur tous les iPhones jailbreakés.
Export vers le téléphone  avec CyberDuck
Export vers le téléphone  avec CyberDuck
Exporter via iTunes Forme la plus classique d'export, elle necessite : une clé de provisionning valide  d'ajouter l'UUID de l'iPhone sur lequel on veut envoyer l'app (cf. site developer.apple.com).
Configuration Android Configuration Android
Test Android
Emulateur Android
A - Les équipesB - Déroulement C - Conclusion Livraison des applications Bonus Track Présenter son application Distribuer son application Export de VOTRE IPA et test ANDROID ! http://www.flickr.com/photos/loswl/2422533408/
Installation Android libre  
Votre appli sur VOTRE mobile On fabrique votre IPA (libre)
Fin de la partie 3,  Workshop & Bonus
Comprendre l'émergence de l'Internet Mobile et expérimenter la fabrication éclair de son application iPhone. Stéphane Rouilly, @starcrouz Charles Delalonde, @delalonde Sauf les grandes images (c)
 

Contenu connexe

Tendances

Approche mobile First : pourquoi privilégier les supports mobiles ?
Approche mobile First : pourquoi privilégier les supports mobiles ?Approche mobile First : pourquoi privilégier les supports mobiles ?
Approche mobile First : pourquoi privilégier les supports mobiles ?
Anaïs Vivion
 
Parlons App Economie : du dev à l'usage
Parlons App Economie : du dev à l'usageParlons App Economie : du dev à l'usage
Parlons App Economie : du dev à l'usage
LaFrenchMobile
 
Speakeasy - JWT Intelligence (French)
Speakeasy - JWT Intelligence (French)Speakeasy - JWT Intelligence (French)
Speakeasy - JWT Intelligence (French)
Virgile Brodziak
 
Mobile First to AI First
Mobile First to AI FirstMobile First to AI First
Mobile First to AI First
LaFrenchMobile
 
L'iphone et la révolution du web mobile
L'iphone et la révolution du web mobileL'iphone et la révolution du web mobile
L'iphone et la révolution du web mobile
Jefferson Bonnaire
 
Mobile et Médias - La grande et la petite histoire du mobile dans/pour les mé...
Mobile et Médias - La grande et la petite histoire du mobile dans/pour les mé...Mobile et Médias - La grande et la petite histoire du mobile dans/pour les mé...
Mobile et Médias - La grande et la petite histoire du mobile dans/pour les mé...
Denis Verloes
 
SUMMER'S WATCH • Les news Mobile & Tech de l'été
SUMMER'S WATCH • Les news Mobile & Tech de l'étéSUMMER'S WATCH • Les news Mobile & Tech de l'été
SUMMER'S WATCH • Les news Mobile & Tech de l'été
USERADGENTS
 
Business&Breakfast Sport 25.10.2017
Business&Breakfast Sport 25.10.2017Business&Breakfast Sport 25.10.2017
Business&Breakfast Sport 25.10.2017
Fabernovel
 
IoTeaTime #1 - 10 tendances du CES 2016
IoTeaTime #1 - 10 tendances du CES 2016 IoTeaTime #1 - 10 tendances du CES 2016
IoTeaTime #1 - 10 tendances du CES 2016
USERADGENTS
 
Barometre internet 1er semestre 2010
Barometre internet 1er semestre 2010Barometre internet 1er semestre 2010
Barometre internet 1er semestre 2010
Genaro Bardy
 
Mobiliteatime #1 : "Smartwatches & Apple Watch: Time to market?" by userADgents
Mobiliteatime #1 : "Smartwatches & Apple Watch: Time to market?" by userADgents Mobiliteatime #1 : "Smartwatches & Apple Watch: Time to market?" by userADgents
Mobiliteatime #1 : "Smartwatches & Apple Watch: Time to market?" by userADgents
USERADGENTS
 
Présentation écosystème mobile
Présentation écosystème mobilePrésentation écosystème mobile
Présentation écosystème mobile
guest28b3ded
 
Modèles d'affaire pour tablettes
Modèles d'affaire pour tablettes Modèles d'affaire pour tablettes
Modèles d'affaire pour tablettes
LongBoard Montreal
 
MobiliteaTime #15 : iOS 11
MobiliteaTime #15 : iOS 11MobiliteaTime #15 : iOS 11
MobiliteaTime #15 : iOS 11
USERADGENTS
 
Avoir une approche mobile first
Avoir une approche mobile firstAvoir une approche mobile first
Avoir une approche mobile first
BeApp
 
Web et Mobile, l'été de tous les Dangers
Web et Mobile, l'été de tous les DangersWeb et Mobile, l'été de tous les Dangers
Web et Mobile, l'été de tous les Dangers
Raphaël Chenol
 
9 tendances du Mobile World Congress 2017 par @hubinstitute
9 tendances du Mobile World Congress 2017 par @hubinstitute 9 tendances du Mobile World Congress 2017 par @hubinstitute
9 tendances du Mobile World Congress 2017 par @hubinstitute
HUB INSTITUTE
 
Les applications mobiles, sites mobiles et web apps
Les applications mobiles, sites mobiles et web appsLes applications mobiles, sites mobiles et web apps
Les applications mobiles, sites mobiles et web apps
Needeo
 

Tendances (19)

Approche mobile First : pourquoi privilégier les supports mobiles ?
Approche mobile First : pourquoi privilégier les supports mobiles ?Approche mobile First : pourquoi privilégier les supports mobiles ?
Approche mobile First : pourquoi privilégier les supports mobiles ?
 
Parlons App Economie : du dev à l'usage
Parlons App Economie : du dev à l'usageParlons App Economie : du dev à l'usage
Parlons App Economie : du dev à l'usage
 
Speakeasy - JWT Intelligence (French)
Speakeasy - JWT Intelligence (French)Speakeasy - JWT Intelligence (French)
Speakeasy - JWT Intelligence (French)
 
Mobile First to AI First
Mobile First to AI FirstMobile First to AI First
Mobile First to AI First
 
L'iphone et la révolution du web mobile
L'iphone et la révolution du web mobileL'iphone et la révolution du web mobile
L'iphone et la révolution du web mobile
 
Mobile et Médias - La grande et la petite histoire du mobile dans/pour les mé...
Mobile et Médias - La grande et la petite histoire du mobile dans/pour les mé...Mobile et Médias - La grande et la petite histoire du mobile dans/pour les mé...
Mobile et Médias - La grande et la petite histoire du mobile dans/pour les mé...
 
Tourisme
TourismeTourisme
Tourisme
 
SUMMER'S WATCH • Les news Mobile & Tech de l'été
SUMMER'S WATCH • Les news Mobile & Tech de l'étéSUMMER'S WATCH • Les news Mobile & Tech de l'été
SUMMER'S WATCH • Les news Mobile & Tech de l'été
 
Business&Breakfast Sport 25.10.2017
Business&Breakfast Sport 25.10.2017Business&Breakfast Sport 25.10.2017
Business&Breakfast Sport 25.10.2017
 
IoTeaTime #1 - 10 tendances du CES 2016
IoTeaTime #1 - 10 tendances du CES 2016 IoTeaTime #1 - 10 tendances du CES 2016
IoTeaTime #1 - 10 tendances du CES 2016
 
Barometre internet 1er semestre 2010
Barometre internet 1er semestre 2010Barometre internet 1er semestre 2010
Barometre internet 1er semestre 2010
 
Mobiliteatime #1 : "Smartwatches & Apple Watch: Time to market?" by userADgents
Mobiliteatime #1 : "Smartwatches & Apple Watch: Time to market?" by userADgents Mobiliteatime #1 : "Smartwatches & Apple Watch: Time to market?" by userADgents
Mobiliteatime #1 : "Smartwatches & Apple Watch: Time to market?" by userADgents
 
Présentation écosystème mobile
Présentation écosystème mobilePrésentation écosystème mobile
Présentation écosystème mobile
 
Modèles d'affaire pour tablettes
Modèles d'affaire pour tablettes Modèles d'affaire pour tablettes
Modèles d'affaire pour tablettes
 
MobiliteaTime #15 : iOS 11
MobiliteaTime #15 : iOS 11MobiliteaTime #15 : iOS 11
MobiliteaTime #15 : iOS 11
 
Avoir une approche mobile first
Avoir une approche mobile firstAvoir une approche mobile first
Avoir une approche mobile first
 
Web et Mobile, l'été de tous les Dangers
Web et Mobile, l'été de tous les DangersWeb et Mobile, l'été de tous les Dangers
Web et Mobile, l'été de tous les Dangers
 
9 tendances du Mobile World Congress 2017 par @hubinstitute
9 tendances du Mobile World Congress 2017 par @hubinstitute 9 tendances du Mobile World Congress 2017 par @hubinstitute
9 tendances du Mobile World Congress 2017 par @hubinstitute
 
Les applications mobiles, sites mobiles et web apps
Les applications mobiles, sites mobiles et web appsLes applications mobiles, sites mobiles et web apps
Les applications mobiles, sites mobiles et web apps
 

Similaire à Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)

[ Revue Innovations ] Valtech - Mobile World Congress
[ Revue Innovations ] Valtech - Mobile World Congress[ Revue Innovations ] Valtech - Mobile World Congress
[ Revue Innovations ] Valtech - Mobile World Congress
Valtech
 
Presentation Android
Presentation AndroidPresentation Android
Presentation Android
Jean Collas
 
Veille tendance
Veille tendanceVeille tendance
Veille tendance
Francois Ravier
 
Sharing day CES 2017
Sharing day CES 2017Sharing day CES 2017
Sharing day CES 2017
heaven
 
Le Marketing Mobile
Le Marketing MobileLe Marketing Mobile
Le Marketing Mobile
Michael Boamah
 
Competitic applications accessibles tablettes
Competitic   applications accessibles tablettesCompetitic   applications accessibles tablettes
Competitic applications accessibles tablettes
COMPETITIC
 
Présentation smartphones
Présentation smartphonesPrésentation smartphones
Présentation smartphones
Lo Teil
 
Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisseran...
Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisseran...Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisseran...
Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisseran...
UADF_CEF
 
LES MATERIELS ANDROID
LES MATERIELS ANDROIDLES MATERIELS ANDROID
LES MATERIELS ANDROID
Tiyab K.
 
L&rsquo;internet de séjour et le web mobile _ Ateliers numériques en Pays de ...
L&rsquo;internet de séjour et le web mobile _ Ateliers numériques en Pays de ...L&rsquo;internet de séjour et le web mobile _ Ateliers numériques en Pays de ...
L&rsquo;internet de séjour et le web mobile _ Ateliers numériques en Pays de ...
Pays de Bergerac
 
Présentation backelite 161210
Présentation backelite 161210Présentation backelite 161210
Présentation backelite 161210
AFMM
 
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
 
Atelier T7 Développer un site ou une application mobile - Salon e-tourisme V...
Atelier T7 Développer un site ou une application  mobile - Salon e-tourisme V...Atelier T7 Développer un site ou une application  mobile - Salon e-tourisme V...
Atelier T7 Développer un site ou une application mobile - Salon e-tourisme V...
Salon e-tourisme #VeM
 
Les applis fétiches sur son iphone, son iPod touch, son iPad - ExplorCamp (2010)
Les applis fétiches sur son iphone, son iPod touch, son iPad - ExplorCamp (2010)Les applis fétiches sur son iphone, son iPod touch, son iPad - ExplorCamp (2010)
Les applis fétiches sur son iphone, son iPod touch, son iPad - ExplorCamp (2010)
Ardesi Midi-Pyrénées
 
Presentation cgt juin2010
Presentation cgt juin2010Presentation cgt juin2010
Presentation cgt juin2010
Pascal Poty
 
Compte-rendu-buzzness-mobile
Compte-rendu-buzzness-mobileCompte-rendu-buzzness-mobile
Compte-rendu-buzzness-mobile
Bastien Serafin
 
Conférence Gemalto Le mobile et ses usages
Conférence Gemalto Le mobile et ses usagesConférence Gemalto Le mobile et ses usages
Conférence Gemalto Le mobile et ses usages
servicesmobiles.fr
 
SophiaConf 2010 Présentation de la conférence du 05 Juillet - Android :Tout s...
SophiaConf 2010 Présentation de la conférence du 05 Juillet - Android :Tout s...SophiaConf 2010 Présentation de la conférence du 05 Juillet - Android :Tout s...
SophiaConf 2010 Présentation de la conférence du 05 Juillet - Android :Tout s...
TelecomValley
 
Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...
Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...
Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...
FredericJutant
 
Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...
Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...
Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...
FredericJutant
 

Similaire à Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA) (20)

[ Revue Innovations ] Valtech - Mobile World Congress
[ Revue Innovations ] Valtech - Mobile World Congress[ Revue Innovations ] Valtech - Mobile World Congress
[ Revue Innovations ] Valtech - Mobile World Congress
 
Presentation Android
Presentation AndroidPresentation Android
Presentation Android
 
Veille tendance
Veille tendanceVeille tendance
Veille tendance
 
Sharing day CES 2017
Sharing day CES 2017Sharing day CES 2017
Sharing day CES 2017
 
Le Marketing Mobile
Le Marketing MobileLe Marketing Mobile
Le Marketing Mobile
 
Competitic applications accessibles tablettes
Competitic   applications accessibles tablettesCompetitic   applications accessibles tablettes
Competitic applications accessibles tablettes
 
Présentation smartphones
Présentation smartphonesPrésentation smartphones
Présentation smartphones
 
Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisseran...
Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisseran...Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisseran...
Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisseran...
 
LES MATERIELS ANDROID
LES MATERIELS ANDROIDLES MATERIELS ANDROID
LES MATERIELS ANDROID
 
L&rsquo;internet de séjour et le web mobile _ Ateliers numériques en Pays de ...
L&rsquo;internet de séjour et le web mobile _ Ateliers numériques en Pays de ...L&rsquo;internet de séjour et le web mobile _ Ateliers numériques en Pays de ...
L&rsquo;internet de séjour et le web mobile _ Ateliers numériques en Pays de ...
 
Présentation backelite 161210
Présentation backelite 161210Présentation backelite 161210
Présentation backelite 161210
 
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 ?
 
Atelier T7 Développer un site ou une application mobile - Salon e-tourisme V...
Atelier T7 Développer un site ou une application  mobile - Salon e-tourisme V...Atelier T7 Développer un site ou une application  mobile - Salon e-tourisme V...
Atelier T7 Développer un site ou une application mobile - Salon e-tourisme V...
 
Les applis fétiches sur son iphone, son iPod touch, son iPad - ExplorCamp (2010)
Les applis fétiches sur son iphone, son iPod touch, son iPad - ExplorCamp (2010)Les applis fétiches sur son iphone, son iPod touch, son iPad - ExplorCamp (2010)
Les applis fétiches sur son iphone, son iPod touch, son iPad - ExplorCamp (2010)
 
Presentation cgt juin2010
Presentation cgt juin2010Presentation cgt juin2010
Presentation cgt juin2010
 
Compte-rendu-buzzness-mobile
Compte-rendu-buzzness-mobileCompte-rendu-buzzness-mobile
Compte-rendu-buzzness-mobile
 
Conférence Gemalto Le mobile et ses usages
Conférence Gemalto Le mobile et ses usagesConférence Gemalto Le mobile et ses usages
Conférence Gemalto Le mobile et ses usages
 
SophiaConf 2010 Présentation de la conférence du 05 Juillet - Android :Tout s...
SophiaConf 2010 Présentation de la conférence du 05 Juillet - Android :Tout s...SophiaConf 2010 Présentation de la conférence du 05 Juillet - Android :Tout s...
SophiaConf 2010 Présentation de la conférence du 05 Juillet - Android :Tout s...
 
Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...
Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...
Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...
 
Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...
Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...
Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...
 

Plus de Stéphane Rouilly

Scénographie des controverses 2014, Sciences Po, Ecole de la Com
Scénographie des controverses 2014, Sciences Po, Ecole de la ComScénographie des controverses 2014, Sciences Po, Ecole de la Com
Scénographie des controverses 2014, Sciences Po, Ecole de la Com
Stéphane Rouilly
 
Scénographie des controverses 2013 à Sciences Po, Ecole de la Com
Scénographie des controverses 2013 à Sciences Po, Ecole de la ComScénographie des controverses 2013 à Sciences Po, Ecole de la Com
Scénographie des controverses 2013 à Sciences Po, Ecole de la Com
Stéphane Rouilly
 
Scénographie des analyses de controverses
Scénographie des analyses de controversesScénographie des analyses de controverses
Scénographie des analyses de controverses
Stéphane Rouilly
 
Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)
Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)
Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)
Stéphane Rouilly
 
De l'iPhone à twitter : le web qui bouleverse notre quotidien
De l'iPhone à twitter : le web qui bouleverse notre quotidienDe l'iPhone à twitter : le web qui bouleverse notre quotidien
De l'iPhone à twitter : le web qui bouleverse notre quotidien
Stéphane Rouilly
 
Mines CSI, 2nd cours de la formation des webmasters
Mines CSI, 2nd cours de la formation des webmastersMines CSI, 2nd cours de la formation des webmasters
Mines CSI, 2nd cours de la formation des webmasters
Stéphane Rouilly
 
Blog De Voyage
Blog De VoyageBlog De Voyage
Blog De Voyage
Stéphane Rouilly
 
Scenographie Des Analyses De Controverse
Scenographie Des Analyses De ControverseScenographie Des Analyses De Controverse
Scenographie Des Analyses De Controverse
Stéphane Rouilly
 
Blog De Voyage
Blog De VoyageBlog De Voyage
Blog De Voyage
Stéphane Rouilly
 
TD : un chat geolocalise (mashup)
TD : un chat geolocalise (mashup)TD : un chat geolocalise (mashup)
TD : un chat geolocalise (mashup)
Stéphane Rouilly
 
TD : 12 Logiciels libres pour contruire vos sites web
TD : 12 Logiciels libres pour contruire vos sites webTD : 12 Logiciels libres pour contruire vos sites web
TD : 12 Logiciels libres pour contruire vos sites web
Stéphane Rouilly
 

Plus de Stéphane Rouilly (11)

Scénographie des controverses 2014, Sciences Po, Ecole de la Com
Scénographie des controverses 2014, Sciences Po, Ecole de la ComScénographie des controverses 2014, Sciences Po, Ecole de la Com
Scénographie des controverses 2014, Sciences Po, Ecole de la Com
 
Scénographie des controverses 2013 à Sciences Po, Ecole de la Com
Scénographie des controverses 2013 à Sciences Po, Ecole de la ComScénographie des controverses 2013 à Sciences Po, Ecole de la Com
Scénographie des controverses 2013 à Sciences Po, Ecole de la Com
 
Scénographie des analyses de controverses
Scénographie des analyses de controversesScénographie des analyses de controverses
Scénographie des analyses de controverses
 
Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)
Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)
Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)
 
De l'iPhone à twitter : le web qui bouleverse notre quotidien
De l'iPhone à twitter : le web qui bouleverse notre quotidienDe l'iPhone à twitter : le web qui bouleverse notre quotidien
De l'iPhone à twitter : le web qui bouleverse notre quotidien
 
Mines CSI, 2nd cours de la formation des webmasters
Mines CSI, 2nd cours de la formation des webmastersMines CSI, 2nd cours de la formation des webmasters
Mines CSI, 2nd cours de la formation des webmasters
 
Blog De Voyage
Blog De VoyageBlog De Voyage
Blog De Voyage
 
Scenographie Des Analyses De Controverse
Scenographie Des Analyses De ControverseScenographie Des Analyses De Controverse
Scenographie Des Analyses De Controverse
 
Blog De Voyage
Blog De VoyageBlog De Voyage
Blog De Voyage
 
TD : un chat geolocalise (mashup)
TD : un chat geolocalise (mashup)TD : un chat geolocalise (mashup)
TD : un chat geolocalise (mashup)
 
TD : 12 Logiciels libres pour contruire vos sites web
TD : 12 Logiciels libres pour contruire vos sites webTD : 12 Logiciels libres pour contruire vos sites web
TD : 12 Logiciels libres pour contruire vos sites web
 

Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)

  • 1.     Comprendre l'émergence de l'Internet Mobile et expérimenter la fabrication éclair de son application iPhone. http://www.flickr.com/photos/ucumari/2317386162/ Workshop du 12, 13 & 14 janvier 2011, Télécom ParisTech
  • 2. Comprendre l'émergence de l'Internet Mobile et expérimenter la fabrication éclair de son application iPhone. http://bit.ly/CPM2011 Stéphane Rouilly, @starcrouz Charles Delalonde, @delalonde Sauf les grandes images (c)
  • 3. Planning simplifié Mercredi Jeudi Vendredi Cours Workshop : wireframing Lo-Fi Développement de la fonction 2 Cours Choix des éléments dans Kitchensink PRESENTATION Développement de la fonction 3 TD Wireframing Wireframing Hi-Fi dans Titanium PRIORISATION Finalisation du développement de l ’application TD Codage Titanium Développement de la fonction 1 PRESENTATION Bonus track, Export IPA / APK
  • 4. 1 - Eléments de contexte A - Introduction économique et stratégique.B - Une solution pour prototyper.C - De l'innovation mobile. 2 -  Apprivoiser les applications : 2TDs A - Un beau wireframing ? B - Tous les outils. C - Coder par l'exemple. 3 - Workshop & bonus Plan du cours
  • 5. 1 - Eléments de contexte  A - Introduction économique et stratégique Contexte et chiffres marquants. Différents OS,modèles de distribution, terminaux. Les applications Store et les apps : clés du succès. B - Une solution pour prototyper Différentes approches (applications natives vs. Web Apps). Différents langages, différentes plate-formes. Un framework privilégié : Titanium. C - De l'innovation mobile  Produire des idées. Analyser l ’existant. Wireframer. Industrialiser. > Plan de la matinée
  • 6. A - Introduction économique et stratégique Contexte et chiffres marquants. Les applications Store et les apps : clés du succès. Différents OS, modèles, terminaux, apps marquantes. B - Une solution pour prototyper C - De l'innovation mobile  http://www.flickr.com/photos/farbwahl/5158059489/
  • 7. L ’internet mobile Des chiffres vertigineux
  • 8. Décollage de l ’internet mobile
  • 9. Un média ultra répandu De 3 milliards d ’abonnements en 2008 à 5 milliards en 2010 (la planète comporte 6,8 milliards d’habitants)
  • 10. Une profonde révolution En 10 ans à peine, le mobile a déjà cannibalisé ¼ de la production de musique 1/6 de la production de jeux vidéo 20% des contenus achetés sur internet Le mobile, 31milliards de $ de revenus (contenus), est à lui seul plus important que l ’industrie du disque du jeux vidéo du cinéma
  • 11. Le 7 ème média de masse Particularités Le 1er média de masse personnel Le 1er média embarqué et toujours allumé Le 1er média comportant nativement un système de paiement Le 1er média où l ’audience peut être précisément quantifiée et identifiée http://blog.jeanbaptistedumont.com/2009/06/la-soci%C3%A9t%C3%A9-mobile-de-gutenberg-%C3%A0-l-iphone.html
  • 12. Expérience utilisateur, comme pour la Wii ? - Au lieu d ’une course à la vitesse, à la puissance ou aux fonctionnalités, la Wii et l’iPhone s’intéressent aux utilisateurs : simplification du gameplay, de l’usage et des interfaces… Quand la technologie est suffisante, on peut s ’intéresser à l’expérience utilisateur, au plus grand nombre http://www.kieweconsulting.com/images/what.jpg
  • 13. L ’internet mobile va dépasser l’autre
  • 14. Usage Social (UGC) : Facebook draine 50% du trafic mobile en Angleterre En Europe, les possesseurs de mobile passent plus de temps sur l ’internet mobile (6,4h/sem) qu’à lire des journaux (4,8) ou des magazines (4,1) Les utilisateurs passent moins de temps à téléphoner et envoyer des SMS qu ’à autre chose Usage du mobile aux USA, chez les plus de 18 ans : Prendre une photo 76% Envoyer des SMS 72% Aller sur internet 38% Mails 34% Filmer 34% Ecouter de la musique 33% Chatter 30% Utiliser des applications diverses 29%
  • 15. A - Introduction économique et stratégique Contexte et chiffres marquants. Les applications Store et les apps : clés du succès. Différents OS, modèles, terminaux, apps marquantes. B - Une solution pour prototyper C - De l'innovation mobile 
  • 16. Des applications en masse Sous-titre intermédiaire Un modèle qui fonctionne
  • 17. Les magasins d ’applications mobiles Quelques chiffres : 300 000 applications disponibles (fin oct 2010) En 9 mois, l ’Apple app store a distribué 1 milliard d’applications Aujourd ’hui 7 millards d’applications distribuées Un modèle copié : Android (Google), OVI (Nokia), Microsoft, RIM… Raisons du succès : Services performants, utilisables hors connexion, facilement installés, monétisables, liés à l ’appareil (API : accéléromètre, appareil photo, GPS, carnet d’adresse) Facturation transparente : achat d ’impulsion Et…
  • 18. … des services unitaires (vs. sites mobiles) Une app = une seule fonctionnalité : plus de parcours client, il fait son marché de fonctionnalités ! Clarté, simplicité, facturation au plus juste L ’atomisation des contenus et des services devient indispensable : déportalisation via RSS et webservices Maquette pour EDF Entreprises : file d ’informations et FAQ en langage naturel (Avatar Laurent)
  • 19. L ’App Store… et les autres ! http://www.billshrink.com/blog/10071/how-popular-is-iphone/ Win - Win - Win : Les développeurs ont accès à une nouvelle clientèle Les clients ont un appareil « ouvert » aux fonctionnalités illimitées Apple « est rémunéré » pour enrichir les fonctionnalités de son produit (30% par téléchargement)
  • 20. Une tendance lourde Téléchargements de musique et d'apps sur iTunes, par jour et en milliers http://techcrunch.com/2010/09/08/itunes-apps-songs/
  • 23. Un phénomène extrême, une bulle ? 15 - Document name - Chapter - 00 Mois 2009 La moitié des applications payantes rapportent moins de 500€ par an. Full Analysis of iPhone Economics - it is bad news. And then it gets worse, 22 juin 2010
  • 24. A - Introduction économique et stratégique Contexte et chiffres marquants. Les applications Store et les apps : clés du succès. Différents OS, modèles, terminaux, apps marquantes. B - Une solution pour prototyper C - De l'innovation mobile 
  • 25. Un marché ultra fragmenté Systèmes d'exploitation (OS) Appareils Opérateurs Constructeurs
  • 26. Beaucoup de technologies à maîtriser  
  • 28. ...pas si bien que ça  
  • 29. Android (de Google) à moyen terme Créer des applications pour toutes les plate-formes !
  • 30. Mais pour l'instant... 300K iOS vs. 100K Android (forte croissance) http://www.androlib.com/appstats.aspx
  • 31. La hauteur de l'enjeu  
  • 32. Durée de vie limitée ? Opportunité ! Agir ! Pas d ’effet tunnel, time to market faible Profiter du buzz D'ici 2012, plus de 25% des contenus seront user-generated
  • 33. BNP Paribas Lentement mais sûrement
  • 34. BNP : Les bons comptes entre amis (avril 2009) Sa partager les frais entre amis 1 ère appli d ’une banque française sur l’AppStore Téléchargée plus de 60 000 fois Pas de connexion SI
  • 35. BNP : Site mobile iPhone (nov 2009)
  • 36. BNP : SPOT (fév 2010) Localisation des DAB et des agences en réalité augmentée Itinéraire (guidage GPS) Horaires d'ouverture, numéros de téléphone Atomisation de leur offre ! Vidéo
  • 37. BNP : Mes comptes (juin 2010) Fonctionnalités Consultation comptes Historique 30 derniers jours Opérations à venir Encours CB Virements en France Simulations crédit + souscrire en ligne Déposez demande de crédit immo Simulations d ’épargne Recherche d ’agence Téléchargée 100 000 fois pour iPhone et 10 000 fois pour iPad
  • 38. Quelques applications remarquables (en toute objectivité ;-) *Snaptell : reconnaissance de produit culturel via photo *Google Mobile : reconnaissance vocale et visuelle ( Goggles ) Sncf direct : panneaux d'affichage gare en tps réel *Soundhound : reconnaissance de musique, même fredonnée *Meebo : messagerie unifiée, always on BFMTV : un télévision interactive et temps réel Calengoo : un calendrier enfin utilisable Cydia : jailbreak *Install0us (cydia) : tester toutes les applis de l'appstore Canabalt : jeu ultra simple, ultra efficace Babo Crash : un Bejeweled plus évolué (un style de Tétris) iShoot 2 : jeu de balistique, se joue aussi à plusieurs via Wifi Labyrinth 2 : jeu de labyrinthe 3D Pipe Mania : pipe *Plants vs zombies : le plus addictif des tower defense
  • 45. Quelques applications remarquables(2/3) Gas Tycoon 2: jeu  de réfléxion addictif *Warfare inc : jeux de stratégie (Age of empire, Redalert, C&C) Pulse news : se tenir au courant, joliment Où sont les toilettes : toilettes les plus proches *Paris-ci la sortie du métro : prendre le bon wagon MyWi (cydia) : on en reparle en bonus ScreenSplitr (cydia) : on en reparle en bonus VNC : client pour prendre le controle d'un ordi à distance My3G (cydia) : fake la 3G en Wifi (pour Skype par ex) IncarcerApp : bloque le bouton home (enfants) SmackTalk : répète tout ce qu'on dit (enfants) Wideo : vidéos en streamings (Kamelot, caméra café...) Ustream Broadcaster : partager ce que l'on filme en tps réel VLC : lire des films ou de la musique dans tous les formats Harmonica ;-)
  • 47. Paris-ci la sortie du métro  
  • 48. Quelques applications remarquables (3/3) Remote : télécommander iTunes Facebook : fb... Fring : messagerie unifiée, SIP et vidéo conférence QuickOffice : suite office + Google docs *Layar : navigateur en réalité augmentée. A tester, le prix du m2 en IDF via meilleurs agents. Drunk snipper : jeu d'adresse humoristique *Rollercoaster extreme : montagnes russes 3D RunKeeper : traçage GPS sur carte et challenges Dragon dictation : reconnaissance de la parole Acrobits Softphone : téléphonie SIP Look-up  : space invader en réalité augmentée !
  • 49. Layar / Meilleurs agents  
  • 51. A - Introduction économique et stratégique B - Une solution pour prototyper Différents languages pour différentes plateformes. Un framework privilégié : Titanium. C - De l'innovation mobile  http://www.flickr.com/photos/coreydorsey/5163930215/
  • 52. Définitions & Clarifications (1/2) OS Mobile :  ensemble de programmes permettant l'interface entre l'utilisateur final et le téléphone. Les plus connus sont iOS (Apple), Android (Google), Symbian et Bada (Nokia), BlackBerry OS. OS & Languages :  iOS => Noyau Mac OSX => dev Objective C et Cocoa. Android => Noyau Linux => dev Java. Cross-Platform : méthode de développement d'une application mobile permettant son déploiement sur plusieurs OS.
  • 53. Définitions & Clarifications  (2/2) Web App : Site Web optimisé pour l'affichage sur navigateur mobile. Accède au GPS (si HTML5). Ne peut être vendu sur un magasin d'applications. Application native : Développée spécifiquement pour un OS mobile. Installée sur le téléphone. Accède aux capteurs du téléphone. Améliore l'experience utilisateur. Se télécharge sur un magasin d'applications. API : accès aux méthodes et propriétés des SDK mobiles.
  • 54. API - SDK - Bibliothèques ... ?? API = Application programming interface SDK = Software development kit
  • 55. Développement iPhone selon Jobs Exige : Installation du SDK iPhone sur Xcode. Construction des IHM sur Interface Builder. Développement du code avec Objective C. Signifie : Apprentissage d ’un outil et d’un langage. Indispensable pour créer des applications natives et accéder aux capteurs du téléphone. Conclusion : Web Apps ou développement cross-platform.
  • 56. ADN classique du développeur Ne pas apprendre de nouveau langage : capitaliser. Ne pas être prisonnier d ’une technologie ou d’une plateforme. Jouer l ’ouverture et la communauté.
  • 57. Les développeurs parlent aux développeurs Objectifs : Develop once, run everywhere (iPhone, Android…) Création d ’applications natives Utilisation des standards du Web (HTML, JS, CSS) Pionniers : jQTouch (Web Apps) / Phone Gap (Web Apps) Game Salad (Natif) : flash pour jeux mobiles. Titanium
  • 58. Progression du plus simple au plus riche, du plus standard au plus spécifique aussi. Du web > qui ressemble à une app > intégré dans une app > une app restreinte > une app riche Game Salad : une app limitée aux jeux simples Xcode Titanium PhoneGap Game Salad jQTouch WebApp
  • 59. jQTouch : une librairie javascript  
  • 61.  
  • 62.  
  • 63. A - Introduction économique et stratégique B - Une solution pour prototyper Différentes approches (applications natives vs. Web Apps). Un framework privilégié : Titanium. C - De l'innovation mobile 
  • 64. Développement selon Titanium Création d ’applications natives :  accès aux capteurs du téléphone. interfaces sophistiquées. Développement du code avec les standards du Web (Javascript, HTML, CSS). Installation du framework Titanium qui compilera le code. Installation des SDK, utilisés de manière transparente: SDK iPhone sur Xcode SDK Android SDK BlackBerry (non testé) Ecriture d ’un code unique (Android, iPhone, RIM).
  • 65. Fiche d'identité :  Framework de développement cross-plaftorm, Open Source &quot;Desktop&quot; et &quot;Mobile&quot; permettant la création d'applications natives. Outils de développement gratuits et un modèle économique construit sur un support aux utilisateurs Premium. 
  • 67. Titanium : un code simplifié 1 Définition de la page 2 Définition d'un élément 3 Logique 4 Ajout dans la page
  • 69. Une API Cross plateforme   
  • 70. App native contre webapp : gmail triche Mise à jour de la webapp gmail d'octobre 2010
  • 71. ...et Digg sort son app native (04/2010)
  • 72. Quelques une de nos réalisations ou idées Avec Titanium... ou sans !
  • 73. Révélation du potentiel photovoltaïque Permettre aux clients d ’évaluer en situation ( face à leur toiture ) l’intérêt de placer des panneaux photovoltaïques sur leur toit. Evaluer la production en kWh, le gain en € (au tarif EDF de rachat pour les particuliers) et le retour sur investissement. Vidéo
  • 74. Révélation du potentiel photovoltaïque
  • 75. Potentiel PV : Making Off 5 jours de développement avec aucune expérience préalable sur le développement mobile et Titanium. 80% de Pomme + C & Pomme + V Accès à trois capteurs de l'iPhone : Accéleromètre, Boussole, GPS. 6 fichiers javascript, 400 lignes de code. 740Ko avec les images.
  • 76. De l'iPhone à l'iPad
  • 77. Comprendre mon énergie Idée : un Linky virtuel pour comprendre de manière ludique les répercussions de ses activités domestiques sur sa consommation 2 parties Jouer avec sa puissance instantanée (allumer ses appareils sans dépasser sa puissance souscrite) Appréhender ses consommations par usage (simuler son installation et voir les variations de sa consommation) Sensibilisation sur un mode ludique Interactivité (glisser/déplacer, transitions…) Réalisme (clignotement, valeurs… sur l ’afficheur Linky) Démo « jouer avec la puissance » Elise, Juan, Edouard & Stéphane, EDF R&D 2010
  • 79. Etiquette énergie L'application Etiquette Energie délivre une estimation personnalisée pour chaque équipement en kWh, euros et en CO2.  Les fiches produits permettent de facilement comparer les produits entre eux.  Brevet français déposé le 01/02/2010 Extension européenne en cours de dépôt Disponible sur l'App Store
  • 81. Etiquette énergie - Page iTunes  
  • 82. A - Introduction économique et stratégique B - Une solution pour prototyper C - De l'innovation mobile  Produire des idées. Analyser l ’existant. Wireframer. Industrialiser. http://www.flickr.com/photos/47181226@N05/5173193974/
  • 83. Maquette        Prototype          Pilote          Pré-série      Production
  • 84. Workshop &quot;Arduino&quot; Produire en une semaine quatre concepts de produits ou services dédiés à l'éco-efficacité énergétique, construits à l'aide du hardware Open Source : Arduino
  • 85. Workshop “Arduino” 4 mock-ups (functional prototypes) 5 days + + + =
  • 86. Workshop “Arduino” Arduino http://www.arduino.cc Arduino is an open-source electronics prototyping platform based on flexible, easy-to-use hardware and software. It's intended for artists, designers, hobbyists , and anyone interested in creating interactive objects or environments . Created in 2005 in Italy
  • 87. Workshop “Arduino” Objectives of the week Process : Multidisciplinary work team “ Learning by doing” process Creative process based on iterative trials and experimentations “ Quick and dirty” prototyping process Functional results by the end of the week Outputs : Concepts of product/service enabling the user to manage his/her energy consumption User-centric design of this product/service
  • 88. Workshop Arduino process Monday identification of internal challenges + Arduino introduction Tuesday team creation + brainstorming Wednesday prototyping day 1 Thursday prototyping day 2 Friday exhibition of the projects
  • 90. Projet &quot;HomeSense&quot; Mettre à disposition d'un binôme &quot;expert - foyer&quot; un kit Hardware Open Source pour qu'ils construisent leurs propres &quot;habitats intelligents&quot; 
  • 91. Homesense Project process http://www.homesenseproject.com/
  • 92. A - Introduction économique et stratégique B - Une solution pour prototyper C - De l'innovation mobile  Produire des idées. Analyser l ’existant. Wireframer. Industrialiser.
  • 93. Benchmark Réaliser un état de l'art des différents services mobiles de visualisation de sa consommation électrique
  • 94. TED-O-Meter Affiche la consommation collectée par la passerelle TED. Trois unités : kWh, CO2, coût. Consommation totale et consommation estimée.
  • 95. Mirawatt T5K Affiche la consommation collectée par la passerelle TED. Change le pas : heure, jour , mois.
  • 96. Meter Read Interface de relève ludique mais inutilisable.
  • 97. British Gas Meter Mode opératoire illustré pour relever son compteur. Relève d ’index personnel.
  • 98. Utility Buddy Multi fluide, coûts pour une période donnée, montant estimé.
  • 99. Utility Buddy Comparaison avec un compétiteur, peu détaillé sur le site.
  • 100. A - Introduction économique et stratégique B - Une solution pour prototyper C - De l'innovation mobile  Produire des idées. Analyser l ’existant. Wireframer. Industrialiser.
  • 101. Wireframing : dessinez c'est gagné ! Une maquette vaut souvent mieux qu'un long discours. Un wireframing est une première matérialisation du concept : Analyse de la faisabilité Communication interne Cahier des charges illustré Un wireframing permet d'éprouver les enchainements fonctionnels de l'application.
  • 102. Wireframing Low Fidelity : MockingBird Intérêt :  Produire rapidement un concept sans se soucier des éléments d'interface.  Un outi l :   Go Mocking Birds . Processus :  Inscription en ligne. Edition d'éléments d'interface. Export de ces éléments au format PDF.
  • 103.  
  • 104.  
  • 105.  
  • 106. Wireframing Collaboratif : Google Docs Intérêts :  Produire à plusieurs un concept d'applications. (pas de versions, pas d ’envoi, travail en équipe), pas de risque de perte, standard (pas d’installation de logiciel ni de téléchargement de documents). Un outi l :  Google Docs. Processus :  Trouver les modèles : dossier partagé  ici Copier, dessiner  ici  et résultat  là Assembler et partager : presse papier et Google docs.
  • 108. Copie d ’un modèle vierge
  • 110. Wireframing High Fidelity : Mock App Intérêts :  Produire un concept d'applications iPhone au plus proche de l'application finale. Un outil   :   Mock App . Processus :  Téléchargez et utilisez les « Stencils » du site. Construisez, sur Powerpoint, la présentation de votre application en intégrant des liens entre les écrans. Enregistrez votre présentation au format PDF et &quot;Uploadez&quot; la sur le site Mock App. Visionez-la, sur votre iPhone avec GoodReader App.
  • 111. Welcome The comments in this file are meant as handy reminders ONLY. You must refer to Apple ’s latest iPhone Interface Guidelines document as the definitive guide in the matter. If there ’s a UI element you can’t find here, email me at [email_address] and I’ll do my best to include it in the next release. Hello, This library file contains iPhone UI elements you ’ll want to copy and paste into your MockApp Template file. Vector format: Most UI elements you ’ll find here have been recreated in vector format so you can edit their text and even modify their shape, color, gradient, etc. Grouping / ungrouping: Note that most of the UI elements have been created by grouping several shapes together. You may want to copy and paste the UI element you ’re working on into your app template before ungrouping it. That way you always keep a clean grouped copy here. Enjoy MockApp! Dotan Saguy
  • 112. Les limites du wireframing Bel aspect mais aucune logique (programmationnelle). Les composants complexes (pickers, sliders…) ne fonctionnent pas (liste de choix impossibles). Les capteurs ne sont pas accessibles. Peut être chronophage. Se limiter au Low-Fi dans le cadre d'une petite application. Idée de brouillon. (Pas le moment pour discuter de la charte graphique).
  • 113. A - Introduction économique et stratégique B - Une solution pour prototyper C - De l'innovation mobile  Produire des idées. Analyser l ’existant. Wireframer. Industrialiser.
  • 114. Industrialisation raisons et méthodes Raisons Se concentrer sur la Recherche et non le Développement Confier à des spécialistes la distribution sur l'App Store S'assurer de la QOS du code proposé   Méthodes Cahier des charges papier Cahier des charges de type Wireframing
  • 115.  
  • 116.  
  • 117.  
  • 118.  
  • 119.  
  • 120.  
  • 121. Fin de la partie 1 :  Eléments de contexte
  • 122. 1 - Eléments de contexte A - Introduction économique et stratégique.B - Une solution pour prototyper.C - De l'innovation mobile. 2 -  Apprivoiser les applications : 2 TDs A - Un beau wireframing ? B - Tous les outils. C - Coder par l'exemple. 3 - Workshop & bonus Plan du cours
  • 123. 2 - Apprivoiser les applications : 2 TDs A - Un beau wireframing (le vôtre !)B - Tous les outils Titanium Developer Editeur (NetBeans) Export iPhone, Android Kitchensink (dans l ’émulateur et en IPA)  Aide en ligne (Documentation et Forum) C - Coder par l'exemple Anatomie d'un code d'application Titanium Construire onglet, label, bouton, slider et tester sur l'émulateur Capter la position géographique, afficher sur une carte... [GPS] Capter l'orientation, la pente [boussole, Accéleromètre] Construire l'appli complète avec ses 4 onglets, calculer les gains Exporter vers iPhone Emuler Android > Plan de l'après-midi
  • 124. A - Un beau wireframing (le vôtre !) B - Tous les outils C - Coder par l'exemple http://www.flickr.com/photos/35824647@N03/5161011400/
  • 125. Construction de votre application en utilisant Powerpoint et Mockapp Téléchargez et utilisez les « Stencils » du site mockapp.com Construisez, sur Powerpoint, la présentation de votre application en intégrant des liens entre les écrans. Enregistrez votre présentation au format PDF. Uploadez sur le site votre présentation au format PDF. Login : majeure.strategie.2009 et PWD : charles http://mockapp.com/u/your-file-name.pdf Regardez sur votre iPhone avec GoodReader App la maquette de votre application
  • 126. Welcome The comments in this file are meant as handy reminders ONLY. You must refer to Apple ’s latest iPhone Interface Guidelines document as the definitive guide in the matter. If there ’s a UI element you can’t find here, email me at [email_address] and I’ll do my best to include it in the next release. Hello, This library file contains iPhone UI elements you ’ll want to copy and paste into your MockApp Template file. Vector format: Most UI elements you ’ll find here have been recreated in vector format so you can edit their text and even modify their shape, color, gradient, etc. Grouping / ungrouping: Note that most of the UI elements have been created by grouping several shapes together. You may want to copy and paste the UI element you ’re working on into your app template before ungrouping it. That way you always keep a clean grouped copy here. Enjoy MockApp! Dotan Saguy
  • 127. Tab Bar Icon Library Music Videos Podcasts Search More Music Videos Podcasts Search More iTunes U Downloads Ringtones iTunes U Downloads Ringtones Genres Genres Artists Artists Audiobooks Albums Audiobooks Albums Compilations Composers Playlist Compilations Composers Playlists 6 More More Most Recent Featured Favorites Top Rated Top Rated Most Recent Featured Favorites Updates Categories Categories Updates Playlists Subscriptions Subscriptions My Videos My Videos Playlists Voicemail Keypad Keypad Contacts Contacts Voicemail World Clock Alarm Stopwatch Timer Timer World Clock Alarm Stopwatch Clock App tab bar controller . iDisk App tab bar controller . iDisk Recents Shared Files Public Folders Recents Public Folders Shared Files iDisk iTunes store and iPod tab controllers + icons (including “table view” black on white versions) Youtube , App Store and Phone additional tab controller + icons (including “table view” black on white versions) More tab bar icons coming soon!
  • 128. Action sheets, Bubbles Action sheets An action sheet the user a set of choices for a task he/she just selected. It appears at the bottom of the screen by sliding upwards and over the current view. Action sheets can be used either to provide a selection of ways a task can be completed or to get confirmation before completing a potentially destructive task (i.e. delete or cancel). The most important or common action should appear as the top button. If the action is destructive (i.e. Delete), a red button might be called for. Action sheet Primary action you can also do this or maybe this or why not that Cancel Cancel Delete Bubbles Paste Select Select All MockApp I ’m hoping this one will help put MockApp on the map ;-) OK Delete 0:00 0:28 Play Record
  • 129. Regular Table Views Regular Table Views Regular table views (as opposed to grouped table views - next slide) are most useful to display long lists of items such as messages, contacts, etc. which users must easily scroll. Each row is an item. The list can be divided into sections (i.e. alphabetical) separated by grey headers as below. Hierarchical items let the user “drill down” and are indicated by a ‘>’ icon to the right of the item. M N O A B C D E F G H I J K L M N O P Q R S T U This is a regular table view Divided into sections (the letters are the sections) and can contain several data elements (image, text, etc.) Each row is an item of the list This is a regular table view With icons like in The “more” tab of the iPod app Podcasts G Pete Gardener Tess Grady M.J. Grey Jenn Guggenheim H Sara Hashimoto A B C D E F G H I J K L M N O P Q R S T U V W Em Hirsch Unread Item to delete or move Ready to be deleted Delete First Last name mobile it highlights When pressed Not pressed yet Current status 29
  • 130. Date, Time and other Pickers Date and Time Pickers Sat Oct 3 Sun Oct 4 Today Tue Oct 6 Wed Oct 7 7 8 9 10 11 50 55 00 05 10 AM PM August September October November December 03 04 05 06 07 2007 2008 2009 2010 2011 7 8 9 10 11 45 46 47 48 49 AM PM 28 29 30 mins 31 32 0 hours 1 2 Value Picker First & default value Second value Third value Analogous to “pull-downs” frequently used on websites and desktop applications.
  • 131. A - Un beau wireframing (le vôtre !) B - Tous les outils Titanium Developer Editeur (NetBeans) Kitchensink (dans l ’émulateur et en IPA)  Aide en ligne (Documentation et Forum) C - Coder par l'exemple http://www.flickr.com/photos/muzuto/2921028949/
  • 132. Tours de main Créer un nouveau projet Importer le nouveau Kitchen Sink Mettre l'application de travail dans le DOCK Utiliser le KS déjà compilé - sans avoir à le recompiler Récupérer la nouvelle IPA de KS et la mettre en ligne pour que les étudiants l'installent sur leur téléphone
  • 133. To get the mobile application in iphone to close when the home button is clicked instead of continuing to run in the background first build your project for iphone. Next go into the iphone's build folder and copy the info.plist file build/iphone/Info.plist.  P aste this file in the root directory for the whole project (the folder above the Resources folder). Edit the file with a text editor (not xcode nor property list editor) and add this xml code before the  </dict>  element : <key>UIApplicationExitsOnSuspend</key><true/> ans Save the file. Delete all files in the build/iphone directory and rebuild. Now it will close the application instead of suspending it to the background. answered 3 months ago by  John Saterfiel permalink Tester ses modifs très rapidement
  • 134. Lancement Titanium Liste Projets Nouveau Projet Import Projet
  • 135. Création d ’un nouveau projet
  • 136. Import d ’un nouveau projet Emplacement Projet Existant
  • 137. Import d ’un nouveau projet
  • 138. Exécution d ’un projet Messages Console Choix SDK
  • 139. Projet simulé (iPad) Simulateur iPad
  • 141. A - Un beau wireframing (le vôtre !) B - Tous les outils Titanium Developer Editeur (NetBeans) Kitchensink (dans l ’émulateur et en IPA)  Aide en ligne (Documentation et Forum) C - Coder par l'exemple
  • 142. IDE Netbeans Code dans Ressources
  • 148. App.js, page principale d'un nouveau projet Titanium
  • 149. A - Un beau wireframing (le vôtre !) B - Tous les outils Titanium Developer Editeur (NetBeans) Kitchensink (dans l ’émulateur et en IPA)   Aide en ligne (Documentation et Forum) C - Coder par l'exemple
  • 150. KitchenSink Vidéo de présentation disponible : 6'25''. KitchenSink doit se trouver accessible dans Titanium developer.  Il est très pratique de le retrouver en IPA dans son iPhone car il devient utilisable sans changer de projet titanium.
  • 151. A - Un beau wireframing (le vôtre !) B - Tous les outils Titanium Developer Editeur (NetBeans) Export iPhone, Android Kitchensink (dans l ’émulateur et en IPA)  Aide en ligne (Documentation et Forum) C - Coder par l'exemple
  • 152. Bibliothèque des API  http://developer.appcelerator.com/apidoc/mobile/latest  
  • 153. Communauté en ligne http://developer.appcelerator.com/questions/  
  • 154. A - Un beau wireframing (le vôtre !)B - Tous les outils C - Coder par l'exemple Anatomie d'un code d'application Titanium Construire onglet, label, bouton, slider et tester sur l'émulateur Capter la position géo, afficher sur une carte... [GPS] Capter l'orientation, la pente [boussole, Accéleromètre] Construire l'appli complète avec ses 4 onglets, calculer gains  Exporter vers iPhone, vers Android (émulateur) http://www.flickr.com/photos/peterbox/175801757/
  • 155.  
  • 156. On se met à coder ? Une appli de révélation du potentiel solaire ?  (un exemple complet)
  • 157. Les fichiers pour coder Pendant les 3 premières étapes, notre fichier de travail est, myApp.js Projet vierge myApp1.js myApp2.js myApp3.js myApp4.js app-1tab.js Pour travailler myApp.js myApp.js myApp.js myApp.js app.js En fin d'étape vous myArea.js myLocation.js myOrientation.js myEarnings.js app-4tabs.js En fin d'étape nous area.js location.js orientation.js earnings.js app-4tabs-final.js
  • 158. Anatomie d'un code Titanium Syntaxe javascript (permissive) app.js est le fichier lancé en premier (le &quot;main&quot; en C) Il peut appeler d'autres fichiers .js (inclusion ou appel) Dans le cas d'un appel, il n'a lieu qu'une fois (création/instanciation) même si on change d'onglet et qu'on y reviens par la suite. Les contexte des variables, dans le cas d'un appel, n'est pas conservé : utilisation de variables globales par exemple. (Ti = Titanium) comme préfixe aux éléments du SDK Titanium
  • 159. Anatomie (2/2) Récupération de l'espace d'affichage : var win = Titanium.UI.currentWindow; Création/déclaration différents éléments (boutons, labels...) var toto = Titanium.UI.createView({ height:200, width:200 }); Mise en place des évènements, de la logique (au clic, saisie...) toto.addEventListener('return', function(e){ alert('coucou') } ); Instanciation des éléments, ordre win.add(toto);
  • 160. Rappel 1 Définition de la page 2 Définition d'un élément 3 Logique 4 Ajout dans la page
  • 161. A - Un beau wireframing (le vôtre !)B - Tous les outils C - Coder par l'exemple Anatomie d'un code d'application Titanium Construire onglet, label, bouton, slider et tester sur l'émulateur Capter la position géo, afficher sur une carte... [GPS] Capter l'orientation, la pente [boussole, Accéleromètre] Construire l'appli complète avec ses 4 onglets, calculer gains  Exporter vers iPhone, vers Android (émulateur)
  • 162. Etape 1 : La surface du panneau  Utiliser un slider pour saisir la surface du panneau solaire.  En fonction de la surface choisie, modifier la taille de l'image de panneau solaire. Afficher la valeur choisie et la stocker dans une variable globale (pour l'utiliser pour le calcul ensuite)
  • 163. 1 - Quoi coder : de l'UI pure ! Renommer myApp1.js en myApp.js Créer une view, un label    sans se soucier de leur positionnement (ils vont se centrer) et un slider en bas (bottom:40) Donner une taille par défaut à la view et y insérer l'image du panneau solaire (backgroundImage:images/pv.png), afficher une valeur par défaut dans le label (en m2) et une plage et une valeur par défaut au slider (de 10 à 30m2) Créer un évènement sur le slider (qui se déclenche dès qu'on le bouge) qui affiche sa valeur dans le label (label.text = slider.value) et modifier la taille de la view contenant l'image du panneau solaire (view.width = slider.value * 10). Garder la valeur en global (dans Ti.App.area). Ajouter la view, le label et le slider dans la window (window.add) Liens vers la docs Ti.UI.currentWindow Ti.UI.createView Ti.UI.createLabel Ti.UI.createSlider slider.addEventListener win.add Exemples kitchenSink slider.js 2d_transform.js (juste la 1ère view) Résolutions, - iPhone 3GS : 320 x 480 - iPhone 4G : 640 x 960 - iPad : 768 x 1024
  • 164. 1 - Focus sur... Un code source typique : montrer un code avec les éléments puis les évènements puis les ajouts à la window Attention aux caractères accentués et aux majuscules. Indenter. Tester. Placer les valeurs en global : Ti.App.area Un évènement et un callback: slider.addEventListener('change',function(e) {...}); Modifier une propriété : view.width = 45; view.height = valSlider * 10; // 100 à 300
  • 165. Vous devriez obtenir... Il vous reste à  garder votre code  en le renommant :            Renommer myApp.js => myArea.js puis à  tester notre version  en la dupliquant (sur Aptana, copy/paste) puis en la renommant :              Dupliquer area.js => myApp.js Pour préparer l'étape 2, renommer le fichier vierge de départ au nom de notre fichier de travail            Renommer myApp2.js => myApp.js
  • 166. A - Un beau wireframing (le vôtre !)B - Tous les outils C - Coder par l'exemple Anatomie d'un code d'application Titanium Construire onglet, label, bouton, slider et tester sur l'émulateur Capter la position géo, afficher sur une carte... [GPS] Capter l'orientation, la pente [boussole, Accéleromètre] Construire l'appli complète avec ses 4 onglets, calculer gains  Exporter vers iPhone, vers Android (émulateur)
  • 167. Etape 2 : L'ensoleillement (le lieu) Capter la position géographique avec le GPS ou donner la possibilité de saisir n'importe quelle adresse et de la géocoder pour obtenir sa position géographique (forward-géocoder l'adresse). Afficher une carte Google map centrée sur la position trouvée. Afficher le nom de la ville englobant la position (réverse-géocoder l'adresse). Afficher un indicateur de progression tant que la carte n'est pas chargée.   Tester dans l'émulateur à chaque étape !
  • 168. 2 - Quoi coder : géoloc et mapview Créer une view de type Map sur la moitié haute (bottom:120). Créer une searchBar au dessus de la carte (top:80 et zIndex:2) et cachée (visible:false) Créer 2 button (en bas), un pour taper une adresse, un pour localiser avec le GPS. Créer un évènement click sur le button d'adresse qui découvre la searchBar (search.show()) et affiche le clavier (search.focus()). Créer un évènement return sur la searchBar (search.addEventListener('return'...) qui déclenche une géolocalisation (forward...) de l'adresse (search.value). Créer ensuite un callback (qui se déclenche donc quand la géoloc est finie) qui place mapView sur les lon/lat trouvées (mapview.setLocation) et qui cache la searchBar (search.hide()) et le clavier (search.blur()). Créer un évènement click sur buttonGPS qui trouve la position géo de l'iPhone (getCurrentPosition). Créer ensuite un callback (qui se déclenche donc quand la géoloc est finie) qui garde cette position en global (Ti.App.longitude = e.coords.longitude...) et place la mapView sur les lon/lat trouvées. Ajouter tous les éléments dans la window (mapview, search, buttonAddress, buttonGPS)   Liens vers la docs Ti.Map.createView Ti.UI.createSearchBar Ti.UI.createButton Ti.Geolocation. forwardGeocoder mapview.setLocation Ti.Geolocation. getCurrentPosition Exemples kitchenSink geolocalisation.js map_view.js searchbar.js
  • 169. 2 - Focus sur... Localiser une adresse venant d'un champs de saisie Ti.Geolocation.forwardGeocoder(search.value, function(evt){      Ti.App.longitude = evt.longitude;      Ti.App.latitude = evt.latitude; Localiser l'iPhone (GPS, Wifi ou GSM) Ti.Geolocation.getCurrentPosition(function(e) {      Ti.App.longitude = e.coords.longitude;      Ti.App.latitude = e.coords.latitude; Placer la carte sur des coordonnées géographiques mapview.setLocation({latitude:Ti.App.latitude, longitude:Ti.App.longitude, animate:true});
  • 170. Vous devriez obtenir... Il vous reste à garder votre code en le renommant :            Renommer myApp.js => myLocation.js puis à tester notre version  en la dupliquant (sur Aptana, copy/paste) puis en la renommant :              Dupliquer location.js => myApp.js Pour préparer l'étape 3, renommer le fichier vierge de départ au nom de notre fichier de travail            Renommer myApp3.js => myApp.js
  • 171. A - Un beau wireframing (le vôtre !)B - Tous les outils C - Coder par l'exemple Anatomie d'un code d'application Titanium Construire onglet, label, bouton, slider et tester sur l'émulateur Capter la position géo, afficher sur une carte... [GPS] Capter l'orientation, la pente [boussole, Accéleromètre] Construire l'appli complète avec ses 4 onglets, calculer gains  Exporter vers iPhone, vers Android (émulateur)
  • 172. Etape 3 : L'orientation du toit Créer un label en bas pour afficher les valeurs et 4 button pour faire varier les valeurs à la main. Capter la pente (en degrés) de l'iPhone via l'accéléromètre ou, à défaut (sur l'émulateur par exemple), donner la possibilité de modifier la pente avec des button haut et bas. Capter l'orientation (en degrés) de l'iPhone avec la boussole ou, à défaut  (iPhone 2G et 3G par exemple), permettre de modifier l'orientation avec des button gauche et droite. Créer un label pour afficher régulièrement (timer) les 2 valeurs et les stocker en global (Ti.App.slope, Ti.App.heading) Pour le fun, afficher une view d'un panneau solaire et lui appliquer des rotations en z (pente) et en x (orientation)
  • 173. 3 - Quoi coder : accéléromètre et boussole Créer une view sans positionnement (donc au centre) contenant une image de panneau solaire. Créer 4 button en les positionnant sur les 4 bords (left, right, top et bottom chacun). Créer un label pour afficher la pente et l'orientation Créer des évènements sur chacun des button qui modifient les Ti.App.slope (- 5 pour buttonBottom par ex) et Ti.App.heading  Capter l'accéléromètre et récupérer uniquement la valeur z pour pouvoir calculer la pente. Stocker la résultat du calcul en global (Ti.App.slope). Capter la boussole et récupérer uniquement l'orientation (e.heading.magneticHeading) et la stocker en global (Ti.App.heading). Mettre à jour régulièrement (timer) le label avec les valeurs (label.text = Ti.App.heading..) et modifier le positionnement de la view 3D. Ajouter tous les éléments dans la window   Liens vers la docs Titanium.Accelerometer. addEventListener Ti.Geolocation. getCurrentHeading Exemples kitchenSink button.js accelerometer.js geolocation.js (heading) 3d_transform.js (animate)
  • 174. 3 - Focus sur... Concaténer une chaine de caractères label.text = 'Pente : ' + Ti.App.slope + 'degres' + 'orientation : &quot; + Ti.App.heading +  ' degres'; Un évènement sur un bouton de réglage manuel buttonLeft.addEventListener('click', function(){ Ti.App.heading += 20; if (Ti.App.heading > 359) {Ti.App.heading = 5;} }); Capter la pente fonction de l'accéléromètre (et calculer !) Ti.Accelerometer.addEventListener('update',function(e){      Ti.App.slope = Math.round(Math.acos(-e.z) * 180 / Math.PI); }); Capter l'orientation en fonction de la boussole Ti.Geolocation.showCalibration = false; // Avoid calibration // fire event when angle exceeds this value Ti.Geolocation.headingFilter = 2; Ti.Geolocation.addEventListener('heading', function(e){      Ti.App.heading = Math.round( e.heading.magneticHeading);
  • 175. 3 - Focus sur... (suite) Fun en 3D (panneau solaire en mouvement) setInterval( function() {      var matrix = Ti.UI.create3DMatrix();      matrix = matrix.rotate(Ti.App.heading?Ti.App.heading:0,0,1,0); // '?' to avoid crash with iSimulate      matrix = matrix.rotate((90 - Ti.App.slope),1,0,0);           var animation = Titanium.UI.createAnimation();      animation.transform = matrix;      animation.duration = 200;      view.animate(animation); },200);
  • 176. Vous devriez obtenir... Il vous reste à  garder votre code  en le renommant :            Renommer myApp.js => myOrientation.js puis à  tester notre version  en la dupliquant (sur Aptana, copy/paste) puis en la renommant :              Dupliquer orientation.js => myApp.js Pour préparer l'étape 4, renommer le fichier vierge de départ au nom de notre fichier de travail            Renommer myApp4.js => myApp.js
  • 177. A - Un beau wireframing (le vôtre !)B - Tous les outils C - Coder par l'exemple Anatomie d'un code d'application Titanium Construire onglet, label, bouton, slider et tester sur l'émulateur Capter la position géo, afficher sur une carte... [GPS] Capter l'orientation, la pente [boussole, Accéleromètre] Construire l'appli complète avec ses 4 onglets, calculer gains   Exporter vers iPhone, vers Android (émulateur)
  • 178. Etape 4 : Calculer et assembler l'appli importer une bibliothèque javascript (nrjProduction.js) dans le fichier myApp.js. Ce fichier contient les calculs et les valeurs necessaires pour calculer les gains. Lancer régulièrement le calcul pour  récupérer les 3 résultats annuels: - la production en kWh - la réduction de CO2 en kg - le gain en Euros en cas de revente et les afficher dans le label. Assembler les 4 tabs dans app.js Tester l'application complète !
  • 179. 4 - Quoi coder : inclusion et tabs Inclure nrjProduction.js dans myApp.js (Titanium.include( 'nrjProduction.js');). Créer un timer (setInterval()) qui lance périodiquement le calcul et affiche les résultats dans le label. Le calcul, contenu dans nrjProduction.js, se trouve dans une function qui se nomme compute(). Les paramètres n'ont pas besoin d'être passé à cette fonction (ils sont globaux : Ti.App.area, .longitude, .latitude, .heading, .slope). Par contre cette fonction retourne un objet qui contient les 3 résultats : resultat.outcome,  resultat.co2 et resultat.earnings. Les afficher dans le label (les mettre bout à bout : les concaténer) Renommer myApp.js => myEarnings.js.  Pour assembler l'application avec des onglets, récupérer app-4tabs.js et la renommer app.js. Reste à nommer les tabs (title) , leur affecter une icone chacun (icon) : area.js : images/house.png, location.js : images/pin.png, orientation.js : images/compass.png, earnings.js : images/brightness.png. L'application se base sur nos fichiers. Si vous voulez tester certains des vôtres (myArea.js par exemple), il suffit de modifier les url: en remplaçant area.js par myArea.js   Liens vers la docs Titanium.include Titanium.UI.createTab Titanium.UI.createWindow Exemples kitchenSink js_include.js tab_groups.js
  • 180. 4 - Focus sur... Importer une bibliothèque js externe (fichier javascript) Ti.include('nrjProduction.js'); Appeler la fonction de la bibliothèque et voir les résultats var result = compute(); label.text = result.outcome + result.co2 + result.earnings; Créer des onglets et une window dans chacun var tabGroup = Ti.UI.createTabGroup( {      barColor:'#336699' }); var win1 = Ti.UI.createWindow({     url:'area.js' // ou le votre : myArea.js }); var tab1 = Ti.UI.createTab({      icon:'images/house.png',     title:'area',     window:win1 });
  • 181. Vous devriez obtenir... Tester en 2 fois : le calcul et son affichage dans myApp.js puis l'assemblage des tabs dans app.js et les 4 tabs : area.js, location.js, orientation.js et earnings.js
  • 182. A - Un beau wireframing (le vôtre !)B - Tous les outils C - Coder par l'exemple Anatomie d'un code d'application Titanium Construire onglet, label, bouton, slider et tester sur l'émulateur Capter la position géo, afficher sur une carte... [GPS] Capter l'orientation, la pente [boussole, Accéleromètre] Construire l'appli complète avec ses 4 onglets, calculer gains  Exporter vers iPhone, vers Android (émulateur)
  • 183. 5.1 - Une icone et une image d'accueil Paufiner un peu l'application pour la rendre présentable  : Affecter une icone pour l'application (resources/images/appicon.png) en choisissant l'onglet Edit de Titanium Developer puis en cliquant sur le petit dossier à droite du champs &quot;Application Icon&quot;.  Copier l'image à faire apparaitre comme écran d'accueil de l'app (resources/images/Default.png) dans resources/iphone et dans resources/android Tester dans l'émulateur. Profiter pour faire durer (setTimeout) l'affichage de l'image d'accueil et lui ajouter un effet de transition.
  • 184. 5.1 - Focus sur... Ajouter un effet de transition à l'ouverture de l'app et faire durer l'affichage de l'image d'accueil 5 secondes de plus: setTimeout(function(){      tabGroup.open({          transition:Titanium.UI.iPhone.AnimationStyle. FLIP_FROM_LEFT      }); }, 5000);
  • 187. Fin de la partie 2 :  Apprivoiser les applications
  • 188. 1 - Eléments de contexte A - Introduction économique et stratégique.B - Une solution pour prototyper.C - De l'innovation mobile. 2 -  Apprivoiser les applications A - Un beau wireframing ? B - Tous les outils. C - Coder par l'exemple. 3 - Workshop & bonus Plan du cours
  • 189. 3 - Workshop Maquettage et développement, en équipe, d ’applications mobiles natives. A - Les équipes Constitution, matos Choix du sujet B - Déroulement Lo-Fi & priorisation Interactions & construction Production d'éléments & logique iTunes, wireframe run & assemblage C - Conclusion Livraison des applications Bonus Track > Plan de la journée
  • 190. &quot;Blood sweat tears&quot;, why ? Raisons Techniques : Nécessité, de prototyper ses idées : le maquettage ne permet pas de tester avec efficacité. Faisabilité : User expérience. Faisabilité : Technique. Raisons Symboliques : Crédibilité auprès des personnes à encadrer. Meilleure compréhension / bienveillance de vos interlocuteurs techniques (jargon) (artisanat dans le développement). Possibilité de couvrir ou comprendre toute la chaîne de production, de l ’idée jusqu’à la réalisation.
  • 191. Nos objectifs pédagogiques Appréhender l ’ éco système compétitif de l’Internet Mobile. Identifier les facteurs clés de succès des applications mobiles dans un contexte de surabondance d ’applications. Proposer des idées d ’applications innovantes . Vous livrer des outils pour concrétiser vos idées d'applications Mobiles. Découvrir l ’intérêt du wireframing et ses limites. Comprendre les caractéristiques techniques des applications natives vs. Web Apps (construction d ’Interfaces Utilisteurs sophistiquées ; intégration d’applications tierces). Prototyper une application iPhone en utilisant les standards du Web et un framework performant : Titanium. Compiler puis exporter son application sur son mobile pour convaincre d ’éventuels décideurs ou investisseurs.
  • 192. A - Les équipes Constitution, matériel Choix des sujets B - Déroulement C - Conclusion
  • 193. Une équipe de 2 personnes Nom de l'équipe  Développer à 2, sur le même Mac, la plupart du temps  Bien gérer son temps et rendre au fur et à mesure des périodes les éléments demandés. Tout est expliqué ici . 2 présentations devant les autres groupes : une du wireframing, l'autre de l'application. 6 choses à rendre : la page iTunes, le wireframing Lo-Fi (photo), la liste des exemples Kitchensink sur lesquels vous vous appuyez, la priorisation des fonctions à développer, l'application elle même, une vidéo de l'application. Une méthode de rendu unique : un dossier Google Docs par équipe, partagé avec nous.
  • 194. 6 équipes de 2 : Nom du groupe : 15°5, Jean-Luc et Véronique : SaoulCool,  Priorisation : xx, xx, xx, (xx) Nom du groupe : DreamTeam, David et Fabienne : DiGUGRAVE,  Priorisation : xx, xx, xx, (xx) Nom du groupe : OléOlé, Maryem et Bernadette : MetroSwing,  Priorisation : xx, xx, xx, (xx) Nom du groupe : Simon et Gaëlle : DrinkMe,  Priorisation : xx, xx, xx, (xx) Nom du groupe : Julie et Leïla : InYourMind,  Priorisation : xx, xx, xx, (xx) Nom du groupe : Falafel, Yasmine et François-Xavier : P-Dakar,  Priorisation : xx, xx, xx, (xx)
  • 195. Du matériel Un Mac pour développer (XCode, Titanium, éditeur)  Un PC/Mac avec une suite graphique ou picpick (par exemple) pour fabriquer de jolis éléments [un iPhone pour tester (iSimulate ou export IPA et kitchensink)]
  • 196. A - Les équipes Constitution, matériel Choix des sujets B - Déroulement C - Conclusion
  • 197. Choix d'un cas par équipe Cas 1 - Petite entreprise, site mobile “Le Cristal De Sel” Construire une application mobile pour un restaurant Parisien. Cas 2 - Grande entreprise, outil “Le juste prix des charges&quot; Proposer une application de partage du coût des charges d'une location saisonnière. Cas 3 - Evènement, témoin “Route du Rhum” Imaginer une application de suivi d'un évenement sportif comme la Route du Rhum. > Télécharger les 3 cas en PDF
  • 198. Cas 1 - Le Cristal de Sel Description Le cristal de sel est un restaurant de bonne tenue situé dans le 15e arrondissement de Paris.  Ce restaurant dispose d ’une clientèle d’habitués, à la recherche d’un dîner de bonne qualité et d’un service irréprochable, pour un budget mesuré. Les midis, le restaurant dispose également d’une clientèle travaillant à proximité et qui apprécie une formule à 18 euros plat et dessert / entrée. Le chef, Karil Lopez, et le responsable de la salle Damien Crépu ont identifié l ’importance des technologies de l’information et de la communication pour capter, informer puis conserver une clientèle. Le site web : http://www.lecristaldesel.fr est soigné et permet de partager la carte et les actualités du restaurant.  Une page de Fan Facebook http://www.facebook.com/lecristaldesel est également très active et créé un lien agréable entre le chef et ses convives.  Consignes Site Web, page de Fan Facebook, le cristal de sel sait se positionner sur les médias sociaux classiques. Aujourd ’hui l’Internet Mobile constitue pour Karil et Damien un nouveau support à investiguer permettant d’attirer une nouvelle clientèle ou de maintenir un lien avec une clientèle existante. Votre mission, si vous l’acceptez, sera donc de dessiner puis développer la maquette de l’application mobile le cristal de sel.
  • 199. Cas 2 - Le juste prix des charges Description Lors d ’une location de vacances, du prêt d’un logement ou d’une voiture par un ami, il est toujours délicat d’estimer les charges que l’on doit en tant qu’occupant ou utilisateur au moment du rendu des clés. Et même s’il s’agit d’un prix convenu à l’avance, il est toujours intéressant d’estimer ce que l’on a vraiment consommé. Pour aller plus loin, on peut même avoir envie de se fier à une application qui vaut preuve (photos horodatées des compteurs) pour s'acquitter de ses charges. Cette question simple peut tout à fait s’imaginer pour l’eau, l’électricité, le gaz ou l’essence par exemple. Consignes Imaginez une application pratique, aisée d ’utilisation, astucieuse voire ludique qui compare des indices de compteurs avant et après un séjour ou un prêt. Tenez compte des contrats souscrits, du temps passé, du prix fluctuant des énergies, du nombre d’occupants peut être, du temps qu’il fait pourquoi pas (corrélation du chauffage avec la météo), de l’usure s’il le faut et présentez graphiquement des résultats qui pourront être envoyés au prêteur, simplement consultés, ou même utilisés à titre de challenge sur des réseaux sociaux ! Et pourquoi pas en faire le chiffreur CO2 de vos vacances ?
  • 200. Cas 3 - La route du Rhum Description La route du rhum est un événement nautique incontournable : une course en solitaire, sans escale et sans assistance de 3510 miles entre Saint-Malo et Pointe-à-Pitre. Comme tout évènement sportif de ce type (Paris Dakar) un site Interne t fourni avec détails les prestations des participants. Autrefois publié de manière déclarative par les organisateurs ou les skippers, le site propose désormais des indications de positionnement géographique ou d ’allure automatiquement collectés par les équipements de bord des voiliers.  Consignes Votre mission, si vous l ’acceptez, est de devenir fan d’un des participants de l'évènement : Julien Mabit . En tant que fan, vous souhaitez suivre en temps réel ses actualités, son classement, son positionnement GPS depuis votre téléphone. Vous choisissez dont de construire une application mobile pour suivre Julien dans sa course en solitaire.
  • 201. A - Les équipes B - Déroulement Lo-Fi Choix des éléments Hi-Fi Codage C - Conclusion http://www.flickr.com/photos/dusseldorfer/4699321174/
  • 202. Période 1 : 9h00 à 10h30h Choisir son équipe, la nommer et choisir son cas. Ecrire la page iTunes de son appli. Concevoir les quelques écrans de son application en Lo-Fi, penser à une vue d'ensemble, sons trop de précisions.
  • 203. A - Les équipes B - Déroulement Lo-Fi Choix des éléments Hi-Fi Codage C - Conclusion
  • 204. Période 2 : 10h45 à 12h15 Choisir les éléments nécessaires (boutons, cartes géographiques...) en s'aidant de l'application Kitchensink.  Découper et coller ou dessiner ces éléments sur le wireframing Lo-Fi. Identifier les exemples Kitchensink par leurs noms sur le wireframing. Prendre en photo le wireframing et l'ajouter à la présentation powerpoint de rendu PRESENTATION à tous de votre wireframing (photo) et de votre page iTunes
  • 205. A - Les équipes B - Déroulement Lo-Fi Choix des éléments Hi-Fi Codage C - Conclusion
  • 206. Période 3 : 13h30 à 15h00 Collecter les exemples Kitchensink retenus et les coller dans son propre projet Titanium Créer les différents écrans de l'application (un ecran = un fichier javascript) et les remplir des éléments choisis dans les exemples retenus. Positionner les éléments les uns par rapport aux autres dans les écrans. Ajouter les textes et images ou au moins leurs emplacements. PRIORISATION des fonctions qui seront vraiment développées
  • 207. A - Les équipes B - Déroulement Lo-Fi Choix des éléments Hi-Fi Codage C - Conclusion
  • 208. Période 4, 5 et 6: 15h15 à 16h45 et de 9h à 12h15 vendredi Prise en main de l'environnement Titanium : Titanium developpeur, Netbeans, l'émulateur iPhone développement des 3 fonctions choisies
  • 209. Période 7 : 13h30 à 15h00 Abandon des fonctions bloquantes Intégration des différents écrans de l'appli débugage et paufinage 
  • 210. A - Les équipesB - Déroulement C - Conclusion Livraison des applications Bonus Track http://www.flickr.com/photos/loswl/2422533408/
  • 211. Rendu de fin de workshop PRESENTATION à tous de son application Livraison de l'application : tous le dossier &quot;resources&quot; du projet zippé. Livraison du Powerpoint de rendu , complet.
  • 212. A - Les équipesB - Déroulement C - Conclusion Livraison des applications Bonus Track Présenter son application Distribuer son application http://www.flickr.com/photos/loswl/2422533408/
  • 213. Veency (Cydia) / VNC (Mac/Pc/Linux) Transmission temps réel de l'écran de l'iPhone en Wifi vers un ordinateur fixe connecté à un vidéo projecteur. Lag un peu. Ne transmet pas les vidéos jouées sur l'iPhone.
  • 214. Screensplitr (Cydia) / iDemo (Mac/Pc, $9,99) Transmission temps réel de l'écran de l'iPhone en Wifi vers un ordinateur fixe connecté à un vidéo projecteur. Permet de transmettre même des vidéo lues sur l'iPhone (mode appareil photo par exemple). Ne fonctionne pas en iOS4.1 pour l'instant.
  • 215. ScreenRecorder (Cydia, 2$) Enregistrement vidéo de l'écran de l'iPhone depuis l'iPhone.
  • 216. MyWi (Cydia, $20) Transformer sa 3G en point d'accès Wifi. Utile aussi lors de démo avec aucun résau wifi à proximité. Permet l'utilisation de Screensplitr, de Veency et d'iSimulate. Application proposée en natif sur Android : Point d'accès Mobile.
  • 217. Incarcérer un iPad pour une démo libre Incarcerapp  (Cydia, gratuit) Berceau        ( RAM Mount ) iScheduler   (Cydia, $7,99)  
  • 218. A - Les équipesB - Déroulement C - Conclusion Livraison des applications Bonus Track Présenter son application Distribuer son application Export de VOTRE IPA et test ANDROID ! http://www.flickr.com/photos/loswl/2422533408/
  • 219. Compilation avant la distribution La compilation exige un Provisioning Profile   Le Provisioning Profile requiert l' iOS Developer Program   L'adhésion à l'iOS Developer Program coût $99 / an
  • 220. Distribution d'une application App Store Distribution 30% revenus à Apple gratuit pour les applications gratuites Add Hoc Distribution limité à 99 licences exige de pré-enregistrer les UDID des utilisateurs Entreprise Distribution distribution intra-entreprises (+ de 500 collaborateurs) inscription base D-U-N-S  
  • 222. Export iPhone et Android :  plusieurs solutions Sans clé développeur avec iSimulate : test de capteurs. Sans iTunes en SSH : iPhone jailbreaké. Avec iTunes. Vers Android.
  • 223. Sans clé développeur : iSimulate Pour ne pas payer une clé développeur (99$), ni devoir jailbreaker son iPhone, nous pouvons utiliser iSimulate ($16), présente sur l'Appstore.  Cette app va permettre de tester l'app sur l'émulateur mais avec les capteurs d'un vrai iPhone (boussole, accéléromètre, GPS, multitouch...).  Elle permet de voir le résultat sur l'iPhone, sans exporter l'application, uniquement par recopie d'écran.
  • 224. iSimulate Voir la présentation de l'install d'iSimulate  ou  celle-ci .
  • 225. Encoder en IPA Provisioning Profile
  • 226. Export automatique vers iTunes Installing App onto iTunes
  • 227. Récupérer IPA depuis iTunes Nouvelle IPA Générée
  • 228. Sans iTunes, en SSH Il faut un iPhone jailbreaké, c'est à dire capable d'installer des applications non vérifiées par Apple. En particulier, un serveur SSH (openSSH app) pour communiquer sans passer par iTunes, en Wifi. L'intérêt et d'éviter de synchroniser iTunes à chaque test et d'avoir peur de perdre ses applications déjà installés si elles le sont depuis un autre iTunes (on ne peut pas les synchroniser sur 2 iTunes). Pour cette méthode il faut cependant obtenir d'Apple sa clé développeur (payante). Par contre, les applis n'ont pas besoin d'être &quot;signées&quot; pour un iPhone en particulier, elles fonctionnent sur tous les iPhones jailbreakés.
  • 229. Export vers le téléphone avec CyberDuck
  • 230. Export vers le téléphone avec CyberDuck
  • 231. Exporter via iTunes Forme la plus classique d'export, elle necessite : une clé de provisionning valide  d'ajouter l'UUID de l'iPhone sur lequel on veut envoyer l'app (cf. site developer.apple.com).
  • 235. A - Les équipesB - Déroulement C - Conclusion Livraison des applications Bonus Track Présenter son application Distribuer son application Export de VOTRE IPA et test ANDROID ! http://www.flickr.com/photos/loswl/2422533408/
  • 237. Votre appli sur VOTRE mobile On fabrique votre IPA (libre)
  • 238. Fin de la partie 3, Workshop & Bonus
  • 239. Comprendre l'émergence de l'Internet Mobile et expérimenter la fabrication éclair de son application iPhone. Stéphane Rouilly, @starcrouz Charles Delalonde, @delalonde Sauf les grandes images (c)
  • 240.  

Notes de l'éditeur

  1. Mettre un titre sur ces slides.
  2. Mettre un titre sur ces slides.