Developpez.com

Télécharger gratuitement le magazine des développeurs, le bimestriel des développeurs avec une sélection des meilleurs tutoriels

Réalisez votre première application pour Android et iOS sur Apple Mac OS X en utilisant le moteur Multi-OS Engine

Ce tutoriel vous guidera pour réaliser votre première application multiplateforme avec Multi-OS Engine, installé sous Mac OSX*, qui sera notre plateforme locale. Vous pouvez aussi développer vos applications Android* et iOS* sous Android Studio sous Windows*, mais afin de simuler vos applications iOS, vous devrez déployer votre application à distance sur un système Mac avec Xcode* (d'où la plateforme distante). Pour ce scénario, consultez notre guide de démarrage pour Multi-OS Engine (plateforme distante).

Dans ce tutoriel, je vous montrerai comment créer une simple application « Hello World » pour Android et iOS avec partage de code entre les deux applications. Dans un scénario réel, la plus grande partie de votre logique d'application sera partagée.

N'hésitez pas à donner votre avis sur ce tutoriel sur le forum Mobiles : Commentez Donner une note à l'article (5)

Article lu   fois.

L'auteur

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Prérequis

Pour commencer, vous devez disposer du minimum logiciel suivant :

  1. Android Studio* 1.0 ou plus récent ;
  2. Xcode* 6 ou plus récent ;
  3. Kit de Développement Java* 1.7 ou plus récent ;
  4. SDK d'Android.

II. Flux de travail global

Les étapes du travail pour créer des applications Android et iOS sont relativement

simples.

  1. Afin de créer une application iOS dans Android Studio, nous devons d'abord commencer par créer un Projet Android.
  2. Nous créons ensuite un module Multi-OS Engine (qui sera l'application iOS).
  3. Pour le partage de code entre les applications, nous créons un module nommé common (bibliothèque Java partagée).
  4. Nous ajoutons ensuite le module zommon en tant que dépendance pour les applications Android et iOS.
  5. Finalement, nous configurons les scripts Gradle*, compilons et lançons nos applications.

III. Création de nos premières applications Android et iOS à logique partagée

  1. Créez un Android Project dans Android Studio

    Image non disponible
  2. Saisissez le nom de votre Application, le nom de domaine de votre entreprise et choisissez l'emplacement dans lequel vous voulez sauvegarder votre projet. Une bonne pratique est de placer vos projets dans un dossier appelé projet sous votre nom d'utilisateur. Nous vous conseillons de suivre exactement les étapes décrites ici pour vous assurer que vous ne rencontrez aucun problème. Remarquez le nom du package généré automatiquement (com.monentreprise.mapremiereapplication), qui doit être en minuscules. Cliquez sur « Next » pour continuer.

    Image non disponible
  3. Configurez les paramètres de votre appareil cible et de niveau d'API. Si vous voulez débuter immédiatement, conservez les paramètres par défaut en cliquant sur « Next ».

    Image non disponible
  4. Choisissez une activité vide « Blank Activity » dans la fenêtre « Add an activity to Mobile » et cliquez sur « Next ».

    Image non disponible
  5. Dans la fenêtre « Customize the Activity », nous vous conseillons de laisser les paramètres tels quels. Cliquez sur « Finish » pour accepter la configuration par défaut.

  6. À cette étape, Android Studio a créé un projet Android. Dans le panneau « Project », vous remarquerez le module « the app ». Ce module est votre application Android. Nous allons maintenant ajouter un module Multi-OS Engine, qui sera à terme à votre application iOS.

  7. Dans le panneau « Project », faites un clic droit n'importe où et choisissez « New > Intel Multi-OS Module »
Image non disponible

Cliquez sur « Hello World application » puis cliquez sur « Next »

Image non disponible

Dans cette fenêtre, vous allez créer un projet Xcode. Plus tard, nous vous conseillons d'ouvrir le projet iOS créé par Android Studio, en Xcode, surtout si vous voulez utiliser le Storyboard de Xcode pour concevoir votre interface utilisateur native. Saisissez le nom de projet dans le champ « Xcode project name » (généralement le nom de votre application), le nom de l'application dans le champ « ​Product name », ainsi que les informations de votre entreprise.

Dans cet exemple, nous allons entrer les informations suivantes pour correspondre à celles d'Android Studio :

« Xcode project name » :​ mapremiereapplication

« Product name » : ​mapremiereapplication

« Organization Name » : ​monentreprise

« Company Identifier » : com​.monentreprise

Image non disponible

Cliquez sur « Next » pour configurer le nouveau module. Ce module sera un module iOS. Appelons-le donc « iOS ». Cliquez sur « Finish ».

Image non disponible

Nous avons à présent créé une application iOS dans Android Studio. Si Android Studio vous demande de synchroniser les scripts Gradle, veuillez le faire. Dans les étapes suivantes, nous allons créer un module « common », qui va, comme son nom l'indique, contenir du code commun en Java pour nos applications Android et iOS.

Continuons à présent en créant un module « common » qui contiendra notre logique d'application partagée (Java). Dans notre exemple simple, notre logique partagée se résume à un objet Java qui contient une méthode nommée sayHello() qui retourne une chaîne de caractères Java de type String.

De nouveau, faites un clic droit dans le panneau Project, et sélectionnez « add a new Module »

Image non disponible

Dans la fenêtre « New Module », choisissez « Java Library » et cliquez sur « Next ».

Image non disponible

Cette bibliothèque contiendra donc toute notre logique d'application partagée (commune). Ainsi, appelons-la, « common » et appelons notre première classe Java « AppLogic ». Éditez également le nom de package Java conformément aux modèles qui ont été générés pour les autres modules. En général, il sera de ce type :

nom_de_domaine_inversé.nom_application.common, par exemple

com.monentreprise.mapremiereapplication.common

Image non disponible
  1. Cliquez sur « Finish » et laissez Android Studio rafraîchir le panneau des projets et les scripts Gradle.

Nous allons à présent ajouter un peu de code à notre classe AppLogic.

  1. Naviguez vers « ​common > java > com.monentreprise.mapremiereapplication.common » et ouvrez la classe AppLogic.

Remplacez son contenu avec ce qui suit (le code entouré de /****=====****/ correspond aux lignes ajoutées ou modifiées) :

package com.monentreprise.mapremiereapplication.common;

 
Sélectionnez
public class AppLogic {
  /****=====****/
  private String myString;
  public AppLogic(){
    this.myString = "Hello World en partage !";
  }
  public String sayHello(){
    return this.myString;
  }
  /****=====****/
}

Enfin, ajoutons le module common en tant que dépendance des applications

Android et iOS. Notez qu'elles sont appelées respectivement « app » et « iOS » dans

le panneau « Project ».

  1. Sélectionnez la racine de n'importe quel module (ici, vous en avez trois, à savoir app, Ios et common). Faites un clic droit et choisissez « Open Module Settings ».
Image non disponible
  1. Pour les deux modules app et iOS, ajoutez le module common dans l'onglet des dépendances (« Dependencies »). Pour faire cela, cliquez sur le signe + en bas et cliquez sur « Module Dependency » puis choisissez « common » dans la liste.
Image non disponible

Après que vous avez ajouté le module partagé en tant que dépendance du module iOS, les paramètres du module pour iOS devraient ressembler à cela :

Image non disponible

Répétez l'opération pour le module app

Image non disponible
  1. Le code Java contenu dans le module common sera compilé par le compilateur Java. Le module a son propre script Gradle* pour le processus de compilation. Nous devons mettre à jour notre script pour indiquer à Gradle quelle version de Java sera utilisée pour compiler notre module. Ouvrez le script Gradle pour le module common (Gradle Scripts > build.gradle (Module : common)) et ajoutez ce qui suit à la fin du script :
 
Sélectionnez
/****=====****/
compileJava {
targetCompatibility = 1.7
sourceCompatibility = 1.7
}
/****=====****/
Image non disponible

À présent, codons une petite application Android avec un bouton et un champ de texte. Lorsque vous cliquez sur le champ de texte, vous appelez la méthode sayHello() de l'objet partagé AppLogic.

  1. Pour l'application Android, ouvrez la mise en page d'activity_main(app>res>layout>activity_main.xml). Si vous voyez du code XML, cliquez simplement sur l'onglet Design situé en bas pour passer à l'interface graphique. Il devrait déjà y avoir un champ de texte Hello World. Ajoutons un bouton en faisant glisser un bouton depuis la palette vers le téléphone. Double-cliquez sur le bouton pour le renommer en « Cliquez-moi ! ». Faites attention à ce que l'ID du bouton soit bien « button ». Android localise les éléments sur l'écran avec leur ID. Le texte « Hello World » existant possède l'ID « textView ». Vous pouvez voir cela soit dans le panneau d'arborescence des composants « Component Tree » ou dans le fichier XML (pour voir le code XML, cliquez sur l'onglet Text en bas)
Image non disponible
  1. Ensuite dans notre MainActivity (app>package com.monentreprise.mapremiereapplication > MainActivity), nous importons notre module « common » et ajoutons du code à notre bouton nouvellement créé (voir le fragment de code 1). Les lignes entourées de /****=====****/ sont des fragments de code qui sont ajoutés. Pour les classes comme Button et View qui sont fournies dans le SDK d'Android, vous pouvez toujours appuyer sur Option + Entrée pour importer automatiquement les packages correspondants.
  2. Optionnellement : vous pouvez tester la nouvelle application Android sur un véritable appareil ou sur un émulateur. Pour cela, éditez les paramètres de l'application Android. Dans le menu de configuration, vous pouvez choisir l'appareil cible. Veuillez consulter la documentation Android pour plus d'informations concernant l'exécution d'une application sur un appareil réel ou un appareil virtuel.
Image non disponible

À présent, créons l'application iOS.

  1. Dans la page des Projets, ouvrez le fichier Java AppViewController. (iOS > java> com.monentreprise.mapremiereapplication > ui > AppViewController). Éditez le code pour importer le module « common » et ajoutez le code nécessaire au bouton. Notez qu'un bouton a été automatiquement créé lorsque le module Multi-OS Engine Hello World a été ajouté. Reportez-vous au fragment de code 2 plus loin pour le code intégral. Les lignes entourées de /****=====****/ sont les lignes ajoutées ou modifiées.
  2. Le code pour notre application iOS est prêt. À partir de là, exécutons l'application iOS sur le Simulateur iOS. Pour faire cela, choisissez iOS dans le menu déroulant comme dans la capture d'écran ci-dessous :
Image non disponible
  1. Et voilà ! Vous avez maintenant une application Hello World classique qui fonctionne sous Android et iOS avec du partage code
Image non disponible

C'était chouette ! Par où continuer à partir de là ? Nous vous invitons à consulter nos exemples plus avancés dans le dossier d'exemples :

/Applications/Intel/INDE/multi_os_engine/samples

N'hésitez pas à faire quelques essais. Si vous rencontrez des difficultés, n'hésitez pas à poser vos questions sur notre forum dédié. Consultez également nos blogs pour vous tenir informé des mises à jour et fonctionnalités concernant le moteur Multi-OS Engine.

IV. Code Snippets

IV-A. Code snippet 1 - Android (MainActivity.java) 

 
Sélectionnez
package com.mycompany.myfirstapp;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

/****=====****/
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
/****=====****/

/* Import our common module */
import com.mycompany.myfirstapp.common.*;

public class MainActivity extends AppCompatActivity {

    /****=====****/
   AppLogic al = new AppLogic();
   Button button;
   TextView tv;
   /****=====****/

   @Override
   protected void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.activity_main);
     
     /****=====****/
     button = (Button) findViewById(R.id.button);
     tv = (TextView) findViewById(R.id.textView);

     button.setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View v) {
         tv.setText(al.sayHello());
       }
     });
     /****=====****/
   }

   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
     // Inflate the menu; this adds items to the action bar if it is present.
     getMenuInflater().inflate(R.menu.menu_main, menu);
     return true;
   }

   @Override
   public boolean onOptionsItemSelected(MenuItem item) {
     // Handle action bar item clicks here. The action bar will
     // automatically handle clicks on the Home/Up button, so long
     // as you specify a parent activity in AndroidManifest.xml.
     int id = item.getItemId();

     //noinspection SimplifiableIfStatement
     if (id == R.id.action_settings) {
       return true;
     }

     return super.onOptionsItemSelected(item);
   }
}

