Comment débuter avec Kinvey et NativeScript – Fast

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:

Étape 1: Configurez votre compte Kinvey

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.

Consultez la documentation Kinvey pour en savoir plus sur l'utilisation de Kinvey dans d'autres environnements, tels que vos applications Web.

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.)

Étape 2: Configurez votre environnement NativeScript

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:

NativeScript ou NativeScript Sidekick . Mais Playground dispose de tout ce dont vous avez besoin pour commencer et nous vous recommandons fortement de l'utiliser dès que vous apprenez NativeScript et Kinvey.

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.

• NativeScript Playground
      
• Aperçu de NativeScript
      

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.

Étape 3: connectez votre application NativeScript à votre compte Kinvey

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 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 ({
   ...
}); 

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 .

dans votre navigateur. et scannez le code QR de cette application sur votre appareil.

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 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 .

de NativeScript Marketplace et recherchez "Kinvey"

Étape 4: configurez votre autorisation

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:

Kinvey Console puis cliquez sur l'option Utilisateurs dans la navigation.Vous devriez voir le nouvel utilisateur que vous venez d'enregistrer.

[1965 de Kinvey sur la création de MIC ou celle-ci . ] tutoriel de Brian Rinaldi . Lorsque vous aurez terminé, vous pourrez exploiter votre fournisseur d’authentification existant directement dans vos applications. Par exemple, voici à quoi ressemble le flux de travail dans une configuration Active Directory:

afficher le source de l'application ci-dessus sur GitHub si vous recherchez un exemple NativeScript et Kinvey de haute qualité à référencer.

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

Étape 5: configurez vos données

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.

SharePoint SQL Server , Salesforce SAP ou si vous avez des API REST existantes . Pour les besoins de cet article, nous allons garder les choses simples et utiliser les données intégrées de Kinvey pour la nouvelle collection «Tasks» que vous venez de démarrer.

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).

lire une description détaillée du fonctionnement du contrôle d'accès dans Kinvey dans la documentation Kinvey .

Maintenant, configurez et préparez-vous. À l'étape suivante, voyons comment utiliser votre nouvelle collection dans votre application.

Étape 6: Utilisez vos données

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 . ] 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.

import {Injectable} from "@ angular / core"; importer {Kinvey} de "kinvey-nativescript-sdk"; @Injectable () classe d'exportation TasksService {     magasin de données privé;     constructeur () {         this.dataStore = Kinvey.DataStore.collection ("Tâches");     }     get () {         requête const = new Kinvey.Query ();         // Triez par «heure de création de l'entité» décroissante pour placer les nouveaux éléments en haut.         query.descending ("_ kmd.ect");         renvoyer this.dataStore.find (requête);     }     enregistrer (tâche) {         renvoyer this.dataStore.save (tâche);     }     handleErrors (error: Kinvey.BaseError) {         console.error (error.message);         renvoyer Promise.reject (error.message);     } }

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 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.)

Ouvrez ensuite les applications de votre application. 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 {} 

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 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});
    }
}

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 à tasksService.get () lors du chargement de votre composant et l'appel à tasksService.save () lorsqu'il choisit d'ajouter une nouvelle tâche.

Pour définir l'interface utilisateur de cette application, ouvrez votre fichier 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.

Enfin, collez le code suivant dans votre fichier 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;
} 

Enregistrez toutes ces modifications et vous devriez maintenant voir l'interface utilisateur suivante sur votre appareil pour la gestion des tâches:

Étape 7: Faites des choses cool

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:

• FlexServices : les FlexServices sont des microservices Node.js à code faible et légers, utilisés pour les intégrations de données et la logique métier fonctionnelle. Ils constituent un excellent moyen d'ajouter une logique personnalisée à vos applications sans avoir à vous soucier de l'infrastructure, du déploiement, de la mise à l'échelle ou de la maintenance.
• Notifications push —Kinvey facilite la configuration et l'envoi de notifications push. vos applications iOS et Android.
• Stockage de fichiers —Kinvey vous permet de stocker et de récupérer des fichiers d'une taille maximale de 5 To et de les utiliser à l'aide d'un réseau de diffusion de contenu (Content Delivery Network) pour les performances.
• Et plus encore – Kinvey peut faire beaucoup, alors consultez la documentation de Kinvey pour obtenir une liste complète de tout ce qui est possible.

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.