Présentation
Présentation de l'application et ses fonctionnalités
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.