IV-B. Code snippet 2 - iOS - AppViewController.java 

 
Sélectionnez
package com.mycompany.myfirstapp.ui;

import com.intel.inde.moe.natj.general.NatJ;
import com.intel.inde.moe.natj.general.Pointer;
import com.intel.inde.moe.natj.general.ann.Generated;
import com.intel.inde.moe.natj.general.ann.Owned;
import com.intel.inde.moe.natj.general.ann.RegisterOnStartup;
import com.intel.inde.moe.natj.objc.ObjCRuntime;
import com.intel.inde.moe.natj.objc.ann.ObjCClassName;
import com.intel.inde.moe.natj.objc.ann.Property;
import com.intel.inde.moe.natj.objc.ann.Selector;
/****=====****/
import com.mycompany.myfirstapp.common.AppLogic;
/****=====****/

import ios.NSObject;
import ios.uikit.UIButton;
import ios.uikit.UILabel;
import ios.uikit.UIViewController;

@com.intel.inde.moe.natj.general.ann.Runtime(ObjCRuntime.class)
@ObjCClassName("AppViewController")
@RegisterOnStartup
public class AppViewController extends UIViewController {
   /****=====****/
   AppLogic al = new AppLogic();
   /****=====****/

   static {
     NatJ.register();
   }

   @Generated("NatJ")
   @Owned
   @Selector("alloc")
   public static native AppViewController alloc();

   @Generated("NatJ")
   @Selector("init")
   public native AppViewController init();

   @Generated
   protected AppViewController(Pointer peer) {
     super(peer);
   }

   public UILabel statusText = null;
   public UIButton helloButton = null;

   @Override
   @Selector("viewDidLoad")
   public void viewDidLoad() {
     statusText = getLabel();
     helloButton = getHelloButton();
   }

   @Selector("statusText")
   @Property
   public native UILabel getLabel();
   @Selector("helloButton")
   @Property
   public native UIButton getHelloButton();

   @Selector("BtnPressedCancel_helloButton:")
   public void BtnPressedCancel_button(NSObject sender){

     /****=====****/
     statusText.setText(al.sayHello());
     /****=====****/
   }
}

Retrouvez toutes les ressources et outils Intel pour les développeurs Android sur la

Zone des Développeurs Intel Android .

Le forum Intel Android pourra également vous aider dans vos questions.

V. Ressources

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2015 Shailen Sobhee. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.