Non classé

My setup – Facebook Api using OpenFb on an Apache Cordova App

Pourquoi j’écris mon titre en anglais moi… à force de jongler entre les langues je fais du français/anglais dans mon code et maintenant dans mes articles… Pour cet article je vais essayer de détailler les étapes d’une construction d’application utilisant apache codorva autour de l’API Facebook. Mon approche n’est peut être pas la meilleur, vous en faites ce que vous voulez, mais pour moi il est intéressant (important ?) de revoir toute l’approche et les étapes, car honnêtement on s’y perd. Tout d’abord, je reste en « mode dev » pour cet article, c’est à dire que mon app n’ira pas en prod (sur les stores). Par contre je vais utiliser deux applications facebook, une en dev et l’autre pour la prod. (il faudra ici distinguer votre app (iOS/Android) et l’application facebook qui aura « deux modes » (prod et dev). Avant de commencer, il est bon d’avoir deux comptes Facebook. Un compte de développeur et un autre de test (votre perso par exemple). Pour ma part j’utilise deux navigateurs différents (chrome pour le dev, Firefox pour le test). Ainsi j’ai pas besoin de me reconnecter et mes sessions sont bien distinctes. Étape 1 : Création de l’application Facebook Rendez vous sur https://developers.facebook.com, avec votre compte dev. Loguez vous Sur l’onglet My Apps, cliquez sur « Add a new App », séléctionnez site web WWW, choisissez un nom, ensuite une catégorie et « create App ID ». Moi j’ai choisi WebSite-Prod pour ma démo. Ensuite je ré-itère l’opération avec une application de dev, pour cela il faut lui donner un nom comme WebSite-Dev et actionner oui pour le toggle « is this a test version of another app ? » , puis sélectionnez votre app prod (pour moi WebSite-Prod) A ce stade nous avons deux applications Facebook, en réalité nous avons qu’une seule application Facebook qui possède une version de test. Étape 2 : Paramétrage de l’application dev Sélectionnez votre application dans l’onglet MyApp (pour moi WebSite-Dev). Vous êtes sur le Dashboard. Notez que votre AppID se trouve ici. Vous en aurez besoin plus tard.Cliquez sur le menu Settings. Ajoutez une plateforme avec « Add Platform » et sélectionnez WebSite. Ici j’ai rempli au début par http://localhost:8888/. Il s’avère qu’en test-dev pour l’instant ce champ n’est pas vraiment primordiale. Mais je laisse au cas ou je me tromperais sur ce point. Voici ce que vous obtenez : Cliquez maintenant sur « Advanced », dans la section « Client oAuth Settings », il faut renseigner le champ « Valid Oauth redirect URIs » avec ces deux entrées : Supprimer – https://www.facebook.com/connect/login_success.html- http://localhost:8888/cordovaopenfb/www/oauthcallback.html N’oubliez pas d’enregistrer la page après chaque changement. Dans le menu, sélectionnez « Roles ». Dans « Testers » ajouter votre second compte de test : Si vous ne le faites pas, vous risquez de vous retrouvez avec des messages d’erreur de ce type : « Application non configurée: Cette application est toujours en mode de développement. Utiliser un compte test enregistré ou demander à un administrateur de l’application de vous ajoutez les autorisations afin d’accéder à l’application. » Étape 3 : Paramétrage de l’application prod : Dans un premier temps, nous allons paramétrer exactement de la même manière la version prod de notre application. En théorie nous ne devrions pas avoir besoin d’un testeur, mais Facebook impose que l’on fasse au moins une requête (login) de test durant les 30 derniers jours pour valider une review. Donc laissons le pour l’instant. Normalement l’application est ouverte à tous amis par défaut elle ne l’est pas et n’est pas visible au publique. Pour y remédier,  il faut passer l’application en « prod réelle ». Il faut vous rendre dans le menu « Status & Review » et cliquez sur Yes pour « Do you want to make this app and all its live features available to the general public » Si tout va bien il y a un petit point vert qui indique que votre app est en ligne. A ce stade vous pouvez déjà jouer avec votre app. Tout est prêt côté dev facebook. Vous allez pouvoir exploiter à fond toutes les possibilités de votre application Cordova. Côté prod, tout n’est pas permit, mais on peut déjà faire quelques essais. Le login va fonctionner, vous allez pouvoir récupérer quelques infos permises par le scope de base : Seulement vous n’allez pas avoir la possibilité de publier sur le mur par exemple (scope : publish_actions), sauf si vous êtes encore testeur, donc pensez a vous enlever quand vous aurez fait votre premier essai de login pour vous mettre en condition réelle, comme un user lambda. Pour avoir les droits de publications il faut passer par une « Review » Facebook, une soumission à la validation de Facebook sur votre application… Facebook va donc tester votre application. Pour cela il vous faudra renseigner tout un tas d’information permettant aux testeurs de facebook de tester votre application. Note :  Mais quelle application ? Mon app n’est même pas sur un store me direz vous… En théorie Facebook devrait pouvoir tester un site web, ce qui est beaucoup plus simple à mettre en place, même en dev. Mais pour Cordova c’est un lien localhost ! Faut il faire un site web en plus ? Pour l’instant j’ai demandé une validation à l’aveugle, c’est à dire que j’ai fourni quelques screenshots, un semblant de descriptif et une sorte de manuel pour tester… Je rappelle que mon app est justement faite pour tester Facebook…Je te test, tu me testes… je sais pas comment ils vont le prendre… –> réponse : Facebook a rejeté mon app. Voici les éléments à remplir sur votre application Facebook prod avant de demander une Review : menu settings : Contact Email menu App Details :Short description & long description menu App Details : Privacy Policy URL (exemple : https://reactor.fr/privacystatement/facebook/website.html ) menu App Details : App icon (en 1024px par 1024px, fond transparent de préférence si il est blanc) + un test de login avec un compte de test sur votre application. Normalement on est bon la… Étape 4 : faire un essai sur une application mobile J’ai testé sous android avec mon Wiko Ridge 4G. Voici mon code (fait sous Visual…

Erreur Facebook : L’URL fournie n’est pas autorisée par la configuration de l’application

Voici l’erreur qui me prends la tête depuis des heures… (sur Cordova) « L’URL fournie n’est pas autorisée par la configuration de l’application.: Une ou plusieurs URL fournies ne sont pas autorisées par les paramètres de l’application. Elle(s) doi(ven)t correspondre à l’URL du site ou du Canevas, ou le domaine doit être un sous-domaine de l’un des domaines de l’application. » Impossible de trouver la source. J’ai donc repris mon code Cordova et transposé à une application web classique pour isoler au possible mon script. J’y retrouve la même erreur…. Du coup j’ai tout repris à zéro. Page blanche, nouvelle app Facebook, getting started de Facebook…Et je n’ai plus cette erreur. Il s’avère que pour utiliser Oauth.io (mes articles précédents) il faut cocher une case qui par défaut est non cochée. Dans le backoffice d’application facebook  : Paramètres – Advanced – Client Oauth Settings Embedded Browser oAuth Login ne doit pas être à OUI si vous voulez coder avec le SDK Facebook Javascript. Mon code fonctionne sur ma page web classique, je reviens sur mon app Cordova et la surprise…idem, même erreur ! Je ne pige pas…et j’en ai marre de passer des heures la dessus. Je passe à autre chose..

Connection Facebook API sur Apache Cordova

J’ai toujours eu du mal à gérer l’API de Facebook. Même si j’arrive à mes fins, je passe un temps fou à essayer de faire marcher du code, et ça me frustre à un point… J’ai écrit mon premier article sur l’intégration de l’API Facebook en 2012, il y a plus de 3 ans. Je pense avoir joué avec bien avant. Donc cela fait quelques années que je devrais connaitre ce genre de problématique par cœur. Pourtant j’ai toujours l’impression de repartir à zéro et d’être un débutant sur le sujet. Je reproche à Facebook d’avoir eu une doc déplorable pendant de nombreuses années (c’est mieux depuis qq temps). De plus rien en Français, c’est pas encourageant depuis le temps ! Mais je comprends, vu que ça change tous les 6 mois, ils n’ont pas envie de tout retraduire sans doute… C’est moins le cas je pense depuis un moment, mais je me rappelle avoir écrit du code qui ne fonctionnait plus 6 mois après. Et plusieurs fois. D’où l’impression de repartir à zéro. Cet article sera sans doute modifier dans les prochaines semaines, car pas mal de choses ne fonctionnent pas bien encore. Je vais lister ici mes expériences concernant l’intégration de l’API Facebook dans une application Cordova. Voici plusieurs pistes : Piste 1 : Api Facebook Officielle Je n’arrive pas à la faire marcher. J’ai toujours des erreurs, voir pas d’erreur ce qui est pire quand l’application ne fonctionne pas. A priori je ne suis pas le seul : article. Le code getting started fonctionne sur un site web mais pas dans une appli Cordova. Mon problème est résumé dans cet article :http://blog.reactor.fr/post/2015/10/29/connection-facebook-api-sur-une-page-web-en-2015 Je ne travaille plus dessus, j’y ai passé trop de temps. Piste 2 : ngCordovaOAuth Article : http://www.sitepoint.com/how-to-integrate-facebook-login-into-a-cordova-based-app/Mon code sur GitHub : https://github.com/couscousbzh/Matador Ce code fonctionne. Par contre il utilise ngCordova et ngCordovaOauth.Ce n’est pas un problème si on maitrise Angular, ce qui n’est pas encore le cas pour moi. J’aurais aimé dans un premier temps m’en passer. Encore une fois ce code fonctionne mais dès que j’essaie de décomposer, refactoriser ce code je me heurte à d’autre problèmes. Et je perds du temps. Piste 3 : Oauth.io J’utilise un service, https://oauth.io/, gratuit pour les devs, payant par la suite. Le code est simple et rapide à mettre en place. Voici deux applications pour vous permettre de le prendre en main (voir aussi mon précédent article) : https://github.com/couscousbzh/OAuthIOTest1 https://github.com/couscousbzh/OAuthIOTest2 Le premier permet de comprendre les mécanismes de login/logoutLe second tente d’exploiter les APIs. Le bilan est mitigé car : Avantages :- Simple à mettre en place- Accès à un dashboard qui permet d’avoir des informations sans doute très utiles pour le dev et la prod- Multi-Tiers, on peut y brancher tout un tas d’API (Facebook, Twitter, Instagram…)- Poster un message sur le mur de Facebook est simple à mettre en place. Inconvénients :- limité. J’ai tenté de poster une photo depuis le mobile directement sur les photos de facebook. J’ai pas réussi, pas de doc la dessus. – support limité ou inexistant. Suite à mon problème, j’ai posté une question sur StackOverflow, ce que recommande la FAQ de leur site. Mais Aucune réponse pour l’instant de OAuth.io. Si c’est payant par la suite, j’aurais aimé avoir un peu de support. Piste 4 : phonegap-facebook-plugin Le plugin phonegap-facebook-plugin propose de créer un pont avec le SDK Facebook natif et votre code Javascript. Ce qui permettrait de pouvoir par exemple loguer le user directement dans notre app (si l’application officielle Facebook est installé sur le device apr exemple) Voici le repo GitHub : https://github.com/Wizcorp/phonegap-facebook-plugin A la lecture de cet article, je n’ai pas eu envie de me casser la tête. L’article a plus d’un an et depuis le set up à l’air d’avoir évolué (par exemple, il n’est plus nécessaire de faire de manipulation sur Eclipse). Je le mets de coter pour le travailler éventuellement plus tard. Piste 5 : OpenFB OpenFB est une micro librairie pour l’intégration de Facebook en Javascript dans une application browser/Cordova. Ca tombe bien c’est le sujet de cet article. Cette lib utilise l’api Rest de Facebook, ce qui permet de « contourner » la lib officielle Javascript de Facebook. article intéressant : http://kmturley.blogspot.fr/2014/10/facebook-login-inside-hybrid-app-using.htmlrepo GiHub : https://github.com/ccoenraets/OpenFB J’ai testé OpenFb rapidement, en copiant collant bêtement leurs codes et en ajoutant qq fonctionnalités. Pour l’instant j’arrive très bien à le faire fonctionner sur Android. Par contre, gros soucis sur iOS : page blanche lors d’un login…Si quelqu’un à un tuyau… J’ai fait un article sur le setup de l’application sur Facebook Conclusion : L’intégration de Facebook reste toujours une tâche difficile, même en cette fin d’année 2015. J’ai voulu partager mon expérience en ouvrant plusieurs pistes. Pour ma part, la plus simple et rapide est oAuth.io, mais c’est payant. OpenFb est aussi un bon choix et j’ai réussi à aller jusqu’au bout (en dev) sur Android. Par contre, je n’arrive à rien sur iOS, dans tous les cas. Help !

OAuth.io sur une application Apache Cordova

J’ai développé une petite application de test qui se trouve sur github : https://github.com/couscousbzh/OAuthIOTest1 C’est une simple app qui permet de se loguer/logout d’un tiers comme Facebook et Instagram. Cette application part d’une base Apache Cordova (créé sous Visual Studio 2015). On y ajoute le plugin de OAuth.io (https://github.com/oauth-io/oauth-phonegap) J’ai donc créé une application sur Facebook et une autre sur Instagram. Ce qui me donne des clés d’API que je rentre sur le BO de OAuth.io (Tester les avec le boutons Try Auth pour valider que tout va bien) Vous devez obtenir une clé publique de ce site qu’il faudra rentrer dans mon code : Ouvrir  /scripts/index.js et remplacer les XXXX par votre clé. var OauthIOPublicKey = ‘XXXXXXXXXXXXXXXXXXXXXXXXXXX’; Il suffit de lancer l’application en debug sur votre appareil. Voici qq screenshots :  

Comment intégrer proprement Ionic à un projet Visual Studio

Sachez que j’ai passé pas mal de temps à essayer de faire fonctionner correctement Ionic. Et à l’heure où j’écris ces lignes je n’ai pas encore fini. Mais j’ai déjà pas mal avancé. Ionic recommande d’utiliser Visual Studio 2015 sous Windows. Je recommanderai d’abord de ne pas l’utiliser et de taper les lignes de commandes indiquées dans le guide getting started. Alors comme un bon vieux développeur Microsoft, j’ai commencé direct avec Visual Studio 2015 et foncé tête baissé. La version 2015 propose d’installer directement les outils de développement mobile. Cocher tout. Ne faites pas comme moi et prenez le temps de lire cette page du site Microsoft, on y retrouve pas mal d’info sur ce que fait l’installateur. Et notamment de quoi vous avez ABSOLUMENT besoin avant de commencer quoi que ce soit. 1) Java JDK. Microsoft vous propose de télécharger la version 7. J’avais pas fait attention au début, mais elle n’est plus du tout recommandé. Par la suite, installer vous même la version 8 et changer les paths dans visual studio. 2) Android SDK. Si vous avez comme moi déjà utilisé le SDK sous Android Studio, vous n’en avez pas besoin d’un autre car il va vous l’installer dans un autre répertoire. Vous allez avoir tout en double et devoir tout re-télécharger. Idem, modifier les paths dans VS2015 si besoin. 3) Apache Ant. J’ai pas l’habitude de Ant que j’eusse l’utilisé il y a fort longtemps… 4) Node.js. Au début, j’avais fait l’impasse dessus en me disant que c’était géré par VS2015…plus ou moins… on y reviendra. Donc mon conseil, installer tout ce que vous demande VS2015. Puis si vous le souhaitez installer des versions/path Java/SDK plus propre par la suite. Ionic de base avec VS2015 En mai 2015, Ionic annonce son partenariat avec Visual Studio 2015 par l’introduction des Ionics Templates. Article Blog ici. Super, donc en téléchargeant Ionic Tabs Template (depuis ce lien ou depuis NuGet) on a un beau projet tout propre qui vient s’ajouter en plus d’Apache Cordova : Allons y gaiement, créons notre premier projet Ionic Tab. C’est super, ça, marche et on a quelques lignes de code fortement intéressante, sur la construction de l’app, avec les controler, angular tout ça… (je précise que j’ai peu de connaissance avec Angular. On peut se débrouiller mais c’est recommandé de se pencher sur Angular un minimum). Voila, alors pour le résultat, on a ceci : Une petite appli qui ne fait que de l’affichage. Elle permet déjà de se familiariser avec Angular. Voici ce que contient le projet généré automatiquement par Ionic Tab Apps. Je vous conseille d’examiner ce code pour ceux qui débutent avec Angular. Il est intéressant et instructif. Il y a deux références dans index.html : <script src= »http://code.ionicframework.com/1.0.0-rc.5/js/ionic.bundle.min.js »></script> et <link href= »http://code.ionicframework.com/1.0.0-rc.5/css/ionic.css » rel= »stylesheet »> Je ne vois de référence bower ou d’installation npm…. La on a un souci. Ce bundle est une concaténation de plusieurs fichiers , si on l’ouvre voila ce qui est écrit : /*! * ionic.bundle.js is a concatenation of: * ionic.js, angular.js, angular-animate.js, * angular-sanitize.js, angular-ui-router.js, * and ionic-angular.js */ Le problème ici, c’est que nous ne gérons pas les dépendances de Ionic. Si celui ci évolue, il faudra recharger les scripts à la main. J’ai donc ajouté une référence Ionic dans le bower.json : {  « name »: « BlankCordovaApp4 »,  « dependencies »: {    « ionic »: « driftyco/ionic-bower#master »  }} Dans ce cas il faut recharger les dépendances, comme indiqué sur l’image ci dessus. Par défault, Bower va tout mettre dans un dossier bower_component à la racine (afficher les les fichiers, même ceux qui ne sont pas dans le projets). Le problème c’est qu’on n’y a pas accès à ce répertoire depuis www. Donc au lieu de tout copier à la main, on va le faire automatiquement en rajoutant à la racine un fichier .bowerrc qui contiendra ceci : {  « directory »: « www/lib »} Cliquer ensuite sur « Restaurer Packages » sur « Dépendances » et vous aurez un dossier lib dans www, tout beau tout chaud. Et voila, on peut donc faire directement référence à nos lib Ionics depuis index.html : <script src= »lib/ionic/js/ionic.bundle.min.js »></script>et <link href= »lib/ionic/css/ionic.min.css » rel= »stylesheet » /> C’est quand même plus propre ! Installation de Ionic officielle Ionic propose d’utiliser Visual Studio mais rien ne vous impose de le faire. Et je vous recommande de taper ces lignes au moins une fois. http://ionicframework.com/getting-started/ Il faut commencer par installer node.js (c’est par ici) Ensuite, ouvrez une invite de commande en mode admin (sous win 10 : clic droit sur le logo windows, invite de commande (admin) ) et taper la commande suivante : npm install -g cordova ionic C’est probablement ce que l’installation de Visual Studio à fait pour vous installer les outils Apache Cordova. Sauf qu’ici on rajoute Ionic. L’installation prends un certain temps… Voici 3 commandes qui permettent de s’assurer que vous avez bien ce qu’il faut, avec les bons path system : node -v cordova -v ionic -v (vérifiez aussi vos path en tapant : android, java, git, ant, je vous conseille ce site pour tout problème de path : http://www.gajotres.net/building-a-native-mobile-app-with-cordova-and-ionic/) Voila vous devriez avoir tout ce qu’il vous faut à ce stade. Déplacez vous dans votre répertoire de travail (pour moi E:\Temp\TestIonic\) Et taper cette commande : ionic start myApp sidemenu Ionic va créer un répertoire « myApp » et construire votre application en téléchargeant tout ce qu’il faut pour vous. Ici Ionic me demande si je veux créer un compte pour envoyer des Push de notification. Je réponds non. On verra cela plus tard. Et voila, mon app est créée : Le guide de ionic nous propose alors de lancer l’application sur un emulateur. $ cd myApp $ ionic platform add ios $ ionic build ios $ ionic emulate ios Comme je suis sur windows je vais le faire avec Android plutôt : > ionic platform add android puis build avec >ionic build android et enfin >ionic emulate android Et la j’ai un problème. (testé aussi en mode admin). Mon PC de bureau à plus de 5 ans. J’insiste pas. De toute manière l’émulateur android n’a pas une bonne réputation. Préférez Genymotion. Si…

Introduction Apache cordova sous Visual Studio 2015

Depuis la version Visual Studio 2013 update 4 et plus officiellement depuis VS2015, l’IDE propose de créer de nouveaux projets avec Apache Cordova. Apache Cordova est depuis quelques années un acteur incontournable dans le monde de l’édition d’application mobile multiplateforme. Son intérêt réside dans le fait de n’utiliser que des technologies web (HTML5, Javascript et CSS) pour concevoir une application iOS, Android, Windows Phone, Windows… bref multiplateforme. Apache Cordova permet via son API un accès au device nativement, c’est à dire qu’il peut vous donner accès au GPS, à la caméra, au Gyro… ce que vous auriez du mal a faire via une app web mobile à travers un navigateur web classique. Au final on se retrouve avec une application sur les store (Google Play, app Store, Windows Phone store…) tout en ne connaissant ni ObjectiveC/Swift, C# ou Java, les langages dit « Natif ». Ce genre d’application est dit « Application Hybride ». C’est comme un pont entre application purement web et application purement Native. Enfin cela parait facile mais en faite ça ne l’est pas du tout. J’ai récemment assisté au mobile Monday, à Rennes. Nous avions 3 débatteurs autour des technos mobiles. Tous travaillant comme dev Senior/lead/archi, bref relativement calé pour parler du sujet. Les technos abordées était Cordova/Phonegap, Xamarin (nous y reviendrons plus tard) et le développement natif. Pour résumer la conférence : Le développement natif est long et couteux (ressources dev dans plusieurs technos), il est problématique pour livrer « en même temps » et plus lourd en maintenance. Mais il marche ! Et vite avec une UX adaptée. Le développement hybride est plus rapide, nécessite moins de ressources, livré « en même temps ou presque » mais le résultat peut être lent et pas top en UX (même interface, pas forcément adapté à l’OS est aux habitudes utilisateurs) Le développement Xamarin propose de partager 50% à 90% du code (C sharp). Le reste est essentiellement de l’UI, donc on doit adapter l’interface utilisateur suivant l’OS. Il existe aussi une option chez Xamarin, les Xamarin Forms qui sont un moyen d’aller encore plus vite pour générer des interfaces utilisateurs. Je testerai prochainement Xamarin et je vous en dirai plus. Pour démarrer, Visual Studio propose un projet Apache Cordova (en Javascript ou en TypeScript) Voici ce que VS2015 vous créer par défaut : Ce qui est nouveau pour un développeur Microsoft la section « Dépendances » : c’est l’équivalent du NuGet pour les fichiers web (JS/CSS) configuré avec bower.json et package.json (commande npm Node.js) Le dossier « merges » va concerner des spécificités par plateforme. Le dossier res (ressources) va essentiellement correspondre aux images de l’appli (icone, splashcree, image…) Le dossier www est le dossier de travail. Le fichier config.xml est un fichier important. Nous y reviendrons. On ne touche à rien, on compile… Normalement aucun problème jusque la. La suite se corse. Essayons maintenant de lancer un émulateur… Normalement l’émulateur Windows Phone 8.1 devrait fonctionner. Pour Android c’est plus compliqué mais ça peut aussi marcher suivant ce que vous avez installer avant. Quant à iOS… on va voir cela. Sinon vous avez Ripple, un emulateur qui tourne sur Chrome. Pour Android, vous avez accès à quelques raccourcis (menu haut, clic droit, cliquez sur « android ») dont le Android SDK Manager. Si vous travaillez déjà avec eclipse/Android studio, vous connaissez déjà cela. Mais assurez vous que le chemin SDK est le même pour vous évitez de télécharger deux fois la même chose. (outils – options – outils pour apache cordova – remplacement de variable d’environnement) Si vous voulez utiliser un émulateur, il va falloir choisir lequel et sous quel architecture (ARM, Intel, 35/64 bits), télécharger l’image correspondante et monter un émulateur avec l’Android Emulateur Manager AVD. Mais bon par chance VS2015 en install par défaut comme celui ci : J’utilise personnellement le VS Emulator 5″ KitKat. J’ai aussi un téléphone Android personnel que je branche en USB. Pour cela je sélectionne Appareil (ou device) dans cette liste. Il faut aussi installer les divers USB Google, dans Android SDK Manager tout en bas dans la section Extras, installer Google USB Driver. Ça y est on peut enfin afficher le résultat de notre application sur un émulateur ou un device Android ! Pour iOS, c’est plus compliqué si vous êtes sur Windows. Apple impose la compilation depuis un mac avec Xcode. Pour cela il existe un agent build iOS à installer sur votre Mac. Deux possibilités :  utiliser un mac à vous sur votre réseaux.  utiliser macinthecloud, une plateforme web qui vous donne accès à un mac virtuel sur le net moyennant qq $$. J’ai rapidement testé cette solution. Elle marche. Mais j’ai décidé d’acheter un mac. Notamment pour garder un accès permanent à mes certificats/clé privée…  Cette solution ne permet pas non plus de brancher un iPhone/Ipad en USB et tester sur device, car il faudrait le faire sur le Mac distant. On pourrait je pense le faire en compilant sur le mac et en rapatriant un ipa qu’on installerai depuis Itunes sur windows… bref la galère. Conclusion : Voila, on a vu ici comment réaliser chez vous une application hybride Apache Cordova avec Visual Studio 2015. Si on installe tout ce qu’on nous demande dès le départ, on peut compiler, émuler et déployer sur un device, sans taper une ligne de code. Je trouve que les avantages de Cordova sont très intéressants. Mais honnêtement ce n’est pas aussi simple. Même si VS2015 propose des outils pour debuger plus facilement, j’ai eu un peu de mal à m’y retrouver. De plus VS2015 propose des « adaptations » pour utiliser des outils tiers bien connus dans le monde autre que Microsoft, comme gulp, grunt, node.js, bower. On a un mélange de techno Microsoft et « reste du monde ». Ça va dans le bon sens, mais on ne sait pas trop où on va quand on débute avec. En fait Microsoft nous « mâche »‘ le travail, sauf que lorsqu’une erreur arrive, on est perdu. Si vous tentez par exemple de récupérer du code d’un dev non « Microsoft », vous allez vous retrouver avec des répertoires comme…

Comment télécharger automatiquement des vidéos Youtube sur son Synology (post Avril 2015)

J’ai un NAS Synology depuis quelques mois et j’en suis très très content. Cette petite boite se branche en 2 min sur son réseau domestique/pro(PME) et s’installe vraiment facilement. A la base je l’avais acheté pour sauvegarder mon travail. J’ai donc fait l’acquisition de deux disques dur de 2T montés en miroir (si l’un crash, l’autre a encore les données).  Mais ce NAS est vraiment plus qu’un simple NAS, c’est un serveur de presque tout et n’importe quoi. Je m’en sers comme station vidéo pour la maison, video surveillance, site web, serveur SVN… et serveur de téléchargement. Et chez moi, avec une connexion web de moins de 2 Mbps, on fait attention à sa bande passante, surtout si on veut faire une partie de BattleField 3 ou 4 sans se faire éjecter d’une partie à cause d’un ping trop haut. Et oui, quand sa chérie veut regarder une vidéo Youtube, ca m’aide pas dans mes frags… Donc j’ai décidé d’anticiper mes besoins de téléchargement et donc de lancer ceux ci quand je n’ai pas besoin d’internet, c’est à dire la nuit. Comme le Synology dispose d’un outil intelligent et paramétrable, on peut préciser les heures de téléchargement. C’est cool. De plus en installant un petit utilitaire sur Chrome http://www.download-station-extension.com on peut facilement lui donner l’ordre de télécharger un truc avec un simple clic droit ou en cliquant sur son icone. (avant on pouvait lui donner des listes de vidéo (playlist, channel…) à télécharger, c’était génial, en un clic on pouvait demander de télécharger 15 vidéos d’une chaine, mais Google lui a explicitement demander de retirer cette super fonctionnalité) Comment reproduire cette fonctionnalité ? Google ayant fermé sa V2 de son API en avril 2015 avec ses services de Rss Feed (qui ne sont a priori pas reporté sur la V3) on se retrouve le bec dans l’eau. Il y a peu on pouvait utiliser les pipes Yahoo qui faisait du bon boulot, ces pipes transformait le flux RSS de Youtube en un flux « media » RSS, c’est à dire avec le lien de la vidéo .mp4. Et c’est ce lien que le serveur de download du Synology prends en compte. Mais les pipes de Yahoo on fermé en Septembre 2015… Décidément… Du coup j’ai encore cherché sur le net un autre moyen. Et j’ai trouvé https://bridge.suumitsu.eu ! il est formidable ce site. Allez tout en bas pour Youtube et préciser le channel ID de votre Youtuber préféré(e). Puis cliquez sur le bouton Media RSS, ce qui va vous donner un lien comme celui la : https://bridge.suumitsu.eu/?action=display&bridge=YoutubeBridge&c=UCVeMw72tepFl1Zt5fvf9QKQ&format=MrssFormat Ca y est ! Vous avez un lien propre pour le Synology. Il suffit de copier coller ce lien dans la partie RSS et il va aller chercher toutes les vidéos du flux, tout seul ! Pour aller plus loin :- il me semble qu’il y a des problèmes de volumes, c’est à dire qu’il y a une limite du nombre de résultats, il faudrait tester avec une liste de 25, 50, 100, 200 vidéos… – j’aimerai bien que le nom de la vidéo soit renommé avec la date ou un ID incrémenté pour que mes vidéos soit classé par ordre chronologique et non par ordre alphabétique, pour bien identifier les nouvelles. Bon download !

