Ce blog explique comment utiliser NativeScript et Kinvey aussi rapidement que possible.
NativeScript vous permet de créer des applications natives iOS et Android à partir d'une seule base de code et . Progress Kinvey facilite l’ajout de la plomberie principale permettant à votre application de fonctionner. Ensemble, les deux technologies vous permettent de créer rapidement des applications mobiles modernes.
Dans ce blog, nous allons examiner avec un certain avis comment faire pour utiliser NativeScript et Kinvey aussi rapidement que possible. Si vous suivez l'intégralité de l'article, vous allez créer un nouveau compte Kinvey, un environnement de développement NativeScript et commencer à tirer parti de certaines des puissantes fonctionnalités d'arrière-plan offertes par Kinvey. À la fin, vous aurez une application qui ressemble à ceci:
Tout d’abord, pour utiliser Kinvey, vous devez d’abord créer un compte Kinvey gratuit, pour cela, rendez-vous sur console.kinvey. com / inscrivez-vous et indiquez votre e-mail et un mot de passe pour vous enregistrer. Enfin, copiez votre clé de l'application et le secret de l'application, et les coller dans un endroit pratique. (Si vous perdez ces clés, je vous indiquerai où les retrouver ultérieurement dans cet article.) NativeScript est un cadre permettant de créer des applications iOS et Android à l'aide de JavaScript et, par conséquent, de commencer à utiliser NativeScript, vous devez configurer un environnement pour écrire votre code. Il existe différentes façons de procéder, mais la plus simple – celle que nous utiliserons pour cet article – est NativeScript Playground. NativeScript Playground est un environnement basé sur un navigateur permettant de développer des applications NativeScript sans installer de dépendance locale. Tout ce dont vous avez besoin, c'est d'un appareil iOS ou Android. Allez-y et visitez Playground dans le navigateur de votre choix. Vous devriez voir un écran ressemblant à ceci: Pour commencer à développer dans Playground, vous devez télécharger et installer deux applications sur un périphérique iOS ou Android – NativeScript Playground et NativeScript Preview Vous pouvez trouver les applications en cherchant “NativeScript Playground” et “NativeScript Preview” dans l'App Store iOS ou Google Play, ou en utilisant les liens ci-dessous. Une fois ces deux applications installées sur votre appareil et prêtes à l'emploi, ouvrez l'application NativeScript Playground sur votre appareil et appuyez sur le bouton Analyser le code QR. Le moyen le plus simple de connecter des applications NativeScript à la fonctionnalité Kinvey consiste à utiliser le Kinvey SDK for NativeScript qui propose une série de API JavaScript faciles à utiliser. NativeScript Playground inclut le kit de développement logiciel Kinvey dans chaque application que vous créez, ce qui vous permet de commencer immédiatement à utiliser les API du kit de développement logiciel sans qu'aucune configuration supplémentaire ne soit nécessaire. La première API à utiliser est Dans une étape suivante, vous pourriez prendre ce code et le coller dans votre application Playground actuelle, puis vous suivre, car toutes les applications Playground prennent en charge le kit de développement logiciel Kinvey tout-en-un. Cela étant dit, Personnellement, j'aime bien partir d'un modèle d'application plus complet qui comporte un peu d'échafaudage pour me faciliter la vie. Mon point de départ préféré pour les applications NativeScript et Kinvey est l'exemple «Belle forme de formulaire de connexion» tiré de l'exemple de code de NativeScript Marketplace . REMARQUE: La version de l'exemple que nous allons utiliser est basée sur Angular, mais si vous êtes un fan de Vue.js, vous pouvez utiliser cette Vue. Version basée sur .js du même échantillon de connexion . Ouvrez ensuite le fichier L'autorisation et la gestion des utilisateurs font souvent partie des amusements . ] Exigences de votre application moyenne, mais Kinvey les rend faciles. En fait, l'exemple d'application vous utilisez déjà un système de gestion des utilisateurs entièrement fonctionnel. Pour le tester, ouvrez votre application sur votre appareil, appuyez sur "Inscription" et enregistrez un nouvel utilisateur. Après cela, vous devriez voir un écran ressemblant à ceci: [1965 Indépendamment de la manière dont vous choisissez d'implémenter l'authentification pour vos applications, Kinvey Lorsque vous êtes tous prêts, voyons comment vous pouvez utiliser les données de Kinvey. CONSEIL: Pour en savoir plus sur le fonctionnement des utilisateurs dans Kinvey, consultez le site . ] Comprendre les utilisateurs dans Kinvey de Brian Rinaldi Maintenant que Kinvey et NativeScript sont configurés et que vous avez la gestion des utilisateurs en place, voyons comment travailler avec données. Dans Kinvey, les blocs de construction permettant de manipuler des données sont appelés Dans la console Kinvey, appuyez sur le lien Collections affiché dans la capture d'écran ci-dessous. Dernière étape avant d’utiliser cette collection, configurons ses autorisations. Kinvey propose un ensemble robuste d'autorisations basées sur les rôles qui déterminent quels utilisateurs peuvent accéder aux collections et quelles actions ils sont autorisés à exécuter sur ces données. Pour entrer cette configuration pour votre nouvelle collection, recherchez et cliquez sur l'icône représentant un engrenage dans l'interface utilisateur de la console Kinvey (voir la capture d'écran ci-dessous). Maintenant, configurez et préparez-vous. À l'étape suivante, voyons comment utiliser votre nouvelle collection dans votre application. Comme avec l'authentification, utiliser des données Kinvey dans des applications NativeScript est Il suffit de quelques appels simples au kit de développement Kinvey pour le visualiser, pour revenir à votre application dans NativeScript Playground. Vous devez effectuer quelques modifications pour utiliser votre nouvelle collection. Commencez par créer un nouveau Prenez la peine de prendre un moment pour apprécier à quel point le kit de développement logiciel Kinvey facilite l’interaction avec vos données. Récupérer des données est aussi simple qu’appeler Ouvrez ensuite les applications de votre application. CONSEIL: vous avez besoin d'aide pour apprendre la syntaxe angulaire dans ce code? Consultez notre didacticiel NativeScript Angular dans NativeScript Playground . Maintenant que vous disposez d'un service pour utiliser votre collection Kinvey, vous devez modifier votre application pour l'utiliser. Pour ce faire, ouvrez votre fichier Il y a un peu de code ici qui nécessite quelques notions de base dans NativeScript pour être compris. Si vous débutez dans NativeScript et que vous avez du mal à suivre une partie de la syntaxe, il serait peut-être utile de prendre une minute pour consulter le didacticiel de démarrage de NativeScript sur NativeScript Playground . Le code qui interagit avec votre nouveau service est assez simple cependant. Pour les voir, notez l'appel à Pour définir l'interface utilisateur de cette application, ouvrez votre fichier Enfin, collez le code suivant dans votre fichier Enregistrez toutes ces modifications et vous devriez maintenant voir l'interface utilisateur suivante sur votre appareil pour la gestion des tâches: Dans cet article, nous avons étudié comment rapidement utiliser NativeScript et Kinvey. Mais nous ne faisons qu’examiner en détail ce que ces deux technologies peuvent faire. Maintenant que vous disposez des bases, vous êtes prêt à approfondir et à exploiter certaines des fonctionnalités puissantes offertes par Kinvey. En particulier, vous voudrez peut-être vérifier les éléments suivants: Alors qu'attendez-vous? Si vous ne l’avez pas déjà, ouvrez un compte Kinvey gratuit visitez le NativeScript Playground et commencez à créer d’impressionnantes applications. ![Application finale "title =" Application finale "data-openoriginalimageonclick =" true "/> </a> [19659003] Commençons. </p>
<h2 id=](https://i0.wp.com/blog.arcoptimizer.com/wp-content/uploads/2019/01/comment-debuter-avec-kinvey-et-nativescript-fast.gif?ssl=1)
Kinvey.init () . qui est la méthode qui établit la connexion entre votre interface NativeScript et votre serveur Kinvey. Vous souvenez-vous de l'extrait de code que vous avez copié lors du processus d'inscription précédent de Kinvey? Ce code est un appel de Kinvey.init () avec les valeurs nécessaires pour établir la connexion. Cela ressemblait à ceci, mais il incluait vos valeurs appKey et appSecret : Kinvey.init ({
...
});
de l'échantillon / backend.service.ts de l'exemple, recherchez le fichier [1945904]. 6] kinveyAppKey et kinveyAppSecret et remplacez les valeurs de ces propriétés par les valeurs que vous avez copiées à partir de votre serveur Kinvey précédemment. Si vous avez perdu ces clés, vous pouvez les trouver en utilisant les trois points situés à côté du nom de votre application dans la console de Kinvey . Étape 4: configurez votre autorisation
Étape 5: configurez vos données
Étape 6: Utilisez vos données
. ] tasks.service.ts dans le dossier partagé de votre application. Dans Playground, vous pouvez le faire en mettant en évidence, le dossier partagé en cliquant sur le bouton + dans l'explorateur, puis en sélectionnant Ajouter un fichier, puis TypeScript. find () et mettre à jour des données est aussi simple qu’appeler save () . (Consultez le fichier de user.service.ts de votre application pour savoir comment Kinvey simplifie la gestion des fonctions d'authentification que nous avons examinées à l'étape précédente de cet article.) app.module.ts et ajoutez votre nouveau TasksService en tant que fournisseur. Le code complet devrait ressembler à ceci: import {NgModule, NgModuleFactoryLoader, NO_ERRORS_SCHEMA} depuis "@ angular / core";
importer {NativeScriptModule} de "nativescript-angular / nativescript.module";
importer {NativeScriptHttpClientModule} de "nativescript-angular / http-client";
importer {NativeScriptFormsModule} de "nativescript-angular / forms";
import {AppRoutingModule} de "./app-routing.module";
importer {AppComponent} de "./app.component";
importer {LoginComponent} de "./login/login.component";
importer {UserService} de "./shared/user.service";
importer {TasksService} de "./shared/tasks.service";
@NgModule ({
bootstrap: [
AppComponent
],
importations: [
NativeScriptModule,
NativeScriptFormsModule,
NativeScriptHttpClientModule,
AppRoutingModule
],
déclarations: [
AppComponent,
LoginComponent
],
fournisseurs: [
UserService,
TasksService
],
schémas: [
NO_ERRORS_SCHEMA
]
})
export class AppModule {}
home.component.ts et remplacez son contenu par le code suivant. import {Component, OnInit} de "@ angular / core";
importer {RouterExtensions} de "nativescript-angular / router";
importer {alert} de "tns-core-modules / ui / dialogs";
importer {TasksService} de "../shared/tasks.service";
importer {UserService} de "../shared/user.service";
declare var UITableViewCellSelectionStyle: any;
@Composant({
sélecteur: "app-home",
moduleId: module.id,
templateUrl: "./home.component.html",
styleUrls: ['./home.component.css']
})
La classe d'exportation HomeComponent implémente OnInit {
tâches = [];
textFieldValue = "";
constructeur (private userService: UserService, private tasksService: TasksService, private routerExtensions: RouterExtensions) {
}
ngOnInit (): void {
this.tasksService.get (). subscribe ((data) = => {
this.tasks = data;
}, () => {
alerte({
titre: "Tâches",
message: "Une erreur est survenue lors de la récupération de vos données"
});
});
}
onItemLoading (args) {
if (args && args.ios) {
// Empêcher le comportement par défaut d'iOS consistant à mettre en surbrillance un élément tapé dans un UITableView
// Voir https://stackoverflow.com/questions/46299915/remove-listview-item-highlight-on-tap-nativescript-angular-ios
args.ios.selectionStyle = UITableViewCellSelectionStyle.None;
}
}
onTaskCircleTap (tâche) {
const index = this.tasks.indexOf (tâche);
this.tasks [index] .completed =! this.tasks [index] .completed;
this.tasksService.save (tâche);
}
onReturnPress () {
if (this.textFieldValue.trim ()! == "") {
this.onButtonTap ();
}
}
onButtonTap () {
if (this.textFieldValue.trim () === "") {
alerte({
titre: "Tâches",
message: "Veuillez saisir une tâche.",
okButtonText: "OK"
});
revenir;
}
tâche var = {
nom: this.textFieldValue,
complété: faux
};
this.tasksService.save (tâche) .then ((newTask) => {
this.tasks.unshift (newTask);
})
this.textFieldValue = "";
}
Connectez - Out() {
this.userService.logout ();
this.routerExtensions.navigate (["/login"]{clearHistory: true});
}
}
tasksService.get () lors du chargement de votre composant et l'appel à tasksService.save () lorsqu'il choisit d'ajouter une nouvelle tâche. home.component.html et remplacez son contenu par le balisage suivant, qui crée une interface utilisateur de liste pour l'utilisation de votre collection de tâches.
home.component.css qui donne un style aux commandes de l'interface utilisateur que vous venez d'ajouter. Barre d'action {
couleur de fond: # 35495E;
}
Élément d'action {
Couleur blanche;
}
.entête {
couleur de fond: # 35495E;
Couleur blanche;
taille de police: 34;
poids de police: 600;
rembourrage: 0 15 15 15;
marge: 0;
}
.input-bar {
largeur de bordure: 0 0 1 0;
border-color: # E0E0E0;
}
Champ de texte {
taille de police: 16;
la couleur noire;
placeholder-color: # C1C1C1;
rembourrage à gauche: 0;
}
# add-task-button {
marge: 15 10 15 15;
rembourrage en bas: 3;
}
.list-entry {
rembourrage: 15;
}
.list-entry-icon {
largeur: 30;
hauteur: 30;
couleur: # 42B883;
taille de police: 25;
couleur de bordure: # 42B883;
largeur de bordure: 2;
rayon de bordure: 50;
marge droite: 10;
}
.completed .list-entry-icon {
couleur de fond: # 42B883;
}
.list-entry-text {
taille de police: 17;
alignement vertical: milieu;
couleur: # 35495E;
}
.completed .list-entry-text {
text-decoration: ligne directe;
couleur: # D3D3D3;
}
Source link