Un Terrain de Jeu Full Stack (2/2) : Mise en Place

  • posté le
  • par ESENS

Adrian, Automaticien chez ESENS, nous présente son environnement d'entraînement pour l'automatisation de test dans le cadre de sa mission chez l'un de nos clients, leader mondial du secteur de l'hospitalité.

Dans la première partie de cet article, je vous avais partagé les composants de mon 'terrain de jeu' full stack. Cette semaine, on passe à la mise en place de notre environnement !

Comment mettre en place ce type d’environnement rapidement et gratuitement ?


La base de données

Créer et utiliser une base de donnée est devenu un jeu d’enfant avec le principe DaaS (Database as a Service).

C’est ce que propose mLab, avec en prime un forfait Sandbox gratuit -mais limité.


Il suffit donc de créer un compte, puis de créer un nouveau déploiement en choisissant un forfait Sandbox. On a même le choix entre un hébergement par Amazon, Google ou Microsoft aux USA ou en Europe :

Une fois le déploiement créé, on a accès à une base de données depuis un shell MongoDB ou une application comme Node.js :


On peut également gérer beaucoup de choses depuis l’interface de mLab, comme la création de collections, d’utilisateurs, ou encore la mise à jour des données.

L’API


L’API est développée en Node.js, depuis un exemple trouvé sur la toile.

Il faut donc avoir Node sur sa machine, ce qui n’est pas très compliqué !

Ensuite, il suffit de faire la recherche 'API REST JSON Node.js' sur le moteur de Google pour trouver des tutos comme celui ci, par exemple, qui promet une API REST JSON fonctionnelle en 10 minutes avec un serveur Node.

Il faudra l’adapter un peu afin d'obtenir quelque chose de vraiment fonctionnel, mais c'est faisable en très peu de temps.

app.get("/clacks", function(req, res) {
 debug("server receives a request", "GET /clacks");
 db.collection(CLACKS_COLLECTION).find({}).toArray(
   function(err, docs) {
     if (err) {
       handleError(res, err.message, "Failed to get clacks.");
     } else {
       debug("server interacts with database", "Found " + docs.length + " documents");
       res.status(200).json(docs);
     }
   });
})

Le site web

Là encore, on peut utiliser la puissance de Node.js et Google, notre ami fidèle, pour trouver rapidement des outils comme Express.

Un rapide npm install, une commande en plus et hop! On a la base.

Quelques coups d’œils au framework Express plus tard, il nous suffit de savoir appeler notre API depuis notre serveur Web pour avoir un environnement cohérent.

Exemple:

Gestion de code source


GitLab est en quelque sorte le successeur de GitHub, avec l’intégration continue en plus.

C’est un système de gestion de code source/contrôle de version qui permet de collaborer facilement sur des projets de développement. Bref, on ne le présente plus !

Il suffit de créer un compte et un répertoire de travail pour le synchroniser ensuite avec des répertoires locaux.


Intégration continue


Pour l’intégration continue, GitLab utilise le même principe que Docker, c'est à dire la gestion de containers et des environnements virtuels (comme virtualbox ou vmware), mais sans interface graphique.

Pour configurer l’intégration continue sur GitLab, il suffit d’ajouter un fichier .gitlab-ci.yml à son projet. On peut alors configurer ses pipelines et jobs pour, par exemple :

  1. Builder le projet dans un environnement de recette
  2. Tester l’application
  3. Envoyer en production, si tout s’est bien passé ou si les résultats des tests sont acceptables

Hébergement Web (PaaS)


Après avoir développé et testé notre API et notre site web, il faut les déployer.

Plus besoin de serveur, de rack, ou de nom de domaine avec les PaaS (Platform as a Service).

Parmis les PaaS compatibles Node.js, Heroku propose d’héberger gratuitement jusqu’à 4 projets. Ici, le compte est bon avec :

  • 1 version de l’API pour la recette
  • 1 version de l’API pour la production
  • 1 version du site pour la recette
  • 1 version du site pour la production

https://devcenter.heroku.com/articles/getting-started-with-nodejs

Pour qu’un projet Node.js soit conforme avec la plateforme Heroku, il faudra respecter quelques best practices : port d’écoute du serveur, fichier app.json ...