Windows Universal App – Premier pas avec Windows 10

Après quelques essais sur les plateformes mobile (Windows Phone 8.0 Silverlight, Windows Phone 8.1) il était naturel de plancher sur la dernière génération d’application universel de Microsoft. Pour cela j’ai attendu l’arrivé de Windows 10 et de Visual Studio 2015 avec impatience. Ça y est, j’ai tout installé ! Bon qu’est ce qu’il change ? A première vu pas grand chose. Si ce n’est que nous développeur devrions passer moins de temps à développer 15 applis suivant l’OS. Normalement le but est d’en développer qu’une seule pour n’importe quelle support, du moment qu’il tourne sur Windows 10 ou plus. L’ennuis c’est que j’ai eu du mal a switcher entre windows phone silverlight et 8.1 et que maintenant on a encore une nouvelle couche. Et je trouve très mal faite la MSDN. Je dois constament me poser la question de savoir si la doc est destiné pour quel environnement. Et franchement c’est pas clair ! Pour partir sur de bonnes bases, Microsoft met à disposition un bon paquet de code source bien ficelé pour pas mal de cas bien isolé. Voici le repo Git : https://github.com/Microsoft/Windows-universal-samples Et voici la liste des exemples : faites vos choix : App settings App package information Application data Audio, video, and camera Adaptive streaming Advanced casting Audio categories Audio graphs Background audio Basic camera app Basic face detection Basic face tracking Basic media casting Camera face detection Camera preview frame Camera profiles Camera resolution DASH streaming Direct2D photo adjustment High dynamic range Media editing Media transport controls MIDI Playlists Simple imaging Spatial audio System media transport controls Transcoding media Video playback Video stabilization Windows audio session (WASAPI) Windows media import Communications Bluetooth RFCOMM chat Communication blocking and filtering Phone call Real-time communication SMS send and receive Voice over IP (VoIP) Contacts and calendar Appointment calendar Contact cards Contact picker UserDataAccountManager Controls, layout, and text AutoSuggestBox migration Clipboard Commanding Context menu Context menu (XAML) Disabling selection Display orientation Downloadable fonts (DirectWrite) Downloadable fonts (XAML) Drag and drop Focus visuals Full screen mode Line spacing (DirectWrite) ListView and GridView Lock screen apps Message dialog Multiple views OCR Printing Pull-to-refresh Responsiveness techniques Scaling according to DPI Splash screen State triggers Tailored multiple views Title bar UI basics (XAML) User interaction mode WebView control (HTML) Window resizing Custom user interactions Basic input Complex inking Inking Low latency input Simple inking Data Blobs Compression Content indexer Form validation (HTML) IndexedDB Logging Serializing and deserializing data x:Bind x:DeferLoadStrategy XML DOM XmlLite Deep links and app-to-app communication App services Sharing content source app Sharing content target app Devices and sensors Accelerometer Activity detection sensor AllJoyn consumer experiences AllJoyn producer experiences Altimeter Background sensors Barcode scanner Barometer Bluetooth advertisement Cash drawer Compass Custom HID device Custom sensors Custom serial device Custom USB device Device enumeration General Purpose Input/Output (GPIO) Gyrometer Inclinometer Inter-Integrated Circuit (I2C) Lamp device Light sensor Magnetic stripe reader Near field communication (NFC) NFC enterprise provisioner Orientation sensor Pedometer POS printer Proximity sensor Relative inclinometer Relative orientation sensor Serial Arduino Serial Peripheral Interface (SPI) Simple orientation sensor Files, folders, and libraries File access File and folder thumbnail File picker File picker provider File search Folder enumeration HomeGroup Library management Semantic text query Gaming Direct3D game DirectX and XAML game Globalization and localization Application resources and localization Calendar Date and time formatting Globalization preferences Japanese phonetic analysis Language font mapping Linguistic services Number formatting and parsing Text segmentation Text suggestions Unicode string processing Graphics and animation Animated GIF playback (XAML) Animation library (HTML) Animation metrics Composition visual without framework Direct2D custom image effects Direct2D gradient mesh Efficient animations (HTML) Transform3D animations Transform3D parallax Identity, security, and encryption Credential locker Credential picker Disabling screen capture Enterprise data protection KeyCredentialManager Lock screen personalization Smart cards User information UserConsentVerifier Web account management WebAuthenticationBroker Launching and background tasks Association launching Background task Maps and location Geolocation Geotag MapControl Navigation Back Button Master/detail Navigation menu (XAML) Pivot Projection XHR, handling navigation errors, and URL schemes Networking and web services Background transfer DatagramSocket Exchange Active Sync (EAS) HttpClient JSON Mobile broadband Radios RSS reader end-to-end (JavaScript) Socket activity trigger stream socket StreamSocket Syndication USSD protocol WebSocket Wi-Fi Direct Wi-Fi Direct services Wi-Fi scanning Platform architecture In-process component authoring In-process component authoring Out-of-process component authoring Speech and Cortana Cortana voice command Speech recognition and synthesis Threading JavaScript Web Workers app multithreading Tiles, toasts, and notifications Notifications Secondary tiles Yeah ! Bon code !

