ESP8266 – premier pas

iotLaisser un commentaire

J’ai récemment acheté une nouvelle petite bestiole : un Nodemcu lua esp8266 ESP -12e Mais c’est quoi ce truc ? L’ESP8266 est un module Wifi qui se branche d’habitude sur un microcontroleur, mais ici il est livré directement avec ! Ya en plus une prise USB donc pas besoin de bricoler une liaison série tout est sur la carte. J’ai acheté en plus un support, le tout pour 10$ sur Banggood. Après mon NetDuino et mon Arduino-Nano, j’avais besoin d’une carte relativement petite avec le Wifi et surtout pas cher. Car tout ce que j’ai besoin c’est un d’un « commutateur à distance ». J’ai bien les ondes radio comme option mais il m’aurait de toute façon fallut une carte pour le piloter et faire la liaison avec internet. Ici on a tout en un ! Pour l’utiliser, il suffit d’avoir node.js sur son PC. Vous installez un package qui vous permettra de lancer quelques lignes de commande pour copier des fichiers dessus. Ces fichiers contiendront votre code qui sera exécuté car l’ESP8266. Pour démarrer, le plus simple et de faire clignoter une led sur la carte. Dans un fichier blink.lua copier le code suivant : — Config local pin = 4 local value = gpio.LOW local duration = 1000    –> 1 second — Initialise the pin gpio.mode(pin, gpio.OUTPUT) gpio.write(pin, value) — Create an interval tmr.alarm(0, duration, 1, function () if value == gpio.LOW then value = gpio.HIGH else value = gpio.LOW end gpio.write(pin, value) end) Ouvrez une invite de commande et copier ce fichier sur la mémoire du ESP8266 : >esp file write blink.lua Pour ensuite l’executer : >esp file execute blink.lua Ca y est la LED clignote ! Bien évidement ça ne va pas s’arrêter la. Le but étant de piloter quelque chose à distance via internet ou son réseau locale. J’ai plusieurs idées en tête : allumer une bande led derrière la télé depuis mon smartphone dans le canapé allumer automatiquement  les lampes extérieures (déjà installées et reliées à des relais Chacon 433MHz) en fonction de sa position GPS (quand on rentre du boulot par exemple) fermer une trappe à chien pendant 30 min sur l’appui d’un bouton de mon téléphone, histoire que mon chien sèche avant de le rentrer pour qu’il passe la soirée avec nous. Bref on peut vraiment penser à des trucs bien délire !

Compilation – Deploiement – Debug avec Cordova sous Windows et Mac et avec ou sans VS2015

Non classéLaisser un commentaire

