5 conseils pour adapter les applications Web aux besoins de vos clients

Personnaliser l'interface de vos applications OpenEdge avec Kendo UI Builder est plus facile qu'il n'y paraît, même si vous êtes nouveau sur OpenEdge comme moi. Voici mes meilleurs conseils.

Quand j'ai découvert le générateur d'interface utilisateur Progress Kendo, je ne savais rien de Progress OpenEdge . Ce que j'ai eu, c'est une formation en conception utilisateur pure et une expérience d'interface utilisateur Kendo en tant que diplômé de la piste Front-End Telerik Academy . Après une présentation en avant-première et un atelier pratique lors de la conférence 2016 EMEA Progress User Group, j'ai appris que le manque de connaissances dans OpenEdge ne devait pas être une pierre d'achoppement pour moi dans la conception ou la modification du front-end d'une interface utilisateur Kendo. Application Builder.

Cela n'a pas à être pour vous non plus. Voici mes cinq trucs et astuces pour que votre équipe puisse personnaliser des applications avec Kendo UI Builder .

La pile technologique et la structure utilisées par Progress Kendo UI Builder pour offrir des expériences Web se rapporte bien à ce que j'ai appris à l'Académie et que j'utilise encore quotidiennement dans mon travail de concepteur numérique et de développeur front-end.

Il ne m'a pas fallu longtemps pour découvrir ce que Kendo UI Builder avait à offrir, et je pouvais facilement trouver tout ce que je voulais et dont j'avais besoin lorsqu'on me demandait de faire des personnalisations et de peaufiner l'application. La structure Angular JS et le style simple de l'application. Le fichier css a rendu les tâches faciles et amusantes.

Voici quelques-unes de mes observations, trucs et astuces sur la façon dont je pense que vous devriez aborder étendre votre application OpenEdge existante au Web à l'aide de Kendo UI Builder:

1. Parlez avec vos concepteurs, écoutez-les et ne définissez pas de limites

   Avant de commencer, essayez d'obtenir autant d'informations sur les attentes et les exigences du client. Découvrez quels sont les points faibles et les besoins les plus urgents qui doivent être résolus avec l'application. Le moyen le plus simple d'y parvenir est d'amener vos concepteurs à parler aux utilisateurs finaux cibles et à les interviewer à l'aide d'un questionnaire de conception standard. Si vous n’êtes pas familier avec ces types de questionnaires, vous pouvez vous faire une idée générale à partir de listes comme celle-ci .

   À partir de cet entretien initial, vos concepteurs pourront créer des wireframes – des prototypes des dispositions d'écran utilisées pour décrire l'aspect et la convivialité de l'application. Ces wireframes peuvent ensuite être utilisés dans d'autres discussions et améliorations jusqu'à ce que toutes les parties soient à l'aise avec la conception. Les wireframes peuvent ensuite être remis aux développeurs pour une première passe. Il est important de laisser les concepteurs créer les wireframes qui, selon eux, correspondent le mieux au projet et d’être aussi créatifs que possible. Discutez des possibilités et essayez de ne pas fixer de limites au projet au début. Concentrez-vous sur les choses qui peuvent être réalisées en utilisant les outils standard de Kendo UI Builder.

   Assurez-vous de permettre à l'équipe de conception d'avoir un état d'esprit clair et ouvert avant de créer le premier wireframe. Ne pensez pas aux limites du système, mais concentrez-vous plutôt sur ce qui peut être réalisé avec les outils en place. De cette façon, vous aurez également une vision claire des besoins du projet. Ce n’est qu’après cela que vous devriez parler des possibilités du système.

2. Utilisez ce que AngularJS vous offre

   La structure de l’application utilisant Kendo UI Builder est basée sur le framework Angular JS de Google. C'est une autre arme que vous pouvez utiliser à votre avantage car il s'agit d'un outil que pratiquement tous les développeurs front-end, et presque tous les concepteurs UI / UX, connaissent et utilisent régulièrement. Voici un excellent article sur Angular si vous ne savez pas ce que c'est et qui est derrière.

   Conçu et alimenté par Google et utilisé par près de 2 millions de développeurs Web dans le monde, Angular JS n'est pas seulement une technologie évolutive, mais elle est également bien connue de la plupart des développeurs frontaux du marché. Cela leur permettra de naviguer plus facilement dans votre application, de la bricoler et de jouer avec.

   La plupart des développeurs frontaux trouveront facilement leur chemin dans l'application, ce qui leur donnera la confiance nécessaire pour la personnaliser pour qu'elle corresponde et recréer les wireframes qu'ils ont été donnés par l'équipe de conception. En effet, ils sauront où trouver tout ce dont ils ont besoin pour modifier l'application car la structure suit les conventions d'Angular JS et toutes les meilleures pratiques d'une application Angular JS générique.
