Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Codez votre première tranche Android et maintenez les utilisateurs engagés

by
Difficulty:AdvancedLength:LongLanguages:

French (Français) translation by Soleil (you can also view the original English article)

Le travail ardu n'est pas terminé, car votre application a accumulé une tonne de téléchargements et de critiques positives sur le Google Play Store. Votre utilisateur de téléphonie mobile typique a des dizaines d'applications installées sur son appareil et, avec la sortie de nouvelles applications en permanence, vous devez travailler dur pour garder l'intérêt de votre public!

Il est essentiel de permettre aux utilisateurs de revenir sur votre application pour créer une base d’utilisateurs stable et fidèle. De plus, si vous avez monétisé votre application, la quantité de temps que les utilisateurs passent dans votre application affecte directement la quantité d'argent que vous gagnez. Pensez à chaque seconde supplémentaire comme une autre possibilité d'afficher une publicité -app acheter!

Cette année, lors des E / S, Google a lancé slices, une nouvelle fonctionnalité qui promet de ramener les utilisateurs vers votre application en leur proposant les fonctionnalités et le contenu de votre application au moment où ils en ont le plus besoin.

Avec des tranches qui s’avèrent être un outil important pour fidéliser votre public, c’est le moment idéal pour acquérir une expérience pratique avec cette nouvelle fonctionnalité Android. À la fin de cet article, vous avez créé une plage de tranches, à partir d'une simple tranche qui lance une activité lorsque vous accédez à des tranches plus complexes composées d'icônes, d'images, de grilles et de plusieurs SliceActions.

Slices: Plus de moyens pour les utilisateurs de profiter de votre application

Semblables aux widgets, les tranches sont des extraits de contenu qui apparaissent en dehors du contexte de l'application, ce qui augmente la visibilité de votre application et vous offre davantage d'occasions d'engager votre public.

Les tranches ont le potentiel d’augmenter considérablement la visibilité de votre application, Google promettant d’aider les tranches dans les domaines où de nombreux utilisateurs d’Android passent beaucoup de temps, notamment la recherche Google et l’assistant Google. Comme ils font partie d'Android Jetpack, les tranches sont compatibles avec Android 4.4 et les versions ultérieures, ce qui signifie que vos tranches ont le potentiel d'atteindre 95% de tous les utilisateurs d'Android.

Les tranches ont beaucoup à offrir, mais comment fonctionnent-elles?

Actuellement, si vous effectuez une recherche dans l’application Google, Google peut suggérer une application appropriée installée sur votre appareil. Par exemple, si vous avez installé Facebook for Mobile, taper sur Facebook affichera un lien direct vers l’application Facebook.

Androids predictive apps suggest the application users might want to interact with next

Les tranches amènent cette application à aller plus loin, en se concentrant sur les tâches spécifiques que l'utilisateur peut souhaiter effectuer dans les applications déjà installées.

Examinons un exemple: imaginez que vous ayez installé une application Book A Hotel qui vous permet de rechercher un hôtel et de réserver une chambre. Lorsque vous tapez London hotels dans Google, vous rencontrez les résultats de recherche habituels, plus une tranche de l'application Book A Hotel. Cette section recommande un hôtel à Londres et affiche des informations telles que le nom et l’adresse de l’hôtel, ainsi qu’un SliceAction, sous la forme d’un bouton permettant de réserver une chambre directement depuis l’interface utilisateur de la tranche.

Pour l'utilisateur, cette tranche a permis d'accéder facilement aux informations et aux fonctionnalités dont ils avaient besoin à un moment donné. Pour le développeur, cette tranche leur a permis d’obtenir leur application devant un utilisateur au moment précis où ils avaient la plus grande chance de les réengager avec succès.

Comment créer ma première tranche?

Commençons par créer une simple tranche qui, une fois lancée, lancera la MainActivity de notre application.

