• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)
 

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

on

  • 1,674 views

Cours de 3 jours pour comprendre l'émergence de l'Internet Mobile et expérimenter la fabrication éclair de son application iPhone. ...

Cours de 3 jours pour comprendre l'émergence de l'Internet Mobile et expérimenter la fabrication éclair de son application iPhone.

L'idée est de montrer que le mobile est le nouveau web, que le domaine fourmille de créativité et que tout le monde peut participer, même avec peu de connaissance techniques. C'est un cours qui parle
- des potentialités du média mobile,
- de l'opportunité de développer/prototyper de l'universel (pour créer des application qui tournent sur tous les smartphone en évitant le spécifique),
- de quelques façons d'innover pour convaincre
- de codage très empirique, exemples à la clé
Le tout sous une forme vivante (Stéphane Rouilly, ingénieur Chercheur à EDF R&D et Charles Delalonde, Docteur en informatique, plutôt branché média sociaux) avec un workshop qui libère les énergies, par binomes, avec un mac et du papier et une application à montrer aux autres équipes en fin de workshop voire même à emporter.

Statistics

Views

Total Views
1,674
Views on SlideShare
1,673
Embed Views
1

Actions

Likes
0
Downloads
30
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Mettre un titre sur ces slides.
  • Mettre un titre sur ces slides.

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

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