(Je m’améliore pas en titre…) J’ai mené pas mal d’essai sur Windows et Mac et je vais essayer ici de synthétiser mes résultats. J’ai pris le code openFB et j’ai suivis leur recette de cuisine pour l’installer proprement, sur le mac. Sur le Mac OSx (Yosemite) Appareil Android (Wiko Ridge 4G) et iPad2 branché en USB sur le mac. $ cordova run android –> compile puis lance un run sur mon device android. $ cordova run ios –> compile puis lance un emulateur. –> Si quelqu’un sait comment on lance son app sur un device iOS branché en usb, je suis prenneur ! l’application s’ouvre dans un emulateur iPad2 et fonctionne normalement. Sur Windows 10 : J’ai copier coller le code du Mac sur Windows. Appareil Android (Wiko Ridge 4G) et iPad2 branché en USB sur Windows. $ cordova run android –> compile puis lance un run sur mon device android. $ cordova run ios –> ne fonctionne pas, on est sur Windows, il faudrait utiliser le remote build Avec Visual Studio 2015 : run android appareil–> compile puis lance un run sur mon device android. run ios appareil –> compile (remote build) puis install via iTunes l’ipa. qu’il faut ensuite installer manuellement sur l’iPad. Pour info :l’application s’ouvre sur iPad. J’ai des problèmes d’affichage (bouton sous la barre du haut) et je n’arrive toujours pas a faire fonctionner OpenFB sur iPad en deployant de cette manière. En cliquant sur Login, une page blanche s’ouvre. Je soupçonne InAppBrowser de ne pas bien fonctionner. run ios simulateur iPad2–> compile (remote build) puis lance un emulateur iPad2 sur le mac idem, même problème que précédement (au moins le simulteur est fidèle) run ios rippleiPad2–> ne compile pas  puis lance un chrome, l’affichage est correct, mais le clic sur login m’affiche ceci : A priori, InAppBrowser a du mal avec Ripple aussi. Et c’est valable avec Android aussi (mais vu qu’il ne compile pas, on a une version web dans Ripple)   Et pour le debug ? : D’une manière générale avec Cordova, il est plus simple de travailler en mode web et d’utilser un F12 sur son navigateur pour accéder à la console Javascript et pouvoir debuger son app. Si l’on souhaite travailler sur une version compiler, Android est un plaisir, il fonctionne de la même manière sous Windows et sur Mac. De plus avec Visual Studio 2015, il est possible de debuger grâce à la console javascript. Bref ça marche ! Pour iOS c’est une autre pair de manche. On peut travailler avec Visual Studio 2015 sur un emulateur qui se trouve sur mac, à distance. Ce qui n’est pas rien. Par contre concernant le debug, je ne sais pas si c’est possible. J’ai une erreur de la part du serveur de build sur mac : Spawn ios_webkit_debug_proxy ENOENT que je n’est pas encore résolut. Donc je reste avec mon pb de login sur iOS sous le bras, car je n’ai aucun moyen de debuger correctement. J’ai appris que Ionic (basé sur Cordova) créer des projets xCode. Du coup il y aurait une piste pour pouvoir debuger depuis xCode des projets iOS. A suivre.   Conclusion : En l’état, coder depuis Windows pour du multiplatforme de type Cordova n’est toujours pas intuitif. On doit installer tout un tas de truc avant de pouvoir voir du concret sur iOS et pour le cas d’OpenFb il est en plus difficile de debugger. Travailler sur Android, que ce soit sur Mac ou Windows ça marche ! Donc de mon point de vu, autant rester sur Windows et profiter de Visual Studio 2015. Pour iOS c’est vraiment compliqué. On peut compiler à distance avec un remote build. On arrive à faire des choses. Pour moi le debug ne fonctionne pas (sans doute un mauvais paramétrage). Le test OpenFB à montrer qu’en execution on avait un soucis lorsque l’on compilait/exécutait à distance, mais la compilation/exécution locale elle fonctionne.   J’ai encore du boulot…                

VS2015 et le remote Build sur Mac OSX (Xamarin et Apache Cordova)

Non classéLaisser un commentaire

VS2015 nous promet de pouvoir créer du code pour une application iOS sur Windows. Je précise ici que je ne coderais pas une ligne, je souhaite simplement configurer mon environnement de dev pour compiler sur iOS et déployer sur mon iPad2 une app "Helloworld". Pour cela trois moyens : Xamarin Apache Cordova Natif Ce qui n’est pas crié sur les toits, c’est qu’il faut absolument une machine Apple sous MacOSx (version Yosemite recommandé) pour pouvoir compiler du code iOS. (Apple l’exige !). Du coup vous avez deux choix : soit vous avez un mac et c’est tant mieux pour vous, soit vous pouvez utiliser macinthecloud. J’ai commencé avec macinthecloud, ça coute pas cher, mais j’ai préféré aller acheter une machine Mac, même si ça coute un bras. Avant de démarrer, il faut préparer votre Mac comme si vous allez créer une application normal avec XCode. Donc il faut installer XCode avant. Il faut aussi un compte AppleId + un compte développeur (99$ par an). Ensuite avec XCode il faut créer un certificat développeur. Puis créer une application avec Xcode (ca permettra de générer un provisionning profile automatiquement). Pour l’iPad (ou votre iPhone), il faut aussi l’enregistrer..bref c’est trop long à détailler ici et cette page le fait très bien : http://developer.xamarin.com/guides/ios/getting_started/installation/device_provisioning/ Commençons par le moyen le plus simple Xamarin : Xamarin : Xamarin permet de coder sur VS2015 (ou sur l’IDE de Xamarin) une application en utilisant que du C#. Pour cela il faut installer Xamarin sur votre Windows ET sur votre Mac. Il faut aussi un compte Xamarin et démarrer un Trial ce qui vous permet d’accéder à toutes les fonctionnalités (et d’éviter des problèmes de licences…) L’idée ici c’est de démarrer rapidement avec un projet de base que l’on nous propose dans iOS : (blank, MasterDetails…) Prenons Master Detail app, c’est juste histoire d’avoir un truc à montrer à l’écran. On ne touchera pas au code. Normalement sur votre interface vous allez avoir des petits boutons comme ceci : Ici on est pas connecté au serveur de build qui se trouve sur le mac. Il faut l’associé (pair). Ici le guide officiel. Vous allez d’abord lancer sur votre Mac Xamarin.iOS Build Host. Il vous propose un code. Notez le. Dans Visual Studio sur Windows ouvrez les options dans le menu ‘outils’, puis descendez sur Xamarin puis iOS Settings Cliquer sur le bouton "Find Mac Build Host". Connectez vous avec l’adresse IP de votre Mac et rentrer le code de pair. Normalement ici vous êtes connecté au serveur de build iOS. Et vous voyez la petite icône verte ! Remarquez aussi que j’ai accès à mon iPad de Yann (relié en USB sur le Mac). Pour disposer de cela il faut au préalable faire tout un tas de truc pas cool avec des certificats, des provisionning truc bidule (vive Android pour ça). Si je lance un run sur VS2015 (Windows) ça balance mon app direct sur mon iPad (USB sur Mac). Et je suis sur Windows !  Yeahhhh ! Trop trop bon ! Apache Cordova : Pour Apache Cordova on va devoir écrire quelques lignes de commandes dans la console. Mais d’abord il faut installer node.js (http://nodejs.org/) sur votre Mac. Une fois que c’est fait, il faut suivre ce doc : https://msdn.microsoft.com/library/mt147405%28v=vs.140%29.aspx#ConfigureVS Lancer sur la console la commande : sudo npm install -g npm@2.6.0 Cela va installer npm qui est gestionnaire de package. Celui ci va vous permettre d’installer plein de truc super qui tourne avec Node.Js. Taper ensuite la commande qui va installer vcremote : npm install -g vcremote Ensuite vous aller lancer un serveur qui va faire tourner vcremote. Par défaut il vous propose un échange sécurisé avec un ‘pin’. (comme avec Xamarin mais en ligne de commande). Personnellement j’ai désactivé la sécurité. Pour cela taper la commande vcremote –secure false Voici ce que vous affiche la console : Super, le serveur est prêt, il nous attends. Pour info, si vous voulez arrêter le serveur, taper CTRL-C. On retourne sur Windows, Visual Studio, outils, options, Multiplateforme, C++, iOS : Il faut paramétrer le serveur. Nous avons choisi pas de sécurité donc la case n’est pas coché. Par défaut le port est 3030. Taper l’IP de votre machine Mac. Puis le bouton Coupler. Normalement votre serveur réagit et affiche ceci : Et votre connexions est réussi sur Visual Studio. Seulement lorsque vous tenter de builder votre application Apache Cordova depuis VS2015, vous avez une erreur. Il vous demande de configurer qq chose. Pour cela allez (sur Windows) dans Visual Studio, outils, options, Outils pour Apache Cordova, Configuration de l’agent distant. Si vous renseignez les même informations, le serveur vous répondra : "GET /modules/taco-remote 404" Alors la j’ai passé un bon moment avant de comprendre qu’en fait, l’agent de build for Apache Cordova n’est pas vcremote mais remotebuild ! Il faut se rendre sur ce site https://www.npmjs.com/package/remotebuild et installer remotebuild sudo npm install -g remotebuild et relancer un serveur remotebuild cette fois (j’ai gardé la sécurité cette fois). Les commandes ne sont pas les mêmes mais se ressemble beaucoup. Sur Visual Studio paramétrer maintenant votre nouveau serveur (attention le port est 3000 par défaut) Tenter maintenant une compilation sous iOS : Vous verrez alors votre serveur s’agiter : C’est bon signe votre app compile ! Ça prend aussi un certain temps.. Maintenant vous pouvez lancer un run sur votre appareil local, mais attention, ce coup ci, branchez votre iphone/ipad sur le connecteur USB de votre Windows. Il vous faudra avoir installer iTunes avant et un panneau vous avertira si vous voulez remplacer l’application existante (pas la première fois bien sûr). Remplacer la pour la mettre à jour. Sur votre iTunes vous aurez l’application qui s’affiche dans le menu Apps : Cliquez ensuite sur le bouton Installer puis sur le bouton appliquer. L’application se transfert depuis iTunes vers l’iPad2. Vous n’avez plus qu’à l’ouvrir. Conclusion : La tâche n’est pas évidente. Compiler depuis Windows sur un Mac n’est pas si simple. De plus j’ai du mal à piger à…

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

Non classéLaisser un commentaire

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

Non classéLaisser un commentaire

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

Non classéLaisser un commentaire

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

Non classéLaisser un commentaire

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

Non classéLaisser un commentaire

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

Non classéLaisser un commentaire

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)

Non classéLaisser un commentaire

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 !