Cette technique simple permet de démarrer n'importe quelle tâche directement à partir de l’interface utilisateur d’une tranche. Dans notre exemple Book A Hotel, nous pouvions simplement lier le bouton à BookRoomActivity de l’application associée, ce qui serait un moyen simple mais efficace de réduire le nombre d’écrans que l’utilisateur doit parcourir pour accomplir cette tâche particulière.

Pour commencer, créez un nouveau projet Android. Vous pouvez utiliser les paramètres de votre choix, mais assurez-vous de cocher la case Include Kotlin support lorsque vous y êtes invité.

Une fois que vous avez créé votre projet, ouvrez son fichier build.gradle et ajoutez les dépendances slice-core et slice-builder:

Affichage du contenu de votre application dans Google Search, avec des fournisseurs de tranches

Ensuite, nous devons créer un fournisseur de tranche, composant responsable de l’affichage du contenu de votre application en dehors du contexte de l’application.

Vous créez un fournisseur de tranches à l'aide du modèle de fournisseur de tranches d'Android Studio:

  • Sélectionnez New > Other> Slice Provider dans la barre d'outils Android Studio.
  • Entrez le nom MySliceProvider.
  • Définissez la Source language sur Kotlin.
  • Cliquez sur Finish.
  • Ouvrez la classe MySliceProvider et vous devriez voir le code généré automatiquement suivant:

Si vous créez votre fournisseur de tranches à l'aide de New> Other> Slice Provider, Android Studio ajoutera également le fournisseur nécessaire à votre manifeste:

Cette entrée garantit que votre tranche peut être découverte par d'autres applications.

Votre projet Gradle Sync a-t-il échoué?

Jusqu'à présent, nous n'avons utilisé que du code généré automatiquement par Android Studio, mais votre projet refuse peut-être déjà de compiler!

Les bogues, les fonctionnalités manquantes et les comportements étranges ne sont qu’une partie du plaisir de travailler avec les premières versions. Au moment de la rédaction du présent document, la génération d’un fournisseur de tranche ajoutait parfois de manière inexplicable un nouvel ensemble de dépendances au fichier build.gradle de votre projet.

Non seulement ces dépendances sont inutiles - elles sont erronées. Bien que facile à manquer, comparez:

Avec le correct:

Un simple s peut faire la différence entre une application qui fonctionne et un projet qui refuse de compiler. Il y a de fortes chances que ce bogue soit corrigé avant la sortie officielle des tranches, mais si Android Studio commence à se plaindre des dépendances non résolues, vérifiez votre fichier build.gradle pour voir si cela s'est produit dans votre projet.

Construction d'une tranche: URI, SliceActions et Slice Layouts

Pour transformer le code passe-partout du fournisseur de tranches en une tranche fonctionnelle, nous devons apporter plusieurs modifications:

1. Définir l'URI

Chaque tranche possède un URI unique, et c’est le travail du fournisseur de tranche de fournir le mappage entre cet URI et la tranche correspondante.

Les applications capables d'afficher une tranche sont appelées applications hôtes. Chaque fois qu’un hôte doit afficher une tranche, il envoie une demande de liaison au fournisseur de la tranche avec l’URI de la tranche qu’il recherche. Votre fournisseur de tranche vérifiera alors l'URI et renverra la tranche appropriée.

Dans l'extrait de code suivant, la méthode onBindSlice vérifie le chemin d'accès /myURI et renvoie une tranche affichant un message Hello World.

2. Faites votre tranche interactive

Bien que vous puissiez créer une tranche qui affiche simplement certaines informations, si vous souhaitez que votre tranche soit interactive, vous devrez créer une ou plusieurs SliceActions.

Un SliceAction peut être composé d'un titre, d'une icône et d'un PendingIntent. Vous pouvez également marquer SliceActions comme des actions principales, qui se déclenchent chaque fois que l’utilisateur appuie sur la ligne de cette tranche.

3. Construire l'interface utilisateur de la tranche

