Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Concevez une application mobile native avec React Native

Par Mouhamadou Moustapha SOW Publié le 12/08/2017 à 22:25:01 Noter cet article:
(0 votes)
En attente de relecture par le comité de lecture

Créer des applications mobiles n'est pas une chose facile. Imaginez pour chaque type de mobile, on doit apprendre et maitriser le langage et les techniques de développement. En d'autres termes, il faudra connaitre Java pour le systeme android , Objective-C ou Swift pour IOS et C# pour Windows phone. Et pour une même application, il faudra la développer trois fois différemment . Waw c'est fou. Pour éviter tout cela, plusieurs solutions ont vu le jour ayant pour but de développer une seule fois pour toutes les plateformes. Connu sous le nom anglais cross-platform. Celles-ci resolvent le problème chacune selon une approche différente. Ansi on a :

  • L'approche WebView qui constitue à utiliser le navigateur web du coup on peut utiliser les technologies Web (HTML/CSS/Javascript) pour développer notre application. Celle-ci est utilisé par le framework Ionic qui se base sur Apache Cordova . Ionic embarque toute notre application dans un webView.

  • L'approche native , comme vous pouvez le deviner, permet tout simplement de développer une application comme si on utilisait un langage natif pour chaque système d'exploitation mobile. Ici la technologie se charge de réecrire notre code de manière spécifique. Ainsi on ne ferait pas de diffèrence entre une application développée avec cette solution et un autre basée sur les méthodes classiques. Approche choisi par Xamarin qui s'appuie sur le langage C#, NativeScript et React Native qui utilisent comme langage javascript.

Cet article s'interessa à cette derniere approche . Ainsi pour l'illustrer on utilisera React Native. Pour commencer, on commencera par présenter ce dernier et realiser une application pour finir.

Présentatin de React Native

React native est un framework javascript développé par Facebook. Il permet aux developpeurs web de concevoir des applications mobiles natives sans avoir à tout réapprendre. Il se base principalement sur la librairie d'interface React d'où son nom. Il implèmente une bonne partie des composants android et Ios, la possibilité de respondre aux gestes et les animations. C'est un framework trés interessant dans la mesure où un developpeur web peut le prendre en main à une journée. C'est pour cette raison il est adopté et soutenu par plusieurs developpeurs. Il est hebergé sur github (lieu de référence pour les projets open-source) avec plus de 50000 étoiles.

Installation et initialisation du projet

Il existe plusieurs manières de démarrer un projet react native :

  • React-native-cli : qui est la méthode classique. Il faudra disposer des logiciels tels que xcode et android pour pouvoir compiler l'application.

    npm install react-native-cli -g   #installation de la cli globalement
    react-native init myProject      #initialisation du projet 
  • Expo qui regroupe un ensemble d"outils pour permettre de développer, tester sur nos propres terminaux mobiles et de partager l'application. Il est disponible sous forme de logiciel installable disponible sous windows, mac Os et linux. Pour le télécharger, merci de suivre ce lien https://expo.io/ . Il offre aussi la possibilité de coder directement en ligne, à l'aide de son playground https://snack.expo.io/. Il faudra installer l'application Expo client sur mobile disponible sur app store et playstore

  • Create-react-native-app, connu aussi sur l'abbréviation CRNA, qui est une solution qui est plus adoptable pour les débutants.Il installe tout ce qui est nécessaire pour commencer y compris expo. D'ailleurs c'est ça qu'on va utiliser pour réaliser notre application.

    npm install -g create-react-native-app
    create-react-native-app todo-app
    cd todo-app
    npm start

    Notre application est demarrée, il suffit de scanner le Qr code, qui apparaît sur le terminal, à l'aide de l'application Expo client sur notre mobile.Cependant on peut les commandes suivantes pour lancer directement l'émulateur android ou ios :

    npm run ios // ou 
    npm run android

    Laissons notre serveur de développement tourner et remplaçons le contenu de App.js par :

    import React from 'react';
    import {Image, StyleSheet, Text, View } from 'react-native';
    
    export default class App extends React.Component {
      render() {
        return (
          <View style={styles.container}>
            <Image 
            source={{uri: 'http://www.boite2.com/wp-content/uploads/2013/01/supinfo-logo.jpg'}}  
            style={styles.image}
            />
            <Text style={styles.title}> TO-DO App</Text>
            <Text style={styles.description}> React native est un framework basé sur react pour développement cross-platform mobile</Text>
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',StyShee
      },
      image:{
        width: 100, 
        height: 100,
      }, 
      title:{
        fontSize : 24, 
        color: '#0744AD', 
        paddingTop : 15, 
        paddingBottom : 15, 
        fontWeight : 'bold'
      },
      description:{
        fontSize : 16, 
        textAlign : 'center'
      }
    });
    

    Attardons nous sur la méthode render nous voyons des balises qui nous rappellent le html. Pour vous dire le framework est fait pour que les developpeurs s'adaptent au développement mobile. On a utilisé des composants qu'on a importés depuis le paquet react-native. On a quelques composants:

    View : il permet des divisions pour structurer notre application. c'est comme la balise div

    Text : Tout text en react-native doit entouré de ce composant.

    Image : Ce composant permet d'embarquer des images dans notre application.

    Button : Il permet l'interaction. C'est simple comme composant

    ScrollView : C'est un view avancé qui permet de scroller son contenu

    Il n'existe pas seulement ces composants mais ils sont les principaux.On peut même créer nos propres composants.

    Pour la suite il faut rendre sur la documentation.

    On remarque que nos composants ont l'attribut style qui sert pour la mise en forme. Celle-ci avec la méthode create de l'api StyleSheet. On ressemble que ça ressemble à du css. Il y'a presque toutes les propriètés. Par contre les traits d'unions sont remplaçés par un camel case genre font-size donne fontSize.

    Ainsi notre application ressemble à ça

Conclusion

Pour finir, React native est une solution à prendre en compte pour un développement rapide et efficace de nos applications. Cependant chaque solution a ses limites, bien vrai que le framework offre un pont pour pouvoir des composants natifs développés en objective c ou java.

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels