Connaissez-vous le HTML et le CSS et êtes-vous capable de créer des pages Web statiques simples (et pas si), mais vous souhaitez leur donner plus de «vie» et d'interactivité? Vous avez des œuvres (peintures, photographies, poèmes, une collection de timbres, etc.) que vous souhaitez partager avec le monde, mais vous ne pouvez pas créer un site portfolio ou un blog où vous pouvez les poster et les mettre à jour sans effort supplémentaire. ? Ou rêvez-vous de tenir le journal d'un voyageur, de collecter des recettes culinaires inhabituelles, ou de suivre votre activité physique et de faire tout cela en ligne sur votre propre site Web? Peut-être avez-vous un animal de compagnie préféré, dont le soin nécessite des procédures spéciales, et ils doivent être suivis et enregistrés rapidement?

Mais la mention de JavaScript vous plonge dans un tremblement facile (et parfois pas aussi), et le nombre de technologies et de concepts que vous devez maîtriser pour réaliser vos idées vous mène à la confusion et au désespoir? En conséquence, vous vous demandez: «Pourquoi la programmation Web devrait-elle être si difficile? Est-il vraiment impossible de trouver quelque chose pour le rendre plus facile? "

Ensuite, vous êtes au bon endroit. Après avoir lu l'article, vous recevrez un outil à l'aide duquel, je suis sûr, vous pourrez réaliser, sinon tous, bon nombre de vos idées, similaires à celles énumérées ci-dessus.

L'auteur des photos originales: Mart Virkus (toggl.com)

Développeurs frontaux expérimentés et expérimentés, ne vous précipitez pas pour clore l'article en criant que maintenant il y aura quelque chose à «frotter» les nouveaux venus ici et que vous n'avez rien à faire ici. Je suis sûr que vous pouvez également apprendre quelque chose d'utile. La principale chose à retenir: si quelque chose devient simple pour les débutants, il deviendra automatiquement simple pour tout le monde! Donc, dans une certaine mesure, cela vous simplifiera la vie. Ce n'est pas mal, d'accord?

Alors au fait! Cet article sera entièrement consacré à Mavo .

Mavo est une nouvelle approche pour développer des applications Web interactives uniquement en écrivant du HTML et du CSS, sans avoir besoin d'écrire du code JavaScript et de déployer votre propre serveur.

Mavo est développé par le groupe de scientifiques Haystack du laboratoire d'informatique et d'intelligence artificielle du Massachusetts Institute of Technology ( MIT CSAIL ) sous la direction de Leah Veru .

Suivez le lapin blanc!

Vous voulez en savoir un peu plus sur quelles idées ont été à la base de Mavo, quelles caractéristiques de ses prédécesseurs il a absorbées, lesquelles il a développées et lesquelles il a dû abandonner et pourquoi? Ensuite, je recommande fortement de lire ces deux publications, spécialement préparées pour le forum annuel consacré aux innovations dans le domaine de l'interaction homme-machine - Le Symposium ACM sur les logiciels et technologies d'interface utilisateur (UIST) :

1. Mavo: Création d'applications Web interactives basées sur les données en créant du HTML .
2. Extension d'un langage d'expression réactif avec des actions de mise à jour des données pour la création d'applications utilisateur final .

Une petite digression pour les lecteurs russes!

Le site Mavo est hébergé sur des serveurs Netlify , dont les adresses sont sur liste noire à la suite de la «guerre» avec le messager Telegram . Cela signifie que les ressources hébergées sur ces serveurs, ainsi que tous les services associés sont bloqués en Russie (au moins au moment de la rédaction de ce document).

Il y a cependant une bonne nouvelle: Lea Verou et moi travaillons activement pour résoudre ce problème. J'espère que nous réglerons cela bientôt aussi. Jusque-là, veuillez utiliser, par exemple, un VPN pour travailler avec Mavo (cela est vrai à la fois lors de l'accès au site Web Mavo et lors de l'étude des démos sur Codepen , ainsi que lors de la création de vos propres applications Web).

