L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Utilisation des connecteurs RapidData de Kinvey
Je n'en ai pas discuté publiquement auparavant, mais je viens de commencer dans un nouveau rôle en tant que développeur principal de frontend chez Justice League International. Bien que beaucoup d'entre vous en aient probablement entendu parler, vous ne savez peut-être pas ce qu'est une grande organisation JLI. Par exemple, voici une photo de juste la haute direction!
Source: https://www.bleedingcool.com/2017/09/06 / kevin-maguire-justice-league-cover /
Comme toute grande entreprise, notre équipe de développement est assez dispersée, avec des équipes autour du globe ainsi que quelques petites équipes qui opèrent à partir de différentes galaxies lointaines et de différentes dimensions. vous pouvez imaginer, cela peut compliquer le processus de développement.
Souvent, je suis bloqué en attendant que le développement du backend soit terminé avant de pouvoir aller de l'avant avec mon développement frontend.J'ai d'abord besoin de créer les tables de base de données. Attendez que les services / API soient construits par l'équipe de backend Enfin, je suis prêt à partir
Bien sûr, je peux simuler des données pour le frontend afin que je puisse au moins y aller, mais cela a généralement mené à certains ajustements importants lorsque les services / API réels sont effectués ou beaucoup de données masser pour obtenir des noms de champs et d'autres
Quand j'ai été affecté à la construction du frontend du nouveau répertoire des employés de l'organisation, j'ai décidé de construire une preuve de concept en utilisant les connecteurs RapidData de Kinvey pour voir s'ils pourrait aider à améliorer ce processus en me permettant de passer facilement de mes données factices à des données réelles sans changer mon code. Laissez-moi vous expliquer
Configurer ma collection
Kinvey propose un stockage de données NoSQL basé sur un nuage évolutif (appelé Collections). Il y a une tonne d'utilisations pour les collections, mais, dans mon cas, elles peuvent être particulièrement utiles pour simuler des applications.
Mon premier pas était d'amener quelques employés de JLI dans une nouvelle collection de Kinvey
Pour commencer, j'ai simplement utilisé le magasin de données Kinvey comme source de données de ma collection.
J'avais besoin de remplir rapidement cette collection. Heureusement, j'avais des données factices que je pouvais simplement importer via JSON.
[
{
"Photo": "/alias/ClarkKent.png",
" Fondateur ": 1,
"Statut": "Actif",
" Nom: "Clark Kent"
[19659017Cetobjetaétéinventéparl'auteur] {
"Photo": "/alias/BruceWayne.png",
"Fondateur": 1,
[19659019] "Statut": "Actif",
"Nom": "Bruce Wayne" [19659005]
[
"Photo": "/alias/DianaPrince.png",
" Fondateur ": 1,
"Statut": "Actif",
"Nom": " Diane Prince "
[ ]
"Photo": "/alias/BarryAllen.png",
"Fondateur": 1,
"État": "Actif",
"Nom": "Barry Allen"
} ,
"Photo": "/ alias / HalJordan.png ",
" Fondateur ": 1,
"Statut": "Actif",
"Nom:" Hal Jordan "
},
[19] "Fondateur": 1,
"État": "Actif",
"Nom:" John Jones "
19459018 et 19459019. ]
{
"Photo": "/alias/ArthurCurry.png" ,
"Fondateur": 1,
" Statut: "Actif",
"Nom": "Arthur Curry"
[
"Photo": "/alias/OliverQueen.png",
" Fondateur ": 0,
" Statut ":" Actif ",
"Nom": "Reine d'Oliver"
{
"Photo": "/alias/RayPalmer.png",
"Fondateur": 0,
"Statut": "Actif",
"Nom:" Ray Palmer " [19659005]
[
"Photo": "/alias/CarterHall.png",
" Fondateur ": 0,
"Statut": "Actif",
"Nom": "Carter Hall"
},
[
"Photo": "/alias/DinahLaurelLance.png",
"Fondateur": 0,
"État" : "Actif",
"Nom": "Dinah Laurel Lance"
[19659019] "Photo": "/alias/RalphDibny.png",
" Fondateur ": 0,
"État": "Décédé",
"Nom:" Ralph Dibny "
},
[1945DERNIERJOUR9020] {
"Photo": "/alias/JohnSmith.png",
"Fondateur": 0,
"Status": "Inconnu",
"Nom": "John Smith"
} ,
"Photo": "/ alias / ShieraHall.png ",
" Fondateur ": 0,
"Statut": "Actif",
" Nom: "Shiera Hall"
[19659017Cetarticlen'apasdetraduction] {
"Photo": "/alias/ZatannaZatara.png",
"Fondateur": 0,
"Status": "Actif",
"Nom": "Zatanna Zatara"
},
[
"Photo": "/alias/RonnieRaymond.png",
"Fondateur": 0,
"Statut": "Actif",
"Nom": "Ronnie Raymond"
}
]
C'était assez simple d'importer ceci dans ma nouvelle collection Kinvey
Très bien, avec l'ensemble de données ... il était temps de coder.
Travailler avec la collection Kinvey
Pour commencer, j'ai construit le répertoire des employés en tant qu'application web, puisque j'ai utilisé le SDK Kinvey, le code et les concepts pour travailler avec Kinvey resteront similaires quand je construirai pour d'autres plateformes
Le code HTML de mon exemple d'application est assez basique - consistant essentiellement en un simple wrapper dans lequel je chargerai les données des employés.
div [196592] 18] id = "enveloppe" style = "remplissage: 10px;" >
[19659017] < p > Chargement en cours ... </ p >
</ div [19659219]>
Bien sûr, j'ai besoin d'importer le SDK Kinvey HTML5 puis d'initialiser Kinvey avec ma clé d'application et mon secret d'application.
var client = Kinvey.init ({
AppTouche d'étiquette: 'kid_rJf4EsJ8f',
AppSecret: 'cf8e49769b83466db5b34f6ce1a83b77'
})
Pour sortir les employés, j'ai utilisé les littéraux de gabarit .
const employeeTemplate = templater` < div [19659218] classe = "coéquipier" >
img src = "images / $ {'Photo'}" = "$ {'Nom'}" >
anglais. div class "Détails" > [19459018Amos]
< h2 > $ {'Name'} </ h2 >
< p > Créateur: $ {'Founder'} < br > Statut: $ {'Status'} < / p >
[/ div > [19659005] </ div > `;
Le code pour convertir ce modèle en HTML final (ie remplissez les espaces réservés avec des données réelles) est une version légèrement modifiée d'un exemple de CSS Tricks (PS Zatanna est un énorme fan de CSS Tricks)
fonction templater (cordes, ... keys) {
fonction de retour (données) {
[19659266] let temp = strings.slice (),
parmis = '';
keys.forEach ((clé, i) => {
// ajusté ceci pour afficher le booléen comme oui / no plutôt que 1/0
thisItem = données [key];
if (thisItem === 1) {
thisItem = 'Oui'; [19659005] }
autre si (thisItem === 0) { ]
thisItem = 'Non';
}
temp [i] = temp [i] + aujourd'hui cet article;
}); [19459018
retour temp.join ('');
}
};
Enfin, voici le code pour obtenir les données de Kinvey, remplir le modèle et l'afficher. Je vais le parcourir dans un instant.
var promise = Kinvey.User.logout ()
.then (function () {
console.log ('déconnecté');
var utilisateur = nouveau Kinvey. Utilisateur ();
var promise = utilisateur.login ({
Nom d'utilisateur: 'webapp',
Mot de passe: 'password'
})
.then (fonction (utilisateur) {
console.log ('connecté');
getData ();
})
.catch (fonction (erreur) {
console.log (erreur);
});
})
[19459017EN|] .catch (fonction (erreur) {
console.log (erreur);
});
function getData () {
[19659017] var employees_ds = Kinvey.DataStore.collection ('Employés'),
recherche = nouveau Kinvey.Query (),
flux continu
query.descending ('Fondateur');
query.ascending (' Nom ');
flux = employees_ds.find (requête);
stream.souscrire (
Fonctionner surNext (employés) {
console.log ("données récupérées");
var wrapper = document.getElementById ('wrapper'); [19659005] wrapper.innerHTML = '';
employees.forEach (fonction (employé) {
wrapper.innerHTML + = employéTemplate (employé);
});
},
Fonction onError ( erreur) {
console.log (erreur);
[19659266]},
fonction onComplete () {
// ne fait rien
} [19659005] );
}
Il y a quelques couches de promesses emboîtées ici, alors permettez-moi de les disséquer.
Par souci de simplicité, je commence par déconnecter l'utilisateur existant (rappelez-vous qu'il s'agit d'un POC) et ensuite se reconnecter. Plutôt qu'un utilisateur implicite J'ai créé un compte de service pour l'application Web qui sera utilisée pour gérer les appels de données anonymes. Une fois que cela dépassera le stade POC, j'utiliserai probablement Mobile Identity Connect de Kinvey pour me connecter au système d'authentification d'entreprise de JLI et exiger une connexion avant d'afficher les données.
Une fois la connexion établie, j'interroge les employés collection à Kinvey (qui contient actuellement mes données fictives), triées selon qu'elles sont l'une de nos fondatrices et, accessoirement, par leur nom. J'utilise ces données pour remplir le modèle, puis afficher le code HTML sur la page.
Voyons le résultat.
Bien que n'étant certainement pas encore une "application complète", je voulais aller de l'avant pour voir à quel point il serait facile d'échanger des données en temps réel pour cette donnée fictive.Par ailleurs, notre chef de service, Barry Allen croyant au développement rapide d'applications et au déplacement rapide.
Configuration de mon connecteur RapidData
Les connecteurs Kinvey RapidData me permettent de connecter Kinvey à une source de données externe / tierce (SQL Server, Oracle, SAP, Salesforce, etc. Cette fonctionnalité facilite vraiment la configuration de cette connexion et même l'inspection des objets qu'elle contient Enfin, je peux utiliser cette connexion pour transmettre des données via une collection.
La première étape de la connexion à une connexion de données distante est pour être sûr que Kinvey peut y accéder à travers les pare-feu configurés.Dans mon cas, je voulais me connecter à SQL Se Rver s'exécutant sur Azure, qui offre la possibilité de configurer le pare-feu du serveur. J'ai juste ajouté une règle pour l'adresse IP où mon application Kinvey est en cours d'exécution (vous devrez travailler avec le support Kinvey pour vous assurer que la bonne IP est configurée).
Une fois les paramètres du pare-feu modifiés Il était temps de mettre en place mon service RapidData . Cela se fait via la console Kinvey en choisissant "Service Catalog" en haut à gauche de l'écran puis "Add a Service". J'ai ensuite choisi RapidData puis Microsoft SQL Server.
Voici les paramètres de ma base de données SQL Server.
Certaines choses clés à noter ici sont que, comme mentionné précédemment, j'ai utilisé une base de données Azure SQL. L'URL de l'hôte doit commencer par le protocole mssql: // . L'option de chiffrement doit être activée dans ce cas pour une base de données SQL Azure. Enfin, le compte de service est le nom d'utilisateur et le mot de passe de la base de données Azure SQL (pas mes informations d'identification Azure).
Une fois mes paramètres enregistrés, il m'a été demandé de créer un objet de service. J'ai choisi l'option "découvrir", qui trouve automatiquement tous les objets dans ma base de données SQL Server. Aux fins de cette application, j'ai choisi la table des employés.
À ce stade, Kinvey a automatiquement trouvé tous les champs de mon
Toutefois, je dois d'abord configurer les paramètres de base de mon objet service, comme indiqué ci-dessous. [19659005] 
Vous avez peut-être remarqué que les noms de champs de la base de données sont un peu plus verbeux que les noms utilisés dans ma collection. Full_Name contre Nom ou Founding_Member contre Founder Heureusement, j'ai été capable de mapper les noms des champs de la base de données aux noms que j'avais déjà utilisé - ce qui signifie que je n'ai même pas besoin de faire un seul changement dans mon code.
Il est à noter que le seul [19] 459003] requis Le mappage correspond au mappage _id sur la clé primaire de la table
Passage aux données dynamiques
Passons maintenant au passage difficile de notre source de données fictive à notre source de données en direct . Pour rendre les choses plus faciles, j'ai enregistré le processus.
Ha! Je plaisante ... Comme dirait Barry Allen, c'est aussi simple qu'une bataille avec le capitaine Boomerang
Source: http://www.writeups.org/captain-boomerang-flash-suicide-dc -comics-harkness /
Et voici l'application finale utilisant des données en direct sans aucun changement au code
Oh , et depuis Supes est un grand fan de l'ouverture, j'ai mis cette application simple sur GitHub avec les exemples de données et le script SQL pour peupler les données réelles, au cas où vous J'aimerais bien l'essayer vous-même, ne lui dites pas que je l'ai appelé Supes, s'il vous plait.
Source link