react

Installation d’une application React avec CREATE-REACT-APP

installation d'une application react
Logo de React créer par Facebook

Nous allons voir ensemble comment faire l’installation d’une application react mais avant tous un peu d’histoire:

Qu’est ce que React ?

De ce que nous en disent nos amis de SupInfo . https://www.supinfo.com/articles/single/4159-apprendre-reactjs:

React est une bibliothèque d’interfaces utilisateurs développée sur Facebook pour faciliter la création de composants interactifs, stateful et réutilisables de l’interface utilisateur. Elle est utilisée sur Facebook dans le domaine de la production. Par ailleurs, Instagram.com est entièrement écrit en React.

L’un de ses principaux arguments de vente est que non seulement elle fonctionne sur l’aspect client, mais elle peut également être rendue côté serveur, et cela leur permet de travailler ensemble de manière inter-opérationnelle.

Elle utilise également un concept appelé le DOM virtuel qui rend des sous-arbres de nœuds basés sur des changements d’état, et ce de manière sélective. Elle effectue le moins de manipulations de DOM possibles pour maintenir les composants à jour.

Comment fonctionne le domaine virtuel?

Tous les biens pertinents une personne pourrait éventuellement avoir, et reflète les personnes état actuel. Ce que React fait avec le DOM est essentiel.

Maintenant réfléchissons. Si nous avons pris un objet et fait quelques changements (du type: ajout d’une moustache ou de quelques biceps en plus sur une image de Steve Buscemi), nous pouvons observer dans React-land que deux choses se produisent. Tout d’abord, React exécute un algorithme «différent», qui identifie ce qui a changé. La deuxième étape est la réconciliation, où elle met à jour le DOM avec les résultats de diff.

La façon de réagir fonctionne, plutôt que de prendre la personne réelle et de la reconstruire à partir du sol, il n’y aurait que le visage et les bras de changés. Cela signifie que si nous avions du texte dans une entrée et qu’un rendu a eu lieu, tant que le noeud principal de l’entrée n’avait pas été programmé pour la réconciliation, le texte resterait inchangé.

Parce que React utilise un faux DOM et non un vrai, elle ouvre également une nouvelle possibilité amusante. Nous pouvons rendre ce faux DOM sur le serveur, et boom: il y a des vues.

Maintenant l’installation d’une application react app est une solution pour démarrer une application web de manière simple sans installer tout les dépôts dont nous aurions besoin. Ça a ses avantage et ses inconvénients.

Avantages :

  • C’est cool quand on commence.
  • Plus simple que ça tu meurs.

Inconvénients :

  • Il y a beaucoup de choses dont on ne se sert pas.
  • Peut être lourd pour une petite application qui utilise peu de modules.

Pour installer React app Il faut au préalable Nodejs et la commande NPM

NodeJS v10

Dans la documentation de Node on nous dit:

# sudo apt update
# curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
# sudo apt install -y nodejs

# node -v //permet de voir la version de Node.js

Puis:

# node //pour tester avec un console.log des familles

On installe la commande NPM:

# sudo npm install --global npm

# npm -v

On installe CRA ( Create React App ):

# sudo npm install --global create-react-app

On créer un dossier pour le projet:

# mkdir //lechemin/nomdudossier
# cd //nomdudossier
# sudo /create-react-app nomduprojet

Si tous ce passe bien le retour terminal renvoie:

# We suggest that you begin by typing:

# cd memory
# yarn start

# Happy hacking!

Tout est ok du coup on ce déplace dans notre projet comme nous l’indique le retour terminal:

# cd nomduprojet
# npm start

L’application web n’a plus qu’à être lancée dans un navigateur !

back up disk

Comment faire un backup WordPress (Partie 1)

Pourquoi faire un backup wordpress? Et pourquoi pas héhé… La sécurité passe avant tout par là.

On va essayer de comprendre l’environnement dans lequel on travaille.
Tout simplement si votre site plante, que le serveur prend feu chez OVH ^^ (bon normalement il devrait être capable de résoudre le problème… j’espère), que vous subissez une attaque par de méchants hackers ou
que des bots russes testent de nouveaux virus… Bref j’en passe et des meilleures… L’idée c’est d’avoir toujours une sauvegarde.

Si vous êtes venus juste pour savoir comment faire les backups wordpress c’est ici .


Backup un jour Backup toujours

À titre d’expérience, j‘ai travaillé il y a quelques années dans l’audiovisuel sur Paris, j’ai vraiment appris
l’utilité des backups.
Grosso merdo il y a deux types d’utilisateurs:

  • Le lambda
  • Le pro qui se fait dessus, car il joue de l’argent

Parlons matos