3. N'hésitez pas à personnaliser autant que nécessaire [19659009] Avoir 80 à 85% de votre code généré par Kendo UI Builder est une chose intéressante, mais pour adapter complètement votre application aux exigences du client, vous devrez toujours la peaufiner – et ce n'est pas une tâche difficile. Une fois les wireframes en place, essayez de les recréer au maximum et de ne pas les modifier.

   Le fichier app.css est l'endroit où l'application entière est stylisée à partir d'un emplacement centralisé, mais vous pouvez également utiliser des outils sur les développeurs finaux adorent les préprocesseurs CSS comme LESS / SASS / Stylus pour briser le style du projet en morceaux de code plus petits et avoir une structure CSS encore plus centralisée et flexible. Découvrez les avantages des préprocesseurs CSS dans des articles comme celui-ci .

   Tout le HTML de votre application peut également être consulté et modifié en fonction de vos besoins. Chaque développeur frontal ayant même une connaissance de base de la structure Angular JS se frayera un chemin à travers les dossiers d'application générés par Kendo UI Builder et modifiera le HTML pour qu'il corresponde aux wireframes souhaités fournis par l'équipe de conception.

4. Commencez à partir de scratch avec la vue vierge de Kendo UI Builder

   Au début, commencer avec une vue complètement vide peut sembler étrange et trop de travail. Cependant, cela vous donne la liberté d'accéder et de modifier vos données rapidement sans avoir besoin d'importer la plupart de votre logique avec des sections HTML personnalisées, ce que vous avez à faire avec les autres vues prêtes à l'emploi de Kendo UI Builder. tu. Vous faites glisser et déposez les widgets dont vous avez besoin sur la page et vous les connectez pour afficher et modifier vos données sur un seul écran, donnant à vos utilisateurs plus de puissance et une meilleure personnalisation de leur expérience en fonction des besoins du projet.

   

   Les composants de la vue vierge sont également utiles pour la structure de la mise en page. Les composants de la mise en page de la vue vierge de Kendo UI Builder sont les nouveaux blocs de construction pour votre front-end. Encore une fois, faites-les simplement glisser et déposez-les dans la page et vous obtenez une structure de mise en page réactive qui peut être personnalisée pour n'importe quel périphérique multimédia. Avec eux, vous utilisez le cadre d'interface utilisateur le plus populaire et le plus stable Bootstrap que tout le monde semble connaître et aimer aujourd'hui. Même si vous n'êtes pas très familier avec Bootstrap, le concepteur de propriétés sur la droite vous aidera à choisir le comportement de vos blocs pour les différents appareils.

5. Connect vos vues et sources de données

   Une fois que vous avez en place les wireframes que votre équipe de conception a développées et que vos développeurs frontaux ont ensuite recréés avec Kendo UI Builder, il est temps de remplissez-le avec vos données. Configurez votre fournisseur de données pour la page et sélectionnez-la comme source de données et modèle de vue pour chaque widget afin de la connecter à la grille de données. De cette façon, vous le rendez ouvert aux modifications de l'utilisateur sur le front-end si cela est une exigence du client. Il est important de garder à l'esprit que vous ne pouvez avoir qu'un seul fournisseur de données par page.

   Après avoir défini la source de données et le modèle d'affichage de la page, vous pouvez maintenant sélectionner, rechercher et modifier des enregistrements en plusieurs clics et sans code personnalisé . Si plus de configuration est nécessaire, Kendo UI Builder fournit des options de personnalisation simples mais puissantes avec les entrées de fonction d'événement.

Offrir des expériences Web avec Kendo UI Builder

En quelques mots, voici mes conseils de base orientés front-end sur la façon de approche utilisant Kendo UI Builder pour transformer les applications OpenEdge et offrir des expériences modernes. Demandez à votre équipe de conception de parler au client et de découvrir quelles sont les fonctionnalités les plus importantes dont votre application a besoin. Laissez les concepteurs avoir la liberté de créer les wireframes de l'application, puis utilisez les outils puissants que Kendo UI Builder vous donne pour accomplir votre tâche. Lorsque vous commencerez, vous découvrirez peut-être que ces conseils semblent être du bon sens pour tous les développeurs frontaux.

En savoir plus avec la communauté Progress

Si vous souhaitez en savoir plus sur Kendo UI Builder, rejoignez Progress Community où vous trouverez des documents, des exemples de code et d'autres trucs et astuces. Vous pouvez également le prendre pour un essai routier de 30 jours .