Démarrer avec iOS : une application Carnet d’Adresses

M’étant récemment lancé dans le développement d’applications pour les plateformes mobiles d’Apple, je commence un série d’articles qui me serviront de bloc-note et d’aide mémoire pour le développement d’applications iOS.
Mon premier projet est la transcription sous iOS de ma première application Rails : un carnet d’adresses pour gérer les coordonnées de mes amis et de ma famille.
Comme cette série d’article accompagne ma première expérience sous iOS, vous me pardonnerez les approximations et les erreurs que les experts relèveront sans doute ; leurs commentaires sont les bienvenus !

Pour démarrer

Pour démarrer le développement sous iOS, il vous faut :

  • Un Macintosh Intel sous MacOS X 10.6 (Snow Leopard) ou MacOSX 10.7 (Lion)
  • Un compte développeur Apple, pour pouvoir télécharger le SDK (Software Development Kit). Il existe deux niveaux d’accès en tant que développeur : le premier est gratuit, mais ne permet pas d’exécuter les applications développées autrement que dans le simulateur (sur votre Mac, et pas sur un appareil iOS) ; le second est payant ($99 par an), mais permet d’exécuter vos applications sur un iPhone ou un iPad, ainsi que de publier vos applications sur l’AppStore. Enfin, cet abonnement permet de télécharger la version Snow Leopard d’XCode 4, la dernière version de l’environnement de développement d’Apple. Une version payante pour Lion est disponible dans l’AppStore Mac OS X, ainsi qu’une version gratuite de la version 3 d’XCode (mais je ne vous la recommande pas, elle commence à dater).
  • Un iDevice pour pouvoir tester en vraie grandeur vos applications. la solution la moins onéreuse, c’est l’iPod Touch qu’on trouve maintenant à partir de 199€ ; mais si vous voulez utiliser des fonctions spécifiques à l’iPhone ou à l’iPad (téléphone, géolocalisation, etc.), il vous faudra acquérir ou vous faire prêter le matériel adéquat.

Créer son projet

Une fois XCode installé, vous pouvez le lancer pour commencer notre projet. Vous arrivez sur la fenêtre suivante :
Cliquez sur Create a new XCode Project. Comme c’est un projet d’apprentissage, nous allons choisir comme modèle Empty Application.
Choisissez ensuite :

  • Un nom à votre projet : c’est celui qui sera par défaut affiché comme nom d’application.
  • Votre identifiant de société : peut être l’adresse de votre site web en commençant le Top Level Domain (com, fr, org, etc)
  • La variable Class Prefix est également importante puisqu’on la retrouvera devant les objets créés automatiquement par XCode.
  • L’appareil cible : iPad, iPhone ou Universal pour les applications qui tourneront sur les deux types d’iDevice.
  • Trois cases à cocher sont ensuite disponibles : nous allons cocher Use Core Data afin qu’XCode initialise un peu de code pour gérer la persistance de vos contacts (c-a-d leur stockage dans une base de données). Les deux autres permettent de gérer automatiquement la mémoire de votre application, et d’inclure l’architecture des tests unitaires qui si vous les écrivez, vous permettront de vérifier que les modifications dans votre code ne cassent pas votre application. Nous les laisserons de coté pour ce premier exemple.

Cliquons ensuite sur le bouton Next. La boite de dialogue suivante permet de choisir l’emplacement de votre projet sur votre disque ; cochez également la case Create git repository for this project, afin de pouvoir gérer vos modifications de code facilement avec Git.
Cliquez sur le bouton Create : Votre projet est créé, nous allons pouvoir commencer à rentrer dans le vif du sujet…
La suite au prochain épisode !

jQuery Mobile 2e partie : les vues

Le précédent article de notre série sur jQuery Mobile annonçait une suite sur la gestion des vues dans jQuery. Je gère l’affichage des contacts avec un Partial qui est inséré dans la vue elle-même. On a donc la hiérarchie suivante :

Layout => Vue => Partial

Nous avons vu dans l’article précédent l’architecture du Layout, et une partie de la vue elle-même,dont le code complet est donné ci-dessous :

<% content_for :back do %><%= link_to t(:"general.back"),  params[:category] ? categories_path : root_path, :'data-direction'=>"reverse", :'data-icon'=>"arrow-l"  %><% end %>
<% content_for :title do %><%= params[:category] ? Category.find(params[:category]).name : t(:"contact.all") %><% end %>
<% content_for :button do %> <%= link_to t(:"contact.add"), new_contact_path, :'data-icon'=>"add", :rel => "external" %> <% end %>
<%= render "contacts_list" %>
Dans jQM, l'architecture d'une liste est la suivante :
<ul data-role="listview">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

L’adjonction du data-role « listview » à une combinaison classique ul/li permet de générer une liste dont le rendu est similaire à celui trouvé sur les applications mobiles.

 

 

Le code source du Partial est le suivant :

<ul id="contactslist" data-role="listview"  data-filter="true" data-filter-placeholder="Filtrer la liste..." data-inset="true" class="separator">
  <% @contacts.each do |contact| %>
      <li class="contact"><%= link_to  contact.listname, contact %></li>
    <% end %>
</ul>

Les paramètres passés dans le tag <ul> sont les suivants :

  • data-role : doit être égal à « listview » pour être reconnu par jQM comme une liste.
  • data-filter : si positionné à TRUE, permet d’afficher un champ de filtre au-dessus de la liste ; ne filtre que les données existant dans la liste, alors attention à la pagination !
  •  data-filter-placeholder : permet de modifier le texte par défaut  affiché dans le champ de filtre.
  • data-inset : si positionné à TRUE, permet d’avoir une liste qui ne s’étend pas d’un bord à l’autre de la fenêtre, mais qui laisse un espace sur les bords de la liste ; la première et la dernière cellule voient de plus leurs bords s’arrondir.

Dans le prochain article, nous verrons la création de formulaires avec jQM. D’ici là, n’hésitez pas à laisser vos commentaires !