Cloud Coding

• Introduction
• Présentation
• Introduction
• Projets
• Groupes
• Réseau social
• Code editor
• Outils & Technologies
• Technologies
• Infrastructure

Introduction

Bienvenue sur la documentation Cloud Coding ! 🍾🍾🍾

Cloud Coding est une plate-forme collaborative permettant de développer des applications web directement dans votre navigateur.

Vos applications sont développées avec un rendu en temps réel, disponible grâce à un lien généré sur le domain principale de Cloud Coding.

Différents modèles à disposition

Nous mettons plusieurs modèles à disposition lors de la création d'un projet, afin de vous aider à définir votre projet.

Réseau social

Cloud Coding, c'est aussi un réseau social. Vous pouvez partager vos projets, suivre plusieurs développeurs, discuter avec eux, etc.

Présentation

Introduction

Introduction à Cloud Coding

Cloud Coding est une plate-forme collaborative permettant de développer des applications web directement dans votre navigateur.

Vos applications sont développées avec un rendu en temps réel, disponible grâce à un lien généré sur le domain principale de Cloud Coding.

Différents modèles à disposition

Nous mettons plusieurs modèles à disposition lors de la création d'un projet, afin de vous aider à définir votre projet.

Réseau social

Cloud Coding, c'est aussi un réseau social. Vous pouvez partager vos projets, suivre plusieurs développeurs, discuter avec eux, etc.

Projets

Une fois inscrit, vous avez la possibilité de créer un projet.
C'est une étape indispensable pour pouvoir ensuite développer, car c'est à ce moment que vous pouvez définir votre modèle et le nom de votre projet.

Création d'un projet

Rendez-vous sur la page Projets → Nouveau projet et donnez un nom à votre projet.

Visibilité

Vous avez 3 niveaux de visibilité pour votre projet :

• Public : votre projet est visible par tous les utilisateurs de Cloud Coding.
• Privé : votre projet est visible uniquement par vous.
• Invité : votre projet est visible par vous et les utilisateurs de votre équipe.

