React Native - Démonstration de bout en bout

Présentation

L’objectif de cette démonstration est de présenter un flux de bout en bout :

1. Une application exemple fournie avec le kit SDK client MobileFirst est enregistrée et téléchargée à partir de la console MobileFirst Operations Console.
2. Un nouvel adaptateur ou un adaptateur fourni est déployé sur la console MobileFirst Operations Console.
3. La logique d’application est changée afin d’effectuer une demande de ressource.

Résultat final :

• Interroger avec succès le serveur MobileFirst Server par commande ping
• Extraire avec succès des données à l’aide d’un adaptateur

Prérequis :

• Xcode for iOS, Android Studio for Android
• Interface de ligne de commande React Native
• Facultatif - MobileFirst CLI (téléchargement)
• Facultatif - Serveur MobileFirst Server autonome (téléchargement)

Etape 1. Démarrage du serveur MobileFirst Server

Vérifiez que vous avez créé une instance Mobile Foundation ou, si vous utilisez le kit MobileFirst Developer Kit, accédez au dossier du serveur puis exécutez la commande ./run.shsous Mac et Linux ou run.cmd sous Windows.

Etape 2. Création et enregistrement d’une application

Ouvrez la console MobileFirst Operations Console en chargeant l’URL http://your-server-host:server-port/mfpconsole dans le navigateur. Si le serveur s’exécute en local, utilisez http://localhost:9080/mfpconsole. Pour username/password, indiquez admin/admin.

1. Cliquez sur le bouton Nouveau en regard de l’option Applications.
   • Sélectionnez une plateforme : Android, iOS.
   • Entrez com.ibm.mfpstarter.reactnative comme Identificateur d’application.
   • Entrez 1.0.0 pour Version.
   • Cliquez sur Enregistrer l’application.

   

2. Téléchargez le modèle d’application React Native à partir de Github.

Etape 3. Edition de la logique de l’application

1. Ouvrez le projet React Native dans l’éditeur de code de votre choix.

2. Sélectionnez le fichier app.js qui se trouve à la racine du projet et collez le fragment de code suivant en remplaçant la fonction WLAuthorizationManager.obtainAccessToken() existante :

  WLAuthorizationManager.obtainAccessToken("").then(
      (token) => {
        console.log('-->  pingMFP(): Success ', token);
        var resourceRequest = new WLResourceRequest("/adapters/javaAdapter/resource/greet/",
          WLResourceRequest.GET
        );
        resourceRequest.setQueryParameters({ name: "world" });
        resourceRequest.send().then(
          (response) => {
            // Will display "Hello world" in an alert dialog.
            alert("Success: " + response.responseText);
          },
          (error) => {
            console.error(error);
            alert("Failure: Resource Request");
          }
        );
      }, (error) => {
        console.error(error);
        alert("Failed to connect to MobileFirst Server");
      });

Etape 4. Déploiement d’un adaptateur

Téléchargez l’artefact .adapter et déployez-le à partir de la console MobileFirst Operations Console à l’aide de l’action Actions → Déployer un adaptateur.

Vous pouvez également cliquer sur le bouton Nouveau en regard de la zone Adaptateurs.

1. Sélectionnez l’option Actions → Télécharger des exemples. Téléchargez l’adaptateur Java exemple Hello World.

   Si Maven et MobileFirst CLI ne sont pas installés, suivez les instructions de configuration de votre environnement de développement s’affichant à l’écran.

2. A partir d’une fenêtre de ligne de commande**, accédez au dossier racine du projet Maven de l’adaptateur et exécutez la commande :

    mfpdev adapter build
   

3. Une fois la génération terminée, déployez-la à partir de la console MobileFirst Operations Console en utilisant l’option Actions → Déployer un adaptateur. L’adaptateur est disponible dans le dossier [adaptateur]/target.

   

Etape 5. Test de l’application

1. Vérifiez que vous avez installé l’interface MobileFirst CLI, accédez au dossier racine de la plateforme spécifique (iOS ou Android) et exécutez la commande mfpdev app register. Si un serveur MobileFirst Server distant est utilisé, exécutez la commande pour ajouter le serveur :

   mfpdev server add
   

   puis exécutez la commande suivante pour enregistrer l’application, par exemple :

   mfpdev app register myIBMCloudServer
   

2. Exécutez les commandes suivantes pour exécuter l’application :

   react-native run-ios|run-android
   

Si un appareil est connecté, l’application est installée et exécutée sur ce dernier. Sinon, le simulateur ou l’émulateur est utilisé.

Résultats

• Cliquez sur le bouton Ping MobileFirst Server pour afficher la mention Connected to MobileFirst Server.
• Si l’application a pu se connecter au serveur MobileFirst Server, un appel de demande de ressource utilisant l’adaptateur Java déployé est effectué. La réponse de l’adaptateur est ensuite affichée dans une alerte.

Etapes suivantes

Pour en savoir plus notamment sur l’utilisation d’adaptateurs dans des applications et sur le mode d’intégration de services supplémentaires (notifications Push, par exemple) à l’aide de l’infrastructure de sécurité MobileFirst :

• Consultez les tutoriels Developing Applications
• Consultez les tutoriels Adapters development
• Consultez les tutoriels Authentication and security
• Consultez les tutoriels Notifications
• Consultez tous les tutoriels