Ici parlons de l’utilisateur lambda qui ne veut pas perdre ses photos de vacances ou ses films préférés (téléchargés en toute l’égalité #ouioui). Cette personne va donc acheter un disque dur externe et sauvegarder ses photos.

Le support des backups

Si monsieur lambda garde son disque dur dans son placard, tout va bien. Le problème c’est que souvent les
disques durs externes sont des disques 2,5′′ HDD ( Hard Disk Drive in English). On les retrouve souvent
dans les pc portables de l’époque. Et dans les pc de bureau ce sont les mêmes mais en 3,5″.

disque hdd 2,5"
disque HDD 2,5″

Ils sont mécaniques et lisent et écrivent des informations directement sur le disque. Il y a une tête de lecture qui permet de faire le taff… Et la séparation entre le disque et la tête de lecture se compte en micro…
Tout cela pour dire que c’est FRAGILE donc si ça tombe c’est direction salle blanche 500euro le MO et vous êtes content 🙂
Il existe aussi des disques SSD .

disque ssd 2,5"
disque SSD 2,5″

Là pour le coup il résiste mieux , tout fonctionne de manière numérique.
Ils ont une vitesse de lecture/écriture plus intéressante donc plus rapide.
Il est donc préférable pour monsieur lambda d’acheter un SDD plutôt qu’un HDD s’il voyage avec son disque .

Dans le domaine professionnel

Dans le domaine professionnel c’est une autre histoire, comme je vous le disais plus haut, en travaillant dans
l’audiovisuel je me suis rendu compte que les backups étaient un vrai process .
Pour la faire courte, prenons l’exemple d’une émission de télé régionale budgétée à 50 000 Euro l’émission .
Imaginez que vous perdiez les rushes (les images tournées par les cameramans et le son enregistré par
l’ingénieur son) la chaîne de télé qui vous paye va vous demander de rendre des comptes (vous allez devoir
les rembourser). Du coup il existe un process (une manière de travailler) .

Chaque jour, l’assistant monteur va :

  • récupérer les rushes .
  • faire un backup sur un disque dur externe (ranger dans le placard) .
  • faire un backup sur un RAID .
  • faire un backup sur la station de montage (le PC ou le monteur travail) .

De cette manière vous n’aurez pas trop de problèmes. Si vous perdez des données vous avez toujours une
solution de repli.

Pourquoi je vous parle de tout ça avant de vous parler de la manière de faire un backup WordPress?

Pour la simple et bonne raison qu’on entend souvent ;

« Oh non ! J’ai mon site qui est tombé et j’ai plus mes
backups, j’ai abîmé mon disque dur western digital…
»
ou
« Oh non ! J’ai modifié ma BdD (base de données) et j’ai fait un backup de ma dernière version et du coup j’ai plus la version originale… »

Bon bah là appelez un hacker les gars, sinon c’est redémarrage à zéro…
Il est important de faire des backups en pensant au pire.

Les VPS (vos serveurs) sont pas non plus infaillibles quant à protéger tous vos contenus et de vous les restituer.

Faut il être parano?

Ça dépend du projet. Si c’est votre site portfolio, c’est votre projet vous en faites ce que vous en voulez. Faire un backup c’est bien , deux c’est pas dégueu.
Si vous travaillez pour un client, deux c’est le minimum et si vous êtes en équipe on va vous demander d’en faire un max. ^^
Vous avez plein de manières de travailler, l’idée est de faire du Versionning (moi j’appelle ça comme ça ^^).

Créez vous un dossier au nom de votre projet.

Création de dossier pour backup
Création de dossier pour backup

À l’intérieur vous allez créer vos versions suivies de la date.

Exemple de dossier dit versionning
Exemple de dossier dit versionning

À l’intérieur vous déposez votre fichier dans l’intégralité. Si vous êtes vraiment carré vous pouvez même vous faire un fichier texte appelé « White Paper » pour noter toutes les modifications effectuées ou les plus
importantes.

C’est le même principe que l’outil GIT, à la différence qu’il est conçu explicitement pour la programmation et le travail en équipe. Mais il permet de faire des commits, il travaille avec une gestion en branche. Allez lire le
cours OpenclassRoom qui est très intéressant.


Voilà. On a défini une base pour pouvoir attaquer la manière de faire un backup sur Worpdress.

On continu dans l’élan ? :

Comment faire un backup WordPress (Partie 2)

serveur

Creer un Serveur Web Raspberry Pi avec Raspbian et…

serveur
Serveur web

On vous montre comment créer son premier serveur web et déployer vos sites avec un Raspberry Pi et Apache.

Pouquoi ce tuto ?

On a tous connu la galère du début « j’ai tout suivi et ça ne MARCHE PAS… WTF » pas de violence tu peux le faire. Je pense que nous sommes tous capables mais tout rassembler dans un tuto peut être utile. Vous êtes donc les bienvenus pour agrémenter celui-ci. Dans la première partie on va parler du RPI ( Raspbery Pi ) et de l’OS Raspbian, dans la deuxième on rentrera en détaille sur la mise ne place du serveur Apache et ça configuration.

Inspirer de Raspbian France Ubuntu-FR Mon pote Thomas : Réseaux Linux


C’est quoi un Raspberry Pi ?

Je passe les détails, je vous invite à aller voir Raspbian-France qui vous expliquera mieux que moi le côté hardware et les possibilités de cette petite bombe.

On attaque dans le dur !!!

Installer Raspbian de A a Z (et le protocole SSH)

Côté Raspberry Pi (RPI) :

  • Brancher le RPI à une prise
  • Brancher le au port RG45 de votre boxe internet.
  • Formater votre carte micro SD (au format EXFAT ou EXT4)

Pour formater une carte :

Insérer la carte dans la fente prévue à cet effet (logique, mais on le dis quand même)

Windows:

Aller dans le gestionnaire de fichier, repérer la carte micro SD, clique droit et formaté.

formatage sur windows
formatage carte sur windows

Cliquer sur « file system« , puis « Quick format » et enfin « Start« 

outil de formatage windows
logicel de formatage simple

Linux:

Rendez-vous dans l’application « Disques » puis dans le menu en haut à droite cliquer sur « Formater disque…« .

application de formatage Linux Ubuntu
formater depuis linux en mode graphique

Entrez un nom (au hasard… Raspbian) puis sur « Disque intern….(Ext4) » puis finissez sur « Créer » en haut à droite.

Logiciel formatage Linux Ubuntu
logiciel formatage linux

En ligne de commande:

Mise en ROOT (#)

$ sudo -i

Entrez votre mdp

Installation de Shred ( Shred permet d’empiler de 1 et des 0 dans la carte ce qui rend un formatage plus sûr). Ps: ici je vous montre cet exemple , dans l’idée on va re-formater la carte par la suite avec UnetBootin donc on va dire que cette méthode c’est pour les parano de la saleté ^^

# apt install coreutils

Puis repérer le disque

Disque /dev/sda : 111,8 GiB, 120034123776 octets, 234441648 secteurs
Unités : secteur de 1 × 512 = 512 octets
Taille de secteur (logique / physique) : 512 octets / 512 octets
taille d'E/S (minimale / optimale) : 512 octets / 512 octets
Type d'étiquette de disque : gpt
Identifiant de disque : 40B43D3A-B7C4-4A37-BFEA-B65AACFD14B1

Périphérique Début       Fin  Secteurs Taille Type
/dev/sda1     2048 185614335 185612288  88,5G Système de fichiers Linux


Disque /dev/sdb : 22,4 GiB, 24015495168 octets, 46905264 secteurs
Unités : secteur de 1 × 512 = 512 octets
Taille de secteur (logique / physique) : 512 octets / 512 octets
taille d'E/S (minimale / optimale) : 512 octets / 512 octets
Type d'étiquette de disque : gpt
Identifiant de disque : 3B200EB9-96A5-43ED-81E6-1194EAE47D05

Périphérique   Début      Fin Secteurs Taille Type
/dev/sdb1       2048  1050623  1048576   512M Système EFI
/dev/sdb2    1050624  2549759  1499136   732M Système de fichiers Linux
/dev/sdb3    2549760 46903295 44353536  21,2G Système de fichiers Linux

Repérer votre carte en fonction de ça capacité. Puis utiliser Shred pour faire le taff

# shred -z -v /dev/sdb
shred: /dev/sda: pass 1/4 (random)...
shred: /dev/sda: pass 1/4 (random)...235MiB/38GiB 0%
shred: /dev/sda: pass 1/4 (random)...1.8GiB/38GiB 4%
shred: /dev/sda: pass 1/4 (random)...2.5GiB/38GiB 6%
shred: /dev/sda: pass 1/4 (random)...3.5GiB/38GiB 9%
...

Les options utilisées sont les suivantes :

  • -z indique que le fichier sera réécrit avec des zéros pour dissimuler l’opération.
  • -v affiche l’état d’avancement de la commande.
  • on peut également ajouter l’option -n 50 pour indiquer, par exemple, que l’on souhaite faire 50 passes

Petit liens pour plus d’info sur le formatage en ligne de commande.

Voilà qui est fait.

Maintenant nous allons installer l’OS (système d’exploitation) sur votre bécane (RPI). Ici nous utiliserons Raspbian qui est ni plus ni a moins une suite GNU/LINUX Debian. Deux manières de l’installer s’offrent à vous:

  • La version Lite (Pour les barbus qui kiffe le terminal)
  • La version Graphique (Oé t’inquiéte il y a les menus et des icônes trop cool)

Raspbian et ses différentes images :

V. lite:

On accède au Raspbian à distance depuis son PC, donc on oubli la souris les amis. Tu accèdes depuis un terminal Linux ou Mac, (pour Windows Putty devrait faire l’affaire) . 

  • Avantage OS moins lourd,
  • Ce familiariser avec le terminal, 
  • Aller a l’essentiel.

V. graphique:

Tu peux te brancher (tu dois te brancher) en HDMI sur un écran. Donc tu utilise une souris et un beau fond écran… Tu peux aussi utilisé un terminal via l’interface graphique si tu le souhaite.

  • Moins effrayant,
  • Permet d’avoir un petit PC pour faire du traitement de texte ou des projets comme Magic Mirror.

Aller téléchargeons Raspbian.

site OS Raspbian
Image de Raspbian

Installation de Raspbian sur le Raspbery Pi . L’os va nous permettre de créer le serveur du Raspberry Pi en installant les paquet « Apache » .

On va créer une carte Bootable.

Qu’est-ce que c’est que ça veut dire « Bootable »? Pour faire bref , ça permet de pouvoir démarrer un système d’exploitation (ou autres) au moment du démarrage du PC. Le BIOS va faire le lien entre ton système et le hardware pour le démarrer.

Dans les fait:

Tu récupères donc ton .img qui correspond à ton image Raspbian Strech (Lite).

Dans un OS tu as énormément de dossier contenant des fichiers, c’est ce qui fait fonctionner ton ordinateur. Nous allons seulement utiliser certains fichiers qui vont forcer le PC (ici le RPI) à lancer les programmes désirés.

Explication :

En réalité tu ne vois qu’un fichier .IMG, c’est normal, les dossiers/fichiers son empiler pour ne générer qu’une seule image. Cela s’appelle de la compilation. Pour faire court, seulement  pour comprendre l’idée, c’est plein de petit programme qui vont te permettre de faire fonctionner ton ordinateur.

Architecture Linux Ubuntu
Dossier qui compose l’OS GNU Linux Ubuntu

Pour le serveur Raspberry Pi le principe est le même , les paquets Apache naviguerons avec les dossiers sources de l’OS (var , etc…) .

Revenons à nos claviers.

On va utiliser un logiciel pour créer une carte Bootable . Tu peux utiliser divers logiciels :

W32 Disc imageait / UNETbootin

Ils marchent tous plus ou moins de la même manière. Certains n’acceptent pas des formats en particulier. Donc juste se référer à la Doc. Prenons ici UNETbootin, vous aller voir c’est super simple :

Unetbootin
Logiciel UNetbootin ouvert
  1. Valide DiskImage
  2. Récupère l’image ( le .img ou .iso) de ton os Raspbian
  3. Récupère l’endroit ou ce situe ta carte SD (si tu ne sait pas, va dans ton bureau clique droit sur ta carte SD et check les propriétés)
  4. Puis valide

Voilà maintenant tu attend…

Et c’est fini. Maintenant retire ta carte SD et insert là dans le RPI.

Attend deux minutes en faite…

Pour les personnes utilisant la version V.lite. On va devoir utiliser un logiciel qui est aussi protocole et il se nomme SSH (pour Secure SHell).

Qu’est ce que c’est vite fait:

C’est un logiciel totalement chiffré donc toutes les commande executé avec sont secrète…Wahouuuu. SSH a été créé en 1995 avec pour principal but de permettre la prise de contrôle à distance d’une machine à travers une interface en lignes de commande. On le retrouve surtout sur OpenSSH qui représente pas mal de distrib Linux.

En gros on ce sert de lui pour:

  • Accéder à distance à la console en ligne commande (shell), ce qui permet, entre autres, d’effectuer la totalité des opérations courantes et/ou d’administration sur la machine distante.
  • Déporter l’affichage graphique de la machine distante.
  • Transferts de fichiers en ligne de commande.
  • Montage ponctuel de répertoire distants, soit en ligne de commande, soit via Nautilus, sous Gnome par exemple.
  • Montage automatique de répertoires distants.

Voilà tu dormira plus intelligent se soir^^ ou pas…

Donc on va activer SSH pour pouvoir commander le RPI a distance.

Depuis quelques temps (je sais plus trop quand) SSH est désactiver sur Raspian pour des raison de sécurité.

Pour bien faire, créer un fichier nommé « SSH » à la racine de la carte Micro SD.

Voilà c’est fait ^^ pas trop compliquer l’histoire

Maintenant tu peux mettre ta carte dans ton RPI.

raspberi pi avec carte micro sd
On insert la carte. Si ça rentre pas c’est pas le bon trou 🙂

Voilà pour la première partie. On ce retrouve pour la suite

Connectez-vous aux réseaux
Unitout

Pourquoi ne pas apprendre ensemble et réunir un maximum d'info? Ne vous découragez pas vous n'êtes pas seul ;) Tous dans la même galère

Contact

Chambéry

claudep.dev@gmail.com