Ici, nous allons apprendre Plain Vanilla JS sans utiliser NodeJS ou des bibliothèques externes. Nous allons commencer dès le départ avec un cas d'utilisation en convertissant certaines données de feuille Google en JSON et en les stockant dans un compartiment AWS S3, puis en les récupérant à l'aide de plain js. La plupart des leçons commencent par un programme Hello World et pas grand-chose d'autre, mais ici, nous avons quelque chose à programmer tout de suite afin que nous puissions mettre en pratique nos tableaux et nos boucles qui sont les piliers clés de tout langage de programmation. De plus, vous pouvez faire une incursion dans le monde de la science des données ici et peut-être en faire une carrière comme je l'ai fait.
Lorsque nous étudions les données pour la première fois, nous pensons à SQL, mais il existe de nombreuses applications dans lesquelles SQL est excessif et inutile. Dans un tableau de bord avec quelques métriques, nous pouvons nous en sortir avec un simple fichier plat JSON comme source de données sans relation avec d'autres données. Les tableaux de bord peuvent utiliser ce format NoSQL et constituent un choix populaire pour les besoins de reporting des groupes marketing.
Pour configurer notre environnement, nous n'avons réellement besoin que de Google Chrome et de l'extension json chrome pour convertir les données d'une feuille de calcul en json. Ensuite, nous avons besoin d'AWS gratuit et d'un compartiment S3 comme site Web générique. Pour un IDE, nous utiliserons simplement un bloc-notes Windows. Nous aurons également besoin d'un réseau local pour récupérer nos données, car la récupération des données à partir du lecteur C ne fonctionnera pas car l'API de récupération javascript utilise le protocole http, un serveur Web est donc nécessaire pour cela. Avant de rendre public AWS gratuit, nous allons d'abord configurer un serveur Web local pour tester nos données. Nous utiliserons du Python simple pour cela.
mettre en place l'environnement
étapes pour configurer un serveur Python local et un fichier d'index
Avant de créer un serveur distant AWS, nous devons d'abord configurer un serveur Web local à l'aide de Python. Voici comment procéder
Découvrez d'abord si Python est installé... ouvrez une invite de commande qui sera par défaut votre dossier personnel c:Usersyourname et tapez python. Si les informations de version s'affichent, alors il est installé et vous pouvez passer à l'étape 6 ci-dessous (mais assurez-vous d'abord qu'un fichier d'index est enregistré dans votre dossier personnel)
si vous n'avez pas installé python, suivez ces instructions
Serveur Python sous Windows
1 allez dans la zone de recherche et tapez cmd puis appuyez sur l'invite de commande, un écran noir s'ouvrira avec le chemin d'accès à votre dossier personnel (généralement C: UsersyourName)
2 tapez en python, s'il est installé, il affichera un numéro de version
3 s'il n'est pas installé, le bouton Obtenir apparaît, appuyez dessus et le téléchargement s'installera en quelques minutes (ou téléchargez simplement Python depuis Chrome)
4 une fois complètement installé, rouvrez l'invite cmd et tapez à nouveau python
5 informations de version s'afficheront... voici par où commencer si python est déjà installé
6 tapez python -m http.server et cela démarre le serveur (gardez cette fenêtre cmd ouverte)
7 assurez-vous d'avoir enregistré un fichier d'index dans le dossier personnel (dans l'explorateur de fichiers, cliquez sur c : puis sur Utilisateurs puis sur votre nom pour ouvrir le dossier personnel)
7a gardez cmd ouvert pendant que vous accédez à localhost à l'étape 8... la fermeture de cmd nécessite de rouvrir et de recommencer
8 allez sur Chrome et tapez localhost:8000 et votre page d'index par défaut apparaîtra....voir ci-dessous pour créer un fichier d'index
Serveur Python sur Mac
sur un Mac, ouvrez un terminal et commencez par l'étape 2 ci-dessus ... sauf qu'il faudra peut-être essayer 3 options différentes ci-dessus en fonction de la version de Python préinstallée. Notre dossier personnel doit être le dossier dans lequel Python est installé et le même que le dossier du terminal dans lequel nous démarrons le serveur.
essayez ceci d'abord
Comment créer un fichier d'index (accueil) dans notre chemin Python... enregistrez-le dans le même dossier où réside le serveur Web. Copiez ce code et enregistrez-le sous index.html
<!DOCTYPE html> <html lang="en-US"> <header> </header> <body> <p> hi there, this is our first html page </p> </body> </html>
préparer quelques données
1 copiez ces données et collez-les dans une feuille Google vierge
c'est notre société fictive avec une base de données de commandes
order_no,order_date,product_line,dollar_amt,product1,product2,product3 12340,01-03-22,prod1,400,400,0,0 12341,01-02-22,prod2,50,0,50,0 12342,1-16-22,prod3,50,0,0,50 12343,1-17-22,prod1,100,100,0,0 12344,1-15-22,prod2,50,0,50,0 12345,2-5-22,prod1,100,100,0,0 12346,2-6-22,prod3,20,0,0,20 12347,2-7-22,prod1,100,100,0,0 12348,3-23-22,prod2,200,0,200,0 12349,3-5-22,prod3,20,0,0,20 123410,3-29-22,prod1,100,100,0,0 123411,3-25-22,prod1,100,100,0,0 123412,4-23-22,prod1,500,500,0,0 123413,4-24-22,prod2,100,0,100,0 123414,5-10-22,prod3,50,0,0,50 123415,5-15-22,prod1,500,500,0,0 123416,5-25-22,prod2,50,0,50,0
TRÈS IMPORTANT - après avoir collé les données et pendant qu'elles sont toujours en surbrillance, dans les feuilles Google, appuyez sur les données puis divisez le texte en colonnes
2 récupérez l'extension json chrome
activez Chrome pour enregistrer au format JSON avant de créer la feuille.
J'ai trouvé ce raccourci simple qui ajoute une icône JSON à la barre d'outils de la feuille Google... il s'agit d'une extension Chrome
allez d'abord sur ce lien https://chromewebstore.google.com/detail/sheets-to-json/enmkalgdnmcaljdfkojckdbhkjmffmoa
puis appuyez sur Ajouter à Chrome, à l'extrême droite de la page
puis ouvrez une feuille Google vierge et vous verrez l'icône JSON comme dernier élément de la barre d'outils en haut de la page
3 transformez vos données en json
collez les données ci-dessus dans la feuille, puis textez dans les colonnes, puis appuyez sur l'icône json et accédez aux téléchargements pour obtenir votre fichier json
4 enregistrez ce fichier json dans le même dossier où résident Python et votre fichier d'index... Je l'ai enregistré sous le nom de commandes.json
exécuter notre programme
5 récupérer les données de votre fichier d'index... tester notre configuration de serveur et de fichiers
modifiez votre fichier index.html pour qu'il contienne le code suivant qui est différent du code que nous utiliserons ci-dessous pour accéder aux données depuis un serveur public
<!DOCTYPE html> <html lang="en-US"> <header> </header> <body> <p> hi there, this is our first html page </p> </body> </html>
6 appelez localhost:8000 et affichez les données
7 après avoir joué avec json sur un serveur local, nous pouvons ensuite créer un bucket S3 public dans AWS
Configuration d'un compartiment AWS S3 en tant que serveur public
Le moyen le plus simple de stocker un fichier JSON à distance est dans AWS S3. En ne créant pas de schéma dans un serveur de données traditionnel, nous devenons sans serveur. Nous sommes dans le cloud AWS avec S3 où nous pouvons nous connecter à notre lien de compartiment depuis n'importe où. Comme indiqué précédemment, l'approche noSQL S3 présente certaines limites. Mais cela présente aussi de grands avantages. Lorsque nous travaillons avec des données, la nature humaine a tendance à vouloir n’utiliser qu’un seul tableau, comme à l’époque où nous nous appuyions fortement sur un seul tableau Excel. Ce format de fichier plat peut gérer quelques mesures afin que nous ne bombardions pas notre public de complexité. Un cas d'utilisation idéal pour un fichier plat est un simple tableau de bord.
Nous créons d’abord un bucket AWS s3, puis nous téléchargeons le fichier JSON. Voici comment nous procédons :
1 Inscrivez-vous à l'offre AWS gratuite, accédez à S3 depuis la console AWS et créez un nom de bucket unique
2 rendez-le public, en accédant à l'onglet Autorisations du compartiment pour désactiver le blocage de l'accès public - accédez à la section Bloquer l'accès public, modifiez, décochez et enregistrez
3 restez dans l'onglet Autorisations, puis modifiez la politique du compartiment, effacez ce qui s'y trouve et remplacez-le par ce qui suit, puis enregistrez les modifications (n'oubliez pas de remplacer le nom de votre compartiment ci-dessous par le nom réel)
order_no,order_date,product_line,dollar_amt,product1,product2,product3 12340,01-03-22,prod1,400,400,0,0 12341,01-02-22,prod2,50,0,50,0 12342,1-16-22,prod3,50,0,0,50 12343,1-17-22,prod1,100,100,0,0 12344,1-15-22,prod2,50,0,50,0 12345,2-5-22,prod1,100,100,0,0 12346,2-6-22,prod3,20,0,0,20 12347,2-7-22,prod1,100,100,0,0 12348,3-23-22,prod2,200,0,200,0 12349,3-5-22,prod3,20,0,0,20 123410,3-29-22,prod1,100,100,0,0 123411,3-25-22,prod1,100,100,0,0 123412,4-23-22,prod1,500,500,0,0 123413,4-24-22,prod2,100,0,100,0 123414,5-10-22,prod3,50,0,0,50 123415,5-15-22,prod1,500,500,0,0 123416,5-25-22,prod2,50,0,50,0
4 puis, toujours dans l'onglet autorisations allez sur cross origin (cors), éditez et remplacez par ci-dessous et enregistrez
<!DOCTYPE html>
<body>
<div id="myData"></div> <!--data result displays in this html div-->
<script type="text/javascript">
convert(); //run the convert function..this converts json to html and displays to the front end in the myData div
// async is needed to run await which is the newest way to return a promise..await must be used inside a function
//When you then put await in front of a function you're instructing the program to wait until that operation is complete before moving on.
async function convert() {
//let response = await fetch('https://rickd.s3.us-east-2.amazonaws.com/orders4.json'); //get data from rickd s3 bucket in aws
//replace rickd with your bucket name
let response = await fetch('orders.json'); //get data locally instead of from s3..orders.json is in same folder where python is installed
let data = await response.json(); //getting data array in json format...waiting for all the data to come in
//then iterate over javascript array for as many times as there are js objects inside the array
for (var i = 0; i < data.length; i++) {
data[i].product1 = parseInt(data[i].product1); //this converts from string to int just the val for product1
} //end for loop
//we are rendering the array and not data in table format
myData.innerHTML = JSON.stringify(data, null, "\t"); //first stringify json object then render result inside html div tag
console.log(JSON.stringify(data, null, "\t")) //this is more readable, this is the pretty print..press ctrl-shift-J to view
//console.log(JSON.stringify(data)) //prints all as one line / a string, this is the record format
} //end function
</script>
</body>
<!-- next up..we need to return this data in table format-->
</html>
5 Accédez à l'onglet Propriétés et appuyez sur Hébergement Web statique, le dernier élément. Cliquez ensuite sur modifier puis activer puis enregistrer. Cela transforme le lien de votre bucket en un site Web public.
6 Revenez à l'onglet Objets et appuyez sur Télécharger, puis allez à l'endroit où vous avez enregistré votre fichier JSON nouvellement créé et terminez cette opération. Votre fichier json sera désormais en s3.
7 Une fois le fichier JSON téléchargé avec succès, il apparaîtra dans la section objets de votre compartiment s3. Double-cliquez sur le fichier JSON et vous serez dans l'onglet Propriétés où vous verrez Aperçu des objets. Cliquez sur l'URL de l'objet fournie et les données JSON brutes apparaîtront. Copiez et enregistrez ce lien URL quelque part car vous en aurez besoin pour récupérer des données à partir de Javascript. Ce lien URL permet d'accéder au site Web générique nouvellement créé, un compartiment S3 accessible au public qui sert de site Web temporaire. Vous pouvez enregistrer des fichiers dans ce compartiment et les partager avec d'autres à tout moment.
8 L'accès à notre fichier json depuis AWS nécessite un codage différent de celui utilisé sur un serveur local. Nous devons d’abord fournir à l’utilisateur un lien vers notre page Web. Mon lien public vers nos données de commandes fictives est
https://rickd.s3.us-east-2.amazonaws.com/orders4.json Ensuite, notre code devrait ressembler à ceci, qui est différent de notre code d'origine. Pour ce code au lieu d'afficher notre tableau nous ajoutons des éléments de tableau donc l'affichage est au format tableau
<!DOCTYPE html> <html lang="en-US"> <header> </header> <body> <p> hi there, this is our first html page </p> </body> </html>
Ensuite, voici le même code où nous ajoutons des en-têtes et du style
order_no,order_date,product_line,dollar_amt,product1,product2,product3 12340,01-03-22,prod1,400,400,0,0 12341,01-02-22,prod2,50,0,50,0 12342,1-16-22,prod3,50,0,0,50 12343,1-17-22,prod1,100,100,0,0 12344,1-15-22,prod2,50,0,50,0 12345,2-5-22,prod1,100,100,0,0 12346,2-6-22,prod3,20,0,0,20 12347,2-7-22,prod1,100,100,0,0 12348,3-23-22,prod2,200,0,200,0 12349,3-5-22,prod3,20,0,0,20 123410,3-29-22,prod1,100,100,0,0 123411,3-25-22,prod1,100,100,0,0 123412,4-23-22,prod1,500,500,0,0 123413,4-24-22,prod2,100,0,100,0 123414,5-10-22,prod3,50,0,0,50 123415,5-15-22,prod1,500,500,0,0 123416,5-25-22,prod2,50,0,50,0
Partie 2
Array - la structure de données la plus importante
En javascript, nos données sont structurées sous forme de paires clé-valeur entourées d'accolades et délimitées par des virgules, un tableau contient plusieurs objets javascript, chaque objet représentant une ligne de données. C'est ce qu'on appelle le format JSON ou Javascript Object Notation.
Bouclage / Itération - la boucle la plus importante est la boucle for mais vous devriez étudier d'autres types de boucles. Une boucle for parcourt un tableau de données et effectue une opération à chaque passage. Dans notre cas d'utilisation, il affiche simplement les données sur le frontend via une requête de récupération.
une fonction
Une fonction est un bloc de code, un ensemble d'instructions, qui s'exécute en réponse à un certain type d'événement, comme appuyer sur un bouton. Dans certains cas, les fonctions ne sont pas nécessaires, mais dans d'autres cas, une fonction est requise pour qu'un code fonctionne correctement. Les fonctions ont un nom ou sont anonymes. Ils peuvent être appelés ou être auto-exécutables. La redoutable notation fléchée est intimidante au début mais elle est largement utilisée alors habituez-vous-y.
logique conditionnelle Enfin et surtout, nous avons également l'instruction if/else. if(condition) {alors fais ceci} else {faites ça}
en conclusion, il est nécessaire d'étudier tous ces sujets pour acquérir plus de connaissances car je ne fournis qu'un petit résumé ici dans cette leçon. Je ne fournis qu'une feuille de route, une sorte d'introduction, et vous, en tant que programmeur, devez apprendre le reste.
Bon codage !!
addenda
notre cas d'utilisation simple js, nosql est un graphique à barres où vous pouvez trouver le code ici... sur https://dev.to/rickdelpo1/stacked-bar-chart-using-a-json-data- source-plain-vanilla-javascript-plain-css-and-no-chart-libraries-2j29
à propos de l'auteur Rick Delpo.. https://javasqlweb.org/about.html
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
La différence entre obtenir et publier
numéro de série cad2012 et collection de clés
Comment illuminer le moment des amis proches de Douyin
Quel logiciel est l'âme ?
Quelles sont les méthodes de tri ?
Quelle est la différence entre passer par valeur et passer par référence en Java
Explication détaillée du fichier de configuration du quartz
À quel point le Dimensity 6020 est-il équivalent à Snapdragon ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