Heroku est lié à Git. Une fois le compte configuré et l’application créée, on 'pousse' le code sur Heroku comme sur GitLab avec 'git push' :

clickclack-web adrian$ git push rec master
Counting objects: 12, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (11/11), done.
Writing objects: 100% (12/12), 2.34 KiB | 797.00 KiB/s, done.
Total 12 (delta 4), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected
remote:        
remote: -----> Creating runtime environment
remote:        
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:        NODE_VERBOSE=false
remote:        
remote: -----> Installing binaries
remote:        engines.node (package.json):  unspecified
remote:        engines.npm (package.json):   unspecified (use default)
remote:        
remote:        Resolving node version 10.x...
remote:        Downloading and installing node 10.13.0...
remote:        Using default npm version: 6.4.1
remote:        
remote: -----> Restoring cache
remote:        - node_modules
remote:        
remote: -----> Building dependencies
remote:        Installing node modules (package.json + package-lock)
remote:        audited 256 packages in 1.758s
remote:        found 2 low severity vulnerabilities
remote:          run `npm audit fix` to fix them, or `npm audit` for details
remote:        
remote: -----> Caching build
remote:        - node_modules
remote:        
remote: -----> Pruning devDependencies
remote:        audited 256 packages in 1.611s
remote:        found 2 low severity vulnerabilities
remote:          run `npm audit fix` to fix them, or `npm audit` for details
remote:        
remote: -----> Build succeeded!
remote: -----> Discovering process types
remote:        Procfile declares types     -> (none)
remote:        Default types for buildpack -> web
remote:
remote: -----> Compressing...
remote:        Done: 20.7M
remote: -----> Launching...
remote:        Released v23
remote:        https://rec-clickclack-web.her... deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/rec-cli...
  21b8ae1..e3dd91a  master -> master

On obtient alors une application qui tourne avec une URL comme celle ci :


Et ce n’est pas fini !


Une application Android


On utilise Android Studio. On crée nos vues en xml :

<?xml version="1.0" encoding="utf-8"?>
  android:id="@+id/clack_item"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical">
  <View
      android:id="@+id/divider2"
      android:layout_width="match_parent"
      android:layout_height="1dp"
      android:background="?android:attr/listDivider" />
  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="vertical">
      <TextView
          android:id="@+id/clack_id_label"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:text="@string/clack_id_lbl"
          android:textAlignment="center"
          android:textAllCaps="true"
          android:textColor="@color/colorPrimaryDark"
          android:textSize="18sp"
          android:textStyle="bold" />

On crée leur comportement en Java (ou Kotlin maintenant) :

public class ClackUpdateActivity extends AppCompatActivity {
  private static final String TAG = "Clack Update Activity";
  private Clack clack;
  private Bundle b;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_clack_update);
      b = getIntent().getExtras();
      assert b != null;
      clack = new Clack();
      clack.setId(b.getString("clackId"));
      // get clack
      getData();
      Log.i(TAG, "Create Activity");
  }
...


... On fait des appels à l’API avec Volley:

// get url
String url = API.getUri() + "/clacks/" + b.getString("clackId");
Log.d(TAG, "API url: " + url);
s// prepare the Request
JsonObjectRequest getRequest = new JsonObjectRequest(Request.Method.GET, url, null,
      new Response.Listener<JSONObject>()
      {
          @Override
          public void onResponse(JSONObject response) {
              Log.d(TAG, "Response received");
              // build clack object
              clack.setAttributes(response.toString());



Tuto Android Volley : https://www.itsalif.info/content/android-volley-tutorial-http-get-post-put

Conclusion

En plus de m’aider au quotidien, cette “méthode” permet à n’importe quel développeur/testeur de monter un projet complet rapidement et gratuitement.

Pour ses besoins persos ou pro, on peut alors monter en compétences facilement et jouer dans un vrai environnement technique.

Article rédigé par Adrian | Retrouvez tous nos articles sur le Blog ESENS


Vous êtes à la recherche d'un nouveau challenge ? Rejoignez l'équipe ESENS en postulant à nos offres d'emploi !


Actualité récente

VOIR TOUTE NOTRE ACTUALITE