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

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/

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

Un marché ultra fragmenté Systèmes d'exploitation (OS) Appareils Opérateurs Constructeurs

Beaucoup de technologies à maîtriser

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

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

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 ;-)

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 !

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

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.

Titanium : un code simplifié 1 Définition de la page 2 Définition d'un élément 3 Logique 4 Ajout dans la page

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.

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

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

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.

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.

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).

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

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

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

Fichiers nouveau projet Netbeans

App.js, page principale d'un nouveau projet Titanium

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 "main" 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

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

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 : " + 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

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

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 "Application Icon". 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);

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

"Blood sweat tears", 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)]

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

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

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 "resources" 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

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 "signées" pour un iPhone en particulier, elles fonctionnent sur tous les iPhones jailbreakés.

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

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)

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

Contenu connexe

Tendances

En vedette

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

Plus de Stéphane Rouilly

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

Notes de l'éditeur