Vous définissez la disposition d’une tranche en implémentant un composant ListBuilder, en ajoutant une ligne, puis en ajoutant des éléments à cette ligne. Par exemple, ici, j'utilise ListBuilder et addRow pour créer une tranche composée d'un titre et d'un sous-titre:

Vous pouvez afficher un mélange de différents types de contenu dans la même ligne, tels que du texte, des actions et des icônes.

Construisez votre première tranche Android entièrement fonctionnelle

Maintenant, appliquons tout cela à notre projet et créons une tranche qui lance le MainActivity de notre application lorsque vous cliquez dessus.

Ouvrez la classe MySliceProvider et ajoutez les éléments suivants:

Test de vos tranches: Installation de Slice Viewer

Si vous voulez tester vos tranches, vous aurez besoin d’au moins une application capable d’afficher des tranches.

Les tranches feraient leur apparition dans la recherche Google plus tard cette année, mais au moment d’écrire ces lignes, cette fonctionnalité n’avait pas encore été déployée. Actuellement, le seul moyen de tester des tranches consiste à installer l’application Slice Viewer de Google, conçue pour simuler l’apparition des tranches dans la recherche Google.

Pour installer Slice Viewer sur un Android Virtual Device (AVD):

Pour installer Slice Viewer sur un smartphone ou une tablette physique:

  • Télécharger Slice Viewer.
  • Assurez-vous que votre smartphone ou votre tablette est connecté à votre machine de développement.
  • Déplacer APK Slice Viewer dans le dossier Android / sdk / platform-tools de votre ordinateur.
  • Ouvrez une fenêtre d'invite de commande (Windows) ou de terminal (Mac).
  • Changer de répertoire (cd) pour que l'invite de commande ou le terminal pointe vers votre dossier Android / sdk / platform-tools. Par exemple, voici ma commande:
  • Exécutez la commande en appuyant sur la touche Entrée de votre clavier.
  • Utilisez la commande adb install pour pousser l'APK sur votre appareil Android:

Création d'une configuration d'exécution d'URI

Ensuite, vous devez créer une configuration d’exécution qui transmet l’URI unique de votre tranche à votre périphérique AVD ou Android.

  • Sélectionnez Run> Edit Configurations… dans la barre d'outils Android Studio.
  • Cliquez sur le bouton +, puis sélectionnez Android App.
Create a run configuration by navigating to Run Edit configurations Android App
  • Donnez un nom à votre configuration d'exécution. J'utilise sliceConfig.
  • Ouvrez la liste déroulante Module, puis sélectionnez app.
  • Ouvrez le menu déroulant Launch , puis sélectionnez l'URL.
  • Entrez l’URL de votre tranche, au format slice-content: // nom-paquet / slice-URL. Par exemple, l’URL de ma tranche est la suivante: slice-content: //com.jessicathornsby.kotlinslices/launchMainActivity.
  • Cliquez sur OK.
  • Sélectionnez Run > Run sliceConfig dans la barre d'outils Android Studio, puis sélectionnez votre appareil Android.

La première fois que Slice Viewer essaie d’afficher votre tranche, il demande l’autorisation d’accéder à l’URI unique de votre tranche. Appuyez sur Allow et naviguez dans le dialogue des autorisations, et votre tranche devrait apparaître à l'écran.

The first time you try to display your slice Slice Viewer will request permission to display your applications slices

Pour interagir avec SliceAction, cliquez sur le bouton Open MainActivity et la tranche répondra en lançant MainActivity de votre application.

Tirer le meilleur parti de vos tranches: ajouter une deuxième SliceAction

Pourquoi se limiter à une SliceAction, alors que vous pouvez avoir plusieurs SliceActions? Dans cette section, nous allons implémenter deux SliceActions, où chaque action lance une Activity différente. Je vais également introduire quelques nouveaux éléments d’interface utilisateur, en ajoutant un sous-titre et des éléments finaux à notre tranche.

Créer une seconde activité

Laissons l’installation à l’écart et créons une seconde Activity à laquelle notre deuxième SliceAction peut se connecter.

