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,
vinzjobard3. 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 :
#087437On utilisera le gris du site MétroNews pour faire le divider :
#F1F2F33.2. Les flux de MétroNews
Je reprendrais les flux RSS de MétroNews défini ici :
NB : Il semblerait qu'il n'exite plus qu'un flux d'actualité pour MétroNews. Du coup nous n'aurons qu'une rubrique
| Rubrique | Flux RSS |
|---|---|
| L'information en continu | http://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 scopescopecreator 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.jsonqui 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
- un répertoire
Nous travaillerons désormais à partir du répertoire de travail
metronews-fr-scopecd 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)
- Scope :
- 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 scopescopecreator edit config
Cela va avoir pour effet d'ouvrir le fichier
manifest.json via l'éditeur nano par défautNous 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 +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éfautNous 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 +X 4.4. Configuration des flux du scope
Maintenant nous allons configurer ce scope avec les flux disponibles :
- Etiquette : Dernières actualités
- ID : http://www.metronews.fr/rss.xml
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 buildscopecreator 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
Voici un aperçu de notre scope :
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 »
- Charger le click package
- Choisir sa catégorie, précisez l'adresse de support (peut être un mailto:adresse@email.com), et le type de licence
- Définir des mots-clés pour trouver facilement votre application dans la logithèque. Ici on pourra utiliser les mots-clésscopes, news, actualités
- Choisir son icône en 256x256. Normalement l'icône
icon.pngdansmetronews-fr-scope/metronews-fr-scope/imagesdevrait faire l'affaire
- Choisir le prix de son 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
Bonjour, Je suis à l'étape de Génération du package et voici ce qu'il m'indique:
RépondreSupprimer/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
Merci pour ce tuto!
RépondreSupprimerJ'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?
Bonjour,
RépondreSupprimerCe 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