Nom de l’auteur/autrice :yvonh

Passage de paramètre à une fonction callback

Javascript / Par

vous connaissez tous la requête Ajax avec JQuery

$.ajax({
url:url,
method:'GET',
success:function(data){
  console.log(data)
}
})

En passant en callback une fonction anonyme, on définit la fonction à la volée, donc pas de problème pour passer des paramètres.

Mais qu’en est-il si on utilise une fonction nommée à la place?

function callback(data) {
console.log(data)
}

On serait tenté d’écrire :

$.ajax({
url:url,
method:'GET',
success:callback(data)
})

ça ne marche pas en effet, vous devez passer la fonction par référence, autrement dit vous devez passer le handler, en ajoutant des parenthèses vous exécutez la fonction. Donc on doit avoir la syntaxe suivante, mais qui amène à poser la question : mais comment on passe le paramètre data?

$.ajax({
url:url,
method:'GET',
success:callback
})

Il existe en Javascript la variable argument, qui fait référence aux paramètres qui sont passés, c’est un tableau commençant à l’index 0 pour le premier paramètre (donc data dans notre cas)

function callback() {
console.log(argument[0])
}

#marche quelquesoit le nombre de paramètres
symfony

Memento Twig

PHP / Par

Petit article pour consigner les techniques de Twig qu’on a trop tendance à oublier car peu utilisée, il est ici utilisé dans un contexte Symfony

Chercher l’url d’une route

{{ url('home') }} << ou un autre nom de route, ici on a le nom de domaine

Boucle for dans twig

    {% for user in users %}
        <li>{{ user.username|e }}</li>
    {% endfor %}

Comment dumper une variable

Vraiment très fondamental, le dump permet de voir ce que contient une variable, et c’est un raccourci très efficace dans la connaissance d’une librairie

{{ dump(app.request) }}

Ainsi l’exemple ci-dessus peut nous donner plein d’informations sur l’objet request et ainsi nous permettre dde récuérer des informations comme path_info ou des variable de paramétrage dans les fichier de configuration de Symfony.

#exemple de dump
public 'server' => 
    object(Symfony\Component\HttpFoundation\ServerBag)[16]
      protected 'parameters' => 
        array (size=41)
          'REDIRECT_STATUS' => string '200' (length=3)
          'HTTP_HOST' => string 'terrav2' (length=11)
          'HTTP_CONNECTION' => string 'keep-alive' (length=10)
          'HTTP_CACHE_CONTROL' => string 'max-age=0' (length=9)
          'HTTP_UPGRADE_INSECURE_REQUESTS' => string '1' (length=1)
          'HTTP_USER_AGENT' => string 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36' (length=121)
          'HTTP_ACCEPT' => string 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9' (length=124)
          'HTTP_REFERER' => string 'http://terrav2/matrice/export' (length=33)
          'HTTP_ACCEPT_ENCODING' => string 'gzip, deflate' (length=13)
          'HTTP_ACCEPT_LANGUAGE' => string 'fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7' (length=35)
          'HTTP_COOKIE' => string 'PH..

# pour getter le hTTP_HOST par exemple :
{{ dump(app.request.server.get('HTTP_HOST')) }}

Comment accéder à un rôle d’un user

{{ app.user.roles[0] }}

Créer un lien hypertexte

{{ url('nomDeLaRoute',{ 'param':'value'}) }}

Accès aux variables de configuration de Symfony depuis Twig : Substitution de variable

Dans le fichier services.yaml :

parameters:
    pdf_folder: '%kernel.root_dir%/../public/medias/pdf'

Dans le fichier twig.yaml

twig:
    globals:
        pdf_path: '%pdf_folder%'

Dans le fichier template twig :

{{pdf_path}}

Accéder à une propriété d’une table liée

Il hy a la table Users qui contient le champ IdGroupe ,puis la table UtilisateurGroupe qui contient l’IdGroupe (jointure donc) et le libellé du groupe auquel on veut accéder

Le chainage est possible avec la notation pointée

A la fin on aura

{{user.idUtilisateurGroupe.getIdUtilisateurGroupe }}
Mysql logo

Trucs et astuces sur PHPMyadmin

Mysql / Par

Comment montrer la totalité d’une cellule

Phpmyadmin lorsque vous faites une requêtes peut ne mpas montrer toutes les données d’une celluele, ce qui est OK lrsque que vous faites une requêtes classqieu (SELECT), mais il y a des cas où vous avez besoin de connaitre une donnée en particuliers (par exemple lister la requête de création d’une table) et il vous faut toute la donnée. Voici la marche à suivre pour avoir la totalité des données

Après avoir fait votre requête,  cliquez sur +Options et il y a un bouton radio FUL TEXT et voilà
exemple : 
SHOW CREATE TABLE CHALLENGE

CREATE TABLE `CHALLENGE` (
 `ID_CHALLENGE` int(50) NOT NULL AUTO_INCREMENT,
 `ID_CHALLENGE_TYPE` int(50) NOT NULL,
 `ACTIF_CHALLENGE` int(1) NOT NULL DEFAULT '1',
 `LIBELLE_CHALLENGE` varchar(250) NOT NULL,
 PRIMARY KEY (`ID_CHALLENGE`),
 KEY `ID_CHALLENGE_TYPE_idx` (`ID_CHALLENGE_TYPE`),
 CONSTRAINT `CHALLENGE_TYPE` FOREIGN KEY (`ID_CHALLENGE_TYPE`) REFERENCES `CHALLENGE_TYPE` (`ID_CHALLENGE_TYPE`) ON DELETE NO ACTION ON UPDATE NO ACTION
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=latin1

Le Layouting dans WPF

Csharp / Par

Dans un précédent article je parlais de la création d’un application WPF en général, dans cet article on va se concentrer sur le XAML, el langage xml qui permet de disposer les élément WPF dans la fenêtre.

Concevoir son interface en XAML

Au démarrage d’une application XAML, il y a une fenêtre vide, mais le code XAML n’est pas vide pour autant. Il y a un code minimal :

<Window x:Class="PriceGrabber.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:PriceGrabber"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        
    </Grid>
</Window>
Fenêtre minimale xaml

Vous voyez une fenêtre blanche. Mais en fait i y a bien des choses en dessous.

Ajouter un StackPanel comme enveloppe de vos éléments plus petits

Sur la gauche de VisualtStudio se trouve la Toolbox, dont vous pouvez glisser-déplacer les élément vers la fenêtre au centre.

WPF Stackpanel

La fenêtre XAML se met à jour automatiquement, avec des valeurs par défaut que vous pouvez changer.

Le stackpanel héberge les éléments dans toute sa largeur.

stack panel exemple

WPF comment ajouter des élément dans une combobox?

Tout simplement en y ajoutant des comboBoxItem.

<ComboBox x:Name="comboBox">
    <ComboBoxItem Content="X"/>
    <ComboBoxItem Content="Y"/>
    <ComboBoxItem Content="Z"/>
</ComboBox>

Ajouter via le code des éléments dans une comboBox

Si vous ne connaissez pas à l’avance les éléments de la comboBox, vous pouvez le faire dynamiquement via code c#, mais c’est très fastidieux.

php

Accélérez votre site web avec un cache Opcode

PHP / Par

Toujours sur un serveur dédié, et sous Debian voici la procédure à faire pour accélérer votre site web:

  1. Installez APC : aptitude install php-apc
  2. Configurer le fichier  php.ini en éditant le ichier  « /etc/php5/conf.d/apc.ini » et en ajoutant: apc.enabled=1
    apc.shm_segments=1
    apc.shm_size=128
  3. Redémarrez Apache
  4. Créez une page web pour pourvoir monitorer les performance de ce cache (remplacez mysite par le bon répertoire de votre serveur) :gzip -dc /usr/share/doc/php-apc/apc.php.gz > /home/mysite/public_html/apc.php

Voilà c’est tout !

Comment trouver le fichier info.plist dans Xcode

App Mobiles / Par

Le fichier info.plist contient les informations diverses et variées mais importantes sur votre application que vous allez déployer sur l’Appstore

Récemment pour résoudre le problème d’une application rejetée car ne fonctionnant pas sur Ipad, j’ai dû trouver un moyen pour forcer le déploiement sur iphone. Même sur Stackoverflow c’était pas clair pour beaucoup de gens qui pensaient que ce n’était pas possible.

Après un build Ionic, le fichier info.plist se trouve sur dans /platform/ios/nom-appli/nom-appli-Info.plist.

L’éditer avec un éditeur de texte, et ajouter une clé UIRequiredDeviceCapabilities

Pourquoi vous devez éditer le fichier directement, parce que il me semble que dans Xcode lui même je ne pouvais pas ajouter la clé manuellement (bug?)

	<key>UIRequiredDeviceCapabilities</key>
	<dict>
		<key>telephony</key>
		<true/>
	</dict>

Ensuite sur Xcode dans l’onglet Info, forcer à rafraîchir l’onglet qui reflétera le fichier.

Voici la documentation officielle d’Apple sur les différente clé qu’on peut mettre.

Lien pour savoir comment archiver une app et la déployer sur l’Appstore.

ERROR ITMS-9000: “Redundant Binary Upload

Note 1 : Si vous avez ce message parce que vous avez essuyé un refus, puis refait un upload, il vous faut aller dans « General » et « Build » et incrémenter le numéro de build. Un numéro de build correct doit être un entier, il est différent de la version de l’application. En incrémentant le numéro de build vous n’avez pas besoin de changer le numéro de version de l’application pour resoumettre.

Note 2 : si vous avez une application ciblant Iphone et Ipad, vous ne pouvez plus dans une version ultérieure restreindre aux Iphone seulement.

Développer une application web en ReactJS

Javascript / Par

ReactJS à la différence de Angular et de VueJS, est une librairie qui s’occupe uniquement de la vue, très véloce, grâce à l’utilisation d’un virtual DOM. Le principe es de ne mettre à jours que ce qui est nécessaire.

Mise en place du projet

$ npx create-react-app myApp
# npx fourni depuis la version npm@5.2.0 est sensé vous faciliter la vie, si npx <command>, et que la <command> n'est pas dans le PATH, iil est capable d'installer la commande depuis NPM et l'invoquer.
# sortie de la commande npx create-react-app
Initialized a git repository.

Success! Created jeu at /Users/poste5hookipa/sites/reactapplication/jeu
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd jeu
  yarn start

Installer votre environnement de développement web sous Mac

MacOS / Par

Votre MacBookPro livré, il faut maintenant installer un environnement d’exécution pour vos sites web, et aussi un environnement de développement.

Pour ce qui est de l’environnement d’exécution, reportez vous à ces liens:

Pour ce qui est de l’environnement de développement, nous allons voir dans les lignes qui suivent les opérations à faire

Installation de Xcode ou Xcode Command Line Tool (CLT)

Pourquoi installer Xcode CLT? il est nécessaire pour exécuter certaines commandes en Shell, notamment pour installer Homebrew le gestionnaire de package de MacOS.

Pour vérifier si vous avez déjà mis en place(on en sait jamais) Xcode CLT, vous pouvez tapez les commandes:

$ gcc
# ou
$ xcode-select -p
Si Xcode CLT n'est pas installé, vous aurez une popup vous invitant à l'installer.

Téléchargez Xcode CLT sur le site https://developer.apple.com/download/more/

Choisissez bien le package, il y a beaucoup de fichiers listés, et vous risquez de ne pas télécharger la bonne version, classez dans un premier temps par date et regardez le nom commençant par « Command line tools for Xcode xx », et regardez bien la version de Xcode la plus récente.

cf lien : 

# testons voir si c'est bien installé
$ xcode-select -p
/Library/Developer/CommandLineTools
# c'est bon c'est installé

Installation de Homebrew

Maintenant que Xcode est installé, nous pouvons faire la ligne de commande suivante pour installer Homebrew, qui va nous permettre d’installer MySQL et autres applicatifs.

#il est conseillé d'installer Homebrew sous /usr/local/homebrew
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Installation des logiciels

MySQL

#la version par défaut de MySQL est la 8 pour Homebrew
#si on veut la 5.7 voici les étapes
# montrer les infos de la version 5.7
$ brew info mysql@5.7
mysql@5.7: stable 5.7.29 (bottled) [keg-only]

#installation
$ brew install mysql@5.7

We've installed your MySQL database without a root password. To secure it run:
    mysql_secure_installation

MySQL is configured to only allow connections from localhost by default

To connect run:
    mysql -uroot

mysql@5.7 is keg-only, which means it was not symlinked into /usr/local,
because this is an alternate version of another formula.

If you need to have mysql@5.7 first in your PATH run:
  echo 'export PATH="/usr/local/opt/mysql@5.7/bin:$PATH"' >> ~/.bash_profile

For compilers to find mysql@5.7 you may need to set:
  export LDFLAGS="-L/usr/local/opt/mysql@5.7/lib"
  export CPPFLAGS="-I/usr/local/opt/mysql@5.7/include"


To have launchd start mysql@5.7 now and restart at login:
  brew services start mysql@5.7
Or, if you don't want/need a background service you can just run:
  /usr/local/opt/mysql@5.7/bin/mysql.server start
==> Summary
🍺  /usr/local/Cellar/mysql@5.7/5.7.29: 319 files, 232MB
==> Caveats
==> openssl@1.1
A CA file has been bootstrapped using certificates from the system
keychain. To add additional certificates, place .pem files in
  /usr/local/etc/openssl@1.1/certs

and run
  /usr/local/opt/openssl@1.1/bin/c_rehash

openssl@1.1 is keg-only, which means it was not symlinked into /usr/local,
because openssl/libressl is provided by macOS so don't link an incompatible version.

If you need to have openssl@1.1 first in your PATH run:
  echo 'export PATH="/usr/local/opt/openssl@1.1/bin:$PATH"' >> ~/.bash_profile

For compilers to find openssl@1.1 you may need to set:
  export LDFLAGS="-L/usr/local/opt/openssl@1.1/lib"
  export CPPFLAGS="-I/usr/local/opt/openssl@1.1/include"

==> mysql@5.7
We've installed your MySQL database without a root password. To secure it run:
    mysql_secure_installation

MySQL is configured to only allow connections from localhost by default

To connect run:
    mysql -uroot

mysql@5.7 is keg-only, which means it was not symlinked into /usr/local,
because this is an alternate version of another formula.

If you need to have mysql@5.7 first in your PATH run:
  echo 'export PATH="/usr/local/opt/mysql@5.7/bin:$PATH"' >> ~/.bash_profile

For compilers to find mysql@5.7 you may need to set:
  export LDFLAGS="-L/usr/local/opt/mysql@5.7/lib"
  export CPPFLAGS="-I/usr/local/opt/mysql@5.7/include"


To have launchd start mysql@5.7 now and restart at login:
  brew services start mysql@5.7
Or, if you don't want/need a background service you can just run:
  /usr/local/opt/mysql@5.7/bin/mysql.server start

Lisez bien les information ci-dessus pour savoir comment démarrer, arrêter, et faire quelques opérations en ligne de commande.

react native

Les Hooks en React

Javascript / Par

Les hook sont apparus avec la version de React 16.8.

Le Hook UseState en ReactJS

Le hook UseState se charge du state dans les composants fonctionnels. Dans le composant de classe on avait :

this.setState(nouveauState)
#avec useState
const [state,setState] = useState(initialState)

Le hook useEffect

Il est l’équivalent de plusieurs fonction de cycle dans les composant de classe. Il remplace ComponentDidMount, ComponentDidUpdate. 

#invocation au premier rendu
useEffect( () => {

},[])

#invocation au premier rendu et à chaque update du state
useEffect( () => {

},[variable])


#invocation uniquement à chaque update (et pas au premier chargement)

const isInitialMount = useRef(true);

useEffect(() => {
  if (isInitialMount.current) {
     isInitialMount.current = false; //grâce à cette astuce on bypasse l'exécution du code d'update au premier rendu
  } else {
      // le code pour chaque update
  }
});
javascript

Installer NPM sans avoir les problèmes de droit d’accès à des répertoire

Javascript / Par

Une des choses qui m’énervent le plus (et les développeur) est que dans certains processus de build avec NodeJs, on est confronté à des erreurs qui résultent de droits d’accès à des répertoires parce qu’on n’est pas utilisateur root. Ce problème se produit surtout en environnement MacOS et Linux. sous Windows vous travaillez en Administrateur en général.

Sur le site de NPM, il vous est expliquée ue procédure d’installation de NodeJS qui vous évite cet écueil. Le principe consiste à changer le répertoire par défaut de NPM.

https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally

tuto ionic 4

Builder un projet avec Ionic sous Windows

App Mobiles / Par

D’abord il faut installer l’environnement de développement. Pou rle JDK, Gradle,NodeJS, n’oubliez pas de configurer la variable Path!

Installation de JDK

Pour ce faire il vous faut aller sur le site d’Oracle et créer un compte 🙁

Installation de NodeJS (donc de NPM)

Installation de Ionic et cordova

Installation de Android Studio

Lors du build vous allez avoir des erreurs, mais ce doit être minime si vous avez effectué les étapes de ci-dessus.

Gradle qui est le builder doit être installé indépendamment même s’il vient avec Android Studio (ne me demandez pas pourquoi) Télécharger Gradle depuis ce site.

Premier build et possibles problèmes

Pour le premier build ou run, mettez vous en mode verbose pour voir les détail sdes potentiels problèmes :

ionic cordova run android --verbose

Problèmes possibles avec Gradle : à un moment vous pouvez avoir le message comme quoi vous n’avez pas validé la license du SDK

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':app'.
> Failed to install the following Android SDK packages as some licences have not been accepted.
     platforms;android-28 Android SDK Platform 28
  To build this project, accept the SDK license agreements and install the missing components using the Android Studio SDK Manager.

Il faut vous rendre à ce répertoire sous Windows

C:\Users\admin\AppData\Local\Android\Sdk\tools\bin

Exécutez cette commande dans ce répertoire et validez par ‘y’ toutes les questions.

tuto ionic 4

Tuto application Ionic 3 IBeacon et déploiement vers le device sous IOS

App Mobiles / Par

J’ai du faire récemment une application démonstrateur (POC : proof of concept) avec Ionic et des iBeacon, devant le peu d’information je pose un petit tuto par ici en espérant que ça peut servir, n’hésitez pas à poser des questions j’aurais peut être réponse.

Ibeacon qu’est ce que c’est?

Un iBeacon est un objet électronique qui émet des signaux bluetooth à intervalles réguliers. Il émet un seul message, qui contient des données. Et si un smartphone est équipé du Bluetooth et un programme pour capter ces messages, il peut les interpréter et par exemple faire une action. Un iBeacon est un device qui doit être positionné de façon fixe. Il sert de repère géolocalisé. Une application exemple est celle d’un musée, si vous êtes équipé de l’application du musée, et que vous vous présentez devant un tableau, l’application peut vous fournir des informations sur ce tableau.

En commerce, le filon est exploité de façon un peu différente : quand vous disposez de l’application de la chaine de magasins, si vous passez à proximité, vous recevez une notification push sur une promotion.

Le iBeacon est capable d’émettre sur 70m ! en Bluetooth low energy (BLE), de fait un distingue 3 zones, proximité immédiate, proximité, et éloigné.

Source https://gorillalogic.com/

Ibeacon est une émanation de Apple, Google a répliqué avec les eddystones. Il y a une différence entre les eddystones et les ibeacons, les devices sont identifiés par leur uuid, un identifiant qui est sensé les rendre unique. Une des différences à ma connaissance est que sur IOS, il faut connaitre à l’avance les uuid de vos iBeacons, sinon votre application IOS ne verra rien. Par contre une application Android avec des eddystones pourra scanner tous les eddystones se trouvant à proximité, même si ces derniers n’ont pas le même uuid que celui mis dans l’application.

Ionic qu’est-ce que c’est?

Ionic est un framework de développement d’application mobile, vous développez des applications sans avoir à connaitre Java, ni Swift. Donc c’est destiné aux développeurs d’application web, qui n’auront pas besoin d’avoir la douleur d’apprendre un nouveau langage. Ceci dit, le plus difficile au début c’est de comprendre comment fonctionne Ionic.

Ionic est basé sur Cordova, une solution open source d’application mobile en y ajoutant une couche plus « native ». Depuis la version 3 il fonctionne avec le framework Javascript Angular 2+ et le langage est TypseScript, une surcouche de Javascript en plus typé. En mode développement, l’application peut être vue sur un navigateur web. Vous pouvez ensuite déployer sur une des plateforme prise en charge (Android ou IOS), et il vous faudra disposer de Android Studio pour faire marcher dans un émulateur virtuel Android, et de Xcode pour émuler sur un device IOS.

Vous pouvez aussi déployer sur un smartphone en phase de développement, ceci est nécessaire car nous utilisons des fonctionnalités disponibles seulement sur un device physique.

Il faut savoir que si vous êtes sur Windows, vous ne pourrez pas déployer sur IOS. Par contre sur Mac, vous pourrez déployer sur IOS et Android.

Bootstrapper une application ionic

ionic start MyApp --type=ionic-angular

Importer les librairies pour iBeacon

#installation des librairies

Paramétrer vos iBeacons : importante distinction entre les iBeacons et les EddyStones (rappel)

Pour configurer les iBeacons, téléchargez l’application iBKS config. Reportez vous à la documentation pour paramétrer chaque iBeacon, un peu laborieux au début.

Note : uuid doit être en minuscule ! pas de trait d’union pour paramétrer l’uuid dans le iBeacon.

Déployer l’application Ionic sous IOS

Note : Pour builder pour Android, voir cet article pour builder une application Ionic sous Windows, c’est à peu près la même chose, mais sachez que vous avez besoin d’un Mac pour builder pour IOS, impossible de faire autrement que d’investir dans un macbook PRO par exemple (16 Go de RAM conseillé)

Déployer pour le device

ionic cordova build ios --device

Ensuite allez dans le répertoire projet et les sous répertoire /platforms/ios et cliquez sur le fichier .xcodeproj pour ouvrir Xcode. Configurez Xcode pour le lier à votre compte développeur Apple sans quoi vous ne pouvez rien faire. En effet vous devez créer un provisioning profile.

Ensuite cliquez sur la liste des devices en haut à gauche, puis sur le triangle noir pour déployer sur votre device.

Déployer pour la production IOS

ionic cordova build ios --prod

Répétez les mêmes process que précédemment, mais en buildant vous aurez une erreur de type code signing ou pas suivant si vous avez sélectionné le certificat que vous aurez créé pour votre application. Pour paramétrer le certificat, il faut aller dans votre projet dans Xcode (icône bleue dans la sidebar), puis General puis la section Signing et cochez la case « Automatically manage signing »

Cliquez sur à côté du triangle noir en sélectionnant dans la liste le device Generic ou si vous avez un device branché, le device correspondant. En fait il faut sélectionner Generic Device lorsque vous n’avez pas de device branché.

1 – Création de l’archive

Ensuite allez dans Produit > Archive dans le menu en haut de l’écran de votre Mac, l’archivage se lance et une nouvelle fenêtre se lance.

2 – Choix du type de distribution

3 – Optionnel : App thinning

Important : over the air installation, vous permet de télécharger l’IPA depuis un lien web, pratique pour des application d’entreprise, si vous voulez éviter le processus de validation de l’Appstore

4 – Le chemin de votre archive sur le site web

5 – Export de l’IPA

Export de l’IPA sous forme d’un dossier, récupérez le dossier généré et uploadez le le en ligne.

6 – Installation over the air

Une fois que vous avez mis votre archive en ligne, vous pouvez le télécharger depuis le l’adresse paramétré à l’étape 4.

Une fois téléchargé, l’application ne se lancera pas, vous avez un avertissement de droit. Pour autoriser l’application, allez dans Paramètres, Général > Gestion de l'appareil > App d'Entreprise (Nom entreprise) puis cliquer sur Faire confiance à « Nom Entreprise ».

Le fichier contenant le lien pour télécharger l’archive :

<html>
<head>
	<title>Mon application</title>
	<meta name="viewport" content="width=device-width" />
	<meta charset="utf-8">
</head>
<body>
	<ul>
		<li><a href="itms-services://?action=download-manifest&url=https://www.monsite.fr/app10/manifest.plist">Installer/MAJ New App IBeacon V 1.0.12 Build 1</a></li>
	</ul>
	<p>Instruction : Après installation allez dans Paramètres, Général > Gestion de l'appareil > App d'Entreprise (Mon entreprise)  puis cliquer sur Faire confiance à "Mon entreprise"</p>
</body>
</html>

Débugger votre application sur un device

Il est possible de débugger votre application même s’il tourne sur un smartphone, pour ce faire, si c’est pour Android, il faut ller à l’url :

chrome://inspect/#devices
Si votre smartphone est connecté par USB et que vous avez autorisé le debug par USB dans les paramètres de votre smartphone,dès que l'application tourne (après avoir fait la commande : ionic cordova run android --device )
vous aurez l'option pour ouvrir une nouvelle fenêtre :

Lien : https://ionicframework.com/docs/v3/developer-resources/developer-tips/

Cliquez sur Inspect pour débugger dans votre navigateur.

Déployer l’application Ionic pour Google Play (Instruction sous MacOS)

Mais il y a peu de différence sous Windows. Lien vers la documentation officielle

Créer la release

On est en release donc l’apk sera dans le répertire de release et non debug.

ionic cordova build --release android
/Users/monposte/sites/myApp/platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk

Signer l’APK

Le bundle généré par la précédente commande n’est pas signée, il faut le faire manuellement. Pour ce faire il faut générer une clé, si vous avez déjà la clé, passer cette étape

Générer le certificat pour signer l’application

 keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

Il vous sera demandé un mot de passe pour le keystore, un fichier nommé my-release-key.keystore sera créé. CE FICHIER EST ULTRA IMPORTANT NE LE PERDEZ PAS ! il n’est pas versionné de base.

Signature de l’application

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore /Users/monposte/sites/myApp/platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk alias_name

Si vous avez tout bon jusque là félicitation ! Maintenant une opération d’optimisation pour réduire la taille. Avec l’utilitaire zipalign, 

~/Library/Android/sdk/build-tools/28.0.3/zipalign -v 4  /Users/monposte/sites/myApp/platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk myApp.apk

Maintenant on est prêt à déployer sur Google Play !!

Note sur Android App Bundle (.aab)

C’est un nouveau format qui permet une taille d’application plus réduite. C’est le format du futur qui remplacera le format apk. L’idée est de laisser la plateforme Google Play optimiser le code pour vous, et l’on obtient une taille d’application diminuée de moitié par rapport à un apk (sur un apk de 50 Mo)

Lien sur générer aab avec Ionic

Note si pas de réseau sur la version déployée sur Android

A partir du SDK28 (ou 27) vous ne pouvez plus faire de requêtes vers les url non sécurisées, sauf si vous ajoutez une directive dans AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        ...
        android:usesCleartextTraffic="true"
        ...>
        ...
    </application>
</manifest>

Source :

https://stackoverflow.com/questions/30326148/cordova-ionic-http-request-not-processing-while-emulating-or-running-on-dev

symfony

Test unitaire et fonctionnel avec Symfony

PHP / Par

Pour lancer un test unitaire (cela suppose que vous avez installé ce qu’il faut pour lancer les tests):

./bin/phpunit
#pour lancer un test en particulier
./bin/phpunit tests/Utils/HelperTest.php   //indiquer le chemin complet

Pour les tests fonctionnels, on va faire comme si on avait un navigateur (mais ce n’est pas un vrai navigateur au sens où l’on démarre vraiment Google Chrome ou Firefox, pour ça il faut voir le plugin Panther)

Le cod eminimal pour ce genre de test est :

<?php
namespace App\Tests\Controller;

use Symfony\Bundle\FrameworkBundle\Test\WebTestCase;
use App\Controller\SecurityController;

class RouteTest extends WebTestCase
{
    public function testLoginRoute()
    {

        $client = static::createClient();
        $client->request('GET', '/login');
        $this->assertEquals(200, $client->getResponse()->getStatusCode());
    }
}

En fait on se sert du code PHP directement pour faire le rendu logique de la page. Pour se logger on fera de la manière suivante :

    public function testAdminLoginToApp()
    {
       $client = static::createClient([], [
            'PHP_AUTH_USER' => 'moi@mail.com',
            'PHP_AUTH_PW' => 'monpass',
        ]);

        // go to dashboard
        $crawler = $client->request('GET', '/dashboard');
        $elem = $crawler->filter('html > body > div > h1');

        // Verify the text in h1 as a proof i'm in
        $this->assertEquals('Dashboard', $elem->text());

    }

A la création du client, on injecte les identifiant et mot de passe, et on est loggé. Ensuite on émule le crawler en lui passant une requête de type GET. Puis on va explorer le DOM en utilisant la fonction filter pour extraire un élément du DOM

Suivre une redirection

Il est possible de suivre une redirection :

        $crawler = $client->request('GET', '/dashboard');
        $crawler = $client->followRedirect();
        $elem = $crawler->filter('html > body > div > h1');

Les tests fonctionnels peuvent prendre du temps, à la différence des test unitaires, vous pouvez vous rendre compte du temps avec la commande shell suivante :

time ./bin/phpunit

Restreindre le coverage des tests

Dans le fichier phpunit.xml.dist, vous pouvez indiquer les répertoires dont les tests seront exécutés.

symfony

Symfony custom form validation

PHP / Par

Cette méthode est intéressante pour affiner votre contrôle d’un champ de formulaire. Par exemple nous allons ajouter un contrôle d’unicité de numéro de téléphone. Nous allons créer depuis le terminal un validateur

Création du validateur

php bin/console make:validator

Un prompt vous demande le nom de la classe validateur

 The name of the validator class (e.g. EnabledValidator):
 > UniquePhoneValidator                                 

 created: src/Validator/UniquePhoneValidator.php
 created: src/Validator/UniquePhone.php

On doit avoir deux classes, UniquePhone qui va servir pour créer l’annotation et UniquePhoneValidator qui contient le code qui va faire le contrôle d’unicité proprement dit.

Ensuite l’entité sur laquelle cette vérification va se faire, imaginons qu’on ait une entité Contrat, importons la classe créée qui se trouve dans la répertoire validator

Préparation de la classe UniquePhone

Pour pouvoir utiliser les annotation plus tard, nous devons importer une classe 

<?php

namespace App\Validator;

use Doctrine\Common\Annotations\Annotation\Target;//ajouté
use Symfony\Component\Validator\Constraint;

/**
 * @Annotation
 * @Target({"PROPERTY","METHOD","ANNOTATION"}) // ajouté
 */
class UniquePhone extends Constraint
{
    /*
     * Any public properties become valid options for the annotation.
     * Then, use these in your validator class.
     */
    public $message = 'Le numéro de téléphone {{ value }} existe déjà.'; // modifié
}

Préparation de la classe UniquePhoneValidator

<?php

namespace App\Validator;

use App\Repository\MatriceRepository;//ajouté
use Symfony\Component\Validator\Constraint;
use Symfony\Component\Validator\ConstraintValidator;

class UniquePhoneValidator extends ConstraintValidator
{
    private $matriceRepository;v // on a besoin du repository pour faire le check
    public function __construct(MatriceRepository $matriceRepository)
    {
        $this->matriceRepository = $matriceRepository;
    }
    public function validate($value, Constraint $constraint)
    {
        /* @var $constraint \App\Validator\UniquePhone */

        $existingPhone = $this->matriceRepository->findOneBy(['clientTelFixe' => $value]); // ajouté

        if(!$existingPhone){ // ajouté
            return;
        }
        // TODO: implement the validation here
        $this->context->buildViolation($constraint->message)
            ->setParameter('{{ value }}', $value)
            ->addViolation();
    }
}

namespace App\Entity;

use Doctrine\ORM\Mapping as ORM;
use App\Validator\UniquePhone;

Ensuite plus loin nous avons la propriété ( le champ) qui sera concernée par cette vérification. 

    /**
     * @var string
     * @UniquePhone()
     * @ORM\Column(name="CLIENT_TEL_FIXE", type="string", length=50, nullable=false)
     */
    private $clientTelFixe;

    /**
     * @var string|null
     * @UniquePhone()
     * @ORM\Column(name="CLIENT_TEL_MOBILE", type="string", length=50, nullable=true)
     */
    private $clientTelMobile;

Remarquez que tout se fait par annotation, c’est Doctrine qui se charge de faire marcher ces annotations. Donc il suffit d’ajouter l’annotation@uniquePhone() aux deux propriétés de l’entité pour activer la vérification.

Contrainte sur une classe entière

Pour placer l’annotation sur une classe et non sur une méthode, vous devez modifier la classe de contraint UniquePhone

<?php

namespace App\Validator;

use Doctrine\Common\Annotations\Annotation\Target;//ajouté
use Symfony\Component\Validator\Constraint;

/**
 * @Annotation
 * @Target({"PROPERTY","METHOD","ANNOTATION","CLASS"}) // modifié
 */
class UniquePhone extends Constraint
{
    /*
     * Any public properties become valid options for the annotation.
     * Then, use these in your validator class.
     */
    public $message = 'Le numéro de téléphone {{ value }} existe déjà.'; // modifié

    public function getTargets()
    {
        return self::CLASS_CONSTRAINT;  // ajouté
    }

}

On a modifié l’annotation Target pour ajouter CLASS, et on a ajouté la méhode getTargets() pour que le validator puisse retourner la classe. Et au dessus de l’entité, enlever les annotations au dessus des propriétés de l’entité pour mettre au dessus de la class.

* MyEntity 
* @UniquePhone()
....
class MyEntity
{
...

Modifier la classe UniquePhoneValidator, cette étape est très importante sinon le messagene s’affichera pas. $value représente désormais la classe, et plus le numéro de téléphone (évidemment),

class UniquePhoneValidator extends ConstraintValidator
{
    private $matriceRepository;

    public function __construct(MatriceRepository $matriceRepository)
    {
        $this->matriceRepository = $matriceRepository;
    }

    public function validate($value, Constraint $constraint)
    {
        /* @var $constraint \App\Validator\UniquePhone */

        // at matrice creation we do the check,
        if (is_null($value->getIdMatrice())) {
            $existingPhone = $this->matriceRepository->findOneBy(['clientTelFixe' => $value->getClientTelFixe()]);
        } else {
            // at edition we do not do the check
            return ;
        }

        if (!$existingPhone) {
            return;
        }


        // TODO: implement the validation here
        $this->context->buildViolation($constraint->message)
            ->atPath('clientTelFixe') // la propriété concernée par la contrainte, avec cette ligne le message d'erreur s'affichera
            ->setParameter('{{ value }}', $value->getClientTelFixe())
            ->addViolation();
    }
}

Note sur la vérification d’unicité

Cela fait beaucoup de travail pour une simple vérification d’unicité, je vous suggère de garder à l’idée qu’une vérification clientside peut être utile et plus simple, couplé à une requête Ajax.

Audit rapide d’un serveur Linux

Linux / Par

Espace disque restant

$ du -sh /*

Type de distribution Linux

$ cat /etc/*release*

configuration matérielle (disques)

$ lsblk
#mémoire
cat /proc/meminfo

Mémoire RAM libre

$ free

Adresse IP

react native

React Native les permissions sur Android et IOS

App Mobiles / Par

https://github.com/react-native-community/react-native-permissions#ios

Il faut installer si ce n’est déjà fait le package react-native-permission

Exemple : Autoriser la camera

Pour Android

Aller dans le fichier AndroidManifest.xml et ajouter les entrées en xml, par exemple pour la caméra :

    <uses-permission android:name="android.permission.CAMERA" />

Pour IOS

Il faut éditer le fichier plist.info

#dans le fichier info.plist
	<key>NSCameraUsageDescription</key>
	<string>Usage de camera</string>

#dans le fichier Podfile
permissions_path = '../node_modules/react-native-permissions/ios'
pod 'Permission-Camera', :path => "#{permissions_path}/Camera.podspec"

#après faites un 
cd ios && pod install

https://medium.com/@rossbulat/react-native-managing-app-permissions-for-ios-4204e2286598

https://github.com/moaazsidat/react-native-qrcode-scanner/issues/213

Il existe d’autres types d’autorisation (SMS, vibrations etc)

xcode

Xcode, IOS comment créer un provisioning profile

App Mobiles / Par

Update : MacOS Catalina, connaitre son UDID

Le provisioning profile vous permet de développer et déployer des application mobile sur IOS.

Pour qui n’a jamais fait, c’est un véritable challenge, tant sur la complexité et le sens obscure des mots techniques.

C’est quoi un provisioning profile? Avant tout dites vous que Apple a envie de tout controler, et veut s’assurer qu’on montre patte blanche avant de pouvoir utiliser sa plateforme. Ainsi pour installer une application, à la différence d’Android, il faut que votre application soit signée électroniquement. Et c’est là qu’intervient le provisioning profile.

Résumons : pour pouvoir installer votre application sur un device IOS, il vous faut un compte développeur sur developer.apple.com, il vous en coûtera 99 euros au minimum par an.

En phase de développement, vous choisissez quelle application doit tourner sur quel device (c’est très limitatif, mais c’est Apple !)

Le provisioning profile se construit à partir de l’id du device physique (UDID), du certificat (qui lui même est fait à partir du CSR qui est généré plus tôt)

Le provisioning profile est à télécharger depuis votre compte développeur sur votre ordinateur pour pouvoir dans XCode builder votre application. Ce provisioning profile sera ensuite mis sur votre device, sans quoi votre application ne pourra démarrer. Ceci peut arriver quand vous avez un provisioning profile effacé du compte développeur, vous pouvez installer l’application, mais elle ne démarrera pas (voire ne s’installera pas)

De quoi est composé un provisioning profile
  • Le development certificate : nécessaire pour tester une application sur une device physique (pour un émulateur pas besoin)
  • Unique Device Identifier, le UDID de votre device (grâce à Itunes vous pouvez le voir en connectant votre device à votre Mac, oui si vous n’avez pas de Mac, vous pouvez oublier les app IOS, il est possbile de contourner, mais est ce que le temps perdu à bidouiller en vaut-il la peine?
  • App ID, c’est l’Id de votre application (à créer sur le compte développeur)

Les étapes de création du provisioning profile:

  • créer un CSR (Certificate Signing Request)
  • sur votre compte développeur créez une application (il aura un AppId)
  • composer votre provisioning profile ensuite

Créer un CSR

Ouvrir l’application Trousseau D’accès (Keychain en anglais) et aller dans Certificate Assistant > demander un certificat. Enregistrez le

Sauvez votre certificat, allez dans votre compte développeur Apple, allez à la section « Certificates, Identifier & Profile », cliquez sur le + pour créer un certificat, uploader votre CSR, et un certificat (fichier avec extension .cer)sera généré que vous allez télécharger. Sur votre Mac, double cliquez sur ce certification pour le mettre dans le trousseau (keychain). Votre certificat a une durée de validité.

Si vous avez pris le soin de nommer votre clé, vous verrez dans votre trousseau la clé publique et privée. On peut passer à la suite

Sur le compte Apple, créez l’app Id (ou BundleId)

Il s’agit , allez dans la rubrique « Identifier », cliquez sur le +, vous allez créer une application avec un nom et un reverse domain (nom de domaine inversé en guise d’identifiant technique)

Ajoutez un device physique (entrez le UDID de votre appareil)

Pour une application React Native, allez dans le Finder, le répertoire IOS, et cliquez sur le fichier avec extension xcworkspace et non celui avec l’extension xcodeproj .

Créez votre provisioning profile

Enfin nous y sommes pour cette partie importante ! Allez dans la rubrique « Profile », créez un profile.

En phase de développement, choisissez « Development », pour déployer sur le store, ce sera un « Distribution » provisioning profile. Sur l’écran suivant vous allez choisir sur quelle application vous allez créer ce provisioning profile.

Enfin sur l’écran suivant, sélectionnez le certificat (le fichier avec extension .cer que vous avez téléchargé plus tôt)

Après avoir choisi le certificat (qui représente votre ordinateur Mac en fait) vous allez affecter au device (que vous avez entré plus tôt)

Ensuite vous pouvez télécharger votre provisioning profile, mais ce n’est pas nécessaire si vous laisser XCode gérer le signin automatiquement (recommandé)

Liens pour plus de lecture:

react native

Ajouter un splash screen sur React Native la méthode facile

App Mobiles / Par

Vous avez fini votre application et vous êtes sur la dernière ligne droite?

Pour avoir une application mobile professionnelle, il vous faut les icônes qui vont bien et le splash screen.

Image du splash screen, il est conseillé d’avoir une image de 3000 x 3000 pixels, et pour les icônes, il faut aussi une grande image, la méthode présentée va générer les différentes résolutions. icon.png sert de base à la génération d’icône, et monSplash.png à la génération du splash screen

Télécharger les packages npm nécessaires :

npm i @bam.tech/react-native-make
npm i react-native-splash-screen
# pour IOS il faut faire un pod install
cd ios && pod install
# génération du splash
# If you are using our cover splash
react-native set-splash --path "monSplash.png" --resize cover

#génération des icônes (pour Android et IOS)
react-native set-icon --path "icon.png"

https://blog.bam.tech/developer-news/set-up-your-react-native-splash-screen-in-15-minutes

Une méthode plus proche du natif pour mettre un splash screen:

https://medium.com/handlebar-labs/how-to-add-a-splash-screen-to-a-react-native-app-ios-and-android-30a3cec835ae

php

Manipulez les dates en PHP

PHP / Par

La façon la plus commune que j’ai vu jusqu’à ce jour de créer une date en PHP est: 

$today = date('Y-m-d')

la fonction date() et la classe DateTime

Traditionnellement on utilise date(), mais il existe aussi une classe DateTime, d’une utilisation plus complexe (car orienté objet et possédant plus de méthode et attributs). Voyons comment créer une date avec cette classe :

Ajouter des jours

$date = new DateTime(); // date d'aujourd'hui
#ajouter une durée à un objet DateTime


# on ajoute  un DateInterval
$date = new DateTime('2020-06-01');
$date->add(new DateInterval('P10D'));// ajoute 10 jours
echo $date->format('Y-m-d') . "\n";//on formate pour pouvoir afficher

on le voit sur l’exemple de l’ajout de durée, l’écriture est un peu plus lourde?La documentation officielle de PHP vous donnera plus d’informations. Le framework Symfony utilise l’objet DateTime.

Enlever des jours

# soustraire une durée DateInterval à un objet DateTime
$date = new DateTime('2020-06-01');
$date->sub(new DateInterval('P10D'));// enlève 10 jours
echo $date->format('Y-m-d') . "\n";

Ajouter un mois

$today = date('Y-m-d');
$time = strtotime($today);
$expire_date = date('Y-m-d',strtotime('+ 1 month');

calculer les jours ouvrés

formater une date

formater selon la locale

strtotime() est votre ami

strtotime() est une fonction qui convertit une date en un temps UNIX, en seconde compté depuis le 1 Janvier 1970, ce jour est appelé EPOCH. Donc elle vous donne le nombre de secondes écoulées depuis EPOCH. Documentation officielle de strtotime()

strtotime est une fonction puissante, qui permet de convertir en temps UNIX une date même si elle exprimée dans différents formats.

Là où strtotime est très utile, c’est justement sa capacité à convertir en UNIX timestamp (ou temps UNIX) différents format de date, permettant ainsi de faire des manipulation de date.

Ajouter une journée à une date

Nous allons voir comment ajouter simplement une journée à une date

$today = date('Y-m-d');
$unjour = 3600 * 24;//24 heures en secondes
$tomorrow = date('Y-m-d',strtotime($today) + $unjour)

Conversion de format de date

$format_us = '2020/06/16';
$timestamp = strtotime($format_us );
$format_fr = date('d/m/Y',$timestamp);
echo $format_fr; // 16/06/2020
#à noter que strtotime() selon la documentation "essait" de lire une date, il peut arriver qu'il ne parvienne pas à le faire.
#il n'y a pas vraiment de conversion automatique, on se sert de strtotime pour normaliser une date, en le convertissant en secondes.

Ajouter un fuseau horaire à une date

Parfois Javascript n’arrive pas à instancier une date si le string de la date n’est pas bien formé. Par exemple :

#format date envoyé par php :
date = '2020-06-12 12:21:22'
var d = new Date(date) // null
#il faut formater la date
date = '2020-06-12T12:21:22'

# pour ce faire lorsque que vous avez une date en PHP du type :
'2020-06-12 12:21:22'd, il faut utiliser strtotime :
$date = date('Y-m-d\TH:i:s',strtotime($abo['2020-06-12 12:21:22']) )
echo $date; //2020-06-12T12:21:22

TODO:

étant donné un mois, trouver le premier jour du mois précédent

le dernier jour du mois précédent

à partir d’une date get le mois seulement

Créer un virtual host avec Apache

Apache / Par

Créer un virtual host avec Apache avec WAMP

Qu’est ce qu’un virtual host?

Les virtual hosts ne sont pas seulement sur votre poste de développement, ils sont utilisé dans les environnements de production, ainsi votre site qui est accessible via un nom de domaine, et qui est hébergé sur un hébergement mutualisé par exemple, tournent dans un virtual host.

Pourquoi est-il intéressant de faire un virtualhost?

Comment configurer un virtual host avec Apache?

Apache est l’un des serveurs web les plus populaires au monde, et la création de virtual hosts est une fonctionnalité puissante qui permet de servir plusieurs sites web à partir d’un seul serveur. Dans cet article, nous allons vous guider à travers le processus de création d’un virtual host sur un système Windows utilisant Apache.

Il y a le fichier httpd.conf, qui est le fichier de configuration d’Apache. Ce fichier contient les inclusions d’autres fichiers .conf pour ne pas alourdir le fichier principal. Et vous verrez souvent qu’il y a un fichier httpd-vhost.conf, un par fichier virtual host.

Les principales directives Apaches

<VirtualHost *:80>
    ServerAdmin webmaster@monsite.local
    DocumentRoot "chemin/vers/votre/site"
    ServerName monsite.local
    ErrorLog "logs/monsite-error.log"
    CustomLog "logs/monsite-access.log" common
</VirtualHost>

DocumentRoot « chemin/vers/votre/site » cette ligne indique où se trouvent les fichiers qui propulsent le site web, et c’est la racine. Du coup vous pouvez le placer n’importe où. Apache se charge de rediriger la requête HTTP au bon endroit.

Ce virtualhost écoute sur le port 80, pour les https, vous devez faire une seconde directive VirtualHost avec le port 443.

ServerAdmin est l’email du webmaster, vous n’êtes pas obligé de l’indiquer.

ServerName est LA directive importante, puisque c’est le nom de domaine, vous pouvez avoir plusieurs noms de domaine qui pointent vers la même racine. Ainci en ajoutant via la directive ServerAlias seconddomaine.com, vous créez un second mapping nom de domaine <-> répertoire.

ErrorLog et CustomLog pointent vers les fichiers de journalisation, qui sont important du point de vue administration, puisque vous pouvez voir toutes les requêtes HTTP et les erreur PHP (si vous codez en PHP). Le fichier ErrorLog peut vous aider en dernier recours à débugger vos scripts. Pour en savoir plus sur les logs Apache.

Vous vous souvenez vous du fichier .htaccess?, il vous permet de surcharger votre fichier httpd.conf même quand vous n’avez pas les droits d’accès sur le fichier httpd.conf (souvent le cas)

Après avoir configuré avec succès votre virtualhost, vous pouvez le partager en local ou en global avec Ngrok sur internet même si votre site n’est que sur votre ordinateur.

A chaque fois que vous faites des modification de fichier .conf, il faut reloader Apache (redémarrer pour être plus sûr, mais normalement reloader suffit.

sudo /etc/init.d/apache2 reload
git versioning

Résoudre les conflits avec git en ligne de commande

Git / Par

Il est possible de merger une branche sans avoir besoin de résoudre les conflits si vous êtes sûr que la version qui va venir est la bonne.

Cas d’un merge depuis une branche

Par exemple vous avez une branche feature/login par exemple, que vous voulez merger dans develop, or vous savez que les fichiers de cette branche feature doit être la plus récente, dans ce cas la commande est la suivante :

git checkout develop
git merge -X theirs feature/login

Cas d’un pull depuis un repository

Maintenant vous êtes en train de faire un pull depuis le repository, dans ce cas les fichiers qui vont venir vont fusionner avec vos fichiers en local, par exemple, vous fait un git pull

git pull -X theirs

Mais que se passe-t-il si vous avez fait un simple git pull et que vous êtes en situation de conflit? Il est toujours possible de résoudre rapidement en favorisant ce qui vient:

git checkout --theirs .
git add .
#dans le cas où vous voulez privilégier votre version
git chekout --ours .
git add .
vim logo

Plugin Vim Pour PHPStorm

Linux / Par

Comment installer IdeaVim

Aller dans paramètres, taper plugin dans la boite de recherche, taper « vim » dans la recherche de la marketplace, choisir ideaVim

configurer l’équivalent de .vimrc : .ideavimrc

Vous pouvez pomper les réglage de votre .vimrc en mettant source ~/.vimrc dans .ideavimrc.

ces deux fichiers doivent se trouver dans le répertoire home (Linux et Mac OS), c’est pour ça que vous voyez les caractère tilde ~.

Vous n’aurez pas toutes les feature de vim, c’est le défaut des plugins qui ne remplaceront jamais le vrai vim.

https://github.com/JetBrains/ideavim

Tunnel SSH vers un ordinateur depuis votre ordinateur

SSL/HTTPS / Par

Le tunneling SSH permet bien des choses, dans cet article je vais vous présenter une méthode pour accéder au shell d’un ordinateur situé n’importe où dans le monde (et à condition que les conditions soient réunies pour le faire) depuis votre ordinateur.

Par exemple on a le scénario suivant : vous êtes en télétravail, un autre collègue est en télétravail, vous êtes tous les deux développeurs (cela va de soi), et pour une raison quelconque, vous avez besoin d’accéder à son ordinateur, mais plus précisément à son shell, parce qu’il n’arrive pas à faire une tâche en ligne de commande.

Vous avez plusieurs solutions, dont une qui est de prendre le controle de son ordinateur via un logiciel comme TeamViewer, mais bon, la connexion n’est pas géniale, et c’est overkill pour un terminal.

L’autre solution consiste à ouvrir un tunnel vers son poste grâce à un serveur SSH, puis vous vous connectez à son ordinateur via ce même serveur SSH, voir le dessin ci-dessous.

Principe d’utilisation d’un serveur dédié pour faire du tunneling SSH

D’abord ouvrir un tunnel vers l’ordinateur de votre collègue, cette manipulation sera faite par lui depuis son shell, le port 8080 du serveur sera redirigé vers le port 22 de son ordinateur :

ssh -R 8080:127.0.0.1:22 son_compte@hostname-ou-ip

Ensuite le tunnel étant ouvert entre le serveur SSH et son ordinateur (un serveur SSH est en fait n’importe quel serveur dédié qui a permis l’ouverture du tunnel), vous allez vous connecter au serveur SSH sur le port 8080 (vous vous connectez sur le serveur et non à l’ordinateur de votre collègue hein ?)

ssh://hostname-ou-ip:8080

Vous aurez une invitation à ouvrir un terminal, ensuite le terminal s’ouvre et vous devez entrer le mot de passe du poste de votre collègue. Et voilà !

Les conditions pour que le serveur dédié puisse rediriger la connexion

vim logo

Les commandes VIM les plus courantes

Linux / Par

Les différents mode en Vim:

Visual mode

Visual line mode : SHIFT + V

Command mode

Pour entrer en command mode, il faut taper les deux points « : »

Replace mode

Pour remplacer plusieurs occurrences d’un mot sous le curseur (opération assez courante) voici les combinaisons de touche, supposons que vous vouliez remplacer toto par tata :

# mettre le mot sur toto
# appuyer sur * pour aller à la prochaine occurence
# faire ciw (change inner word) puis entrez tata puis ESC
# puis autant de fois que nécessaire : appuyer sur n pour aller à la prochaine occurrence puis . (recommencer la dernière action)

Remplacer un seul caractère (sous le curseur)

Appuyer sur ‘r’ et taper la nouvelle lettre

Passer en Replace mode

SHIFT + r , permet de taper en mode remplacement, les caractère tapés remplacent les précédents caractères.

Visual Char mode : pour y entrer appuyer sur v, ça permet de sélectionner du texte

Obtenir de l’aide sur une commande

:help <command>

Edit mode

Comment faire une commande en navigation mode puis revenir de suite en edit mode

#il faut faire CTRL + o en edit mode pour temporairement être en normal mode, pratique pour aller en fin de ligne et continuer à éditer par exemple, <CTRL>+o rentre en normal mode pour une commande.
<CTRL>+o

#copier un mot sous le curseur, le curseur est au début du mot
yw
#copier un mot même si le curseur n'est pas au début du mot
yaw
#pour les nom de variable préfixée par un $  (ex: $this), yaw ne suffira pas dans ce cas utiliser le big word W (SHIFT + w)
yaW

#répéter un caractère 'J' 10 fois
<ESC>10iJ<ESC><ESC>

Changer la casse

Changer en minuscule ou en majuscule

 ~    : Changes the case of current character
 guu  : Change current line from upper to lower.
 gUU  : Change current LINE from lower to upper.
 guw  : Change to end of current WORD from upper to lower.<<utile
 guaw : Change all of current WORD to lower.              <<utile
 gUw  : Change to end of current WORD from lower to upper.<<utile
 gUaw : Change all of current WORD to upper.              <<utile
 g~~  : Invert case to entire line
 g~w  : Invert case to current WORD
 guG : Change to lowercase until the end of document.

Insert mode

Pour annuler une action, revenir sur normal mode en appuyant sur ESC ou CTRL+C, appuyer sur u en

Insérer un caractère plusieurs fois

<ESC> //nnormal mode
10    // nombre de fois
i    // insert mode
a    // le caractère
<ESC>  // quitter Insert mode

Bouger une ligne vers le haut ou vers le bas

Il faut utiliser la commande move .

:m 12  //bouge le ligne courante vers la ligne 12
:m 0   //bouge vers le début du fichier
:m $   // bouge après la dernière ligne du fichier
:5,7m 21   //bouge les ligne 5 à 7 à la ligne 21

Recherche

Rechercher une chaîne de caractères

Pour chercher un mot le plus simple est de rentrer le slash et de tapez la chaine à chercher

/motachercher
#s'il y a plusieurs occurences, appuyer sur n pour passer au suivant et SHIFT + n pour le précédent

Pour naviguer dans les occurrences trouvées utiliser les touches # (chercher en arrière)et * chercher en avant.

Rechercher le mot sous le curseur

#placer le curseur sur le mot et *

Rechercher la définition d’ue fonction

#placer le curseur sur le no de la fonction et
gd

Navigation mode

Naviguer dans Vim

CTRL + y : défile  d'une ligne vers le haut
CTRL + e : défile d'une ligne vers le bas
CTRL + f : défile d'une page vers le bas
CTRL + b : défile d'une page vers le haut
CTRL + d : défile d'une 1/2 page vers le bas
CTRL + u : défile d'une 1/2 page vers le haut

Placement du curseur sur l’écran

# position du curseur haut,milieu et bas (bouge le curseur)
H, M , L
#centrage du curseur dans la vue (ne bouge pas le curseur)
zt, zb ou zz

Placement du curseur au sein d’une ligne

#aller au dernier caractère et être en mode édition
SHIFT + A
#aller au dernier caraxtère
$
#aller au premier caractère et être en mode édition
SHIFT + I
# aller au premier caractère et curseur sur le 1er caractère
^^
#aller au premier caractère et curseur avant le 1er caractère
SHIFT + 0

Navigation par mot

#déplacer de mot en mot
w
#déplacer de mot en mot reverse
b
#déplacer de mot en mot en plus rapide (d'espace en espace en fait)
SHIFT + w
#reverse
SHIFT + b
#aller à la fin d'un mot
e
#aller début d'un mot 
w

Navigation par bloc (paragraphe…)

#les paragraphes sont séparés par une ligne vide ou des accolades
{ ou }
# aller au matching brace, trouver le } correspondant le plus immédiat de {, marche pour ( et [
%
# vous pouvez en profiter pour sélectionner le texte entre la paire de {}
v%
#voir le } correspondant, pour cela activer une option
:set showmatch

#Comment aller au {{[ le plus proche lorsque vous n'êtes pas dessus
[{  ou [[ ou [(  
#pour trouver celui qui est au dessus. Pour celui du dessous
]} ou ]] ou ])

Navigation par marks (signets)

Les signets (marks) permettent de mémoriser une ligne avec un raccourci (register), mais ne mémorise pas la colonne

#enregistrer un mark (les mark sont spécifiques à un fichier)
me // e devient le raccourcis vers le marks
#naviguer au mark
`m  // backticks ou
'm  // apostrophe (ideaVim ne connait pas backtick je crois)
#lister les marks
:marks
#revenir à la position précédente
``

#Les jumps
vous pouvez rejouer les positions du curseur avec CTRL + i et CTRL + o
#lister les positions passées du curseur
:jumps


#  https://www.linux.com/news/vim-tips-moving-around-using-marks-and-jumps/

Copier Coller avec les registers sous Vim

Alors que la plupart des programmes ne disposent que d’une copie dans le clipboard, Vim en possède une dizaine, on se demande pourquoi par défaut ce n’est pas proposé dans les autres IDE.

Le registre par défaut est "", le contenu y est présent lorsque vous faites un d,c,s,x,y

" est utilisé pour accéder au register, 

# utilisation basique copier coller, utilisez une lettre pour stocker le contenu copié
"ey // copier le contenu dans le register e y=yank
"ep // coller le contenu du register e
#voir les contenus des register
:reg
:reg e f h // que les registers cités

https://www.brianstorti.com/vim-registers/

Effacer avec VIM

Effacer et combinaison avec d’autre commandes

Effacer en avant ou en arrière

$ phrase exemple : "ceci est une phrase de pour illustrer le propos"
#curseur sur h de phrase
#effacer jusqu'à la lettre 'd'
dtd
#effacer en arrière jusqu'à 'u'
dTu

#effacer un mot sous le curseur, attention à la position du curseur, l'effacement se fait depuis le curseur jusqu'à la fin du mot
dw

#efface le mot entier quelque soit la position du curseur sur le mot
diw

#effacer le contenu à l'intérieur des parenthèses ou crochet ou accolade, remplacer <char> par (,{,[
di<char>

#effacer jusqu'à un caractère
dt<char>

Les sources:

https://opensource.com/article/19/2/getting-started-vim-visual-mode

Déplacer des lignes

Sans doute une de mes commandes préférée, vous pouvez bouger une ou des lignes, en absolue sans forcément depuis la position de votre curseur

#déplacer la ligne courante à la ligne 23
:m 23
:m 0
:m $

#déplacer un bloc
:m5,7m 21 // bouge block lignes 5à7 à la ligne 21

Déplacer des lignes en mode relatif

Lorsque vous avez activé le display des ligne en relatif, vous n’avez plus les numéros absolu cela peut être une gêne, mais il est possible de déplacer les lignes en relatif depuis la position de votre curseur.

#sélectionner votre ou vos lignes en mode visual block (SHIFT + V), taper :m, puis le nombre de ligne en relatif, donc pour déplacer en amont de une ligne
:'<,'>m-2 // oui -2 et pas -1
#remarquez la syntaxe assez compliquée avec les chevrons, ne vous en faites pas, ils se font automatiquement si vous vous placez en mode Visual Block

Visual block mode ou mode colonne

Le visual block mode est l’équivalent du mode colonne dans une EDI classique. Pour y basculer CTRL + v. un fois ceci fait, il faut sélectionner les lignes avec j. Exemple faire attention, l’exemple ci-dessous permet d’insérer sur toutes les lignes sélectionnées un même texte, mais c’est avec SHIFT + i qu’on va insérer et pas seulement i comme en mode normal.

#exemple de texte
Vim is a text editor
Vim is a text editor
Vim is a text editor
Vim is a text editor
#on veut ajouter great entre "a" et "text"
#curseur sur la première ligne et devant "text" puis CTRL + v
#j 4 fois, puis SHIFT + i, on insère "great", deux fois <ESC> pour sortir du visual block mode.
#pour effacer, sélectionner c'est intuitif.

Bonus : Utiliser vi sur la ligne de commande bash

Il est possible en faisant simplement une commande pour avoir la sensation d’être dans vi, le curseur ne change pas quelquesoit les modes.

set -o vi

Utiliser les macros en Vim

Les macros je n’ai pas besoin de vous expliquer, ce sont des suites d’actions que vous pouvez réappliquer

# démarrer l'enregistrement de la macro et lui assigner un raccourci lettre a
qa
....vous commandes
#arrêt de l'enregistrement de la macro vim
q
#exécuter votre macro
@a
#répéter l'exécution de votre macro

Pour faire de bonnes macros, il faut réfléchir un peu, si par exemple vous devez appliquer une action sur une liste (typique) commencer par placer votre curseur de façon tactique pour le début et la fin.

Normal mode

https://betterprogramming.pub/50-vim-mode-tips-for-ide-users-f7b525a794b3

Il y a de la redite mais, il y a des commandes additionnelles que je trouve intéressantes :

r en normal mode permet d'éditer le caractère sous le curseur tout en restant en normal mode, alors que s vous met en insert mode.
cw en normal mode permet de changer un mot (bascule en insert mode), alors que dw efface le mot (vous restez en normal mode)
% permet de trouver le (,{,[ matchant celui sous le curseur. % n'importe où va jusqu'au prochain ),],}.
H,M,L permet de déplacer le viewport, le curseur reste immobile
zz,zt,zb  bouge le curseur dans le viewport
Text Object : permet d'agir sur le mot où qu'on soit dans le mot (évite d'aller au début du mot poru effacer le mot par exemple)
daw : supprime le mot où que soit le curseur dans le mot
ciw : efface le mot et passe en insert mode

Insérer un newline sous le cursor en normal mode : il faut faire un remap qui correspond à i<Entrée>
nnoremap <Enter> i<Enter><Esc>k$
Changer les caractères entourant un mot (" ou ') (suround)
"Hello"  => 'Hello' : cs"'
Replace mode : R, remplace les caractère en normal mode.<Es> pour en sortir.
u et CTRL + R : undo et redo 
Voir aussi la section sur Splitting Windows
Navigation occasionnel en insert mode:
CTRL + o puis f g  (recherche de la lettre 'g') vous restez en insert mode, on n'y gagne rien.
Efface ligne et reste en insert mode : c$ (en fait depuis n'importe quelle position dans la ligne.
Efface depuis le curseur vers la fin du mot et reste en insert mode : cw
#effacer en arrière
d<flècheGauche>  efface le caractère à gauche
d$  efface depuis le curseur jusqu'à la fin de la ligne
d^  efface en arrière depuis le curseur jusqu'au caractère non espace 
d0  efface depuis le curseur en arrière jusqu'au début de la ligne
dw  efface depuis le curseur jusqu'à la fin du mot
db  efface en arrière depuis le curseur jusqu'au début du mot

#effacer en arrière et basculer en edit mode, remplace d par c
c<flècheGauche>  efface le caractère à gauche
c$  efface depuis le curseur jusqu'à la fin de la ligne
c^  efface en arrière depuis le curseur jusqu'au caractère non espace 
c0  efface depuis le curseur en arrière jusqu'au début de la ligne
cw  efface depuis le curseur jusqu'à la fin du mot
cb  efface en arrière depuis le curseur jusqu'au début du mot

VIM pour le HTML

Travailler en HTML supppose certaines actions que l’on rencontre peux en mode texte normal, par exemple aller à l’intérieur de tag HTML, effacer l’intérieur de tag HTML

effacer le texte entre les tags HTML ex:
<h1>Le sous titre</h1>
se placer entre les tags et faire : dit
cit pour passer en mode insertion après
effacer entre les parenthèses:  di(  ou ci(
effacer entre les guillemet : di"  ou encore mieux ci"
idem avec [,{,',<...

Les différents modes de VIM

  • normal mode
  • Insert mode
  • command mode
  • visual mode
  • select mode

Exécuter une commande shell depuis VIM

#Pour exécuter une commande shell
:!commande shell


#Pour exécuter un scriptshell qu'on est en train d'éditer
:!./%

Le % représente le nom de notre fichier

Cas particulier de Tmux:

Dans µTmux il est possible de exécuter une commande shell et diriger la sortie vers un autre panneau

exécute la commande et redirige la sortie vers le panneau 2
tmux run-shell -t 2 echo "Hello" 

On veut exécuter le programme depuis VIM et la sortie de l'exécution sera sur un autre panneau,
donc c'est une combinaison de redirection et d'exécution d'un script dans VIM

:!tmux run-shell -t 2 ./monscript.sh

Diverses commandes

SHIFT + j : supprime les retours chariot, 
Mode colonne, CTRL + V, puis j ou k, passer en INSERT MODE

Améliorer ses connaissances Shell

SSL/HTTPS / Par

Un écran de veille Matrix pour votre shell

https://codeburst.io/install-and-setup-cmatrix-on-mac-a2076daee420

Un multiplexeur de terminal TMux

Tmux vous permet d’avoir quelque chose comme ci-dessous sur la photo

C’est un outil bien pratique pour avoir plusieur fenêtre à sa portée sans avoir besoin de switcher entre différentes onglets ou fenêtres

Dans le contexte Tmux pour scroller vous devez faire une combinaison de touche

CTRL-b puis [
https://superuser.com/questions/209437/how-do-i-scroll-in-tmux

Customisez votre prompt pour savoir dans quelle branche Git vous êtes

Grâce à un script qui customise votre prompt, vous saurez votre branche active sans avoir à perdre le temps de faire la commande git branch

https://gist.github.com/justintv/168835

Retour en haut