Dans cette série de tutos on va apprendre à créer une application android permettant de visionner des vidéos de YouTube. Nous allons nous concentrer que sur la partie cliente notamment android.

L'objectif sera d'apprendre comment:

  • Intégrer l'API de YouTube dans une application android
  • Utiliser la librairie retrofit 2 et Picasso

Comme nous sommes des pros, nous allons faire les choses comme telles

Des pros comme jamais
Des pros comme jamais !

Worflow: On va définir ici comme les écrans de notre application vont se succèder. Pour cela nous allons utiliser Draw, un outil très cool qui va nous simplifier la vie (Je vais vous laisser vous débrouiller tout seul comme des pros )

Worflow

 

Ai-je vraiment besoin d'expliquer cette image ? Euh je vais faire un effort:

  • MainApp: C'est l'écran principal, celui du démarrage. Il va afficher la liste des vidéos qui existent dans notre base de données.
  • Details: Comme son nom l'indique il va afficher toutes les informations nécessaires sur un film que l'utilisateur aura cliqué.
  • Play Video: l'écran qui va lire la vidéo.

Théoriquement on connait combien d'écrans on a créer mais avant de commencer à coder on va faire un peu de théorie.

Comment lire les données sur une base de données distante depuis notre application android ?

Pour commencer les applications mobiles n’accèdent pas à la base de données distante, je répète les applications mobiles n’accèdent pas à la base de données distante.

Euh sérieux cousin ?

 

Bon voilà je vous explique!

Archictecture

 

En fait, il y'a une couche intermédiaire entre votre application mobile et la base de données. Cette couche s'appelle web service.

Il s'agit d'une technologie permettant à des applications de dialoguer à distance via Internet, et ceci indépendamment des plates-formes et des langages sur lesquelles elles reposent. Pour ce faire, les services Web s'appuient sur un ensemble de protocoles Internet très répandus (XML, HTTP), afin de communiquer. Cette communication est basée sur le principe de demandes et réponses, effectuées avec des messages XML/JSON.

  1. Notre application lance une requête, dans notre cas, je veux la liste des vidéos
  2. Notre web service interroge la base de données
  3. On retourne la liste des vidéos
  4. On convertit les données aux formats JSON
  5. Et enfin on transmet ces données au format JSON à notre application

JSON (JavaScript Object Notation) est un format d'échange de données en texte lisible. Il est utilisé pour représenter des structures de données et des objets simples dans un code qui repose sur un navigateur Web.

JSON:

{"widget": {
    "debug": "on",
    "window": {
        "title": "Sample Konfabulator Widget",
        "name": "main_window",
        "width": 500,
        "height": 500
    },
    "image": { 
        "src": "Images/Sun.png",
        "name": "sun1",
        "hOffset": 250,
        "vOffset": 250,
        "alignment": "center"
    },
    "text": {
        "data": "Click Here",
        "size": 36,
        "style": "bold",
        "name": "text1",
        "hOffset": 250,
        "vOffset": 100,
        "alignment": "center",
        "onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;"
    }
}}    

On aura de temps de bien expliquer ce format. Retenez juste que c'est à ce format que les données seront retournées à notre application.

Dans la prochaine étape, nous allons maintenant toucher au code donc faire ce qu'on sait faire de mieux.

Nous allons créer tous les écrans comme nous l'avons fait dans le worflow.


Partager cet article

Moudjames23

Diallo Moud

@Moudjames23

Error 404 not found