Tout d'abord, sélectionnez New > Kotlin File / Class dans la barre d'outils Android Studio. Dans la boîte de dialogue du nouveau fichier, ouvrez la liste déroulante Kind et sélectionnez Class. Nommez cette classe SecondActivity, puis cliquez sur OK.

Ouvrez maintenant votre classe SecondActivity et ajoutez ce qui suit:

Ensuite, sélectionnez New> Android Resource File dans la barre d'outils Android Studio. Dans la fenêtre suivante, ouvrez la liste déroulante Resource type et sélectionnez Layout. Nommez ce fichier activity_second et cliquez sur OK.

Ouvrez maintenant ce fichier de disposition et ajoutez le code suivant:

Ouvrez le manifeste de votre projet et déclarez cette SecondActivity:

Création d'interfaces utilisateur plus complexes: éléments d'extrémité de tranche

Les éléments finaux peuvent être un horodatage, une image ou une SliceAction, mais, comme leur nom l'indique, ils apparaissent toujours à la fin d'une ligne. Vous pouvez ajouter plusieurs éléments finaux à une seule ligne, même si, selon l’espace disponible, il n’est pas garanti que tous les éléments finaux seront affichés pour l’utilisateur.

Nous allons créer nos SliceActions sous forme d’icônes, vous devrez donc ajouter deux nouveaux tirables à votre projet:

  • Sélectionnez New > Image Asset dans la barre d'outils Android Studio.
  • Cliquez sur le petit bouton Clip Art (affiche une image d'un Android par défaut).
  • Sélectionnez l'icône que vous souhaitez utiliser pour votre élément de fin Launch MainActivity. J'utilise l'icône Home.
  • Donnez à cette icône le nom ic_home, puis cliquez sur Next.
  • Lisez les informations à l’écran, et si vous êtes heureux de procéder, cliquez sur Finish.

Répétez les étapes ci-dessus pour créer une icône pour votre action de tranche Launch SecondActivity. Pour mon deuxième article, j'utilise l'icône call et je l'appelle ic_call.

Créer la deuxième SliceAction

Nous sommes maintenant prêts à ajouter un deuxième SliceAction à la classe MySliceProvider:

Comme nous n’avons pas modifié l’URI, il n’est pas nécessaire de créer une nouvelle configuration d’exécution, ce qui signifie que tester cette tranche est aussi simple que de sélectionner Run > sliceConfig dans la barre d’outils d’Android Studio.

Our slice consists of two end items which are linked to separate SliceActions

Vous pouvez télécharger ce projet depuis le tutoriel GitHub repo.

Tranches multimédia: création de mises en page de grille

Jusqu'à présent, nous avons construit toutes nos tranches en utilisant uniquement des lignes, mais vous pouvez également créer des tranches à l'aide de lignes et de cellules de grille.

Dans cette dernière section, nous allons créer une tranche composée d’un titre, d’un sous-titre et d’une seule ligne divisée en trois cellules. Chaque cellule aura son propre titre, un certain corps de texte et une image, et chacune effectuera une action unique lorsqu'elle sera tapée.

Well be creating a grid-based slice consisting of three unique SliceActions

Pour disposer votre tranche dans une grille, vous devez:

  • Implémenter un ListBuilder.
  • Ajoutez une ligne de grille au ListBuilder, en utilisant addGridRow.
  • Ajoutez des cellules à la ligne en utilisant addCell. Chaque ligne peut afficher un maximum de cinq cellules.

Vous pouvez ensuite ajouter du contenu à chaque cellule, par exemple:

  • Un titre que vous ajoutez en utilisant addTitleText.
  • Corps du texte, en utilisant addText.
  • Images que vous créez avec addImage. Chaque image de cellule doit avoir l'un des attributs suivants: LARGE_IMAGE, SMALL_IMAGE ou ICON_IMAGE.
  • Une intention de contenu, qui équivaut à peu près à une SliceAction. Pour vous aider à garder cet exemple simple, il vous suffit de toucher chaque cellule pour charger un article dans le navigateur par défaut du périphérique, mais si vous préférez une expérience plus authentique des tranches, vous pouvez modifier le code setContentIntent.

Je vais inclure des images dans ma grille, vous devrez donc en ajouter au moins un à votre projet. J'utilise le logo Kotlin, mais vous pouvez saisir n'importe quelle image et la déposer dans le dossier Drawable de votre projet.

Maintenant, vous êtes prêt à ouvrir la classe MySliceProvider et à créer votre grille:

Vous pouvez trouver le code complet pour ce projet dans notre repo GitHub.

Exécutez cette application sur votre périphérique AVD ou Android physique et essayez d'interagir avec chaque élément de la grille. Chaque cellule doit être liée à un article différent.

Assurez-vous que votre tranche est bonne, quelle que soit l'application hôte

La manière dont le contenu de votre tranche est affichée peut varier en fonction du mode de configuration de l’application hôte. Pour vous assurer que vos tranches ont fière allure et fonctionnent correctement quelle que soit l’application d’hébergement, vous devez tester vos tranches sur tous les différents modes de tranche.

Comme notre tranche de grille contient beaucoup plus de contenu que les tranches précédentes, il est préférable d’illustrer les différences entre ces différents modes de découpe.

Pour mettre votre part dans le test, cliquez sur la petite icône dans le coin supérieur droit du visualiseur de tranche, puis faites défiler les modes suivants:

1. grand

Dans ce format, Android affiche autant de lignes que possible dans l'espace disponible. C'est le mode que Slice Viewer utilise par défaut.

2. raccourci

Dans ce mode, votre tranche est représentée par une icône et une étiquette.

In shortcut mode our slice is represented by the Kotlin drawable

Si un en-tête principal est associé à votre SliceAction, il sera utilisé comme icône de votre tranche. Si aucune icône n’est disponible, Android affichera à la place l’action principale associée à la première ligne de votre tranche, à savoir notre tableau Kotlin.

Pour changer l’icône affichée en mode de raccourci, ajoutez un deuxième dessin à votre projet, puis mettez à jour la section suivante du fournisseur de tranche:

3. petit

Le petit mode a une hauteur restreinte et affichera un seul SliceItem ou une collection limitée d'éléments en une seule ligne de contenu. Si votre tranche a un en-tête, cela sera affiché, ce qui est exactement ce qui se passe avec notre tranche.

In small mode our slice is represented by a title and a subtitle

La modification du titre ou du sous-titre affectera le contenu affiché en petit mode.

Si votre tranche ne contient pas d’en-tête, la première ligne de la tranche sera affichée à la place.

Cut Down Code, avec les constructeurs de tranches KTX

Une fois que vous avez appris à implémenter une nouvelle fonctionnalité, l’étape suivante consiste à apprendre à fournir les mêmes résultats, avec moins de code!

Android KTX est une collection de modules composée d'extensions qui optimisent la plateforme Android pour Kotlin. Le module Slice Builders KTX d'Android KTX enveloppe le modèle de générateur dans un DSL compatible avec Kotlin qui vous aide à créer vos tranches de manière plus concise et lisible. Pour commencer avec Slice Builders KTX, remplacez la dépendance suivante:

Avec :

Vous pouvez ensuite modifier votre méthode createSlice pour utiliser ce DSL. Par exemple, voici une simple tranche qui affiche un titre et un sous-titre:

En utilisant le DSL, cela devient:

Conclusion

Dans cet article, nous avons acquis une expérience pratique avec la fonction des tranches Android à venir. Nous avons vu comment créer une tranche simple permettant d'accéder directement à n'importe quelle partie de votre application, avant de créer des tranches plus complexes composées d'éléments finaux, d'images, de texte supplémentaire et de plusieurs SliceActions.

Vous pouvez en apprendre plus sur les tranches dans les documents Android officiels.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.