(MISE À JOUR) Ceux qui ne sont pas prêts et / ou qui ne veulent pas se connecter au VPN peuvent jouer avec Mavo sur Stackblitz ou le connecter à leur projet via cdnjs .

Je suis convaincu (et je pense que je ne suis pas seul) que la meilleure façon de «ressentir» une nouvelle technologie et d’évaluer ce dont elle est capable est de construire quelque chose d’utile avec son aide. Pas très difficile, sinon nous ne verrons peut-être pas les forêts derrière les arbres, mais c'est nécessaire. Il ne reste plus qu'à choisir quoi. Oh! Il y a une idée.

Je pense que beaucoup d'entre vous apprennent une langue étrangère (peut-être pour quelqu'un, c'est un langage de programmation). Et, très probablement, vous utilisez une sorte d'application pour l'étudier. De nouveaux mots dans ces applications sont généralement appris à l'aide de cartes mémoire. Soit dit en passant, cette technique d'apprentissage d'une langue étrangère fonctionne également très bien hors ligne. Mais maintenant, ce n'est pas ça.

Alors, pourquoi ne développons-nous pas ensemble une telle application? Appelons ça ... (roulement de tambour!) "Cartes" . Ce sera une application CRUD à part entière pour l'apprentissage d'une langue étrangère à l'aide de cartes, qui permettra:

• créer, supprimer, modifier des cartes et les organiser par glisser-déposer;
• importer des cartes dans l'application à partir d'un fichier et les exporter vers un fichier;
• suivre les progrès (fonction d'auto-évaluation).

La version finale de l'application ressemblera à ceci:


C'est bon? Je l'espère. Alors pars!

Tout au long de l'article, je vous guiderai à travers toutes les étapes du développement d'applications. Et en lisant, vous rencontrerez des fragments marqués d'étiquettes spéciales.

Suivez le lapin blanc!

Les fragments ainsi marqués contiennent des informations importantes mais supplémentaires sur Mavo. En première lecture, ces fragments peuvent être sautés sans avoir peur de manquer l'idée principale.

La pratique est la voie de l'excellence!

À la fin de certaines sections, je vous proposerai de petits exercices indépendants, après avoir effectué lesquels, vous pourrez vous familiariser un peu avec les capacités de Mavo et en même temps améliorer l'application en cours de développement. De tels exercices s'intégreront dans de tels fragments.

N'oubliez pas à la main!

Êtes-vous prêt, suivant le fil de mon exposé, à appliquer immédiatement de nouvelles connaissances dans la pratique? Super! Après tout, comme vous le savez, nous nous souvenons mieux de ce que font nos mains . Vous pouvez progressivement développer votre application en lisant un article du début à la fin, ou vous pouvez partir de n'importe quelle étape qui vous intéresse.

Ces fragments fourniront des liens vers les versions correspondantes de l'application sur Codepen .

Maintenant c'est tout. Commençons!

Page Web statique

Pour illustrer comment Mavo étend la puissance du HTML, nous allons créer une page HTML statique, que nous utiliserons ensuite Mavo pour la transformer en une application Web entièrement fonctionnelle.

Supposons que nous ayons le code HTML suivant dans un élément <body> :

<header>  <h1></h1> </header> <main> <article>  <p>  </div>  <p></div> </article> </main> 

Dans l'extrait de code ci-dessus, l'élément <article> correspond à une carte.

Nous ajouterons quelques styles pour rendre notre page plus semblable à une future application:


Vous voulez voir le code source complètement? Vous pouvez le faire ici .

Nous connectons Mavo

Jusqu'à présent, nous n'avons qu'une disposition statique. Il est temps de le transformer en une application Web à part entière. C'est là que Mavo entre en jeu!

Pour utiliser Mavo, nous devons connecter ses fichiers JavaScript et CSS à notre page. Pour ce faire, ajoutez les deux lignes suivantes à l'élément <head> :

 <head> ... <script src="https://get.mavo.io/mavo.min.js"></script> <link rel="stylesheet" href="https://get.mavo.io/mavo.css"> ... </head> 

Une petite digression pour les lecteurs russes!

Vous pouvez télécharger les fichiers correspondants depuis le référentiel Mavo et les connecter à votre page de la même manière.

(MISE À JOUR) Vous pouvez également connecter Mavo à votre projet via cdnjs .

Suivez le lapin blanc!

Peut-être que votre application devrait fonctionner correctement dans les anciens navigateurs? Ou voulez-vous pouvoir jeter un œil au code source de Mavo et vous attendre à ce qu'il soit lisible? Tout est entre vos mains. Vous pouvez affiner la version et / ou la version de Mavo avec lesquelles vous souhaitez travailler en répondant à quelques questions simples.

Après avoir connecté Mavo, nous devons spécifier quel élément de page contiendra notre future application. Un tel élément peut être n'importe quel élément HTML, même <body> ou <html> ! Nous devons ajouter l'attribut mv-app à cet élément et spécifier le nom de notre application comme sa valeur - un identifiant unique sur toute la page HTML. Un élément avec l'attribut mv-app est appelé l' élément racine de l' application.

Suivez le lapin blanc!

Si vous n'attribuez pas de valeur à l'attribut mv-app et qu'il n'y a aucun attribut dans le même élément: id ou nom , - Mavo attribuera automatiquement à l'application le nom mavo1 , mavo2 , etc.

Cependant, je vous recommande fortement de spécifier explicitement le nom de l'application, car il est utilisé (explicitement et implicitement) ailleurs dans l'application.

N'oubliez pas à la main!

https://codepen.io/dsharabin/pen/PoYxNjN

Donc, dans notre cas, l'élément <main> contiendra la future application. Ajoutez - lui l'attribut mv-app et spécifiez le nom de notre application - flashcards comme valeur:

 <main mv-app="flashcards"> ... </main> 

Attribut de propriété

Il est maintenant temps de dire à Mavo quels éléments de l'application sont importants , c'est-à-dire qu'ils seront modifiés et / ou enregistrés, et peuvent également être utilisés dans des expressions (mais plus à ce sujet plus tard - soyez patient).

Dans notre application, il existe jusqu'à présent deux de ces éléments - ce sont des éléments <p> . Ajoutez l'attribut de propriété à ces éléments, informant Mavo que ces éléments contiennent des données avec lesquelles vous devez travailler. Les éléments avec l'attribut property sont appelés propriétés .

Suivez le lapin blanc!

L'attribut de propriété peut être ajouté à n'importe quel élément HTML5 - Mavo sait comment le rendre modifiable . Par exemple, vous pouvez modifier manuellement le contenu de l'élément <span> à l'aide du clavier, et vous pouvez définir la valeur de l'élément <time> (date ou heure) à l'aide du widget correspondant.

L'ensemble de règles par lequel Mavo rend les éléments modifiables peut être facilement étendu à l'aide de plugins . Est-il nécessaire que l'utilisateur puisse formater le texte à l'aide d'une barre d'outils similaire à celle de programmes tels que Microsoft® Wordpad ou Microsoft® Word , c'est-à-dire travailler avec du texte, comme dans n'importe quel éditeur WYSIWYG ? Ou voulez-vous autoriser l'utilisateur à taper à l'aide des commandes du langage Markdown ? Il n'y a aucune restriction. Activez simplement les plugins appropriés. Pas de plugin approprié? Pas de problème. Écrivez le vôtre. Mavo prend en charge la fonctionnalité correspondante dès la sortie de la boîte.

Gardez à l'esprit que la valeur de l'attribut de propriété doit décrire le but de l'élément, comme cela est généralement décrit par les valeurs des attributs id ou class .

Transformez nos éléments <p> en propriétés:

 ... <p property="source">  </p> <p property="translation"></p> ... 

Suivez le lapin blanc!

Si un élément possède déjà un attribut id , class ou itemprop qui décrit avec précision son objectif, vous pouvez laisser l'attribut de propriété inchangé . Par exemple, l'une des propriétés de notre application pourrait être décrite comme suit: <p property class="source"> .

Avez-vous remarqué des changements dans notre application après y avoir ajouté des propriétés? Je suis sûr que oui. En haut de l'application, la barre d'outils Mavo (barre Mavo ) est apparue avec le bouton Modifier . Ce bouton vous permet de basculer entre deux modes d'application: le mode lecture et le mode édition . Maintenant, notre application est en mode lecture. Cela signifie que nous ne pouvons pas modifier ses données directement dans la fenêtre du navigateur.

Suivez le lapin blanc!

La barre d'outils Mavo est entièrement personnalisable (comme tous les éléments d'interface ajoutés automatiquement par Mavo à l'application): vous pouvez changer sa position, son apparence, spécifier un ensemble de boutons disponibles dessus, ou même lui affecter votre propre élément HTML.

Un peu plus tard, nous verrons l'une des options pour une telle personnalisation de la barre d'outils Mavo. En attendant, si vous souhaitez vous familiariser un peu avec les fonctionnalités décrites, lisez la documentation sur le site officiel.

Eh bien, il est temps de passer en mode édition et d'apprendre à le connaître. Cliquez sur le bouton Modifier .

Qu'est-ce qui a changé? Le nom du bouton a changé: maintenant son nom est Editing . C'est un signal visuel pour nous: attention, nous sommes en mode montage. Essayez de survoler un paragraphe contenant du texte («Mot ou expression» ou «Traduction»). Mavo nous dit avec un surlignage jaune que vous pouvez cliquer sur ce fragment et le modifier.


Osez! Cliquez sur le texte et apportez-y des modifications. N'est-ce pas génial?! Nous pouvons éditer le contenu de la page directement dans la fenêtre du navigateur!

La pratique est la voie de l'excellence!

Supposons qu'en plus du mot (ou de la phrase) étudié et de sa traduction, nous voulons que la fiche contienne un exemple de l'utilisation de ce mot (phrase) dans une phrase. Mais nous savons que c'est ainsi que les mots étrangers doivent être enseignés - dans le contexte, non?

Améliorez l'application en lui ajoutant l'élément manquant et en lui donnant un nom, par exemple, exemple .

Attribut mv-multiple

Pour le moment, il n'y a qu'une seule carte dans notre application. Franchement, ce n'est pas très utile! Pour une application à part entière, nous n'avons pas la possibilité d'ajouter de nouvelles cartes, de supprimer celles qui ne sont pas nécessaires, ainsi que de réorganiser les cartes à notre guise. Mais comment pouvons-nous réaliser tout cela?

N'oubliez pas à la main!

https://codepen.io/dsharabin/pen/PoYxNmN

En tant que développeurs d'applications, nous pourrions y ajouter de nouvelles cartes en ajoutant simplement plus d'éléments <article> à son code HTML. Mais alors, comment l'utilisateur peut-il ajouter et supprimer des cartes par lui-même?

Heureusement, dans Mavo, il y a quelque chose qui nous permettra d'ajouter une ou deux fois la fonctionnalité appropriée à l'application - l'attribut mv-multiple . En utilisant cet attribut, nous indiquons à Mavo quels éléments de l'application peuvent être propagés . L'attribut mv-multiple transforme l'élément auquel il est ajouté en une collection modifiable d'éléments ( collection ). En même temps, Mavo ajoutera des contrôles aux éléments d'une telle collection, avec lesquels vous pouvez ajouter de nouveaux éléments à la collection, supprimer ceux existants et organiser les éléments de la collection par glisser-déposer. Et oui, le style de ces commandes est également entièrement personnalisable!

Suivez le lapin blanc!

Si vous ajoutez l'attribut mv-multiple à un élément sans l'attribut property , Mavo corrigera automatiquement cette situation: ajoutez une propriété avec la collection de valeurs (ou collection2 , collection3 pour préserver l'unicité du nom).

Cependant, comme dans le cas du nom de l'application, je vous recommande d'utiliser l'attribut de propriété avec les collections: cela garantit la sécurité des données de l'application lorsque vous modifiez sa structure HTML.

Eh bien, ajoutons l'attribut mv-multiple à l'élément <article> de l'application pour transformer notre carte flash unique en une collection de cartes entièrement modifiable (notez que nous avons également ajouté l'attribut de propriété ):

 <article property="flashcard" mv-multiple> ... </article> 

Suivez le lapin blanc!

Mavo vous permet de spécifier le nom de la propriété comme valeur de l'attribut mv-multiple . Ainsi, nous pourrions décrire la collection de cartes un peu plus courte: <article mv-multiple="flashcard"> .

Notez que l'attribut mv-multiple doit être ajouté à l'élément propagé et non au conteneur dans lequel se trouve la collection. Une erreur très courante est lorsque les développeurs écrivent <ul mv-multiple> au lieu de <li mv-multiple> . Et au début, une telle erreur est difficile à détecter. Jusqu'à ce que, par exemple, les styles utilisés dans l'application le rendent évident.

N'hésitez pas à passer en mode édition. Vous avez remarqué que le bouton Ajouter une carte flash est apparu sous la carte? Organisons un essai routier pour elle: ajoutez quelques nouvelles cartes avec son aide. C'est juste quelque chose d'incroyable: on peut ajouter dynamiquement de nouvelles cartes à l'application, même s'il n'y a pas d'éléments correspondants dans son code source!

Suivez le lapin blanc!

Notez que l'ajout de l'attribut de propriété à l'élément <article> n'a pas rendu son contenu modifiable? Mavo considère cet élément comme un groupe . Cela se produit lorsque l'attribut de propriété est ajouté à un élément qui contient d'autres propriétés à l'intérieur de lui-même, c'est-à-dire des éléments avec l'attribut de propriété .

Mais ce n'est pas tout! Survolez n'importe quelle carte. Vous voyez que dans le coin supérieur droit de la carte, Mavo a ajouté trois nouveaux boutons (de gauche à droite): pour supprimer la carte, en ajouter une nouvelle et déplacer la carte existante. Et en passant votre souris sur l'un de ces boutons, vous pouvez facilement deviner à partir du rétroéclairage généré par Mavo à quelle carte ils se réfèrent.


Pratique, non?

Suivez le lapin blanc!

Les boutons générés par Mavo pour travailler avec des éléments de collection sont entièrement personnalisables . Par exemple, vous pouvez créer votre propre bouton pour déplacer un élément de collection en ajoutant la classe mv-drag-handle à l'élément HTML correspondant.

Gardez également à l'esprit que vous pouvez interagir avec tous les boutons pour travailler avec des éléments de collection à l'aide du clavier . Par exemple, placez le focus d'entrée sur le bouton de déplacement de la carte et utilisez les touches de curseur pour modifier la position de la carte dans la collection.

Attribut mv-storage

N'oubliez pas à la main!
https://codepen.io/dsharabin/pen/WNeYwpj

Maintenant que l'interface principale de la future application est développée, je propose de faire ce qui suit:

1. Passez en mode édition (si vous ne l'avez pas déjà fait auparavant).
2. Ajoutez quelques cartes, en indiquant le mot et sa traduction sur chacune d'elles.
3. Revenez en mode lecture.
4. Et ... rafraîchissez la page.

Aïe! Où sont passées toutes les données que nous venons de saisir? Mavo n'était-il pas censé les sauver? Qu'est-ce qui a mal tourné? Où nous sommes-nous trompés?

Seulement calme! En fait, nous n'avons jamais dit à Mavo qu'il devait enregistrer des données modifiables. De plus, nous n'avons pas indiqué où exactement il devait les enregistrer.

Alors faisons-le maintenant. Pour cela, Mavo a un attribut spécial - mv-storage . Il ne reste plus qu'à découvrir quelles valeurs il peut prendre. Et il s'avère que Mavo nous offre les possibilités les plus larges . Et les plugins - s'ouvrent encore plus!

Laissez notre application enregistrer des données dans le stockage local du navigateur - localStorage . C'est l'option la plus simple disponible dans Mavo et est idéale pour notre première application. Tout ce que nous devons faire est simplement d'ajouter l'attribut mv-storage avec la valeur locale à l'élément racine de l'application (c'est le nom de l'élément avec l'attribut mv-app , rappelez-vous?):

 <main mv-app="flashcards" mv-storage="local"> ... </main> 

Jetez maintenant un œil à la barre d'outils Mavo. Vous avez remarqué un nouveau bouton Enregistrer ? En plus de son objectif direct - pour enregistrer les modifications apportées à l'application - il a une autre fonction utile. Essayez à nouveau de modifier les données. Notez que le bouton Enregistrer est maintenant en surbrillance . Survolez avec votre souris et Mavo mettra en évidence les données que vous avez modifiées mais pas enregistrées!


Super, hein?

Cliquez sur le bouton Enregistrer et actualisez la page (il n'est pas nécessaire de passer en mode lecture). Eh bien, maintenant vos données sont enregistrées? Super! Nous sommes un pas de plus vers une application Web complète.

Attribut mv-autosave

Maintenant, notre application fonctionne de sorte que l'utilisateur doit cliquer sur le bouton Enregistrer chaque fois qu'il doit enregistrer les modifications apportées à l'application. C'est correct du point de vue de la sauvegarde des informations vitales, mais souvent les utilisateurs oublient de le faire. Comment être? Si seulement notre application pouvait enregistrer des données automatiquement à certains intervalles! "Et quoi, cela peut-il vraiment être fait avec l'aide de Mavo?" - demandez-vous. Et je répondrai avec joie et fierté que oui, c'est possible!

Ainsi, pour apprendre à l'application à enregistrer automatiquement les modifications apportées par l'utilisateur aux données, nous pouvons utiliser l' attribut mv-autosave . Vous devez l'ajouter à l'élément racine de l'application. La valeur de cet attribut est le nombre de secondes qui doivent s'écouler entre le moment où l'utilisateur apporte des modifications aux données et leur enregistrement par l'application. Nous apporterons les modifications appropriées à notre application:

 <main mv-app="flashcard" mv-storage="local" mv-autosave="3"> ... </main> 

Suivez le lapin blanc!

L'attribut mv-autosave="3" indique à Mavo d'enregistrer les modifications apportées à ces données toutes les trois secondes. La présence de ce type de retard entre les sauvegardes devient fondamentalement importante si le service (backend) choisi pour sauvegarder les données stocke un historique de leurs modifications (par exemple, GitHub et Dropbox ). L'absence d'un tel retard rendra l'histoire des changements tout simplement inutile.

Pour forcer Mavo à enregistrer immédiatement les modifications, vous pouvez définir l'attribut mv-autosave="0" ou simplement mv-autosave . Dans le même temps, le bouton Enregistrer sera supprimé (comme inutile) de la barre d'outils Mavo.

Pour voir et évaluer les modifications apportées à l'application, mettez à jour à nouveau les données sur l'une des cartes et faites attention au bouton Enregistrer . L'avez-vous remarqué? Au début, il a été mis en surbrillance, mais après trois secondes, il s'est éteint, indiquant qu'il n'y avait pas de données non enregistrées dans l'application. Maintenant, toutes les modifications sont enregistrées automatiquement!

Ainsi, la partie principale de notre application ressemble maintenant à ceci:

 <main mv-app="flashcards" mv-storage="local" mv-autosave="3"> <article property="flashcard" mv-multiple>  <p property="source">  </p>  <p property="translation"></p> </article> </main> 

La pratique est la voie de l'excellence!

Nous avons presque fini avec la version alpha de notre application. Hourra! C'est maintenant à votre tour de le rendre encore meilleur. Ne t'inquiète pas! Vous êtes armé de toutes les connaissances nécessaires pour accomplir la tâche que je vous offrirai.

Améliorez l'application afin que les cartes réunies autour d'un thème commun puissent être regroupées. Par exemple, dans un groupe tous les mots liés aux vêtements sont inclus, dans l'autre - les noms des professions, dans le troisième - les noms des aliments, etc.

Astuces!

Il existe plusieurs façons de résoudre le problème. C'est à vous de décider quelle voie choisir et quelle voie prendre. Mais je veux que vous réfléchissiez aux réponses à quelques questions qui pourraient vous aider à trouver une solution.

1. Quel élément HTML utiliserez-vous comme élément de regroupement (groupe) ? Il serait pratique pour les utilisateurs de l'application de donner un nom au groupe de cartes ( nom du sujet ), et aussi de minimiser ce groupe si nécessaire pour son titre.
2. Quel (s) attribut (s) allez-vous ajouter à l'élément sélectionné (sauf si, bien sûr, vous ajoutez quelque chose). Cet article sera-t-il une propriété ou une collection ?
3. Les utilisateurs de l'application auront-ils la possibilité d' ajouter de nouveaux groupes de cartes, de supprimer ceux qui ne sont pas nécessaires, de déplacer à la fois les groupes eux-mêmes et les cartes entre différents groupes?

Soit dit en passant, vous pouvez décider que la combinaison de cartes en groupes en utilisant des éléments séparés n'est pas votre méthode. Et c'est normal. Vous souhaitez peut-être simplement ajouter des tags ( hashtags ) correspondant au sujet sur les fiches. Et ce sera aussi une excellente décision!

Pour «mettre la main dessus» et en savoir un peu plus sur Mavo et ses capacités, implémentez ces deux solutions.

Attribut mv-bar

Nous continuerons d'étendre les fonctionnalités de notre application. Nous l'avons configuré pour que les données utilisateur soient stockées dans le stockage local du navigateur. Mais notre application reste mono-utilisateur: les utilisateurs ne peuvent pas partager leurs cartes avec d'autres utilisateurs. Et ce serait formidable d'avoir une telle opportunité! Et apprendre une langue étrangère dans une entreprise est beaucoup plus amusant, non?

Existe-t-il un moyen dans Mavo pour permettre aux utilisateurs d'exporter leurs cartes depuis l'application et d'importer quelqu'un d'autre dedans? Nous avons de la chance! Et cette fonctionnalité est prise en charge dans Mavo, comme on dit, «prête à l'emploi». Bien sûr, cela ne rendra pas notre application multi-utilisateur au sens canonique du mot, mais la présence d'une telle fonctionnalité est déjà beaucoup pour une application aussi simple, vous devez en convenir.

N'oubliez pas à la main!

https://codepen.io/dsharabin/pen/ZEzmWBr

Pour de telles tâches, Mavo possède l'attribut mv-bar , avec lequel vous pouvez spécifier les boutons à afficher dans la barre d'outils Mavo (si des boutons sont nécessaires). En règle générale, cet attribut est ajouté à l'élément racine de l'application. Les boutons eux-mêmes ont des identifiants très logiques (en termes de leurs noms en anglais). Voici quelques-uns d'entre eux: éditer, importer, exporter .

Comme nous voulons seulement ajouter des boutons à l'ensemble déjà sur la barre d'outils Mavo, nous pouvons utiliser la soi-disant syntaxe relative . Cette syntaxe nous permet d'ajouter et de supprimer des boutons de l'ensemble par défaut sans avoir à lister explicitement tous les boutons qu'il contient. , , — mv-bar with , ( ) :

 <main mv-app="flashcards"   mv-storage="local"   mv-autosave="3"   mv-bar="with import export">   ... </main> 

— !

- : . , .

. MavoScript

, « », : « ?!» - . ? .

«» , - Mavo.

, (, , ) . , , property . — , .

, , , Mavo ( HTML-). . : [] . . , - , .

!

, Mavo, MavoScript . ( Microsoft® Excel, Apple Numbers Google Sheets) , , . .

Mavo MavoScript , , , : , , , , .

, MavoScript , .

Mavo MavoScript .

!

https://codepen.io/dsharabin/pen/rNBQeMv

. , [source] flashcard . , source translation :

 ... <p property="source">  </p> [source] <p property="translation"></p> ... 

? , , source . ? !

. source . , , ? [source] , , source , : , . ?!

, , , — . Pourquoi? [source] , , — source . - .

[source] flashcard , ? Comme ça:

 ... [source] <article property="flashcard" mv-multiple>  ... </article> ... 

? , . , source (!) . , , . ?

. ? , , source ? , , source translation . ? : [source] [flashcard] . :

 ... [flashcard] <article property="flashcard" mv-multiple>  ... </article> ... 

, ? , — . ( (!)).

, , ( , , ), , . , Mavo . MavoScript count() , .

!

MavoScript — . , .

— . , .

1. , , , .
2. .

, count() . , :

 ... <span>[count(flashcard)] .</span> <article property="flashcard" mv-multiple> ... </article> ... 

, , — !

— !

, Mavo … . , , - . , .

, , ( ).

!

, , . where filter() .

, , . : , ? , .

( , ) — .

!

https://codepen.io/dsharabin/pen/WNeYwxR

, : . , ? , :

• , , (), — ;
• , , (), , , .

« , JavaScript?» — . Oui , Mavo — ?!

, , , :

 ... <article property="flashcard" mv-multiple> ... <section>  <h2> </h2>  <button> </button>  <button> </button> </section> </article> ... 

mv-action

Mavo , , — ( custom actions ).

, mv-action . , . , — .

!

mv-action <form> , .

mv-action . , MavoScript , : add(), set(), move() delete() .

, , , , .

: Mavo mv-action . , . , mv-action="" , mv-action="[]" . , , , , .

, . : . move() . , — () . , , 0 .

, : , . . . :

 ... <article property="flashcard" mv-multiple> ... <button mv-action="move(flashcard, 0)"> </button> ... </article> ... 

, mv-action flashcard . .

, . , , , ?

, : , . , , (). , , , . ?

, . : , — flashcard — . flashcard . - :

 ... <article property="flashcard" mv-multiple> ... <button mv-action="move(flashcard, count(flashcard))">      </button> ... </article> ... 

! .

?

. <meta>

, , , [count(flashcard)] , flashcard . , flashcard . , !

, [count(flashcard)] flashcard - , . — flashcard . Mavo , , ( computed properties ).

!

https://codepen.io/dsharabin/pen/NWKENNb

, , HTML-. HTML-, <meta> : <meta property="" content="[]"> . : <meta> , .

!

, , , .

flashcardCount . , flashcard ( ):

 ... <meta property="flashcardCount" content="[count(flashcard)]"> <article property="flashcard" mv-multiple>  ... </article> ... 

: , . :

 ... <meta property="flashcardCount" content="[count(flashcard)]"> <article property="flashcard" mv-multiple> ... <button mv-action="move(flashcard, flashcardCount)">      </button> </article> ... 

! . Félicitations!

— !

— $all .

$all , , . , . $all flashcardCount . ? Pourquoi?

, . , , ( ) . .

Conclusions

, -. JavaScript. , , -. , « ». .

, — , , , . , , , . , HTML- Mavo, :

1. ( <head> ) JavaScript- CSS- Mavo.
2. mv-app .
3. , ( / , / ) , property .
4. mv-multiple , .
5. Mavo, , mv-storage .
6. , . , mv-autosave .
   
   , :
7. Mavo ( Mavo ). mv-bar , , , .
8. (expressions) ( ) (property) . ( ) , . Mavo , MavoScript .
9. (custom actions) . mv-action .
10. (computed properties) — , . , <meta> .

. ? , . . , , , (, ). , . ! . - — ! ? 17 — ( « » )!

, Mavo, — , . Mavo . : Mavo -, .

Mavo . -, . Comment? :

• Mavo, , — Mavo ;
• , , , ;
• Mavo, , , , — ;
• , Mavo Twitter , , , , «» (, Gitter Mavo);
• , Mavo — !

Mavo!

.

, ( Lea Verou ), ( ), : , - . , !

( James Moore ). , « JavaScript » Udemy , , «» . !