Création depuis un modèle {#models}

Lors de la création d'un projet sur Cloud Coding, vous avez le choix entre plusieurs modèles de départ.

Modèles disponibles

Il existe actuellement 5 modèles 💯 :

• NestJS 8
• React 18.1
• Angular 14
• Quarkus 2.8
• Flask 2.1

Vous pouvez également choisir d'importer votre propre projet GitHub, à condition que ce dernier soit codé dans une des techno disponibles.

Import d'un projet GitHub

Même si vous importez un projet GitHub personnel, veillez à sélectionner le modèle correspondant au langage de votre projet. Auquel cas le projet pourra ne pas se lancer correctement.

Le projet à importer doit obligatoirement être public.

Liste des projets

Une fois que vous avez créé un ou plusieurs projets, vous pouvez consulter la liste de ces derniers depuis la page Projets.

Projets rejoints

Un utilisateur peut aussi vous inviter dans un groupe et par extension, aux projets de ce dernier. Lorsque c'est le cas, il est possible de voir sur la liste des projets, ceux auquel vous appartenez.

Consultation d'un projet

Lorsque vous consultez un projet, vous pouvez voir les détails de celui-ci :

• Modèle : le modèle utilisé pour développer le projet.
• Nom : le nom du projet.
• Dernière version : la dernière version du projet.
• Visibilité : la visibilité du projet.
• Date de création : la date de création du projet.
• Propriétaire : l'utilisateur qui a créé le projet.
• Groupe : le groupe auquel appartient le projet (si c'est le cas).
• Statut : le statut du projet. (Inactif, Initialisation, En cours d'exécution)

Les seules informations modifiables sont la visibilité et le nom du projet.

Le bouton Go Code !!! permet de lancer le projet et arriver sur la fenêtre d'édition du code.

Commentaires

Un fil de commentaire propre au projet est également présent sur la page de consultation. Vous pouvez ainsi partager vos idées et vos remarques concernant le projet.

Si le projet est public, les commentaires postés seront visibles sur votre profil utilisateur.

Groupes

Les groupes sont très importants dans Cloud Coding. Il faut voir ça un peu comme une Organisation sur Github.

Ces derniers vous permettent d'inviter des membres à vous rejoindre sur un ou plusieurs projets. Vous pouvez ainsi inviter de gens à rejoindre vos projets privés et à leur assigner des rôles.

Création d'un groupe

Rendez-vous sur la page Groupe → Nouveau groupe et donnez un nom à votre groupe.

Consultation des groupes

Une fois que vous avez créé un ou plusieurs groupes, vous pouvez consulter la liste de ces derniers depuis la page ** Groupes**.

Groupes rejoints

Lorsqu'un utilisateur vous ajoute à son groupe, vous pouvez consulter les groupes que vous avez rejoints sur la même page sous la section groupes rejoints

Consultation d'un groupe

Lorsque vous consultez un groupe que vous venez de créer, ce dernier ne contient aucun projet et seulement vous comme membre.

Ajout / Retrait d'un projet

Vous pouvez ajouter facilement un projet dans un groupe grâce au bouton Ajouter un projet, il vous suffit ensuite de taper au moins les 3 premières lettres du nom du projet que vous souhaitez ajouter dans votre groupe.

Après quelques secondes, vous verrez apparaitre votre projet dans le groupe.

Vous pouvez ajouter des projets publics ou privé dans un groupe, seuls les membres ayant les droits de modification pourrons éditer le code, les autres membres pourrons seulement le consulter.

Si vous voulez retirer le projet du groupe, il vous suffit de cliquer sur le bouton - et de confirmer le retrait du projet.

Gestion des membres

L'utilité d'un groupe est de pouvoir ajouter des membres à celui-ci.
Pour faire cela, vous pouvez cliquer sur le bouton Ajouter un membre et vous aurez la possibilité de rechercher un utilisateur à ajouter dans votre groupe. Vous pouvez chercher un utilisateur par son nom, son email ou son identifiant.

Il est ensuite possible de lui autoriser la modification du groupe et des projets qu'il contient.

On peut également le retirer du groupe.

Conversation

Un groupe vous permet d'avoir accès à une conversation privée entre les membres de ce dernier. Cette conversation est accessible depuis la page Groupe de votre groupe. C'est du temps réel, il n'y a pas besoin de rafraichir la page pour voir les messages. Vous pouvez formater vos messages grâce à un éditeur de texte riche en balises.

Réseau social

La philosophie de Cloud Coding est de rendre le développement social, de pouvoir partager et collaborer à plusieurs dessus. Ce n'est donc pas étonnant de retrouver dans notre application un tas de fonctionnalités allant dans ce sens !

Explorer

En vous rendant sur la page Social, vous pouvez explorer les différents réseaux sociaux que nous avons développés.

Utilisateurs

Cette partie vous permet de rechercher les utilisateurs inscrits sur Cloud Coding. Vous avez accès à une barre de recherche pour vous permettre de rechercher un utilisateur par son nom ou par son email.

Lorsque vous consultez un utilisateur, vous pouvez voir ses informations, ses projets publics, les personnes qui le suivent, ses commentaires postés sur des projets publics....

Projets publics

Cette partie vous permet de rechercher des projets publics. Vous avez accès à une barre de recherche pour vous permettre de rechercher un projet par son nom.

La consultation d'un projet est la même que celle d'un projet vous appartenant.

Relations

Que serait un réseau social sans relations entre les utilisateurs ? C'est une question réthorique, bien sûr !

C'est pourquoi nous avons poussé cet aspect sur notre application afin de pouvoir suivre des utilisateurs, ou encore avoir des amitiés.

:::info Les amitiés dans la vraie vie, c'est mieux quand même. :::

Amis

Vous pouvez demander d'autres utilisateurs en amis. L'autre utilisateur doit accepter votre demande. Vous pouvez sur la page Social voir les demandes d'amis que vous avez reçus ainsi que celle en attente.

Conversation

Lorsque vous êtes amis avec un autre utilisateur, vous pouvez discuter avec lui. Il suffit de se rendre sur la page Social → Amis et de cliquer sur le nom de l'utilisateur avec qui vous souhaitez discuter.

Les messages envoyés peuvent être modifiés ou supprimés.

Followers / Followings

Si vous ne souhaitez pas ajouter les utilisateurs en amis, mais suivre les projets publics de ces utilisateurs, vous pouvez suivre les utilisateurs que vous souhaitez et inversement.

Code editor

Lorsque vous cliquez sur le bouton Go Code !!!, présent à différents endroits où les projets sont affichés, vous atteignez la page d'édition du code.

Si le projet n'était pas lancé, il faut attendre un peu pour qu'il démarre et soit consultable.

Arbre du code

Comme nous codons des projets entiers, il est important d'avoir une vue de l'arborescence de nos fichiers de code. Nous avons donc développé pour cela un outil de navigation dans l'arbre de notre projet.

Rendu temps réel

Une fois démarré, vous pouvez voir le rendu temps réel de votre application sur le côté droit de l'éditeur. Ce n'est ni plus ni moins qu'un iframe pointant sur le lien assigné de votre projet. Vous pouvez donc parfaitement copier le lien de votre application et le partager à qui vous voulez, du moment que le projet est lancé.

Consultation du lien

Le lien apparaissant au-dessus du rendu de votre application est public et peut être consulté par tout le monde. Il suffit de le copier / coller dans un navigateur web pour voir le rendu de votre application.

Développeurs connectés

Il est possible d'être plusieurs développeurs connectés en même temps sur un projet. Lorsque c'est le cas, il est important de pouvoir voir qui est connecté en même temps que nous.
Il est possible d'avoir cette information depuis le menu de gauche de l'éditeur.
Un lien est disponible pour ouvrir un onglet sur la consultation du groupe afin d'avoir accès à la conversation.

Appel visio

Parce que ce n'est pas facile d'avoir une conversation écrite en même temps que nous codons, et parce qu'un des objectifs de notre application est l'aspect social, nous avons développé une fonctionnalité qui permet aux développeurs éditant un projet en même temps de pouvoir passer un appel vidéo directement depuis l'éditeur de code 💯💯💯.

Versioning

Un développeur change souvent d'avis, il peut donc avoir des versions différentes de son code. Nous lui permettons ainsi de faire des snapshots de son code, afin de pouvoir revenir à une version précédente.

Outils & Technologies

Technologies

Pour mener à bien ce magnifique projet, nous avons dû mettre la main à la pate et utiliser plusieurs technologies.

Angular

Afin de développer un frontend moderne et responsive, nous avons utilisé Angular.

Le choix était tout indiqué, car ce Framework est très puissant et possède tout un tas de librairies annexes permettant d'enrichir son fonctionnement.

Librairies

Plus d'une dizaine de librairies ont été ajouté à Angular, afin de rendre notre application plus performante et unique.

Angular Material

Angular Material est une librairie qui permet de rendre les interfaces de l'application plus agréables et plus riches. Elle donne accès à une multitude de composants et de fonctions.

NGRX

NGRX est un groupe de librairies inspirées par le pattern Redux, qui est lui-même inspiré du pattern Flux. Le pattern ngrx est un pattern de gestion d'état. Il stocke l'état de l'application (State) dans un Store.

Dans notre application, nous avons utilisé un Store pour stocker l'état de l'application et des différentes informations présentes dessus.

Code Mirror

CodeMirror est un composant d'éditeur de code pour le Web. Il peut être utilisé dans les sites Web pour implémenter un champ de saisie de texte avec prise en charge de nombreuses fonctionnalités d'édition et dispose d'une interface de programmation riche pour permettre une extension supplémentaire.

Font Awesome

Font Awesome est une police d'écriture et un outil d'icônes qui se base sur CSS, Less et Sass.

Bootstrap

Bootstrap est une collection d'outils utiles à la création du design de sites et d' applications web. C'est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que des extensions JavaScript en option.

Lottie

Le format Lottie est un format ouvert d'animation vectorielle basé sur JSON créé à l'origine par la branche de design de Airbnb avec son plugin d'export BodyMovin, pour les animations produites sous After Effects.

Socket.io Client

Socket.IO est une bibliothèque qui permet une communication à faible latence, bidirectionnelle et basée sur les événements entre un client et un serveur.

Il repose sur le protocole WebSocket et offre des garanties supplémentaires telles qu'un mode dégradé en HTTP long-polling ou la reconnexion automatique.

NestJS

NestJS est un framework Node.js permettant de créer des applications back-end robustes et scalable.

Nous avons choisi ce framework, car il est très performant et permet de créer des applications back-end avec typescript.

Librairies

Plusieurs librairies ont été ajoutées à NestJS, afin de rendre notre application plus performante et unique.

TypeORM

TypeORM est un ORM (Object Relational Mapping) qui permet de faire le lien entre les objets d'une application et les tables d'une base de données relationnelle.

Passport

Passport est un middleware d'authentification pour Node.js. Il est extrêmement flexible et peut être facilement adapté à une application ou un service Web existant.

Swagger UI

Swagger UI est une interface utilisateur pour les API RESTful. Il permet de visualiser et d'interagir avec les ressources d'une API sans avoir à coder une interface utilisateur.

Nous nous sommes beaucoup servis de cette librairie pour tester nos API.

Socket.IO

Socket.IO est une bibliothèque qui permet une communication à faible latence, bidirectionnelle et basée sur les événements entre un client et un serveur.

Nous nous en servons pour tout ce qui est communication en temps réel (édition de code, envoie de message, appel vision, ...)

MailJet

MailJet est un service d'envoi d'email. Nous nous en servons pour envoyer des emails à nos utilisateurs.

Unique names generator

Unique names generator est une librairie qui permet de générer des noms uniques. Cela nous permet de créer des noms de domaines aléatoires et amusants pour les différents projets.

RabbitMQ

RabbitMQ est un message broker open source. Il permet de faire communiquer des applications entre elles.

Nous nous en servons pour faire communiquer notre application NestJS et nos lanceurs d'exécution de code.

PostgreSQL

PostgreSQL est un système de gestion de base de données relationnelle objet (SGBDRO) libre et multiplateforme.

Nous avons choisi cette base de données, car elle est très performante et très fiable.

Flask

Flask est un framework web Python léger et flexible. Il est conçu pour être facile à apprendre et à utiliser. Il est également conçu pour être simple à étendre et à intégrer avec d'autres bibliothèques et applications.

Nous avons choisi ce framework pour créer nos lanceurs d'exécution de code, afin que ces derniers aient tous la même interface.

Kotlin

Kotlin est un langage de programmation multiplateforme, orienté objet et fonctionnel, développé par JetBrains.

Il est utilisé pour développer notre application mobile Android.

Docusaurus

Docusaurus est un générateur de site web statique open source pour la documentation technique.

Nous avons choisi ce générateur de site web, car il est très performant et permet de créer des sites web statiques, afin d'héberger notre documentation.

Infrastructure

Cluster Kubernetes

Schéma de l'infrastructure