Tout ce dont vous avez besoin avec Kinvey Studio Custom Code

Kinvey Studio possède de nombreuses fonctionnalités intégrées vous permettant de créer rapidement des applications Web et mobiles, mais il est également hautement personnalisable. Découvrez comment utiliser du code personnalisé pour activer des options infinies.

Kinvey Studio vous permet de créer facilement des applications Web et mobiles. De nombreuses fonctionnalités vous permettent de créer rapidement des interfaces, de glisser-déposer des éléments et d'utiliser des dispositions prédéfinies pour une application robuste. Bien entendu, notre équipe n’est pas omnisciente. Vous voudrez peut-être ajouter à votre application des éléments que nous n’avons pas encore créés. Dans de tels cas, nous avons créé un composant personnalisé qui vous permet d’ajouter le code nécessaire à la création de votre application. Avoir la possibilité d'ajouter du code personnalisé vous donnera une infinité d'options.

Permettez-moi de vous montrer comment ajouter votre propre code. Pour être tout à fait honnête, j'ai eu beaucoup de mal à trouver des fonctionnalités que je voulais ajouter et qui n'existaient pas encore dans notre plate-forme . N'ayez crainte, j'ai pensé à quelques bons exemples. Nous allons d’abord créer une application très rapide comportant une page de connexion, une liste maîtresse d’éléments, une page de détail pour chaque élément et un formulaire permettant d’ajouter d’autres éléments. Pour cet exemple, nous allons avoir une liste de tâches d’entrepreneur qui doivent être terminées par un cessionnaire.

Commençons à construire!

Création d’une application de base avec Kinvey Studio

Page de connexion

Lorsque vous créez une application avec Kinvey Studio une page de connexion est pré-construite pour vous, à la fois mobile et Web. L’application que nous construisons aujourd’hui est pour mobile et voici à quoi cela ressemble:

Par défaut, la page de connexion fournira à vos utilisateurs le support Kinvey. . Sur cette page de connexion, les utilisateurs pourront également s'inscrire. Lorsqu'un utilisateur s'enregistre, il est automatiquement ajouté à la liste des utilisateurs dans votre backend Kinvey. Vous voulez d'autres méthodes de connexion? Vous pouvez facilement ajouter d'autres options de connexion avec le service Mobile Identity Connect de Kinvey.

Page de liste maîtresse

Maintenant, nous pouvons faire entrer les utilisateurs, donnons-leur quelque chose à regarder. Nous allons commencer par créer une liste avec toutes les tâches qu'un entrepreneur a assignées à des ouvriers. La vue aura l'image actuelle du travail, le nom et une ligne indiquant la progression du travail. Pour créer une vue de liste, il suffit d'ajouter une nouvelle vue, de choisir la mise en page souhaitée et d'assigner les mappages de données de notre collection.

Voilà à quoi cette liste ressemble. comme sur mon téléphone (un iPhone SE (c'est le plus petit téléphone qui s'apparie toujours avec le dernier Apple Watch (j'ai de petites mains))). Juste un rappel, vous pouvez aussi exécuter ceci sur un appareil Android.

Nouveau formulaire de travail

Qu'est-ce qu'une liste si l'utilisateur ne peut pas en ajouter? Kinvey Studio rend cela très facile: il suffit de cliquer sur le mécanisme de réglage de la vue et de choisir "Créer un formulaire". Basé sur le modèle de données de votre collection, il choisira instinctivement les entrées de formulaire pour chaque entité de colonne. Vous pouvez réorganiser et personnaliser davantage le formulaire sur sa page de présentation.

Une fois que nous avons obtenu le formulaire, nous pouvons revenir à la vue d'origine et Ajoutez un bouton pour cliquer sur un nouveau travail. Nous affectons l'action de ce bouton pour ouvrir le formulaire que nous venons de créer. Aussi simple que ça ( ici est l'histoire de cet idiome, si vous étiez curieux comme moi).

Détails Page

Nous voulons que l'utilisateur puisse voir. les détails de ce travail quand ils cliquent dessus, donc nous devrons créer cette page de détail. Pour le moment, nous allons utiliser la disposition vierge, ajouter des composants et les renseigner en définissant des mappages de données. C'est le moyen le plus simple et le plus simple de créer une page de détail.

Nous pouvons même ajouter un formulaire également mappé à notre collection pour mettre à jour des informations relatives à un travail donné. nous regardons.

Ajout de la page de détail personnalisée

C’était très simple. Si facile que nous avons du temps supplémentaire avant notre date limite imaginaire. Quand est la dernière fois que tu as dit ça? Avec ce temps supplémentaire, nous pouvons personnaliser davantage la page de détails en ajoutant des fonctionnalités avec du code personnalisé.

Affichage du code personnalisé

Dans Kinvey Studio, vous pouvez choisir un affichage de code personnalisé pour le Web et le mobile. Nous faisons aujourd'hui un mobile basé sur notre framework NativeScript . En utilisant NativeScript, vous pouvez coder en Angular, Vue.js, TypeScript ou JavaScript pour créer des applications natives Android et iOS. Kinvey Code fonctionne avec la version angulaire de NativeScript, c'est donc ce que nous allons utiliser dans le composant de code personnalisé.

Comme vous pouvez le voir, Kinvey Code génère un html css et un fichier TypeScript avec les informations de configuration de base. Vous pouvez commencer à saisir le code à partir de zéro, mais aujourd'hui, nous le copions dans notre vue JobsDetail_Mobile actuelle. Nous pouvons ainsi comprendre comment ajouter du code personnalisé, mais voir immédiatement quelques modifications utiles.

Personnalisation du code existant

Lorsque nous importons le code de notre vue existante, nous voulons nous assurer de le modifier. au nom de fichier de notre nouveau composant dans le fichier TypeScript:

jobs-custom-detail-mobile.component.tns.ts

 @Component ({
    templateUrl: './jobs-custom-detail-mobile.component.html',
    styleUrls: ['./jobs-custom-detail-mobile.component.css']
})

&&

 La ​​classe d'exportation JobsCustomDetailMobileViewComponent implémente OnInit {

Une fois que tout est défini, nous voulons simplement nous assurer de définir la nouvelle vue détaillée comme destination de la navigation lorsqu'un utilisateur clique sur une tâche de la liste. ]

See Me Scrollin '

Pour passer au fichier modèle / html nous voulons d’abord nous assurer que la page défile car tout ce que nous avons répertorié sur la page ne pas tenir sur l'écran de l'utilisateur. Pour ce faire, nous devons simplement envelopper chaque morceau de code dans le ng-container avec un composant NativeScript ScrollView :

    
        
 ...
        
    

Obtenir le statut Se démarquer

Maintenant que nous pouvons tout voir avec facilité, faisons en sorte que le statut du travail ressorte avec une couleur. Pour ce faire, nous allons commencer à utiliser un peu de magie angulaire ngClass . Nous allons faire une déclaration conditionnelle qui vérifie si le statut est "En panne", "En cours" ou "Pas démarré". En fonction du résultat, l’arrière-plan de la section d’état devient respectivement jaune, vert et rouge.

Bien entendu, nous devons également ajouter les styles correspondants pour ces classes. Nous pouvons le faire dans le fichier css fourni:

 / ** jobs-custom-detail-mobile.component.tns.css ** /
.vert {
    couleur de fond: vert clair;
}
.rouge {
    couleur de fond: rose;
}
.jaune {
    couleur de fond: jaune clair;
}

Nous avons maintenant un moyen de différencier le statut afin que l'entrepreneur et son équipe sachent rapidement ce qui doit être travaillé.

Suppression des images superflues

Dans la dernière démo, vous avez peut-être remarqué que la photo du travail avait été affichée deux fois. Ceci est un défaut pour le formulaire que nous avons ajouté dans la section pour télécharger une image mise à jour. Puisque nous avons déjà la photo actuelle, nous pouvons la sortir du formulaire. Dans la vue prédéfinie, d'où provient ce code, nous recevons un avertissement lorsque nous essayons de modifier le code dans l'éditeur. En effet, ce code est généré lorsque vous manipulez la vue dans l'éditeur. Vraiment, c’est une grâce salvatrice que vous ne pouvez pas casser ce que vous avez créé. Comme n'importe lequel d'entre nous a déjà foiré quelque chose que nous avons créé en essayant de modifier un petit quelque chose ici et là (#thanksgoodnessforversioncontrol).

Depuis que nous avons quitté le pays du code généré, nous pouvons supprimer le code qui nous donne le supplément image. Prêt pour une longue ligne de code?

Il est bon de voir comment l'image stockée est importée, mais nous avons simplement besoin de celle que l'utilisateur souhaite télécharger. Cela signifie que dans * ngIf conditionnel et dans la valeur [src] nous pouvons supprimer || et tout ce qui suit. Il ne nous reste alors que:

Lorsque nous faisons défiler l'écran, aucune image ne figure dans la liste, mais lorsqu'un utilisateur souhaite mettre à jour une image, il peut voir un aperçu de l'image qu'il a choisie.

Livin 'That Pipe Dream

La dernière chose que je voulais faire était de rendre le nom du travail un peu plus lisible et de nettoyer la date. J'ai fait cela en utilisant des pipes angulaires .

 ...

 ...

 ...

Après avoir modifié ceci dans le code personnalisé, j'ai réalisé que j'aurais pu le changer dans la version préconfigurée de Kinvey Code fournie. Sous la section des propriétés, lorsque vous affectez du texte à une étiquette, vous pouvez réellement transmettre des expressions de modèle angulaire. Cela signifie que vous pouvez utiliser des tubes directement dans la section de saisie de texte de votre propriété d'affichage.

Voir, au moment où je pense que je dois faire quelque chose avec le code personnalisé , il s’avère que l’équipe de Kinvey Studio s’est occupée de. Voici à quoi cela ressemble maintenant, tout est beau et ordonné.

Ce dernier élément a pour effet de donner à notre application ce dont nous avons envie. Les vues et les composants préconfigurés nous permettent de créer facilement une application robuste et le code personnalisé nous permet d'obtenir tout ce que nous voulions ajouter.

Ressources, rien que pour vous;)

J'espère que vous êtes aussi confiant. inspiré et rempli de 80 millions d’idées de ce que vous voulez créer. Voici d'autres ressources pour vous aider dans votre manière de coder:

J'ai hâte de voir ce que vous créez. Bon codage!