mercredi 11 mars 2015

Tutoriel : Création d'un scope pour Ubuntuphone

L'une des fonctionnalité les plus interessante de l'Ubuntuphone est sans contestation ses scopes, permettant d'agréeger tout type de contenus et de le présenter dans une vue.
Si créer des scopes complexe n'est pas à la porter de n'importe qui, on peut, toutefois, sans trop s'y connaitre en technique, créer des scopes personnalisés à partir de flux Twitter, RSS ou YouTube grâce à l'utilitaire scopecreator écrit par Chris Wayne, un employé de Canonical.
Nous allons prendre ici l'exemple de la création d'un scope agrégeant les flux RSS de Métro News, les sites d'actualités étant parfaitement adaptés pour l'exercice. Cela aussi montrera que contrairement au monde iOS et Androïd, il n'est pas nécessaire de connaitre la programmation pour proposer une « application » pour les sites d'actualités, un scope pouvant souvent faire l'affaire

1. Installation de scopecreator de Chris Wayne


Tout d'abord nous allons installer l'outils scopecreator à partir de l'archive de paquets personnelle (PPA) de Chris :
sudo add-apt-repository ppa:cwayne18/ppa
sudo apt-get update
sudo apt-get install scopecreator
ATTENTION : Comme toujours, l'installation de paquets provenant d'un PPA peut entrainer des erreurs sur votre système. Cette opération est à faire à vos risques et périls.

2. Création d'un compte sur le portail des developpeurs Ubuntu


Ensuite nous nous créerons un profil sur le portail des développeurs Ubuntu. Je vous invite à vous y rendre régulièrement tant le site fourmille d'infos, sur les API, des recettes pour créer vos applications, et des tutoriaux souvent bien fournis.
Lors de la création de votre compte, qui est lié à votre compte Ubuntu One, il vous sera demandé de renseigné un « Short package namespace ». Il vous sera conseillé de garder votre login launchpad si vous avez déjà un compte.
Pour ma part, le mien est, sans surprise, vinzjobard

3. Les ressources


Nous allons préparer les ressources qui nous permettront de faire l'habillage de ce scope, pour le rendre conforme ou presque avec la chartre du site

3.1. Les élements graphiques

Le logo du site se trouve ici
J'ai découpé le "O" pour en faire une icone.

Icone MetroNews ›

 Télécharger l'icône MetroNews pour le scope Ubuntu.
J'ai aussi repéré le code hexadécimal du vert MétroNews, ce qui nous servira pour les boutons et l'arrière-plan de notre entête : #087437
On utilisera le gris du site MétroNews pour faire le divider : #F1F2F3

3.2. Les flux de MétroNews

Je reprendrais les flux RSS de MétroNews défini ici :
RubriqueFlux RSS
Actualitéhttp://www.metronews.fr/fr/rss.xml?c=section-news
Loisirshttp://www.metronews.fr/fr/rss.xml?c=section-art
Ma viehttp://www.metronews.fr/fr/rss.xml?c=section-lifestyle
Ma Planètehttp://www.metronews.fr/fr/rss.xml?c=1157379272-32
Sportshttp://www.metronews.fr/fr/rss.xml?c=section-sports
Numériquehttp://www.metronews.fr/fr/rss.xml?c=1157379272-44
Jeuxhttp://www.metronews.fr/fr/rss.xml?c=1157379272-52
Emploihttp://www.metronews.fr/fr/rss.xml?c=1157379272-53
Immobilierhttp://www.metronews.fr/fr/rss.xml?c=1157379272-54
Argenthttp://www.metronews.fr/fr/rss.xml?c=section-economy
Voyageshttp://www.metronews.fr/fr/rss.xml?c=1157379272-56
Photohttp://www.metronews.fr/fr/rss.xml?c=1157379272-58
NB : Il semblerait qu'il n'exite plus qu'un flux d'actualité pour MétroNews. Du coup nous n'aurons qu'une rubrique
RubriqueFlux RSS
L'information en continuhttp://www.metronews.fr/rss.xml

4. Création du scope metronews-fr-scope


4.1. Génération du scope

Grâce à scopecreator, on va générer le template nous permettant de créer notre scope
scopecreator create rss vinzjobard metronews-fr-scope
L'outils va nous créer un répertoire metronews-fr-scope avec les différents fichiers et répertoires que voici :
  • le fichier manifest.json : C'est en quelque sorte la « carte d'identité » de notre scope. C'est ce fichier que nous modifieront lorsque nous configurerons l'identité du scope
  • le fichier scope-security.json qui gère le profil de sécurité AppArmor de notre scope
  • le répertoire metronews-fr-scope, contenant :
    • un répertoire images. C'est là où nous placeront nos éléments graphiques
    • un fichier feeds.json, qui contiendra la définition de nos flux
    • un fichier metronews-fr-scope.vinzjobard_metronews-fr-scope.ini, qui contient le paramétrage esthéthique du scope. C'est ce fichier que nous modifierons lorsque nous configurerons l'habillage du scope
    • un fichier libmetronews-fr-scope.vinzjobard_metronews-fr-scope.so, binaire contenant les templates du scope