Green House 2000

« Parce que l’an 2000 c’est le futur – Nabilla 2015 » Green House 2000 est le nom du projet qui concerne l’automatisation de ma serre. J’ai pris un peu de retard car la saison des tomates est plus qu’avancée… (certainement terminée quand j’aurais fini cet article). Mais bon, j’ai eu le temps de construire une serre (3m par 5m) avec du matos de récup. Et mes tomates poussent déjà super bien en mode « manuel ». J’ai un petit netduino 2 plus d’apprentissage que je souhaite utiliser à bon escient. Ce modèle est un « dérivé » d’Arduino. Il est spécialement concu pour permettre au développeur Microsoft .net C sharp que je suis de pouvoir utiliser son langage préféré grâce au Micro Framework embarqué sur la carte. C’est mon premier achat « IoT ». Si je me souvient bien c’est parce qu’il avait un connecteur Ethernet, ce qui n’était pas commun à l’époque. Il dispose en plus d’une carte mini SD. Sinon pour le reste, on a quasiment un Arduino classique. Spec ici : http://www.netduino.com/netduinoplus2/specs.htm Donc voila, l’idée est d’utiliser le netduino comme centrale pour surveiller ma serre (température, humidité, luminosité, débit eau) et pouvoir piloter un arrosage automatique (voir contrôlé à distance). Pour cela j’ai acheté 2 capteurs :- DHT22 Sensor :  capteur de température et d’humidité en 1 seul composant- un capteur de luminosité. J’ai aussi acheté un écran LCD 4 lignes.  Pour afficher en live mes données. Dans un premier temps je me suis concentrer sur l’acquisition de données. Après quelques recherches et test sur un board de prototypage, j’ai enfin pu enregistrer quelques données et les afficher sur mon écran LCD. Ensuite dans un second temps j’ai travaillé sur l’envoi de ces données sur le net. Pour cela j’ai utilisé un web service spécialisé dans l’IoT ; thingspeak. En deux trois mouvements, j’ai configuré un compte et grâce à une simple clé et quelques ligne de code, j’ai pu envoyé mes données sur le net. Et hop des courbes : https://thingspeak.com/channels/47907 Troisième étape, consolider mon code et pouvoir debuger. J’ai constaté que mon code plantait (pendant mes vacances) et qu’il était pas simple de savoir ce qu’il se passait sur le netduino, surtout déconnecté (et donc pas en mode debug). J’ai donc pensé à un système de log en deux parties:- log local, enregistré sur la SD Card. Donc c’est peu pratique car il faut prendre la mini SD et la lire sur un PC puis la remettre.- log distant, j’ai utilisé logentries qui est pas mal Donc je peux suivre à distance mes courbes de température/humidité/luminosité. Si je constate un plantage, je peux regarder online les logs. Si jamais ces logs ne m’informe pas assez, je vais voir sur la carte SD. Normalement on est bon la… Phase 2 : le contrôle d’une électrovanne : l’arrosage automatique. Prochainement….   Le code source sur GITHub : https://github.com/couscousbzh/GreenHouse2000 

Android : que faire en cas de perte de certificat Key store ou un oubli de mot de passe ?

Si vous développez sur android et publiez sur Google Play, on vous prévient souvent de ne pas oublier sa key store (certificat). En effet, on se dit « c’est bon je verrai plus tard’ on note rien, on oublie le password ou pire on perd carrément cette clé. Cette clé représente la signature numérique de l’auteur de l’application. Si vous la perdez, vous allez en régénérer une qui pour google représentera un nouvel auteur. Pour l’utilisateur qui veut mettre a jour une application, ceci se traduira par une erreur d’installation tant que l’ancienne appli ne sera pas désinstallé. –> pas bon Pour éviter cela, il y a une parade qui consiste à changer le manifest package name. Dans mon cas par exemple, le nom de mon package est fr.reactor.trackus. En le renommant c’est comme si je créé une nouvelle application disctinct. L’utilisateur aura donc 2 applis. Mais on repart sur une nouvelle app. Un conseil, redisigner un peu le logo de votre bouton d’app, histoire de faire comme si c’était « plus neuf » pour l’utilisateur… Pour aller plus loin, sachez qu’il ya des choses à ne pas faire avec Android, tout est dis dans cet article :http://android-developers.blogspot.fr/2011/06/things-that-cannot-change.html