Glitch, une excellente plateforme pour les développeurs

Glitch est une plate-forme assez incroyable pour apprendre et expérimenter le code. Cet article vous présente Glitch et vous fait passer de zéro à héros

Problèmeest une excellente plateforme pour apprendre à coder.

J'utilise Glitch sur plusieurs de mes tutoriels, je pense que c'est unsuper outilàvitrineconcepts, et aussipermettre aux gens d'utiliser vos projetset bâtissez sur eux.

Voici un exemple de projet que j'ai réalisé sur Glitch avecRéagiretRouteur React:https://glitch.com/edit/#!/flaviocopes-react-router-v4-2

Avec Glitch, vous pouvez facilement créerdémosetprototypesd'applications écrites en JavaScript, des simples pages Web aux frameworks avancés tels que React ouVueet les applications Node.js côté serveur.

Il est construit au-dessus deNœud, et vous avez la possibilité d'installer n'importe quelnpmpackage que vous voulez, exécutezWebpacket beaucoup plus.

Il vous est présenté par les personnes qui ont créé des produits à succès, notamment Trello et Stack Overflow, il offre donc de nombreux bonus de crédibilité pour cela.

Pourquoi est-ce que je pense que Glitch est génial?

Glitch a «cliqué» pour moi dans la façon dont il se présente dans undrôleinterface, maispas abasourdi.

Vous avez accès àjournaux, leconsole, et beaucoup de trucs internes.

De plus, le concept de remixage si proéminent dans l'interface me rend beaucoup plus susceptible de créer beaucoup de projets là-bas, car je n'ai jamais à partir d'une table rase.

Vous pouvez commencer à plonger dans le codesans perdre de tempsmise en place d'un environnement, contrôle de version et concentration sur l'idée, avec unHTTPSURL et unCDNpour les actifs médiatiques.

De plus, il n'y a pas du tout de verrouillage, c'est juste Node.js (ou si vous n'utilisez pas de JavaScript côté serveur, c'est juste HTML, JS et CSS)

C'est gratuit?

Oui, c'est gratuit, et à l'avenir, ils pourraient ajouter encore plus de fonctionnalités à un forfait payant, mais ils déclarent que le Glitch actuel sera toujours gratuit tel qu'il est maintenant.

Il y a des limites raisonnables comme

  • Vous disposez de 128 Mo d'espace, à l'exclusion des packages npm, plus 512 Mo pour les ressources multimédias
  • Vous pouvez traiter jusqu'à 4000 demandes par heure
  • Les applications sont arrêtées si elles ne sont pas consultées pendant 5 minutes et elles ne reçoivent aucune requête HTTP, et les applications de longue durée sont arrêtées après 12 heures. Dès qu'une requête HTTP arrive, ils recommencent

Un aperçu de Glitch

Ceci est la page d'accueil de Glitch, elle montre quelques projets qu'ils ont décidé de présenter car ils sont cool, et quelques projets de démarrage:

The homepage as guest

Créer un compte est gratuit et facile, il suffit d'appuyer sur «Connexion» et de choisir entre Facebook et GitHub comme «points d'entrée» (je recommande GitHub):

Sign in to Glitch

Vous êtes redirigé vers GitHub pour autoriser:

Authorize Glitch on GitHub

Une fois connecté, la page d'accueil change pour afficher également vos projets:

The home page once logged in

En cliquantTes projetsvous renvoie à votre page de profil, qui a votre nom dans l'URL. Le mien esthttps://glitch.com/@flaviocopes.

The Glitch profile

Tu peuxépinglerprojets, pour les retrouver plus facilement lorsque vous en aurez beaucoup.

Le concept de remixage

Lorsque vous démarrez pour la première fois, vous n'aurez bien sûr pas de projets propres.

Glitch facilite le démarrage et vous ne démarrez jamais à partir d'un projet vierge.Tu toujoursremixun autre projet.

Vous pouvez remixer un projet que vous aimez, peut-être celui que vous avez trouvé sur Twitter ou présenté sur la page d'accueil de Glitch, ou vous pouvez partir d'un projet passe-partout pour démarrer quelque chose:

Il existe de nombreux autres problèmes de démarrage dans ces collections:

Si vous apprenez à coder en ce moment, leApprendre à coder Glitch Collectionest très beau.

J'ai créé quelques applications de démarrage que j'utilise constamment pour mes démos et mes tests, et ce sont:

