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

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.

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.

1. Créez un Android Project dans Android Studio

   

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.

   

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

   

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

   

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 »

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

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

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

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 »

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

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

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;

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

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.

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 :

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

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 :

/****=====****/
compileJava {
targetCompatibility = 1.7
sourceCompatibility = 1.7
}
/****=====****/

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

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.

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

1. Et voilà ! Vous avez maintenant une application Hello World classique qui fonctionne sous Android et iOS avec du partage code

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-A. Code snippet 1 - Android (MainActivity.java) ▲

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 ▲

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());
     /****=====****/
   }
}

• Outils Intel Android
• Intel XDK
• Intel INDE
• Intel C Compiler