>> DAN ARMENDARIZ: Bonjour, et bienvenue à un séminaire de CS50 sur la personnalisation Cloud 9,
et l'IDE CS50.
Donc, aujourd'hui, nous allons parler juste un peu
à propos de certaines des informations techniques
passe derrière l'architecture Cloud 9, et comment
nous avons mis en place certaines des plug-ins dans le cadre de Cloud 9 pour fournir CS50 IDE.
Alors disons simplement sauter à droite et commencer à parler de plug-ins.
>> Donc, les plug-ins sont vraiment à la cœur de l'expérience Cloud 9.
Cloud 9 est la technologie sous-jacente que nous fournit l'IDE,
et aussi la fenêtre de terminal à la en bas, avec le workspace--
Ubuntu workspace-- que nous utiliser pour compiler tous nos projets
et nous acquitter de nos ensembles de problèmes, compléter nos séries de problèmes.
Mais au cœur de tous de celui-ci, toute la technologie
est vraiment juste un tas de plug-ins.
Tout est un plug-in qui peut être modifié,
étendue, vous pouvez créer vos propres plug-ins,
vous pouvez supprimer les autres les plug-ins, de modifier vraiment
beaucoup de la fonctionnalité du Cloud 9 IDE existant.
>> Alors ceci est un existant Cloud 9 environnement.
Ceci est vraiment juste le défaut Cloud 9 environnement.
Et jetez un oeil à la façon dont il fait est différent de l'IDE CS50.
Donc, cela est l'IDE CS50.
Notez qu'il ya une certaine visuelle changements entre la régulière Cloud 9
l'environnement et l'IDE CS50.
Plus précisément, vous aurez remarquerez quelques changements.
Tout d'abord, il ya moins de éléments de menu pour commencer.
Il ya en fait un moyen que vous pouvez changer cela.
Il a appelé le mode simple.
>> Par défaut, le mode simple est activé, et qui simplifie certains des éléments de menu.
Il enlève une partie de la les plus avancés,
parce que franchement, beaucoup de les étudiants qui sont à venir dans
et ne pas besoin de savoir au sujet de certains des fonctionnalités plus avancées
ne sont pas dépassés avec un tas d'options.
Mais nous faisons de fournir la capacité de prendre hors ces roues soi-disant formation
et retirer cette échafaudages pour que les gens
peut devenir plus habitués à Les fonctionnalités avancées de l'IDE.
Immédiatement à la droit de cela, il ya
également un bouton de débogage, qui dans la norme Couverture
9 environnement est tout simplement appelé terme.
Mais par défaut, nous avons configuré le bouton de débogage dans le CS50 IDE
pour faire apparaître le débogueur, compiler automatiquement le code source,
connecter le débogueur sous-jacent à la GDB--
et depuis qui exécute pour effectuer l'debugging-- et quelques autres étapes
aussi bien.
Aussi la fenêtre du terminal à la very-- ou plutôt le terminal
onglet à la section de la console à la fenêtre au bas de l'écran,
a été rebaptisé d'être simplement terminal.
Alors que dans la norme Cloud 9 environnement,
il montre effectivement la exécutant l'application.
De cette façon, on simplifie, de plus, l'interface graphique, juste un peu.
>> Nous avons également ajouté quelques boutons en haut à droite de l'IDE
pour montrer quelques informations de base sur l'instance du sous-jacent.
Et aussi, nous avons supprimé un des options sur les articles
de l'extrême droite.
Donc, tout cela est mis en œuvre pas en modifiant nécessairement le Cloud 9
code source, mais place grâce à un couple
de plug-ins que nous avons mis en place long de l'année écoulée.
Et Cloud 9 a accueilli et a courir dans l'espace de travail de CS50.
Ou plutôt dans les espaces de travail sont désignés comme CS50 IDE.
>> Alors, vraiment ce que est la principale différence entre le Cloud 9 et le CS50
des espaces de travail.
Il ya aussi, dans le sous-jacent Ainsi, le principal changement est
que nous installons un peu articles préconfigurés comme GDB,
et d'autres choses de base que nous avons créé, comme mise à jour 50,
et un couple d'autres mesures qui font toute l'expérience un peu plus
unifié.
Mais dans l'ensemble, cela est juste une modification d'un système existant
que Cloud 9 a créé pour nous.
Ce que nous allons montrer un peu plus tard
comment créer en fait un plug-in qui assez basique
nous permet d'insérer quelque chose dans le système de menu, et d'ouvrir un dialogue.
Et si nous avons assez temps, nous allons effectivement
voir comment nous pouvons remplir que dialogue avec quelques informations
à partir de l'instance du sous-jacent.
Pour que nous puissions arriver à ce Point, parlons d'abord un peu
sur l'architecture de Cloud 9.
>> Donc, la façon dont nous sommes habitués à l'interaction avec Cloud 9
est entièrement par le client.
Nous ouvrons un navigateur Web, nous tapons dans le CS50.io.
Nous avons finalement, après authentification, sont présentés avec l'IDE.
Mais se rendre compte qu'il ya un couple d'étapes
qui fait de nous arriver à ce point.
La première chose est que mon client, le navigateur web,
sur demande et après authentification, charges de l'interface graphique et les plug-ins
de certains CDN, à partir de certaines Content Delivery Network.
Cela peut être franchement n'importe où.
>> Et cela est en fait séparée à partir de l'instance du sous-jacent.
Il est important de réaliser que ceci est en fait juste un tas de fichiers statiques.
Il ya un tas de JavaScript qui est téléchargé à partir du CDN
sur mon navigateur, et tous de l'interface graphique que vous
ici-- voir ce qui est vraiment KEY-- tous de l'interface graphique que vous voyez ici
est exécuté sur le côté client.
Tout ce que vous voyez dans l'espace de travail Cloud 9
est effectivement fonctionner dans le navigateur.
Et tout ce que vous envoyez le long de l'instance de base
est en communication avec l'instance le long de cette deuxième canal séparé,
et est ensuite enregistré sur cette instance de docker.
>> Donc la raison pour laquelle je dis ceci est un exemple de docker
est que la technologie sous-jacente est de ne pas utiliser des machines virtuelles,
mais est plutôt en utilisant un technologie appelée docker,
qui allows-- fondamentalement le plus proche l'analogie est une machine virtuelle.
Mais il est subtilement différent en ce qu 'il y a
beaucoup de possibilités pour exécuter une combinaison de docker différente
cas sur une seule machine.
Et ils peuvent être filés jusqu'à en succession très rapide.
Il est pas tout à fait le plus stricte différenciation
entre les différentes instances de docker car il ya dans des machines virtuelles,
mais encore il ya beaucoup de la différenciation et la séparation
entre ces différents cas.
D'ACCORD.
Ainsi, les deux étapes ici que sont importants pour réaliser
est que lorsque nous allons à CS50.io, nous sommes télécharger l'interface graphique et les plug-ins,
qui sont écrits en JavaScript, le dans le navigateur ou dans le navigateur.
Et cela est peut-être un couple mégaoctets valeur de l'information.
À ce moment, une fois que l'interface graphique a chargés et les plug-ins ont commencé,
puis elle commence à communiquer avec l'instance de docker, qui ne
avoir nécessairement être le même serveur.
>> Maintenant, il ya une exception à cette.
Nous pouvons en fait avoir à la fois la mécanisme de livraison pour l'interface graphique lui-même
et l'instance de docker dans toutes le même serveur, qui
est en fait quelque chose que nous faisons pour la version hors ligne de Cloud 9.
Ceci est pas quelque chose que nous avons très médiatisé cet automne,
mais nous ne disposons également d'un déconnecté version
vous permet de télécharger une emballé version de toutes ces choses
et vous permettent d'exécuter Couverture 9 dans un environnement déconnecté.
>> Déménagement ce hors le nuage et sur votre machine locale a un certain impact.
En particulier, vous ne ont plus la capacité
de partager votre espace de travail avec les autres.
Vous ne pouvez plus ouvrir de Cloud 9, et le CS50 IDE, depuis tout ordinateur
et de voir les mêmes fichiers qui vous travaillez avec avant.
Mais à la place, il fonctionne entièrement sur votre propre machine locale
sans avoir besoin d'un accès à Internet.
Mais encore, même dans ce modèle, même si nous avons une machine virtuelle
qui est essentiellement l'exécution de ces choses.
>> Nous avons un serveur distinct qui est fournir essentiellement le Cloud 9
contenu, et ensuite nous avoir une instance de docker
qui est responsable de la communication avec cette IDE pour le back-end.
D'ACCORD.
Ainsi, l'ensemble de l'interface graphique est écrit entièrement en JavaScript
utilisant Node.js et le SDK Cloud 9, que nous arriverons à en seulement une minute.
Et tous les plug-ins sont exécutés sur le côté client.
Alors concentrons-nous alors une peu en supposant
que cette première étape a effectivement complété avec succès,
et ne regarder que cette instance de docker.
>> Donc dans ce cas, ce est le moyen standard
de penser à faire Cloud 9 plug-in développement est que vous allez
à l'écriture de code qui sera être exécuté dans le navigateur de l'utilisateur,
et vous avez la possibilité de utilisant des API pour communiquer
avec l'instance de docker sous-jacente, exécuter du code là, et faire quelque chose
que vous pouvez faire.
Donc cela va être le contexte que nous allons
être en utilisant pour le reste de cet exposé.
Et il faut garder à l'esprit ce modèle.
Ce sera très important en quelques minutes.
Il ya un couple de liens que je veux vous montrer.
Tout d'abord, a donné 9 Couverture beaucoup de documentation
qui est assez bon, qui montre comment de faire du développement de base de plug-in.
Donc, si vous allez à cette adresse URL, cloud9-sdk.readme.io,
vous verrez la documentation là-bas.
Et beaucoup de ces informations que vous êtes sur le point de voir
peuvent également être trouvés là, et plus encore.
Vous pouvez également trouver l'open source version de Cloud 9 à cette adresse URL,
github.com/c9/core, que nous utilisons comme partie de la version hors ligne de l'IDE,
de sorte que vous serez en mesure d'avoir la même expérience Cloud 9,
mais d'une manière hors ligne.
D'accord.
Donc, nous allons jeter un oeil à un Cloud 9 réelle espace de travail ici.
Et encore une fois, je tiens à souligner un certain nombre de choses.
Ceci est, ici, un IDE de CS50 normale.
Et je l'ai désactivé un moins Mode confortable sous le menu Affichage
de sorte que je peux voir tous des options de menu.
Ce que je veux vous montrer droit est maintenant un certain nombre de choses.
Tout d'abord, si je vais dans les Préférences, puis
cliquez sur Plug-in Manager, et tapez CS50 ici,
nous pouvons voir qu'il ya, en fait, un couple de plug-ins que CS50
ont été installés et notre course pour activer les modifications que nous avons
vu pour la IDE CS50.
>> À l'heure actuelle, il ya essentiellement deux plug-ins qui sont en cours d'exécution.
Il ya un appelé Simple, qui est le mode simplifié qui
vous permet de réduire le nombre des options de menu sur le haut,
et ont cette soi-disant Mode moins à l'aise.
Et puis il ya aussi CS50 Statistiques, qui est peut-être seulement un peu mal nommée.
Parce que cela est ce que vous montre les informations
sur l'espace de travail sous-jacente.
Il injecte ces boutons le long de la partie supérieure droite.
Il injecte aussi un élément de menu dans le élément de la fenêtre, dans le menu Fenêtre
ici, CS50 IDE Infos.
Et il est responsable de l'instanciation ce dialogue que nous avons vu ici,
avec toutes les informations que nous sommes habitués à voir dans un CS50 IDE
espace de travail.
D'ACCORD.
Donc, il ya effectivement un autre plug-in que nous avons développée ainsi.
Et il ya une couple d'autres qui nous avons aussi pas rendues publiques.
Mais l'un d'eux est le général plug-in qui permet de fonctionner GDB.
Donc, l'un des aspects du Cloud 9 est qu'ils ont déjà fourni
cette interface graphique pour mettre en œuvre un débogueur.
Et l'un des plug-ins qui nous avons créé essentiellement
crochets GDB avec ce GUI version basée d'un débogueur.
Et est responsable de la médiation tout des demandes qu'un utilisateur peut avoir,
entre enjambant ou créer des points d'arrêt ou quoi que ce soit
le long de ces lignes, à traduire ce aux commandes GDB peut comprendre,
la délivrance de ces commandes à GDB.
Et dès que GDB émet une réponse, puis
nous interprétons cela et jour l'interface graphique que nécessaire.
>> Voilà probablement l'un des le plus compliqué
des plug-ins, donc au lieu de ce que nous sommes me concentrer sur aujourd'hui est, en fait,
Stats plug-in, et nous en parlerons un peu simple, aussi.
Donc je l'ai mentionné avant, et je veux vraiment de faire très, très clair, qui encore une fois,
tout cela que nous sommes voir ici est essentiellement
fonctionnant sur le côté client.
Nous voyons une fenêtre de terminal ci-dessous, et que, bien sûr,
si nous taper des commandes dans que, qui sera ensuite publié
à l'instance sous-jacente.
De même, si nous ouvrons un nouveau fichier et taper des trucs dedans et l'enregistrer,
ce fichier sera enregistré sur l'instance du sous-jacent.
>> Mais l'éditeur lui-même, ce fenêtre de terminal lui-même,
tout est mis en œuvre dans JavaScript et tout est un plug-in
que l'on peut interagir avec, et donc modifier.
Il ya beaucoup d'extensibilité ici.
Je recommande de prendre un coup d'oeil au Cloud 9 compte GitHub
pour voir la grande quantité de plug-ins qui sont disponibles,
et à quel point beaucoup écrit du code est pour l'extensibilité.
Donc, il ya quelque chose que je tiens à mentionner
à ce sujet aussi bien, qui est qu'il ya beaucoup de-- il ya
un grand nombre de fonctionnalités qui est à condition que dans les préférences
fenêtre, que nous avons vu juste fait allusion il ya quelques minutes.
>> Une des choses que nous pouvons faire en tant IDE développeurs, ou comme Cloud 9 développeurs,
est effectivement injecter un peu panneaux de préférences de notre propre.
Ainsi, le mode simple, ou le mode moins à l'aise,
ainsi que les informations IDE, ou les statistiques de plug-in,
chacun a une certaine préférence panneaux qui nous permettent de modifier
le comportement de chacun de ceux-ci.
Vous remarquerez que si je vais à la Préférences et aller dans les paramètres de l'utilisateur,
il ya un onglet CS50, un qui dit que les informations IDE.
Et je peux changer le informations fréquence de rafraîchissement.
>> En effet, ce qui se passe dans les statistiques plug-in
est que toutes les n secondes, où n-secondes est définie par cette préférence
panneau, est en cours de récupération d'informations à partir de l'instance sous-jacente, étant envoyé
Retour sur le côté client, le plug-in est alors
interpréter l'information à partir de l'instance de sous-jacent
et mettre à jour l'interface graphique que nécessaire.
Nous pouvons voir que maintenant ce paramètre est réglé à 30 secondes, et que la valeur par défaut est.
Mais je peux certainement changer avec quelle rapidité cela se produit juste
en modifiant cette valeur.
>> Maintenant une des choses intéressantes est que ce panneau de préférences, l'interface graphique,
est vraiment juste une version GUI d'un grand nombre de paramètres sous-jacents
qui sont présentés dans JSON.
Donc, si je vais, par exemple, sous la CS50 Menu IDE, ou le menu Cloud 9,
selon lequel la version que vous cherchez à,
et aller à l'un de ces settings-- dans ce cas,
le projet de la settings-- paramètres de projet dans ce cas
applique à tous les paramètres pour ce seul espace de travail.
Considérant que les paramètres utilisateur appliquent pour tous les espaces de travail
que vous pourriez avoir dans votre compte.
>> Ainsi, tout comme un aparté ici, pour être extra clair,
il ya une séparation entre la deux, parce que même si nous avons par défaut
avoir un espace de travail, qui est le CS50 IDE, si vous
étaient à cliquer sur votre petit avatar ici et aller à tableau de bord,
vous verrez que vous pouvez réellement créer des espaces supplémentaires ainsi.
Vous pouvez voir ici que je dois un IDE 50 espace de travail, et aussi
aux fins de la présente séminaire, un espace de travail
appelé espace de travail, ce qui est ici.
Donc de toute façon, je dois préférences différentes.
Chacune d'entre elles pourraient avoir préférences distinctes du projet,
mais les préférences de l'utilisateur sont partagé entre tous mes espaces de travail.
Par ailleurs, cela est également très pratique si vous
vouloir créer un espace de travail avec différentes options de personnalisation.
Et il est très pratique pour créer un nouvel espace de travail.
Et choisissez celui qui pourrait être pré-configuré d'une autre manière,
peut-être pour PHP spécifiquement, ou Django spécifiquement.
Ou même juste mesure.
L'espace de travail CS50 modèle est celui que nous
utilisation qui installe automatiquement Mise à jour 50 et tous les paramètres
que nous avons là-bas, y compris tous les les plug-ins que nous avons pour l'IDE CS50.
D'ACCORD.
Mais revenons à cette.
Encore une fois, il ya des projets paramètres, et ce sont ceux
que nous étudions ici.
Et remarquez qu'il y sont un tas de paramètres,
nombre d'entre elles correspondent à des préférences panneaux, mais pas tous d'entre eux.
Mais nous pouvons voir qu'ici, dans this-- oh Non, ai-je mis dans les paramètres de l'utilisateur?
Peut-être que je l'ai mis dans les paramètres de l'utilisateur.
Et cela, nous y voilà.
Dans les paramètres de l'utilisateur, nous pouvons voir que nous avons une section de CS50,
et ce sont écrites par ces Cloud 9 plug-ins
que nous avons mis en place.
Il est la plus simple à correspondre à celle simple plug-in,
et celui qui les stats correspond à celle interface graphique
version du panneau de préférences.
Le taux de rafraîchissement, dans ce cas, est fixé à 20 secondes.
>> Cela est d'autant, nous l'espérons, la débuts de certaines informations
que nous allons réellement voir dans un petit peu plus en détail, momentanément.
D'ACCORD.
Donc, disons que nous voulons effectivement s'y mettre.
Nous comprenons que tous les trucs ce qui se passe sur le côté client
se fait réellement sur le navigateur, qui signifie que tous les plug-ins que je vous écris
vont être écrit avec le navigateur à l'esprit.
Et si je veux réellement faire rien sur l'espace de travail,
Je vais peut-être avoir à initier une sorte de communication
entre le navigateur et l'espace de travail pour être sûr
que ce qui est réellement accompli.
Mais disons que maintenant Je veux descendre à elle
et effectivement créer mon premier plug-in.
Eh bien, la façon dont vous seriez en mesure de le faire est en fait assez facile.
Il est donné dans le SDK Cloud 9.
Mais il est de prendre votre nom d'espace de travail existant, qui
est l'URL que vous avez en haut de votre barre, et ajoutez la ligne suivante à elle.
?
Sdk = 1 & Debub = 2.
Maintenant, ce que cela va permettre est que le SDK = 1 sera effectivement mis le SDK
mode pour vrai, ce qui permettra un certain nombre de choses supplémentaires.
Et debug = 2 permettra messages d'erreur être un peu plus bavard.
>> Et donc si vous apportez le JavaScript console dans votre onglet de Chrome développeur,
vous allez réellement être en mesure de voir beaucoup plus d'informations
que vous autrement.
Donc, je recommande d'activer ces deux en même temps, car elle vraiment
est utile d'avoir tout cela Information Supplémentaire.
Il est important de noter, cependant, que tournant sur la mise au point de valeur de 2
signifie qu'il est très verbeux, et elle a effectivement
sera quelque peu sensiblement ralentir votre IDE, en particulier lorsque le chargement
ou quand le faire faire des tâches lourdes.
Il suffit donc de garder cela à l'esprit.
Il est utile pour le développement, mais vous peut ne pas vouloir le faire tout le temps.
>> Donc, nous allons effectivement faire.
Mais dans ce cas, je dois effectivement déjà mis en place un espace de travail avec cela.
Voyons donc, sdk = 1 & debug = 2.
Avec un couple de plug-ins espérons déjà installé.
D'accord.
Donc, maintenant que je suis retourné sur le débogage du SDK Mode, remarquons que nous sommes en mode debug,
afin que nous puissions regarder les outils de dev pour voir des erreurs, que je vais le faire hors de l'écran.
Nous pouvons voir qu'il ya un tas d'erreurs ici.
Maintenant, il est en fait assez commun pour Cloud 9 d'avoir un couple d'erreurs,
et je ne voudrais pas vous inquiéter à leur sujet jusqu'à ce que vous
voir quelque chose qui pourrait être spécifique au plug-in
que vous arrive d'être créer.
>> Donc, ici, par exemple, nous obtenons un couple de 404s-- pas été trouvé.
Nous voyons que nous sommes incapables de charger certains informations hors de l'instance sous-jacente
lui-même.
Et il ya un tas de supplémentaires informations, mais la plupart de ce que nous sommes
passe réellement à ignorer pour le moment.
Parce que cela est assez un espace de travail commun pour
d'avoir juste un couple d'erreurs.
D'ACCORD.
Je vais passer sur ce le chemin et de revenir ici.
Et maintenant, la solution de facilité, le beau chose d'avoir ce développeur
mode activé est qu'il me permet de créer facilement un nouveau plug-in.
>> Ainsi, alors que avant que je ne l'ai pas avoir cette nouvelle option de plug-in disponibles,
que nous pouvons voir si je reviens à mon mode développeur non plus ici,
il n'y a aucun nouveau plug-in.
En activant le mode SDK, je avoir un nouveau plug-in disponible
et je peux facilement en créer un.
Dans ce cas, il ya un couple des options différentes, simples,
un plug-in vide, plein de plug-in, installateur, Cloud 9 bundle.
Choisissons juste une vide plug-in pour l'instant
de sorte que nous pouvons voir une très version simple d'un.
>> Maintenant, remarquez que le long de la le côté gauche qui est là est maintenant
quelque chose sous Favoris, est l'inscription d'un couple de plug-ins
qui sont maintenant disponibles pour moi.
Si je me dilate, nous allons être capable de voir ceux-ci.
Maintenant, je veux vous faire remarquer quelque chose ici, ce qui
est que ce ne sont pas réellement contenue dans le répertoire workspace
Ubuntu sur mon instance sous-jacente, mais elle est présente sur le disque dur.
Et où cela se trouve, parce ce qui est très utile de savoir,
surtout si vous allez être faire quelque chose avec Git,
où il se trouve est dans un dossier de .c9, / plugins.
Donc, si je vais là-bas, nous pouvons voir que maintenant la liste des plug-ins qui sont ici
correspond à la liste des plug-ins que je vu sur le côté gauche de mon espace de travail.
>> Maintenant, par défaut, et cela est un peu étrange,
par défaut lorsque je crée un nouveau plug-in dans un espace de travail,
elle crée ce plug-in que par défaut a un nom d'un trait de soulignement.
Généralement qui pourrait causer certains problèmes.
Donc, la prochaine étape très que je accomplissent généralement
est simplement de supprimer cette plug-in particulier
et ne laisser que le simple plug-in que il était initialement, plugin.simple.
Et qui est le seul qui est là.
D'ACCORD.
>> Alors qu'est-ce que cela ressemble?
Eh bien, cela est, à nouveau, un paquet JavaScript
qui comprend certains fichiers, y compris un fichier plugin.js, où
le contenu principal de mon plug-in est situé,
un fichier package.json, qui précise effectivement
certaines métadonnées à propos de ce plug-in, tel qui est l'auteur,
toute information supplémentaire à ce sujet, un description du plug-in, et ainsi de suite.
Et aussi par défaut, il crée un fichier README vierge,
et un fichier vide de test pour vous créer de la documentation supplémentaire,
et d'un harnais de test si vous souhaitez le faire.
>> Donc, nous allons juste jeter un oeil à la première, très rapidement, au fichier package.json.
Il est assez facile d'aller seulement à travers et remplir les zones de cette
que vous voulez remplir, comme fournir un nom, donner une description,
itérer le numéro de version de temps en temps, de fournir
un auteur pour chaque personne qui contribue,
ajoutez-les aux contributeurs section, et le reste de ce que vous
peut à peu près juste laisser comme il est pour le moment.
>> Il ya une chose qui est important de noter,
qu'en vertu de la section des plug-ins, il ya une clé appelé plug-in.
Et cela est adaptée au nom de le fichier JavaScript appelé plugin.js.
Voilà donc comment Cloud 9 sait, quand il lit ce fichier de package.json, qui
js des fichiers à charger réellement.
Si je crée des fichiers js supplémentaires ou veux renommer ce fichier js de plug-in,
Je dois aussi changer dans le fichier de package.json.
>> Toutes les questions de l'auditoire?
Non.
Ce qui est une personne suivante avec moi jusqu'ici.
>> D'ACCORD.
Donc, en fait, je l'ai créé un quelques plug-ins déjà,
Je pense que, dans cet espace de travail.
Alors débarrassons de certains de ceux-ci, ajouter sdk = 1 & debug = 2, recharger cet espace de travail,
et nous allons voir si nous avoir ces plug-ins dès maintenant.
C9 / plugins.
Et c'est parti.
Nous pouvons voir maintenant dans mes C9 / plugins de cette l'un, nous avons plugin.1 et plugin.2.
Donc, nous allons juste intensifier the-- il suffit d'augmenter le montant de difficulté
dans chacun de ces plug-ins.
Mais ici, si je crée un nouveau plug-in, Je peux ajouter à mes favoris.
Et je vais supprimer ceux des le système de fichiers sous-jacent.
>> Enlevons cela.
Maintenant, si je ouvrir mon premier plug-in, et plugin.js ouvertes,
nous pouvons voir ici le sous-jacent version simple d'un plug-in.
Permettez-moi de revenir effectivement à cet autre espace de travail
parce que vous pouvez au moins, voir ici, ce un plug-in vierge ressemble réellement.
Donc, sous le capot, cela ressemble très similaire à la technologie appelée,
Je pense, il est RequireJS.
Notez que cela ne vraiment regarder, peut-être,
identique à un autre JavaScript les fichiers que nous pourrions avoir vu.
Mais à la place, il ya un couple de tout lignes de base qu'il a effectivement.
>> Toutes ces choses est la première interprété par l'IDE,
mais il est pas vraiment courir jusqu'à spécifié.
Et je vais vous dire que quand signifie en réalité dans un instant.
Mais remarquez que ici il ya un main.consumes ligne à la ligne 2,
et cette liste de tous les plug-ins que ce plug-in est dépendant.
Donc, par défaut, nous faisons peut-être pas d'avoir toutes les dépendances sur d'autres plug-ins,
mais quand nous avons réellement besoin pour dépendra de fonctionnalités fournies
par d'autres plug-ins dans l'IDE, nous avons besoin de la liste de ces plug-ins
dans la ligne de main.consumes.
Et puis nous devons les relier au code
ci-dessous, qui je vais vous montrer en seulement un moment sur la façon dont nous pouvons faire cela.
>> Donne une Main.provides nommer à ce plug-in
que d'autres plug-ins pourrait utiliser dans leur ligne de consomme.
Donc dans ce cas, mon plug-in est juste placé là par défaut,
et nous devrions changer cela pour être applicable à notre propre plug-in,
comme nous le verrons dans tout moment.
Maintenant, ici, dans la fonction principale, cette fonction principale
est réellement courir et interprété, mais il ne fait réellement beaucoup.
Il obtient simplement tout mis en place, mais il ne fait pas le commencer plug-in,
malgré ce que le nom sonne comme.
Ce qui se passe réellement à travers une séquence de procédés que
figurent au long de ce plug-in.
>> Donc, si je fais défiler vers le bas, nous pouvons voir que nous avons un cycle de vie où
sur un événement appelé la charge, ou d'un événement appelé déchargement,
certains événements se produisent réellement.
Il est vraiment ici alors que le plug-in commence que ces méthodes sont appelées.
Alors, soyons un peu plus concrète à ce sujet et regarder un exemple.
Voici donc pour plugin.1, ce nous sommes fondamentalement allons faire
est de créer un élément de menu appelé CS50 Séminaire de dialogue 1--
parce que nous avons deux eux-- et nous allons
de l'injecter dans le menu Fenêtre.
Et lorsque l'on clique dessus, nous sommes va ouvrir un dialogue qui
nous montre quelques informations très basiques.
>> Dans ce cas, tout un monde de bonjour.
Donc, cela est très simple bonjour dialogue mondial
que nous pouvons mettre en œuvre comme un plug-in dans Cloud 9.
Donc, nous allons voir comment cela ressemble réellement.
Nous intervenons à travers elle, tout simplement assez rapidement donc nous
peut regarder le prochain plug-in ainsi.
Notez que nous sommes ici consommer une variété de plug-ins.
Nous consommer un dialogue plug-in, les commandes, les menus et l'interface utilisateur.
On dirait que je suis effectivement consommais le dialogue à deux reprises, afin que je puisse retirer cela.
>> Et remarquez que la manière que je les reliant,
cette est une sorte de métadonnées qui est dit le système de plug-in à quelles exigences
sont effectivement nécessaire pour ce plug-in à charger.
Il est également important de noter que l'ordre dans lequel les plug-ins sont chargés
ne sont pas garanties.
Mais ce qui est garanti est que si je préciser certaines plug-in comme une exigence,
ce plug-in sera chargé avant celui-ci est chargé.
>> Cela signifie donc que si votre plug-in nécessite certaines fonctionnalités d'
par autre chose dans l'IDE, vous devriez être sûr que vos plug-in consomme
ce plug-in afin que les dépendances sont certains de créer votre plug-in,
ou instancier votre plug-in, seulement après ce cadre existant existe.
Donc ici, je l'ai mentionné la métadonnées pour le gestionnaire de plug-in,
lesquels je vais consommer.
Et dans la fonction principale ici, Je vais ensuite vous connecter
mon code pour ces plug-ins importés.
>> Donc je vais juste créer des variables qui
correspondre les noms de chacune des personnes afin que je peux très rapidement référencer
tout au long de mon code.
La raison pour laquelle je l'importation dialogue est parce que je veux que mon plug-in
d'agir comme un plug-in de dialogue.
Et la façon dont je suis capable de le faire est, bien sûr,
connecter mon code pour le dialogue plug-in en l'important
puis en spécifiant par la création d'une nouvelle variable de dialogue
et le reliant à celui importé plug-in.
Et puis en définissant mon plug-in comme un nouveau dialogue.
>> Donc, dans l'initialisation, je vouloir définir mon plug-in.
Et cette variable appelé plug-in vous verrez
est simplement utilisé couramment tout au long de Cloud 9 plug-ins.
Je vais d'instancier une nouvelle dialogue avec certains attributs,
lui donner un nom spécifique, dire qu'il est possible pour les utilisateurs de fermer.
Que ça va montrer un peu dans x le coin supérieur droit,
ou un petit bouton dans le coin inférieur droit.
Si oui ou non je peux sélectionner le texte à partir de il, ce que le titre de ce dialogue
serait, et ainsi de suite.
Maintenant, cela définit simplement le dialogue, mais il ne montre pas encore il.
Je dois effectivement de définir une action pour qu'il soit représenté.
>> Et encore une fois, je vous encourage à jetez un oeil à la SDK Cloud 9,
car il existe une variété de dialogues et ils sont très bien documentés.
Vous pouvez voir les différents types qu'il ya, et de les utiliser
dans tout ce plug-in vous avez à l'esprit.
Maintenant, il va y avoir une section de charge, et cette charge
fonction que vous vous rappelez est utilisée par le cycle de vie plug-in
en fait tout à instancier et d'obtenir tout prêt à aller.
Maintenant, quand ce plug-in charge, je ne le font pas veulent qu'il apparaisse immédiatement un dialogue,
parce que ce plug-in va charger avec le reste de l'IDE.
Et quand je charge qui IDE, je ne veux pas le dialogue pour afficher automatiquement.
Je veux seulement pour montrer quand je clique sur l'option de menu dans mon élément de menu Fenêtre
que je vais ajouter à momentanément.
>> Donc, il ya deux étapes distinctes ici qui doivent se produire.
Je dois créer un commande, et la commande
sera responsable de la réalité montrant le dialogue sur le Cloud 9 IDE.
Et puis-je me connecter, je avoir à créer un nouveau menu de la fenêtre
article, qui exécute cette commande.
De sorte que lorsque je clique sur cette fenêtre élément de menu, cette commande est ensuite exécuté
et donc mon dialogue apparaît ensuite.
Et si cela est effectivement une jolie belle façon de penser.
>> Parce que d'abord, je peux créer une commande dont le nom est CS50 Séminaire de dialogue 1,
qui procure une certaine contexte général pour cela.
Et le bit important ici est de remarquer l'attribut EXEC, qui
énumère une fonction qui sera appelée dans mon plug-in lorsque cette commande est exécutée.
Donc, cette commande est une sorte de a-- il est juste un nuage arbitraire 9
commande qui est disponible à toute Cloud 9 plug-in.
Mais la fonction réelle qu'il est aller à appeler lorsque cette commande est exécutée
est la fonction show dialogue dans mon dossier plugin.js.
>> Et nous pouvons réellement voir ces plug-ins et la liste
de commandes qui sont disponibles pour nous dans Préférences, faites défiler tout le chemin down--
Voyons, voyons-nous réellement faire cela maintenant?
Plug-in Manager, Non, je pense qu'il est i-- certainement quelque part par ici.
Eh bien, il ya une liste de commandes quelque part, mais je dois avoir,
Je l'ai oublié où il est.
Alors OK, nous allons poursuivre.
D'accord.
Donc, nous avons une liste de commandes qui sont à notre disposition,
et les commandes sont ces juste arbitraire Cloud 9
commandes qui exécutent du code spécifique.
Il suffit donc de garder cela à l'esprit, que nous allons lancer la boîte de dialogue de spectacle
fonctionner momentanément.
Maintenant, quand je veux vraiment ajouter un menu article, je peux ajouter que l'article par le chemin,
et il suffit de spécifier exactement où je veux qu'il soit, Séminaire de fenêtre / CS50 Dialog 1.
Et à ce moment, je veux pour créer un nouvel élément
va exécuter une commande, CS50 Séminaire de dialogue 1.
Notez que encore une fois, cela est le Cloud 9 commande Je ai créé juste au-dessus.
>> Maintenant, je veux aussi créer un petit diviseur,
et donc je peux faire la même chose dans la ligne suivante.
Maintenant, vous remarquerez peut-être que partie de la définition de cet élément de menu,
il ya un certain nombre qui lui est associée
dit réellement où exactement Je veux que le point de menu soit
situé dans la liste des menus.
Mais vous remarquerez peut- que je fais pas réellement
voir les numéros avec ces menus, par défaut.
Donc, il ya une petite chose cachée qui nous pouvons faire, un peu de changement à notre URL.
Donc, en plus SDK = 1 & debug = 2, Je vais mettre menu pour 1--
et nous espérons qu'il est menu, pas de menus.
Oh, il est menus = 1.
Attendez.
>> Et ce que nous allons voir à ce que le rechargement IDE est que je suis toujours en mode de débogage,
mais maintenant il ya des numéros associé à tous les menus.
Et cela vous dit exactement ce que le nombre
est lorsque vous essayez d'injecter quelque chose de n'importe où dans ce système de menu.
Ainsi, dans le menu Fenêtre, je peux voir que l'article 45 est collaborer,
et l'article 38 avant qu'il ne soit installateur.
Alors, quand je veux pour injecter un élément entre les deux,
Je voudrais juste sélectionner un numéro entre ces deux éléments.
Donc, je choisi 41 et inséré mon séminaire Dialog article 1 du menu à cet endroit.
>> Et voilà pourquoi ce numéro qui apparaît ici est le numéro 41.
Tel est le lieu de cela élément de menu dans le menu Cloud 9.
Maintenant même, je voulais pour créer un diviseur
et ajoutez-le afin qu'il y ait une belle division entre chacun de ces menus
Article (s.
Donc je ajouté que à l'emplacement 43.
Jusqu'ici, tout va bien, je l'espère?
Alors maintenant, nous allons effectivement Regardons le code spécifique dans le dialogue de spectacle
qui est en fait responsable pour l'ouverture de cette fenêtre de dialogue.
>> Défilement vers le bas, je vois que je veux d'avoir cette boîte de dialogue fonction de spectacle,
et il est extrêmement simple.
Je vais courir le spectacle méthode sur la variable de plug-in.
Et rappelez-vous que nous avons défini cette plug-in de variable ci-dessus comme un dialogue.
Donc bar plug-in, dans ce cas, est-ce objet que nous avons défini en interne.
Et il va y avoir un nouveau dialogue contenues dans ce plug-in.
Et donc nous avons fait ce référencé plug-in variable dans de nombreux endroits
dans un Cloud 9 typique environnement de développement.
>> Nous allons voir ici.
Notez que comme nous défiler vers le bas, il ya des cycles de vie supplémentaires.
Alors que ceux-ci répondent remarquer à des événements qui sont déclenchés
par cet objet, cet objet de dialogue.
Par défaut, il ya charger et décharger, ce qui
sont disponibles à tous Cloud 9 plug-ins.
Mais dans le cas de ce dialogue, il est
un autre événement qui peut feu ainsi appelé
Dessiner, qui est déclenché lorsque que est sur le point d'être dessiné à l'écran,
en première instance du dialogue montrant.
>> Alors, quand il est en fait va être montré,
il va nous fournir un certain HTML.
Et en utilisant simplement la norme Pratiques HTML pouvons-nous
injecter des informations très simple, notre monde de bonjour, dans ce dialogue.
Donc, si nous défiler vers le haut, nous pouvons voir ensuite la procession des choses
qu'il est produise.
Nous avons d'abord créé une commande Cloud 9 que lorsqu'il est exécuté par Cloud 9,
va tirer cette fonction.
Il va lancer cette fonction appelé spectacle dialogue, que je l'ai
écrit dans mon code.
>> Je créé un élément de menu et attachée à ce que même commande
que lorsque cet élément est cliqué dans le menu, cette commande est ensuite exécuter
et que la fonction est ensuite exécuté.
Et à l'intérieur de la fonction que je suis aller juste pour appeler the-- je suis
aller juste pour exécuter le spectacle méthode de ce plug-in, qui
va premier appel la méthode de tirage au sort, et aller
pour tirer cette méthode en bas, la dessiner gestionnaire d'événements, dans notre cycle de vie.
Et puis il sera en fait montrer le dialogue.
>> Il ya aussi une méthode de peau, de sorte que si je dois la possibilité de se cacher
mon dialogue, je peux faire la même chose.
Voilà donc à peu près tout pour obtenir tout cela pour travailler.
Notez que si l'on est défiler vers le bas en outre il ya une API publique de gel.
Cela en dit fondamentalement juste que je veulent que ces méthodes à efficacement
être public, mais pas overwriteable en dehors du contexte de ce plug-in.
Et ci-dessous, tout en bas, est peut-être la dernière chose
que nous avons vraiment besoin de payer beaucoup d'attention à ici, ce qui
est que nous allons enregistrer notre plug-in avec le nom Séminaire C9 1,
et l'objet plug-in.
>> Qui, comme vous vous en souvenez, est ce plug-in ce plug-in
objet que nous avons définissons tout au long de la totalité de cette source
code.
Et Séminaire C9 1 est le chaîne qui nous avons promis
de fournir au sommet de cette définition.
D'ACCORD.
Alors disons il rampe jusqu'à un peu et voir si nous pouvons faire quelque chose
un peu plus intéressant.
Maintenant, ceci est seulement si grand.
Je veux dire, cela est, il est en fait assez cool qui en si peu de lignes de code,
Peut-on modifier l'IDE existant et ajouter un élément de menu existant
ou d'ajouter un nouvel élément de menu, ajouter un commande, et de montrer un dialogue,
et juste un tas de fonctionnalité qui existe.
Il est vraiment assez grande.
>> Mais il ne fait pas beaucoup car il ne peut pas communiquer avec le sous-jacent Ubuntu
exemple.
Donc, disons que je voulez réellement savoir
quelques informations sur le sous-jacente par exemple Ubuntu,
comme les statistiques plug-in ne.
Donc, nous allons jeter un oeil à un peu plus d'information
sur la façon dont les stats plug-in œuvres.
Et en fait, il est très similaire à cela.
Vous pourriez rappeler que il ya un dialogue.
Vous pouvez vous rappeler qu'il ya certaines informations qui est
montré tout le long de la barre de menu long le haut, qui nous l'espérons vous êtes maintenant
l'obtention d'un goût de comment nous avons mis cela,
simplement en insérant des éléments de menu spécifique au points et en instanciant un dialogue
et l'affichage de ce dialogue.
>> Mais nous avons pas encore montré vous comment nous pouvons connecter
à une commande dans la Ubuntu instance sous-jacente.
Donc, nous allons jeter un coup d'œil puis à plugin.2, qui fait exactement cela.
Nous allons ouvrir plugin.js, qui est le code pour cela.
Mais, sous le menu Fenêtre, si je clique sur dialogue 2,
nous pouvons voir que ce qu'il dit à la place, bonjour CS50, qui
ne regarde pas tout ce que séduisante, non?
Sauf, regarder ce.
Permettez-moi de changer quelque chose ici-bas.
>> Je vais aller à mon espace de travail et le changement séminaire
à-dire quelque chose d'autre, comme Bonjour, Dan.
Je vais fermer et enregistrer.
Et maintenant, je vais re-run mon élément de menu de dialogue.
Et remarquez qu'il a maintenant changé ce qu'il dit.
Bonjour, Dan.
Il me semble avoir fait quelque chose de bas ici dans l'instance sous-jacente Ubuntu
sans avoir manipulé tout nouveau code qui exécute uniquement
sur le côté client.
Donc, il ya évidemment une sorte de communication qui se passe ici.
>> Maintenant, cela est où beaucoup de la puissance du 9 SDK Couverture arrive,
est que, dans ce plugin.2, nous pouvons effectivement causer
un appel arrive à la instance sous-jacente,
et exécuter certaines commandes arbitraires.
Donc dans ce cas, je dois effectivement créé un script bash très simple
dans mon espace de travail appelé Séminaire.
Alors permettez-moi d'ouvrir que jusqu'à.
Et nous pouvons voir que ça ressemble à ça.
Il est juste un bash très simple script dont le seul but dans la vie
va être de faire écho sur ce texte, Bonjour, Dan.
Ou avant, il dit Bonjour, CS50.
Et voilà tout ce qu'il va faire.
>> Parce que cela est maintenant un commande que je peux courir.
Je peux effectivement exécuter ici.
Nous pouvons voir qu'il est en fait juste une commande que je dirige naturellement.
Je peux demander à mon plug-in pour exécuter cette commande sur l'espace de travail sous-jacent
et d'analyser l'information qui a été retourné de lui,
et faire quelque chose avec elle, et de modifier mon plug-in et le comportement que je
avoir dans ma plug-in en conséquence. D'ACCORD.
Voyons donc comment cela se passe.
Nous l'avons vu très simple Script batch de séminaire que je
[Inaudible] qu'il peut effectivement fonctionner.
>> Et maintenant, nous allons voir les modifications qui sont nécessaires pour lier cela ensemble
avec la fenêtre de dialogue, et l'exécuter.
Nous sommes donc ici va faire joli près la même chose que nous avons vu auparavant.
Mais remarquez que, parmi les choses que je l'ai consommé maintenant--
en plus du dialogue, qui encore une fois je suis d'avoir fait deux fois,
pas besoin selon ce qui est en plus le dialogue et les commandes
et les menus plug-ins, qui étaient nécessaire dans le premier pour moi
pour définir une nouvelle commande et injecter un élément dans les menus,
Je dois aussi cette proc plug-in.
>> Et ce proc plug-in permet nous manipulons processus
sur l'instance sous-jacente.
Je l'ai branché après que je l'ai dit que mon plug-in exige.
Je l'ai ensuite connecté à code, comme nous avons vu dans la fonction principale.
Encore une fois, je vais initialiser mon dialogue.
Et si nous descendons maintenant, nous pouvez voir comment cela est différent.
La fonction de la charge est la même, de sorte que il va juste créer une commande
et de créer un élément de menu et connectez cet élément de menu pour cette commande.
Mais si nous faisons défiler maintenant vers le bas pour afficher les dialogues,
nous pouvons commencer à voir où les différences surgissent.
>> Nous avons spectacle dialogue de fonction, qui va juste pour montrer le dialogue.
Mais quand je montre ce dialogue, et lorsque la méthode de spectacle est appelé,
il déclenche la fonction de tirage.
Et je vais préciser alors une partie du contenu à l'intérieur de cela.
Donc je vais juste créer une div, fournir à elle
un texte de base, Bonjour, monde.
Mais remarque que je suis ici va y attacher une pièce d'identité.
Et la ligne très prochaine je vais pour constater que ID utilisant JavaScript,
et stocker cet objet dans une autre variable
que je vais juste appeler contenu.
>> Alors maintenant, chaque fois que je dois contenu, tout ce que je besoin de faire
est il suffit de modifier HTML intérieure de cet objet.
Et le dialogue HTML ensuite être modifiée ainsi.
Ainsi, lorsque ce plug-in est alors montré, ce qui peut arriver
et ceci est un nouvel événement ce qui est nouveau à ce plug-in,
mais qui se passe dans tous les plug-in avec le dialogue, lorsque cela est maintenant affichée,
Je vais appeler un fonction appelée chercher d'info.
Et cette fonction est la viande de lui ici.
Je vais utiliser ce proc plug-in qui nous avons décrit précédemment, qui, par la manière,
est vraiment juste une bibliothèque Node.js que Cloud 9 utilise ici.
>> Ainsi, vous pouvez effectivement regarder comment ce
fonctionne que si vous allez dans le Documentation Node.js
et de rechercher le fichier exec méthode de processus là.
Je vais courir ce spécifique commande, la maison Ubuntu espace de travail
séminaire, à savoir que même une, qui même commande que je créé avant.
Fournir à elle un courant répertoire de travail, tout simplement
pour être ultra sécuritaire en termes de contexte dans lequel celui-ci fonctionne.
Et une fois que cela a été rempli et retourné,
Je vais exécuter cette fonction appelée sortie d'analyse.
D'ACCORD.
Donc cela alors va exécuter une commande sur le local, ou plutôt
l'instance Ubuntu distante.
Quand je reviens un peu informations, je suis ensuite
va appeler une fonction distincte dite sortie d'analyse, qui
a cette signature ici, err, stdout, stderr,
et d'effectuer quelques calculs à ce sujet.
Donc, si je recevais une erreur de quelque sorte à tous,
Je vais effectivement vérifier pour voir si erreur a effectivement certaines données.
Et si oui, alors je vais modifier le intérieure HTML de cet objet de contenu, ce qui
est vous vous en souvenez, nous reliée à la dialogue
au instantiattion que de dialogue, ou au niveau du premier dessin
de ce dialogue.
Je vais juste dire que une erreur se produit.
>> Maintenant, cela est trop simpliste.
La valeur d'erreur sera généralement contenir quelque chose qui était utile,
peut-être un numéro d'erreur et une erreur du script lui-même.
Ou si le script écrit quelque chose à l'erreur-type,
que les données serait peuplée dans ce paramètre ainsi.
Et je pourrais être un peu plus d'attention à ce que l'erreur
Je suis en train de montrer aux gens.
Mais cet exemple simpliste est assez bon pour l'instant
voir au moins comment tout cela fonctionne.
Sinon, si il y a aucune erreur, alors je suis juste
va fournir le brut la sortie de cette fonction
dans le code HTML interne de ce contenu élément, et ensuite mettre à jour mon plug-in
et le montrer ici.
Et qui est à peu près tout ce qui est nécessaire pour obtenir ce à courir.
Et donc nous allons réfléchir à ensuite comment fonctionne ce, dans l'ensemble.
Quand je d'abord chargé ce plug-in, tout comme le premier plug-in,
Je vais ajouter une commande qui est disponibles à tout, à tout plug-in
dans le Cloud 9, appelé Séminaire CS50 Dialog 2, dont la responsabilité
sera pour exécuter ce spectacle dialogue, qui est vous vous en souvenez,
seront effectivement montrer le dialogue que je demandées ci-dessous.
>> Ensuite, je vais ajouter que commande dans un menu de la fenêtre
de sorte que je dois accès.
Et lorsque que le dialogue est demandé à être montré,
Je vais chercher quelques informations auprès de l'instance sous-jacente Ubuntu
en utilisant la commande de fichier exec.
Excuse moi.
Une fois qui est retourné et je recevoir des information, puis sur le côté client
encore une fois, je vais être capable d'analyser la sortie de commande qui
et mettre à jour l'intérieur HTML des éléments
que nous avions relié au plus tôt.
>> Et avec cela, nous avons ensuite ce plug-in entièrement fonctionnel
qui me permet de récupérer des informations à partir de ce script arbitraire
que nous avons créé sur notre instance sous-jacente.
Mais encore une fois, il est vraiment importante et vraiment clé
à séparer où chaque de ces choses qui se passe,
que nous avons tous de ce côté client code qui est exécuté dans le navigateur,
et ne dispose pas encore d'accès pour le système de fichiers sous-jacent,
jusqu'à ce que nous courons en fait certaines de ces des commandes qui sont fournies par le Couverture
9 SDK comme proc, et quelques autres qui nous permettent de lire certaines données,
ou de lire certains fichiers si nous avons besoin de faire quelque chose du genre.
>> Maintenant, ceci est un exemple assez simple.
Il ya d'autres choses que nous serait peut vouloir faire aussi bien.
Par exemple, peut-être nous fait voulez économiser de l'information
les préférences.
Ou peut-être que nous voulons ajouter un nouveau panneau de préférences
Ou quelque chose de ce genre.
Alors qui est quelque chose que vous peut jeter un oeil à la SDK Cloud 9
pour obtenir plus d'informations sur.
Mais ce qui est vraiment suffisant pour commencer.
Donc, juste pour être un peu plus concret sur la façon dont certaines de ces choses
fonction, je ne veux montrer tout un exemple de plus, qui est juste un peu
du code du plug-in Statistiques 50.
>> Et ce code est essentiellement sur la base de ces exemples,
que vous avez réellement vu, mais a quelques plus de garanties
et a un peu plus de complexité dans l'ordre pour atteindre certaines des choses supplémentaires
que nous voulons atteindre.
Par exemple, si je veux être pouvoir enregistrer certains paramètres,
alors je besoin d'avoir accès les paramètres de plug-in,
et chaque fois que je veux à lire certains paramètres,
Je peux, par exemple, attacher à divers des événements dans les paramètres de plug-in.
Donc, chaque fois que les paramètres est rouge, Par exemple, dans mon propre plug-in,
si je vais lire quelques-uns paramètres de stockage sauvegardé
préférences de l'utilisateur, alors je peux définir les valeurs par défaut pour un emplacement spécifique,
de préférence spécifique, en ce que JSON options de style fichier que nous avons
économisé plus tôt, que nous avons vu plus tôt.
>> Et si je vais écrire certains paramètres à l'informatique,
alors je can-- ou dès que nous détectons que les paramètres ont été écrits
to-- parce que par exemple, celles les paramètres ont été modifiés par l'utilisateur
soit directement dans leurs paramètres fichier ou le panneau de préférences
a changé les paramètres déposer directement,
Je peux réellement mettre à jour une partie du code ou mettre à jour le comportement de mon plug-in
sur la base de ces changements qui ont produite sur le fichier de paramètres ainsi.
Mais vraiment, le reste est assez beaucoup ce que vous avez déjà vu.
>> Nous ajoutons un peu, peut-être quelque chose qui est nouvelle.
Donc, nous ajoutons un fichier de préférences, ou plutôt un panneau de préférences,
à la fenêtre des préférences, qui encore une fois vous pouvez trouver plus d'informations
dans le Cloud 9 SDK m'a lu.
Mais tout le reste est assez bien, assez
semblable à ce que nous avons vu avant, juste d'un contrôle d'erreur supplémentaire
et quelques protections supplémentaires et quelques fonctionnalités supplémentaires
à présenter tous les différents choses que nous avons vu.
Si vous ne l'avez pas fait encore vu, vous pourriez
se demander ce que le sous-jacent commande est dans la fenêtre Statistiques 50.
Il est en fait fonction.
Eh bien, il est-- oh, merde.
Une seconde.
Attendez.
D'ACCORD.
Permettez-moi de passer cette place afin que nous puissions voir ce qui se passe quand je tape Statistiques 50.
Notez que dans ce cas, le commande que je suis sur la mise
est vraiment nouveau, juste le script qui est aller à la sortie d'un tas d'informations
au format JSON.
Et la raison pour laquelle nous le faisons de cette façon est que parce que nous
fonctionnent, parce que nous avons écrit le code côté client en JavaScript,
nous pouvons très facilement juste analyser des objets JavaScript,
et vraiment être capable de manipuler ces objets comme nous le ferions tout
tout autre objet JavaScript.
>> Et donc cela est un très pratique moyen de fournir des informations
de l'instance Ubuntu sous-jacente, tel que le numéro de version, l'hôte
nom, si un serveur est à l'écoute, ce que le serveur est, ainsi de suite et ainsi de suite,
et analyser que très facilement et très rapidement
dans le plug-in qui va alors pour nous montrer toutes ces informations.
Encore une fois, l'idée fondamentale ici pour garder à l'esprit
cette séparation est entre l'instance sous-jacente,
et aussi où le code est en cours de chargement.
Que lorsque je ai un client, il est le premier chargement.
Juste ce fichier statique de JavaScript quelque part, peut-être CDN d'une certaine sorte.
Nous ne devons pas vraiment soin trop de cette première étape.
>> Nous savons juste qu'il est fonctionnant sur le côté client
et voilà où je vais communiquer avec cette instance de docker.
Ce que nous allons faire via le SDK Cloud 9.
Nous ne devons pas réellement la capacité, en utilisant JavaScript ou Node.js,
d'écrire directement à elle.
Nous utilisons seulement ceux SDK existante API pour effectuer cette action pour nous.
Encore une fois, l'un des choses vraiment importantes
est que lorsque je l'ai créé ce, quand je l'ai créé ce plug-in,
et comme je travaille sur elle, un des choses importantes à faire
est de mettre en place la console JavaScript.
>> Parce que depuis tout cela est opérant sur le JavaScript,
sur le côté client, si je l'utilise un console.log method-- si juste
pour montrer un exemple ici.
Essayons de modifier cette simple plug-in de se connecter également des données.
Et nous allons ajouter à la norme.
Donc, nous allons changer que pour être ici.
Maintenant, quand je l'exécute console.log, gardez à l'esprit
que depuis ce exécute sur le côté du client,
Je vais voir dans ma propre JavaScript console, qui
comment je vais ensuite être en mesure de essayer de résoudre les problèmes et déboguer
certains des problèmes que je dois.
>> Notez que parce Je suis en mode SDK, je suis
alors en mesure de manipuler plug-ins sur cette instance.
Ainsi, même si il est enregistrée sur cet exemple,
ce est le seul exemple de ce précédent règle violée, où le Cloud 9
SDK sera effectivement tirer les plug-ins de la sous-jacente instance, puis les exécuter.
Alors que de cette façon, je suis ensuite capable de manipuler et construire
Certains plug-ins ici.
Mais pour moi de voir mises à jour de ce plug-in,
car il est sur le côté client, Je dois sauver ce plug-in
puis rechargez l'ensemble espace de travail, de sorte que le nouveau plug-in est alors
téléchargé sur mon client, sur mon navigateur Web, puis est utilisé.
>> Alors maintenant, quand je clique sur ce séminaire Dialog 2, nous voyons encore ce.
Mais maintenant, je l'espère dans ma JavaScript dialogue, si nous voyons my-- attendre,
attendez.
Je pourrais avoir à ouvrir la nouvelle de dialogue.
Nous devrions voir mes données reçues ici.
Données reçues, bonjour, Dan, qui est vous vous en souvenez,
est une opération qui console.log nous avons demandé dans le plug-in.
Donc cette description alors que je l'ai mentionné avant,
ce dialogue, ou cette schéma plutôt, que je
mentionné précédemment est ce qui se passe.
Mais il ya une importante exception seulement pour le développement,
qui est que le plug-in elle pourrait en fait
être stockées sur l'instance de docker temporairement, puisque vraisemblablement Cloud 9
ne voulons pas que nous soyons en mesure de manipuler des objets sur leur CDN.
>> Et les clients Cloud 9, lors du chargement, va trouver ces plug-ins dans cela.
C9 dossier plug-in, et de charger ceux-ci.
Mais ceux qui se produisent encore que du côté du client.
Alors ceci est juste l'un exception qui se produit seulement
pour le développement du Cloud 9 plug-ins.
Mais le reste de la time-- et la raison
que nous voulons vraiment Hammer Cet home--
parce que la plupart du temps, cela est va être en cours d'exécution de la CAN,
et juste va être exécuté uniquement à partir du côté client.
>> Normalement, il n'y aura pas interaction avec le plug-in,
ou il n'a même pas y avoir de raison pour laquelle le mêmes plug-ins
sont réellement stockées sur le sous-jacente instance de docker,
sauf dans le cas de ce développement SDK.
Encore une fois, cela change tout légèrement en raison du fait
que nous courons mode SDK.
Il va charger, puis ceux plug-ins de développement,
et dans le seul but ici est de telle sorte que Je peux utiliser Cloud 9 pour faire du développement
Cloud 9 plugins.
Mais même ainsi, cela ne change pas nouveau comment tout cela fonctionne.
Il est encore en cours d'exécution entièrement sur le côté client.
>> Cela signifie simplement que chaque fois que je veux créer Cloud 9 plug-ins dans le Cloud 9,
Je crée ces plug-ins, les mettre dans mon.
C9 / plugins dossier dans ma maison répertoire, assurez-vous que je suis en mode SDK,
recharger la page chaque fois que je fait apporter des modifications à ce plug-in,
et voir ce qui se passe dans ma console JavaScript.
Juste gérer mon JavaScript console pour vous assurer
que tout dépannage informations que je mets à la console,
ou toute autre chose qui pourrait se produire à cause des erreurs que je l'ai écrit
dans mon code ou similaires, y apparaît.
>> Et avec cela, il est vraiment suffisant pour commencer, je pense,
avec les plug-ins Cloud 9.
Surtout prendre un coup d'oeil à la SDK documentation Cloud 9 fournit.
Il est un excellent moyen d'obtenir commencé, et très facilement
créer des plug-ins pour Cloud 9.
Et avec cela, je tiens à remercier vous tous beaucoup de me rejoindre.
Je l'espère vous aurez du plaisir écrire des plug-ins pour le Cloud 9.
Peut-être l'amélioration de plug-ins que nous avons maintenant, ou peut-être même
ajoutant certaines fonctionnalités de votre propre.
Nous sommes impatients de voir ce que vous créez.
Jusque-là, bye.