Glitch rend très facile la création de vos propres blocs de construction, et en les épinglant dans votre profil, vous pouvez les avoir toujours en haut, faciles à trouver.

Remix un pépin

Une fois que vous avez un problème sur lequel vous souhaitez vous appuyer, il vous suffit de cliquer dessus et une fenêtre apparaît:

Remix glitch modal

Il y a 3 boutons:

  • Aperçuun pépin est un code qui fait quelque chose. Cela montre le résultat du problème.
  • Modifier le projetaffiche la source du projet et vous pouvez commencer à le modifier
  • Remixez çaclone le pépin en un nouveau

Chaque fois que vous remixez un pépin, un nouveau projet est créé, avec un nom aléatoire.

Voici un problème juste après l'avoir créé en remixant un autre:

A remixed glitch

Glitch lui a donné le nomguttural-noodle. En cliquant sur le nom, vous pouvez le modifier:

Rename a glitch

Vous pouvez également modifier la description.

De là, vous pouvez également créer un nouveau pépin à partir de zéro, remixer le pépin actuel ou passer à un autre.

Importation / exportation GitHub

Il existe une importation / exportation facile depuis / vers GitHub, ce qui est très pratique:

GitHub Import export

Gardez votre projet privé

Cliquer sur le verrou rend le problème privé:

Keep project private

Créer un nouveau projet

Cliquez sur «Nouveau projet» pour afficher 3 options:

  • node-app
  • node-sqlite
  • page Web

Create a new project on Glitch

Il s'agit d'un raccourci pour rechercher ces applications de démarrage et les remixer. Sous les capots, cliquer sur l'une de ces options remixe un problème existant.

En cas de problème, cliquez sur "Afficher" pour ouvrir un nouvel onglet dans lequel l'application est exécutée:

The app running

URL de l'application

Remarquez l'URL, c'est:

https://flavio-my-nice-project.glitch.me

Cela reflète le nom de l'application.

L'URL d'édition est un peu différente:

https://glitch.com/edit/#!/flavio-my-nice-project

L'aperçu s'exécute sur un sous-domaine deglitch.me, tandis que l'édition est effectuée surglitch.com.

Vous avez remarqué les poissons à droite de la page? C'est un petit JavaScript que Glitch recommande d'ajouter à la page, pour laisser d'autres personnes remixer le projet ou voir la source:

The fish on preview

Lancer l'application

Chaque fois que vous modifiez la source, l'application est reconstruite et la vue en direct est actualisée.

C'est tellement pratique que l'application des modifications en temps réel donne un retour immédiat qui est d'une grande aide lors du développement.

Secrets

Vous ne voulez pas qu'une clé API ou un mot de passe pouvant être utilisé dans le code soit vu par tout le monde. Chacune de ces chaînes secrètes doit être placée dans le.envfichier, qui a une clé à côté.

Si vous invitez des collaborateurs, ils pourront voir le contenu, car ils font partie du projet.

Mais quiconque le remixe, ou les personnes invitées par vous à aider, ne verront pas le contenu du fichier.

Gérer les fichiers

L'ajout d'un nouveau fichier à un projet est facile.

Tu peuxfaites glisser et déposez des fichiers et des dossiers depuis votre ordinateur local, ou cliquez sur "Nouveau fichier»Au-dessus de la liste des fichiers.

Il est également intuitif de renommer, copier ou supprimer des fichiers:

Manage the glitch

Licence en un clic et code de conduite

Avoir une licence dans le code est l'une des choses qui sont négligées dans les exemples de projets, mais qui détermine ce que les autres peuvent faire ou ne peuvent pas faire avec votre projet. Sans licence, un projet n'est pas open source, et tous les droits sont réservés, donc le code ne peut pas être redistribué, et d'autres personnes ne peuvent rien faire avec (note: c'est ce que je comprends et IANAL - Je ne suis pas un avocat).

Glitch le faitsuper facilepour ajouter une licence, dans leNouveau fichierpanneau:

Add a license

View the license

Vous pouvez également le modifier facilement:

Change the license

Le code de conduite est un autre élément très important pour tout projet et toute communauté. Cela permet aux contributeurs de se sentir accueillis et protégés dans leur participation à la communauté.

LeAjouter un code de conduiteLe bouton ajoute un exemple de code de conduite pour les projets open source à partir desquels vous pouvez démarrer.

Ajouter un package npm

Clique lepackage.jsonet si vous n'en avez pas encore, créez-en un vide.

Clique leAjouter un packagebouton qui apparaît maintenant en haut, et vous pouvez ajouter un nouveau package.

