Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Rémi Pourtier Jean-Philippe Kha Adaptation des interfaces à l’environnement App

Rémi Pourtier Jean-Philippe Kha Adaptation des interfaces à l’environnement Application: Find Your Movie Technologies: Android & React Plan I- Introduction II- Développement avec Android 1) Comment l’application a-t-elle été réalisée ? 2) Les outils de développement et de tests utilisés 3) Déploiement 4) Tests des capacités d’adaptation III- Développement avec React 1) Installation du React starter kit 2) Comment l’application a-t-elle été réalisée ? 3) Les outils de tests utilisés IV- Conclusion Bibliographie Annexes I-Introduction Pour ce projet, nous avons décidé de développer une application destinée aux utilisateurs qui ne savent pas quel film regarder Cette application possède des fonctionnalités simples. La page principale contient un film avec la possibilité de sauvegarder le film que l’on a envie de voir ou de le passer. En appuyant sur l’image du film, l’utilisateur a la possibilité de regarder la bande d’annonce, de lire le synopsis, les commentaires positifs et négatifs. Une fois que l’utilisateur a fait son choix, un autre film s’affiche. Il peut consulter quand il le souhaite la liste des films sélectionnés. Nous avons choisi de confronter deux types d’applications: les applications web et natives. Le but est de comparer les performances de deux langages en terme d’adaptabilité. Pour le développement web, nous avons opté pour React et pour le coté natif, nous avons choisi Android. Dans ce rapport nous allons vous proposez un tutorial pour ces deux technologies. Nous partageons l’expérience acquise lors de ces deux développement sous la forme d’un tutorial afin d’aider les personnes qui souhaitent utiliser l’une de ces technologies. Dans la première partie nous allons voir la partie Android. La seconde présentera le développement avec React. En conclusion, nous ferons un bilan des expériences de développement. II-Développement avec Android 1) Comment l’application a-t-elle été réalisée ? La réalisation de l’application peut se découper en 4 partie, nous allons tout d’abord voir comment nous créons un menu coulissant de côté(“Navigation Drawer”/”Sliding Menu”) ensuite nous expliquerons comment nous faisons des onglets coulissant(“Sliding Tabs”) puis nous verrons comment nous définissons les composants d’un écran afin que celui ci s’adapte à taille de l’écran. Pour commencer, il faut créer un nouveau projet sous Android Studio et créer un “Blank Activity” 1. Menu coulissant 1.1. Création du thème de notre application colorPrimaryDark correspond à la couleur qui sera appliqué à la bar de notification colorPrimary correspond à la couleur qui sera appliqué à la bar d’action textColorPrimary correspond à la couleur du texte, qui sera appliqué à la bar d’action windowBackground correspond à la couleur de l’arrière plan par défaut de l’application navigationBarColor correspond à la couleur de la bar navigation situé au pied de l’application. Définissons dans un premier temps les couleurs qu’on utilisera, pour cela ouvrez le fichier colors.xml qui se trouve dans res/value Ouvrir le fichier style.xml qui se trouve dans le dossier res/values et définissez votre nouveau thème : Ouvrir le fichier dimens.xml situé dans res/values dimens.xml Dans l’AndroidManifest.xml, changez la valeur du thème : Puis mettez ces valeurs dans le fichier string.xml qui se situe dans le dossier res/values/ Si vous lancez l’application vous devriez obtenir quelques choses comme çan en fonction de votre couleur que vous aurez défini auparavant : 1.2. Ajout de la bar d’action Créez un fichier toolbar.xml dans le répertoire res/layout et ajoutez le code ci-dessous, il permet de définir notre action bar : Puis ouvrez, votre activity_main.xml puis ajoutez le toolbar que nous venons de créer. Compilez et vous devriez avoir : Pour mieux comprendre la structure de l’application, nous allons rajouter une image “search” qui servira de bouton sur la bar d’action. Téléchargez le fichier à cette adresse http://api.androidhive.info/images/ ic_action_search.png et placez l’image dans un des dossier mipmap. Puis ouvrez le fichier menu_main.xml qui se situe dans le dossier res/menu et créer un item pour l’image search comme ci-dessous : Ouvrez votre fichier MainActivity.java, vérifiez que votre classe hérite de AppCompatActivity. Puis nous allons appeler dans “onCreate” notre bar d’action que nous venons de créer dans notre classe pour qu’il puisse être utilisé. Ensuite nous réécrivons onCreateOptionsMenu() et onOptionsItemSelected(). Lancez l’application, vous devriez avoir: 1.3. Ajoute du menu coulissant Dans le build.gradle qui se situe sous le module:app : Rajoutez les dépendances,les “dependecies” sont des librairies, ci-dessous : Une fois rajouté, reconstruisez le projet “rebuild project”. Nous créons ensuite une classe NavDrawerItem qui définira chaque rangée du menu. Nous définissons maintenant la vue qu’aura la rangée dans le menu. Nous mettrons juste un titre, mais il est possible de rajouter une icon ou autre si vous le souhaitez. Créons dans notre dossier res/layout le fichier nav_drawer_row.xml Nous allons rajouter une icône utilisateur dans notre menu. Téléchargez l’image à cette adresse, si vous n’avez pas d’image. ( http://api.androidhive.info/images/ic_profile.png ). Maintenant nous allons créer un autre fichier fragment_navigation_drawer.xml, toujours dans le dossier res/layout. Ce dernier permettra d’afficher ce que nous verrons sur l’application. Nous allons maintenant adapter les rangées de notre RecyclerView (une liste) avec les rangées, nav_drawer_row.xml précédemment défini. Pour cela nous allons créer une classe java NavigationDrawerAdapter.java Une fois fait nous créons une classe java FragmentDrawer.java, qui hérite de fragment, qui permettra d’instancier le menu déroulant. Dans cette classe, nous définissons tout les comportements du menu en fonction des gestes de l’utilisateur. Dans le activity_main.xml, nous pouvons alors écrire notre menu déroulant. Et le définir dans notre MainActivity.java notre DrawerLayout 1.4. Implémentation de fragments au menu Pour compléter cette première partie nous allons créer les fragments pour pouvoir naviguer. Définissons home_fragment.xml dans un premier temps et FragmentHome.java dans un second temps. Les autres fragments sont construits de la même façon. et le FragmentHome : 2. Onglet glissant Dans un premier temps nous avons besoin de rajouter une autre dépendance (“compile ‘com.android.support:design:23.0.1’ “) dans le gradle : Une fois écrit, reconstruisez votre projet. (“Rebuild Project”). Nous allons maintenant construire une nouvelle activité qui aura 3 onglets glissant. Créer une nouvelle activité qui aura pour nom : TabMovieDetailsActivity. Ouvrez le fichier activity_tab_movie_details.xml et définissez les paramètres suivant : Puis ouvrez TabMovieDetailsActivity.java, le code permettra d’avoir 3 onglets coulissants avec un texte et une icône définissant chaque onglet. Nous définissons nos variables. Dans la fonction onCreate, nous récupérons les paramètres transmis par le MainActivity grâce au Bundle. Nous initialisons les variables que nous allons utiliser. getSupportActionBar().setDisplayHomeAsUpEnabled(true) permet d’afficher une flèche de retour sur l’écran défini dans l’AndroidManifest. Il faut rajouter la balise meta-data comme ci- dessous Les images suivantes concernent toujours la classe TabMovieDetailsActivity.java La méthode setupViewPager() permet de lier les onglet à un fragment. C’est dans cette fonction qu’il faudra rajouter des fragments si vous souhaitez avoir plus d’onglet. La méthode setupTabIcons() permet d’ajouter une icone au titre de l’onglet. Les fragments appelés dans cette classe sont du même modèle que celui que nous avons créé dans la partie “Sliding menu” La classe FragmentPagerAdapter permet de garder les fragments appelés sont active tant que l’activité est utilisé. Vous devriez avoir : 3. Structure des interfaces Pour structurer nos affichages nous avons opté pour l’utilisation de LinearLayout et de Layout_weight. Cela permet de définir l’espace que prendra chaque élément dans l’affichage que ce soit en hauteur ou en largeur. Exemple avec notre home_fragment.xml : Comme décris dans le code nous avons l’image qui prend un poids de 6 pour la hauteur de l'écran disponible et le LinearLayout contenant les 3 boutons prend un poids de 2 de la hauteur. Nous avons un poids total de 8 donc l’image prend 6/8 de la place et le LinearLayout 2/8 Dans la partie des 3 boutons nous mettons un poids de 1 à chaque bouton ce qui divise l’espace en 3 partie. Pour réarranger les boutons lorsque l’utilisateur change de format d’écran, un écran plus grand ou l’orientation, nous avons utilisé un dossier que nommons layout-land et layout- sw600dp. En effet le code ci-dessus permet aux composants d’occuper l’espace que nous lui fournissons mais ne change pas de position. Donc pour changer de position nous devons créer un nouveau dossier et nous recréons un fichier du même nom que celui que nous avons besoin d’adapter. Par exemple créer un fichier fragment_home.xml dans le dossier layout-land. Layout-land correspond au fichier xml que nous utiliserons lorsque l’orientation est en paysage. sw600dp correspond au fichier xml que nous utiliserons lorsque le matériel a un écran d’au moins 600dp. Si vous souhaitez faire apparaître des composants lors d’une action, comme un clique, vous avez un paramètre “visibility” qui prend 3 paramètres : -Gone signifie que l'élément ne prend pas de place et disparaît de l’écran. -Invisible signifie que l’objet garde la place qui l’occupe bien qu'il soit plus visible. -Visible, est l’état par défaut de chaque élément, nous pouvons voir l’élément.. Par exemple, dans notre code pour afficher et enlever nos commentaire nous avons mis un “listener” sur un objet de la liste et changé la visibilité : 2) Les outils de développement et de tests utilisés Nous avons utilisé Android Studio pour développer l’application Android. Il faut au préalable avoir java installé. Les tests ont été effectué sur un Galaxy S4, S6 et un Acer A1. 3) Déploiement uploads/s3/ tutorial-react-android-jean-philippe-kha-remi-pourtier.pdf