Appli mobile Hybride – tips

Voici quelques infos ui pourraient vous aider à débuger vos applis hybride.

Ionic – cordova

Erreur

Solution

 

 

 

 

 

 

 

 

 

 

[nodejs] Faire des requêtes par lot, en parallèle et avec une pause

Requete par lot

Objectifs

Pouvoir Requêter en masse une API (jusqu’à 30 000 requêtes)

  • en faisant n requêtes en parallèle
  • en donnant la possibilité de créer des lots de requêtes
  • en donnant la possibilité de pouvoir pauser l’envoie des lots

Prérequis

  • nodejs
  • axios pour gérer les requêtes et l’asynchrone
  • async await pour gérer l’asynchrone

 

Le code

La vue

<div> <a id= »btn »>Get all URLS</a> </div> <hr> <div id= »container »></div> <pre id= »result »></pre>

Le style

body { margin: 0; min-height: 100vh; background: #004d4d; } #container > div { width: 150px; margin: 10px; padding: 10px; line-height: 12px; background: #ededed; display: inline-block; border: 2px solid #fff; animation-name: fade-in; animation-fill-mode: both; animation-duration: .3s; } .teal { background: #008080; } .btn-container { margin: 10px; } .card-title { font-size: 14px !important; } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }

Le js

Pré-requis:
– crée un package.json en local avec npm init
– installer axios avec npm install axios –save
– coder dans votre fichier nomdefichier.js
– tester le resultat dans le terminal avec $ node nomdefichier.js
– tester le resultat dans le navigateur en ouvrant celui-ci // on importe axios const axios = require(‘axios’); let AllDatas = [], AllDatasInError = [], urls = [], waitTime = 500, // the amount of time we wait between each batch of request start = 0, step = 2, // number of url we request position = 0, nbRequest = 12; // number of request AllDatas[‘total’] = 0; // total of data let btn = document.getElementById(‘btn’); btn.addEventListener(‘click’, function() { batchProcessing(urls); }); function createUrl() { for (let i = 1; i <= nbRequest; i++) { urls.push(https://jsonplaceholder.typicode.com/photos/${i}); } } createUrl(); // timer const waitFor = (ms) => new Promise(r => setTimeout(r, ms)); // parallel REQUEST with AXIOS async function getData(links) { try { const res = await axios.all(links.map(link => axios.get(link))); console.log(‘GetData Start time’, new Date()); return res; } catch (error) { console.log(‘——————————————‘); console.log(error); } } // async function batchProcessing(urls) { const len = urls.length / step; // let result = []; console.time(‘batchProcessing’); console.log(‘batchProcessing Start time’, new Date()); // use of an interceptor to edit every response axios.interceptors.response.use(function (response) { // Do something with response data let responseData = response.data; // const newVal = {}; if (responseData.id) { responseData[‘position’] = ${position}/${len}; // create html element addElement(responseData); AllDatas[‘total’] += 1; AllDatas.push(responseData); } console.log(‘responseData’, responseData); return responseData; }, function (error) { // Do something with response error return Promise.reject(error); }); // batch processing for(let index = 0; index < len; index ++) { var processingUrl = urls.slice(start, start + step); start += step; position += 1; console.log(‘position’, position + ‘ / ‘ + len); console.log(‘processingUrl’, processingUrl); // make the requests const res = await getData(processingUrl); AllDatas = AllDatas.concat(res); // break time await waitFor(waitTime); } // we are now done console.log(‘End timer’, new Date()); console.timeEnd(‘getData’); // console.log(‘Final AllDatas’, AllDatas); // document.querySelector(‘pre’).innerHTML = AllDatas; } /****** RENDERING THE HTML *****/ function addElement (data) { console.log(‘element added’, data); let mainDiv = document.getElementById(« container »); let newDiv = document.createElement(« div »); let newContent = <div> <div> <img src="${data.thumbnailUrl}"> <span> Element ${data.id} </span> </div> <div> <p>${data.title}. (batch ${data.position})</p> </div> <div> <a href="${data.url}">See the source</a> </div> </div>; // console.log(‘newContent’, newContent); newDiv.innerHTML = newContent; mainDiv.appendChild(newDiv); }

[Angular] – part 14 – Angular Universal (server rendering)

Angular Universal

Angular Universal

La platform universal a été ajouté à angular dans la version 4 d’angular. Elle permet maintenant de générer les pages depuis le serveur.

La méthode « magique » de la plateforme universal est le renderModuleFactory provenant de @angular/platfom-server

La définition de ce renderModulefactory dans la doc d’Angular est

moduleFactory : Le premier argument de cette méthode est moduleFactory, qui est pour faire court une version compilé d’angular. Ce moduleFactory doit être buildé une seule fois.

options : quant à lui contient les informations sur la manière dont on souhaite voir notre application: PlatformOptions

PlatformOptions : Le type de PlatformOptions est définit dans les sources par l’interface suivante

– le document indique le contenu du fichier HTML que l’on souhaite avoir dans notre app.
– l’urlL indique la page de notre application que l’on souhaite rendre

Installation

# on génere le projet avec un rooting de base

# on installe ensuite plateform server nécéssaire pour le rendu coté serveur et pour la génération des pages html

# il faudra mettre à jour angular et tous les packages liés vers la version 4 minimum et tous les autres packages tel que core-js, rxjs, zone.js ( sinon nous aurons une erreur au build)

Création du module serveur

Nous allons maintenant créer le fichier qui va boostraper (initialiser) l’app depuis le serveur: src/app.server.module.ts

On crée un nouveau fichier nommé app.server.module.ts. Il est assez similaire au fichier app.module.ts de notre application, la grosse différence est que ce module est crée pour le serveur

Mise à jour du module principal

Nous aurons aussi besoin d’indiquer à l’AppModule que tout le rendu se fera depuis le serveur.
Normalement, on bootstrap une app Angular depuis un AppModule qui importe le BrowserModule (qui met à disposition toute sorte de services et directives tel que par exemple ngIf )
PS: c’est platformBrowserDynamic qui est la méthode utilisée pour bootstrapper l’application pour l’app.
Mise à jour de app module afin de pouvoir utiliser le serveur

withServerTransition prend un appId et c’est lui qui est partagé entre le client et le serveur. withServerTransition permet à universal de remplacer le html généré par le sien.

A ce point on peut compiler notre app avec la commande ngc

Si on ouvre le dossier dist, on remarquera que dans le dossier out-tsc/app se trouve dans les fichiers générés src/app.server.module.ngfactory.ts un fichier qui déclare et exporte un AppServerModuleNgFactory de type NgModuleFactory.

Création du module server de l’application sous express

Il nous faut créer un fichier main.server.ts qui va s’occuper de prendre une url en argument te de faire le rendu de la bonne page de notre application.

HS
La création du serveur sous express est hors sujet, on ne s’y attardera pas donc.

Mise à jour de de la config typescript

Dans le fichier de config /src/tsconfig.app.json on ajoutera server.ts dans les fichiers à exclure

Ajouter ensuite dans tysconfig.json angularCompilerOptions

angularCompilerOptions : permet de spécifier une propriété genDir qui correspond au dossier dans lequel les fichiers ngfactory générés seront exportés.
entryModule : on lui indique le chemin vers le module principal sur le lequel l’app bootstrap ( dans ce cas : AppModule)
Mise à jour du Script NPM

dans le package.json

prestart lancera d’abord ce script avant le start (grace au pre ajouté avant) ng build –prod && ngc puis le server est lancé

et zoo

on lance l’app

et si tout ce passe bien vous devriez avoir un quelque chose comme ca

Si vous visitez http://localhost:4000! , dans le code source de la page vous devriez avoir le code correspondant à ce que vous avez en visu plutot que l’habituelle « app works »

angular universal source code

Générer un composant

Utiliser le cli pour générer un composant est assez facile avec les commandes fournies par le cli.

malheureusement avec nos modifications on aura une erreur du type

Pour éviter cela il suffit de spécifier le module en ajoutant un flag.

Définition des routes

Ouvrons maintenant le fichier routing app-routing.module.ts généré lors de la création de notre projet via le flag –routing

Mise à jour des templates

Ouvrons le ficher /src/app.component.html et mettons le à jour avec les liens

 

 

 

Ajout des titles et meta tags à nos components

C’est assez simple , il suffit d’importer Meta et Title depuis @angular/platform-browser

puis de mettre à jour le constructeur

Et voila

 

Les pièges à éviter

Universal ne peut utiliser les objets globaux (window, document, localstorage) existants au runtime du navigateur.

Le DOM doit être manipulé par Angular et non de façon externe (vanilla Js, jQuery : par exemple document.domMethod() ou encore $(‘dom-element’))..

Le server side rendering n’est pas compatible avec le lazy loading des modules.

 

[Angular] – part 1 – Mise en place environnement de travail

ng -v

Nous allons voir comment préparer son environnement de travail pour un projet sous Angular (actuellement nous sommes à la version Angular 6).

Si vous travaillez en équipe, rien de mieux que d’utiliser le CLI de Angular. Celui ci vous permettra de générer des modules, components, pipe etc…

Prérequis

  • node js (version > 8)
  • npm (version > 5)

J’ai écrit un article sur les différentes manières d’installer et mettre à jour Node et npm (sur mac).
Mais ne perdons pas de temps : utilisez brew sur mac ou chocolatey, oneGet sur windows.

installez Angular de façon globale

Pour vérifier que tout s’est bien passé , testez

ng -v
ng -v

 

VSCode extensions et raccourcies à connaitre

Visual Studio code - VSCODE

En passant de AngularJs à Angular et donc à typescript j’ai aussi changé d’éditeur de code. Je suis passé de PHPStorm et Atom à VS Code (Visual Studio Code). Je trouve cet éditeur vraiment top et si cela m’a appris une chose c’est que je peux aimer du Microsoft…(VS Code est créé par Microsoft)

C’est éditeur est créé grace à Electron, c’est donc fait à partir de CSS/HTML/JS et les performances sont au rdv contrairement à ceux à quoi je m’attendais.

  • il gére la coloration syntaxique des principaux language et surtout du Typescript.
  • gère le typage pour Typescript
  • auto import pour javascript et Typescript
  • supporte GIt nativement
  • affiche le status GIT d’un fichier dans l’arborescence de façon coloré
  • a un debugger intégré
  • permet la personnalisation des raccourcis clavier
  • permet d’avoir les différents espaces de travail (par projet)
  • permet de diviser l’éditeur verticalement pour avoir différents fichiers cote à cote
  • a un terminal intégré

Le Marketpalce de VsCode est vraiment très bien fournit, on peut customiser à fond l’éditeur via le fichier json.

Sachant que 90% de mon temps je fais du dev front (principalement Angular et un peu de React, bref du JS) mes extensions sont axés plutôt JS.

Les raccourcies qui sauvent la vie

Sélection multiple (curseur multiple)

Alt+click
multicursor

CMD+D : sélectionnera le prochain mot, la prochaine occurence
multicursor-wordIl est possible de rajouter plus de curseur avec MAJ+CMD+L

Recherche

Recherche à travers des fichiers
MAJ+CMD+F :
recherche

Formatage

Formatage du document entier :  MAJ+ALT+F
Formattage de la selection : MAJ+K MAJ+F

VS Code peut effectuer par défaut des formatage pour le javascript, Typescript, Json, HTML

Zone CSS pliable

Plier le bloc actuel : ALT+MAJ+[
Déplier le bloc actuel: ALT+MAJ+]

Plier récursivement le bloc actuel : CMD+K CMD+[
Déplier récursivement le bloc actuel: CMD+ CMD+]

Plier tout : MAJ+K MAJ+0
Déplier tout: MAJ+K MAJ+J
Plier tous les commentaires : MAJ+K MAJ+/

Vous pouvez définir des zones de blocs arbritaire à plier/déplier

avec l’utilisation de /* #region */ et /* #endregion */

CSS region folding

Les extensions « indispensables »… ou pas

Linter

TS LINT : un linter pour typescript

ES LINT :  un linter très puissant dont les règles sont simples à configurer

ps : Le style guide javascript de Air B&B vaut le coup d’oeil

Angular

Angular V6 Snippets : des snippets angular par John Papa

Angular TypeScript Snippets for VS Code

Angular2-inline : placement des attributs sur une seule ligne + coloration syntaxique

angular2-inline

 

React

React Native tools : aide au dev pour du React Native

React Native

React-Native/React/Redux snippets for es6/es7 : des sniipets pour le trio magique

Autres

TODO Highlight : Surligne les an noations que vous souhaitez metttee en avant dans vos commentaire tel que TODO, FIXME AFAIRE…

VSCODE-TODO-HIGHLIGHT

 

Rainbow Brackets: une extension pour savoir ou en est avec toutes nos parenthèses

Debugger for Chrome : une extension pour debugger dans Chrome

Docker support for Visual Studio Code : comme son nom l’indique, aide à builder et deployer des applications dans des container Docker depuis VSCode

EditorConfig for VS Code: pour avoir un fichier de configuration, editorconfig,  de l’éditeur qui pourra être versionné

 

Themes

Dracula: le thème

Dracula

Material Icon Theme : car j’aime bien voir du premier coup à quel type de fichier ou dossier correspond un élement

 

 

 

Angular-cli et Sass

Angular Cli

Démarrer un projet Angular sous Sass

Angular Cli

Pour tous ceux qui souhaitent utiliser Angular-cli avec Sass facilement voir la démarche:

Lorsqu’on travaille avec le cli, la feuille de style par défaut se termine par .css. Ce qui nous intéresse c’est d’utiliser l’extension scss sur nos fichiers.

Tout d’abord, pour démarrer un nouveau projet angular utilisant .sass , il nous suffit d’utiliser le flag –style

On pourrait aussi utiliser du sass ou less mais ce n’est pas ce qui nous intéresse : –style =less

Convertir un projet angular vers Sass

Si vous aviez déjà créé un projet utilisant simplement .css. Cela va nécéssiter un tout petit plus de travail pour le convertir en scss.

Tout d’abord on demande à angular de convertir notre projet pour utiliser le scss

On peut aussi le faire en modifiant le fichier .angular-cli.json

Malheusement cela ne modifiera pas les fichier créés. Pour les anciens fichier .css pour devrez les modifier à la main, chager l’extension .css en .scss et penser à modifier dans le component le stylesUrls

Utiliser l’import Sass plus simplement

Si vous créer des mixins ou des variables, le plus souvent , ceux ci sont dans des fichiers externes dans votre dossier sass

par exemple:
|- src/
|- assets/
|- sass/
|- _variables.scss
|- _mixins.scss
|- styles.scss

Pour utiliser nos mixins et variables dans le fichiers styles.scss, on les importe:

Rien de fou ici, ca commence à devenir plus contraignant lorsqu’on souhaite utiliser ses mêmes variables dans des composants angular qu’on aurait créé.
Exemple de cas
|- src/
|- app/
|- header
|- social/
|- social.component.html
|- social.component.scss
|- social.component.ts
|- menu/
|- menu.component.html
|- menu.component.scss
|- menu.component.ts
|- search/
|- search.component.html
|- search.component.scss
|- search.component.ts
|- assets/
|- sass/
|- _variables.scss
|- _mixins.scss
|- styles.scss

Si nous devions importer variables et mixins dans nos 3 fichiers de styles, il aurait fallu y accéder en prenant en compte le chemin relatif du dossier sass par rapport au component.

Heureusement Angular-cli propose une manière simplifié d’importer des fichiers sass: il faut utiliser ~

Angular cli + Bootstrap 4

Bootstrap 4

Pour ceux qui utilisent bootstrap.
On installe d’abord bootstrap via npm

Ajout du css bootstrap dans le fichier config : .angular-cli.json

On utilise ../node_modules car le point de départ du cli est le dossier src/

Ajout des fichiers sass

Nous n’avons pas toujours besoin d’importer tous les fichiers .
Dans le dossier bootstrap, nous avons tous ces fichiers :

Beaucoup de fichiers non nécéssaire pour vos projets

Pour utiliser bootstrap, nous n’avons besoin que de ce strict minimum

Avec le ~, importé des fichiers sass devient très facile.
+++

 

sass

Angular Cli – angular-cli.json

Pour les projets sous angular2, j’utilise angular-cli , j’ai eu besoin de modifier la configuration de base.

Dans le fichier angular-cli.json

Dans le terminal

Mettre à jour NPM et gérer les versions de node.js

Node JS

Node.js est mis à jour très régulièrement. Il devient vite difficile de suivre et de garder les bonnes versions sur sa machine surtout si vous travailler avec différentes versions.

Installer Node.js

Si vous installer Node pour la première fois, vous pouvez l’installer depuis le site internet nodejs.org avec l’installateur proposé.

Node Js
Node Js

Installer, mettre à jour, désinstaller via le terminal

Si vous souhaitez l’installer via le terminal, il suffit d’utiliser Homebrew. Vous aurez aussi besoin d’avoir xCode à jour.

Mettre à jour Node

Mise à jour depuis le site nodejs.org

Il suffit de récupérer l’installateur et de le réinstaller….

Gérer plusieurs versions de Node.js

A un moment ou un autre vous aurez besoin de switcher entre les différentes versions de node. Pour le faire facilement il y a deux solution : Node version Manager (nvm) et n.

Node version manager (nvm)

https://github.com/creationix/nvm

NVM est un script bash permettant

  • d’installer multiple versions de node
  • mettre à jour vers la dernière version
  • choisir la version par défaut du système
  • lister toutes les versions de node sur le système

n

https://github.com/tj/n

n est gestionnaire de package similaire à nvm.

La grosse différence est qu’il faut déjà avoir node pour l’installer.

Ou alors cloner le dépot et faire un make install

 

[Visual Studio Code] Lancer VSC depuis le terminal

Visual Studio Code

Pour pouvoir lancez directement Visual Studio depuis le terminal en tapant « code », il faut :

1 – Aller dans Visual Studio Code.
2 – Taper (maj cmd P) puis shell command.
3 – Activer l’option et voilà !

Ensuite vous pourrez directement le lancez avec la variable code.

# ouvrir tout un répertoire dans vsc

# ouvrir tout un fichier dans vsc

 

Installation Compass sur Mac OSX Lion

Si comme moi vous n’êtes pas un as du terminal et que l’installation de COMPASS n’a pas fonctionner du premier coup, voici comment je m’en suis sorti :-)