Add an npm package

De plus, si vous avez un package qui doit être mis à jour, Glitch affichera le nombre de packages qui nécessitent une mise à jour, et vous pouvez les mettre à jour vers la dernière version d'un simple clic:

Update dependencies

Utilisez une version personnalisée de Node.js

Vous pouvez définir la version Node.js surl'un de cesdans votrepackage.json. Utilisant.xutilisera la dernière version d'une version majeure, ce qui est la chose la plus utile, comme ceci:

{
  //...
  "engines": {
    "node": "8.x"
  }
}

Espace de rangement

Glitch a un système de fichiers persistant. Les fichiers sont conservés sur le disque même si votre application est arrêtée ou si vous ne l'utilisez pas pendant une longue période.

Cela vous permet de stocker des données sur disque, en utilisant des bases de données locales ou un stockage basé sur des fichiers (fichier plat).

Si vous mettez vos données dans le.datadossier, ce nom spécial indique que le contenu ne sera pas copié dans un nouveau projet avec le pépin est remixé.

Incorporer un problème dans une page

La clé de l'utilisation de Glitch pour créer des didacticiels est la possibilité d'incorporer le code et la vue de présentation dans une page.

Cliquez surPartageretIncorporer le projetpour ouvrir la vue Incorporer le projet. À partir de là, vous pouvez choisir d'intégrer uniquement le code, l'application ou de personnaliser la hauteur du widget - et d'obtenir son code HTML à mettre sur votre site:

Embed glitch

Collaborer sur un pépin

Depuis le panneau Partager, leInviter des collaborateurs à modifierLe lien vous permet d'inviter n'importe qui à modifier le pépin en temps réel avec vous.

Vous pouvez voir leurs modifications au fur et à mesure. C'est vraiment cool!

Demander de l'aide

Lié à cette fonctionnalité de collaboration, il y en a une excellente: vous pouvez demander de l'aide à n'importe qui dans le monde, simplement en sélectionnant du texte dans la page, et en cliquant sur l'icône en forme de main levée:

Ask for help on a line

Cela ouvre un panneau dans lequel vous pouvez ajouter une balise de langue et une brève description de ce dont vous avez besoin:

Describe your problem

Une fois terminé, votre demande sera affichée sur la page d'accueil de Glitch pour que tout le monde puisse la récupérer.

Lorsqu'une personne intervient pour aider, elle voit la ligne que vous avez mise en évidence, et j'ai trouvé que les commentaires constituaient un bon moyen de communiquer comme un chat:

Help out someone

Voir les journaux

Cliquez surJournauxpour avoir accès à tous les logs de l'application:

The project logs

Accédez à la console

Dans le panneau Journaux, il y a unConsolebouton. Cliquez dessus pour ouvrir la console interactive dans un onglet séparé du navigateur:

The project console

Le débogueur

En cliquant sur leDébogueurdans le panneau Journaux, une instance de Chrome DevTools s'ouvre dans un autre onglet avec un lien vers l'URL du débogueur.

The debugger

L'historique des changements

Une fonctionnalité intéressante est la possibilité de vérifier toutes vos modifications dans l'historique du projet.

Cela ressemble beaucoup au fonctionnement de Git - en fait, sous le capot, c'est Git qui alimente cette interface vraiment facile à utiliser, qui s'ouvre en cliquant sur le bouton ⏪:

The history of changes

En quoi Glitch est-il différent de Codepen ou JSFiddle?

Une grande différence qui sépare Glitch des autres outils est la possibilité d'exécuter du code côté serveur.

Codepen et JSFiddle ne peuvent exécuter que du code frontal, tandis qu'un Glitch peut même être utilisé comme serveur léger pour vos applications, en gardant à l'esprit les limites d'utilisation.

Par exemple, j'ai configuré un serveur Express.js qui est déclenché par un Webhook à des moments précis de la journée pour effectuer certaines tâches. Je n'ai pas besoin de m'inquiéter de son exécution sur un autre serveur, je viens de l'écrire sur Glitch et de l'exécuter directement à partir de là.

C'est tout!

J'espère que vous aimez mon petit tutoriel sur l'utilisation de Glitch, et j'espère avoir expliqué la plupart de ses fonctionnalités.

Plus de questions?

Je suggère de l'essayer et de voir si cela clique pour vous aussi.

LeFAQ sur les glitchest un excellent point de départ.

S'amuser!


Plus de tutoriels sur les services: