Cloud Coding

Plate-forme permettant de développer depuis son navigateur différents frameworks en temps réel.

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.

1_introduction-1658073966064.png

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

Présentation de l'application et ses fonctionnalités

Présentation

Introduction

Introduction à Cloud Coding

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

1_introduction-1658073966064.png

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

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 :

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 💯 :

0f46975e.png

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

93fd8627.png

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.

ad8bb7bf.png

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.

2_projets-1658067397499.png

Consultation d'un projet

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

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.

623bbec3.png

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.

Présentation

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.

3_goupes-1658138873747.png

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**.

3_goupes-1658138850535.png

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

3_goupes-1658139083571.png

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.

3_goupes-1658243615486.png

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.

3_goupes-1658140618399.png

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

3_goupes-1658141032005.png

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.

3_goupes-1658141298348.png

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.

3_goupes-1658243615486.png

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

On peut également le retirer du groupe.

3_goupes-1658243740653.png

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.

3_goupes-1658243871755.png

Présentation

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.

5_social-1658246275026.png

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....

5_social-1658246386861.png

5_social-1658246410566.png

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.

5_social-1658314814187.png

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.

5_social-1658413632782.png

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.

5_social-1658413844396.png

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.

5_social-1658415012341.png

Présentation

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.

4_code_editor-1658244035716.png

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.

4_code_editor-1658244218601.png

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é.

firefox_oKVaoLy38z.png

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.

firefox_j7WBcQAJeK.png

Outils & Technologies

Outils et technologies utilisés pour la réalisation de Cloud Coding

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.

1_technos-1658416577917.png

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.

1_technos-1658487277175.png

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.

1_technos-1658493058621.png

Font Awesome

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

1_technos-1658493123851.png

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.

1_technos-1658493308949.png

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.

1_technos-1658493390999.png

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.

1_technos-1658493495493.png

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.

1_technos-1666694108343.png

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.

1_technos-1666694213637.png

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.

1_technos-1666694337719.png

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.

Outils & Technologies

Infrastructure

Cluster Kubernetes

Schéma de l'infrastructure

Infra cloudcoding.png

Réplication des données.png

Monitoring.png

CICD.png