D’abord faites un tour ici si vous souhaitez avoir les bases du terminal :

  • http://wiseheartdesign.com/articles/2010/11/12/the-designers-guide-to-the-osx-command-prompt/
  • http://www.xrings.net/xrings/rubrique.php3?id_rubrique=8

A savoir : j’installe Compass sur une machine qui n’avait pas Xcode d’installé. Sachant que Ruby (1.8.7)  est disponible sur mac par défaut mais avec une version  ancienne.

Dans le cas ou il y aurait une tentative d’intsllation non abouti, je vous suggère pour avoir une installation propre de supprimer RVM et Xcode

Installation de GCC avec Xcode ou osx gcc installer

Par défaut , il ,’y a pas d’outils de compilation sous mac osx, c’est pour cela qu’on installe GCC.

Avec Xcode

Il est gratuit et disponible sur l’appstore. Une chose importante à savoir lorsque vous « installer » Xcode depuis l’appstore est qu’il se téléchargera mais qu’il ne s’installe pas. Il faudra donc lancer l’installation pour que celle ci soit bien réalisée.

Le fichier approchant les 2go , ne soyez pas pressé…

Une fois le fichier téléchargé et installé , pensez à installer « Command Line Tools for Xcode »

si  Xcode 4.3.1 est correctement installé,

cc –version

devrait vous donner quelque chose qui ressemble à ca cela:

% cc –version
Apple clang version 3.1 (tags/Apple/…
Target: x86_64-apple-darwin11.4.2
Thread model: posix

Avec OSX GCC installer ( recommandé)

L’ alternative si vous ne souhaitez pas installer ce volumineux fichier qu’est Xcode est par ici :

https://github.com/kennethreitz/osx-gcc-installer/downloads et choisissez GCC Installer for OSX 10.7+, v2,

site : https://github.com/kennethreitz/osx-gcc-installer

Installation de Homebrew

Homebrew est un gestionnaire de paquet pour mac osx.

site : http://mxcl.github.com/homebrew/

Vous pouvez maintenant installer des outils dont vous pourrez avoir tel que autoconf , automake , git, wget…

$ brew install automake
$ brew install git
$ brew install wget

Si vous avez une erreur lors de votre utilisation avec Homebrew, lancer :

$ brew doctor

Installation de RVM

RVM pour Ruby version manager vous permettra d’avoir plusieurs version de Ruby (et donc aussi de SASS) sur la même machine. Il est préférable d’avoir un environnement de développement dédié à chaque type de projet. SASS étant en perpétuelle évolution vos anciens fichiers SASS risque de ne plus se compiler correctement lors de vo mise à jour.

installation de   RVM avec  ruby (version stable) :

$ \curl -L https://get.rvm.io | bash -s stable –ruby

get.rvm.io est en fait une redirection vers https://raw.github.com/wayneeseguin/rvm/master/binscripts/rvm-installer
Vous pourriez aussi utiliser l’url absolue pour l’installation :

$ \curl https://raw.github.com/wayneeseguin/rvm/master/binscripts/rvm-installer | bash -s stable

mais si cela ne fonctionne pas :

Comme nous avons déjà  installer  GCC Installer for OSX 10.7+, v2 par Kenneth Reitz, un simple

$ rvm reinstall 1.9.3

et le tour est joué ! Il ne vous reste plus qu’à définir la dernière version comme la version par défaut

$ rvm –default use 1.9.3

Site : https://rvm.io/rvm/install/

Vérifions que les bonnes version sont installées pour rvm et ruby:

$ rvm -v

devrait nous donner un truc comme

rvm 1.18.5 (wayneeseguin/master) by Wayne E. Seguin <wayneeseguin@…

$ ruby -v

ruby 1.9.3p374 (2013-01-15 revision 38858) …

Installation de compass

Il ne nous reste plus que à installer compass

$ gem update –system
$ gem install compass

Si vous détester les lignes de commandes vous pouvez vous procurez SCOUT

site : http://mhs.github.com/scout-app/