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.

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.

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.

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

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

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