Costruzione della vostra prima app per Android* e iOS* su Apple* Mac* OS X* tramite Multi-OS Engine

Questo tutorial vi permetterà di realizzare la vostra prima applicazione multipiattaforma usando Multi-OS Engine installato su Mac OSX* a cui ci riferiamo come build locale. Potete inoltre sviluppare le vostre applicazioni Android* e iOS* in Android Studio su Windows* ma per simulare l'applicazione iOS, dovrete implementare via remoto l'app su un sistema Mac che esegue Xcode* (d'ora in poi build remota). In questo caso, verificate la nostra guida introduttiva con Multi-OS Engine (build remota).

In questo tutorial, vi mostrerò come creare una semplice applicazione Hello World per Android e iOS con codice condiviso tra le due applicazioni. In uno scenario realistico, la maggior parte della logica di applicazione sarà condivisa.

Prerequisiti

Per cominciare, occorre rispettare i requisiti minimi di software seguenti:

1. Android Studio* 1.0 o superiore
2. Xcode* 6 o superiore
3. Java* Development Kit 1.7 o superiore
4. Android SDK

Flusso di lavoro generale

L'iter per creare app per Android e iOS è relativamente semplice.

1. Per creare un'applicazione iOS in Android Studio, dobbiamo iniziare prima con un progetto Android.
2. Successivamente creiamo un modulo Multi-OS Engine (che sarà l'applicazione iOS)
3. Per applicazioni con codice condiviso, creiamo un modulo denominato comune (libreria Java condivisa)
4. In seguito aggiungiamo il modulo comune come dipendenza per l'applicazione Android e iOS
5. Infine, configuriamo gli script Gradle*, costruiamo e avviamo le nostre app. 

Creazione delle nostre prime applicazioni Android e iOS con logica condivisa

1. Create un progetto Android in Android Studio
   
2. Inserite nome dell'applicazione, dominio della società e scegliete una posizione dove salvare il progetto. Una buona pratica è di archiviare i vostri progetti in una cartella chiamata Project sotto il vostro nome utente. Potrete seguire pedissequamente i passaggi descritti qui per essere certi di non incappare in nessun problema. Prestate attenzione al nome del pacchetto generato automaticamente (com.mycompany.myfirstapp) che è in lettere minuscole. Fate clic su Avanti.
   
3. Configurate il vostro dispositivo di destinazione e le impostazioni del livello API. Se volete cominciare immediatamente, procedete con le impostazioni predefinite facendo clic su Avanti.
   
4. Scegliete “Blank Activity” nella finestra Add an activity to Mobile e fate clic su Avanti.
   

5. Nella finestra Customize the Activity, è possibile lasciare le impostazioni così come sono. Fate clic su Fine per accettare la configurazione predefinita. 

6. A questo punto, Android Studio ha creato un progetto Android. Nel pannello del progetto, noterete ilmodulo dell'app. Questo modulo è la vostra applicazione Android. Proseguiamo ora aggiungendo un modulo Multi-OS Engine, che sarà al termine la vostra applicazione iOS.

7. Nel pannello del progetto, fate clic destro dovunque e scegliete New > Intel Multi-OS Module

9. Clic sull'applicazione Hello World e clic su Avanti
   

10. In questa finestra, creerete un progetto Xcode. Più avanti potrete aprire il progetto iOS creato da Android Studio, in Xcode, soprattutto se volete usare Storyboard Xcode per progettare l'interfaccia utente nativa. Inserite il nome del progetto Xcode (di solito il nome della vostra applicazione), il nome del prodotto (il nome dell'applicazione), i dettagli di organizzazione e l'ID della società.

    In questo esempio, inseriremo i seguenti dettagli che corrispondono a Android S:

    Nome progetto Xcode: myfirstapp
    Nome prodotto: myfirstapp
    Nome organizzazione: mycompany
    Identificativo società: com.mycompany

    
    
11. Fare clic su Avanti per configurare il nuovo modulo. Il modulo sarà un modulo iOS. Successivamente denominiamolo “iOS”. Fate clic su Fine.
    

    Abbiamo quindi creato un'applicazione iOS in Android Studio. Se Android Studio vi indica di sincronizzare gli script Grade, fatelo. Nei passaggi successivi, creeremo un modulo “comune”, che sarà, come suggerisce il nome, il codice Java comune per le nostre applicazioni Android e iOS.

    Ora, procediamo creando un modulo “common” che conterrà le nostra logica applicativa condivisa (Java). Nel nostro semplice esempio, la nostra logica condivisa sarà un oggetto Java che ha un metodo chiamato sayHello() che riporta una stringa Java.

12. Di nuovo nel pannello del progetto, clic destro e aggiungiamo un nuovo Modulo:
    
13. Nella finestra del nuovo modulo, scegliete “Java Library” e fate clic su Avanti.
    
14. Richiamiamo questa libreria che conterrà tutta la nostra logica applicativa (common) condivisa. Successivamente, denominiamola “common” e chiamiamo la nostra prima classe Java “AppLogic”. Modifichiamo anche il nome del pacchetto Java come i modelli generati per gli altri moduli. In generale, dovrebbe risultare questo: company_domain_in_reverse.appname.common, per esempio
    com.mycompany.myfirstapp.common

15. Fare clic su Fine e lasciate che Android Studio aggiorni il pannello dei progetti e gli script Gradle.

    Aggiungeremo ora del codice alla nostra classe AppLogic.

16. Accedere a common > java > com.mycompany.myfirstapp.common e aprite la classe AppLogic. Sostituite i contenuti con quanto segue (il codice in grassetto riguarda stringhe appena aggiunte/modificate):

    package com.mycompany.myfirstapp.common;

public class AppLogic {
  private String myString;

  public AppLogic(){
   this.myString = "Hello World from common";
 }

  public String sayHello(){
   return this.myString;
}
}

    Infine aggiungiamo il modulo common come dipendenza nelle app Android e iOS. Nota: Vengono chiamate rispettivamente “app” e “iOS” nel pannello del progetto.

17. Selezionate una root del modulo qualsiasi (ne avrete tre denominate app, iOS e common). Clic destro e scegliete Open Module Settings.
    

18. Per i moduli bothapp e iOS aggiungete il modulo common nella scheda Dependencies. Per far ciò, fate clic sul segno + in basso e fate clic su Module Dependency e quindi scegliete common nell'elenco.

    Dopo aver aggiunto il modulo comune come dipendenza del modulo iOS, le impostazioni del modulo per iOS dovrebbero essere queste:

    Seguire quanto detto sopra anche per il modulo app:
    

19. Il codice Java nel modulo common verrà compilato dal compiler Java. Il modulo è dotato del suo script Gradle* per il processo di costruzione. Dobbiamo aggiornare il nostro script per indicare a Gradle quale versione di Java deve essere usata per compilare il nostro modulo. Aprite lo script Gradle per il modulo common (Gradle Scripts > build.gradle (Module: common)) e aggiungete quanto segue al termine:

    compileJava {
  targetCompatibility = 1.7
  sourceCompatibility = 1.7
}

    Ora, codifichiamo una piccola applicazione Android dotata di pulsante e campo di testo. Quando fate clic sul campo del testo, chiamate il metodo sayHello() dell'oggetto AppLogic condiviso.

20. Per l'app Android, aprite il layout activity_main
    (app>res>layout>activity_main.xml). Se vedete del codice XML, fate semplicemente clic sulla scheda Design nella parte inferiore per passare all'interfaccia grafica. Dovrebbe essere già presente un campo di testo Hello World. Aggiungiamo un pulsante trascinandone uno dalla tavolozza al telefono. Doppio clic sul pulsante e rinominiamolo “Click Me!”. Prestate attenzione che l'ID del pulsante sia chiamato “button”. Android individua gli elementi a schermo tramite i loro ID. Il testo Hello World esistente ha come ID textView. Potete visualizzarlo sia nel pannello ad albero dei componenti o nel file XML (per visualizzare il codice XML, fate clic sulla scheda Text nella parte inferiore)

    
    

21. Poi nella nostra MainActivity (app > package com.mycompany.myfirstapp > MainActivity), importiamo il nostro modulo common e aggiungiamo della logica al nostro pulsante appena creato (Vedere codice snippet 1). Le stringhe in grassetto sono parti di codice che sono state aggiunte. Per le classi come Button e View che vengono fornite nell'SDK Android, potete sempre premere Option+Enter per importare automaticamente i pacchetti pertinenti.

22. Opzionale: Potete testare la nuova app Android su un dispositivo reale o un emulatore. Potete farlo modificando le configurazioni dell'app Android. Nel menu di configurazione, potete scegliere il dispositivo di destinazione. Consultate la documentazione ufficiale Android per maggiori informazioni sull'esecuzione di un'app su un dispositivo reale o un dispositivo virtuale.

Poi, creiamo l'app iOS.

1. Dalla pagina dei progetti, aprite il file java AppViewController. (iOS > java > com.mycompany.myfirstapp > ui > AppViewController). Modificate il codice per importare il modulo common e aggiungete la logica necessaria al pulsante. Nota: è stato creato automaticamente un pulsante quando il modulo Multi-OS Engine Hello World è stato aggiunto. Vedere codice snippet 2 più sotto per tutto il codice. Le stringhe in grassetto sono quelle che sono state aggiunte/modificate.

2. Il codice per la nostra app iOS è pronto. Successivamente, eseguiamo l'app iOS in iOS Simulator. Per farlo, scegliamo iOS dal menu a tendina come mostrato nella schermata seguente:
   

3.Ed ecco fatto! Ora potete eseguire una classica applicazione Hello World su Android e iOS con codice condiviso.

Ci siamo divertiti! E ora che possiamo fare? Potreste controllare gli altri nostri esempi più avanzati nella cartella degli esempi: /Applications/Intel/INDE/multi_os_engine/samples

Dateci pure uno sguardo. Se avete problemi, non esitate a fare domande sul nostro forum dedicato. Inoltre, non dimenticate i nostri blog per aggiornamenti e funzionalità riguardanti Multi-OS Engine.

Code Snippet

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

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