Nous travaillerons désormais à partir du répertoire de travail metronews-fr-scope
cd metronews-fr-scope/

4.2. Configuration de l'identité du scope

Nous allons ensuite configurer ce scope avec ces quelques infos :
  • Espace de nom du scope : metronews-fr-scope.vinzjobard (Par défaut)
  • Description : Scope non-officiel du site metronews.fr
  • Framework : ubuntu-sdk-14.10 (Par défaut)
  • Architecture : armhf (Par défaut)
  • Titre : MetroNews
  • Hameçons :
    • metronews-fr-scope (Par défaut) :
      • Scope : metronews-fr-scope (Par défaut)
      • AppArmor : scope-security.json (Par défaut)
  • Version : 0.1 (Par défaut, à faire évoluer avec l'évolution de votre scope)
  • Mainteneur : Votre Nom
Pour ce faire nous allons utiliser la commande intégrée edit de scopecreator pour modifier la config de notre scope
scopecreator edit config
Cela va avoir pour effet d'ouvrir le fichier manifest.json via l'éditeur nano par défaut
Nous aurons donc le fichier manifest.json suivant :
{
    "name": "metronews-fr-scope.vinzjobard",
    "description": "Scope non-officiel du site metronews.fr",
    "framework": "ubuntu-sdk-14.10",
    "architecture": "armhf",
    "title": "MetroNews",
    "hooks": {
        "metronews-fr-scope": {
            "scope": "metronews-fr-scope",
            "apparmor": "scope-security.json"
        }
    },
    "version": "0.1",
    "maintainer": "Winael 
Petite astuce : Sous Nano, il est possible de remplacer une occurrence en utilisant +\
Sauvegardons (+O), puis quittons l'édition du fichier (+X).

4.3. Configuration de l'habillage du scope

A présent nous allons habiller notre scope.
Tout d'abord récupérons les éléments graphiques (logo et icône)
wget http://www.metronews.fr/locale/fr/templates/img/global/metronews_logo_341x72.png metronews-fr-scope/images/logo.png
wget https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsbxplAPbKzjwhjFjtbk0S_E-q9uH-HW_kIPsdQs93Sgd26w1Uu4A7dmOu3EDtMsJRU_76ux56bPpQVdViBHRSlbh1qcH9JopBaCnDL8_gGSPw49Zi-_rOmuizR11FGCw9e77XdWBRXHZi/s1600/icon-metronews.png metronews-fr-scope/images/icon.png
Nous allons ensuite configurer ce scope avec ces quelques infos :
Configuration du scope :
  • Nom d'affichage : MetroNews
  • Description : Scope non-officiel du site metronews.fr
  • Auteur : Nom de l'auteur du scope. Pour moi ce sera Winael
  • Art : (Nous commenterons cette clé pour le moment tant que nous n'avons pas créer de copie d'écran)
  • Icone : images/icon.png (Notre image icône précédement téléchargée)
  • Aide visuelle pour la recherche : Rechercher dans MetroNews (ce texte s'affichera quand l'utilisateur voudra faire une recherche)
Apparence du scope :
  • Couleur de premier plan : #272727
  • Couleur du bouton de prévisualisation : #087437
  • Logo pour l'entête : images/logo.png(Notre image logo précédement téléchargée)
  • Couleur d'arrière plan de l'entête : #087437
  • Couleur de premier plan de l'entête : #FFFFFF
  • Couleur du diviseur : #F1F2F3
  • Couleur de la barre de navigation : #087437
Nous allons utiliser la commande intégrée edit de scopecreator pour modifier le branding de notre scope.
scopecreator edit branding
Cela va avoir pour effet d'ouvrir le fichier metronews-fr-scope/metronews-fr-scope.vinzjobard_metronews-fr-scope.ini via l'éditeur nano par défaut
Nous aurons donc le fichier metronews-fr-scope/metronews-fr-scope.vinzjobard_metronews-fr-scope.ini suivant après édition :
[ScopeConfig]
DisplayName=MetroNews
Description=Scope non-officiel du site metronews.fr
Author=Winael
#Art=images/screenshot.png
Icon=images/icon.png
SearchHint=Rechercher dans MetroNews

[Appearance]
ForegroundColor=#272727
PreviewButtonColor=##087437
PageHeader.Logo=images/logo.png
PageHeader.Background=color:///#087437
PageHeader.ForegroundColor=#FFFFFF
PageHeader.DividerColor=#F1F2F3
PageHeader.NavigationBackgroundColor=color:///#087437
Sauvegardons (+O), puis quittons l'édition du fichier (+X).

4.4. Configuration des flux du scope

Maintenant nous allons configurer ce scope avec les flux disponibles :
Nous allons utiliser la commande intégrée edit de scopecreator pour modifier les channels (canaux) de notre scope.
scopecreator edit branding
Cela va avoir pour effet d'ouvrir le fichier metronews-fr-scope/feeds.json via l'éditeur nano par défaut.
Nous aurons donc le fichier metronews-fr-scope/feeds.json suivant après édition :
[
    {
        "label": "Dernières actualités",
        "id": "http://www.metronews.fr/rss.xml"
    }
]

4.5. Génération du package

Si vous avez un téléphone sous Ubuntu, tel un Ubuntuphone, ou un Nexus 4, il vous suffit de brancher votre téléphone sur votre PC via un câble USB, de le déverrouiller, puis de lancer scopecreatoravec l'option build
scopecreator build
Un package click sera généré et installé directement sur votre téléphone.
Vous devriez donc voir apparaitre votre scope dans la liste des scopes installés
Le scope Metronews est présent dans la liste des scopes installés
Voici un aperçu de notre scope :
Screenshot1 Screenshot2 Screenshot3 Screenshot4
Il est temps de publier notre scope

4.6. Publication du scope


Pour publier son scope dans la logithèque d'Ubuntu, il faut se rendre dans son espace personnel du portail des developpeurs Ubuntu
  • Cliquer sur « New Application »
New Application
  • Charger le click package
Charger le package click
  • Choisir sa catégorie, précisez l'adresse de support (peut être un mailto:adresse@email.com), et le type de licence
Choisir la catégorie
  • Définir des mots-clés pour trouver facilement votre application dans la logithèque. Ici on pourra utiliser les mots-clésscopesnewsactualités
Définissez les mots-clés
  • Choisir son icône en 256x256. Normalement l'icône icon.png dans metronews-fr-scope/metronews-fr-scope/imagesdevrait faire l'affaire
Choisir l'icône
  • Choisir le prix de son application
Choisir le prix de l'application
  • Soumettez votre application
Soumettez votre application
Si tout se passe bien, votre application devrait être validée dans la foulée et prête à être publiée.
Amusez-vous bien

3 commentaires:

  1. Bonjour, Je suis à l'étape de Génération du package et voici ce qu'il m'indique:

    /usr/bin/scopecreator: ligne 73: click : commande introuvable
    ls: impossible d'accéder à *.click: Aucun fichier ou dossier de ce type
    Android Debug Bridge version 1.0.31


    PS : Suis sous Xubuntu 15.04

    RépondreSupprimer
  2. Merci pour ce tuto!

    J'ai une suggestion, une correction et une question.

    La sugestion: s'agissant d'un scope d'actualités, dans la configuration de l'habillage du scope, ajouter sous [ScopeConfig] la ligne

    Keywords=news.headlines

    Ainsi les aggrégateurs "news" et "today" pourront aussi afficher des résultats du scope MetroNews.

    L'erreur: sous 4.4 Configuration des flux du scope, la ligne de commande devrait être
    scopecreator edit channels
    et non
    scopecreator edit branding

    La question: Grâce à ton tuto, j'ai créé un scope pour RTBF info. J'ai publié une version 0.1. Je voulais préparer une version 0.2 mais en lançant:

    scopecreator build

    ça me renvoit l'erreur:

    Fatal error: could not resolve: /tmp/*.click
    rm: cannot remove ‘/tmp/rtbfinfo-fr-scope.baj_0.1_armhf.click’: No such file or directory

    Est-ce grave, docteur?

    RépondreSupprimer
  3. Bonjour,

    Ce tutoriel a été écris il y a un an. Beaucoup de chose ont changé tant sur l'archi Ubuntu (16.04 LTS) que sur celle du téléphone.

    Je re-testerai à l'occasion pour voir si l'outils fonctionne toujours étant donné qu'il n'est malheureusement plus maintenu.

    La documentation officiel devant prendre un coup de jeune, peut-être que ce sera l'occasion pour moi de m'y remettre, et de proposer un tutoriel avec une méthode plus "officielle".

    Merci en tout cas pour votre retour

    RépondreSupprimer