Fermer

novembre 8, 2021

Création et déploiement de l'interface utilisateur Kendo pour les applications angulaires sur Firebase


Dans cet article, nous verrons comment créer une application Angular à l'aide de l'interface utilisateur Kendo pour Angular, puis la déployer sur la plate-forme d'hébergement Firebase.

Angular

Angular, le framework JavaScript (TypeScript) de Google pour la création de sites Web. applications, mobiles ou de bureau a plus de 77 000 étoiles sur GitHub. Il est maintenu par l'équipe Angular de Google et une multitude de membres et d'organisations de la communauté.

Avant de commencer

Pour pouvoir suivre la démonstration de cet article, vous devriez avoir :

  • Un environnement de développement intégré comme VS Code
  • Node version 11.0 installée sur votre machine
  • Node Package Manager version 6.7 (il est généralement livré avec l'installation de Node)
  • Angular CLI version 8.0 ou supérieure
  • Version 12 d'Angular[19659011]Autres choses à avoir :
    • Connaissance pratique du framework Angular à un niveau débutant.

    Dans cet article, vous découvrirez l'hébergement dans Firebase d'Angular et sa facilité de configuration.[19659014]Création d'une application angulaire simple

    Il existe de nombreuses façons de créer une application angulaire aujourd'hui, l'une des méthodes les plus populaires consiste à utiliser la CLI angulaire pour échafauder un projet. Dans l'article d'aujourd'hui, nous utiliserons l'assistant d'interface utilisateur Kendo pour échafauder notre application angulaire. Kendo UI for Angular est une bibliothèque d'interface utilisateur qui fournit des outils pour créer des applications Web accessibles et utilisables avec une intégration transparente avec vos frameworks frontaux préférés comme Angular.

    Remarque : Kendo UI for Angular est une bibliothèque commerciale de composants d'interface utilisateur. , et dans le cadre de cela, vous devrez fournir une clé de licence lorsque vous utilisez les composants dans vos projets Angular. Vous pouvez obtenir une clé de licence via un essai gratuit ou en possédant une licence commerciale. Pour plus d'informations, vous pouvez vous rendre sur la page Kendo UI for Angular Licensing .

    Scaffolding With Kendo UI for Angular

    Ouvrez votre code VS et accédez à l'onglet Extensions à l'extrême gauche de l'application. Recherchez Kendo UI Wizard et installez l'extension. Après cela, assurez-vous de recharger l'application VS Code afin de pouvoir commencer à utiliser l'outil nouvellement téléchargé.

    Ouvrez la palette de commandes. Allez dans Affichage -> Palette de commandes, ou utilisez le raccourci Command + Shift + P pour Mac ou Ctrl + Shift + P sur un PC. Vous verrez une invite du gestionnaire de tâches, où vous pourrez cliquer sur l'assistant d'interface utilisateur Kendo et créer un nouveau projet en répondant à l'invite étape par étape.

    Définissez un nom de projet et un emplacement pour le créer. Il existe des champs pour le nom du projet (le nôtre est Firebaseapp) et le chemin de sortie. L'assistant de modèle d'interface utilisateur Kendo dit : " Cette extension vous permet de créer rapidement des applications échafaudées construites avec KendoReact, Kendo UI pour Angular ou Kendo UI pour Vue à l'aide d'un assistant visuel.

    J'ai appelé le mien Firebaseapp, mais vous pouvez appeler le vôtre n'importe quel nom de votre choix. Sélectionnez le répertoire dans lequel vous souhaitez que ce projet soit enregistré sur votre machine.

    Sélectionnez un framework frontal. Nous avons sélectionné Angular ; les autres options sont React et Vue. Le côté droit indique Kendo UI pour Angular : « Conçue spécifiquement pour Angular, cette suite vous permet de tirer pleinement parti des capacités de performances natives du framework telles que la compilation AOT, le rendu universel angulaire et le tremblement d'arbre. »

    Sélectionnez Angular. comme framework, puis cliquez sur le bouton suivant pour choisir les pages que vous souhaitez avoir au démarrage. Choisissez une page vierge et cliquez sur le bouton suivant.

    Sélectionnez les pages pour votre application. Nous avons choisi le blanc. Ensuite, gérez les pages de votre application. Nous avons 1 page, intitulée Test.

    Cela garantira qu'un nouveau composant (vide) est créé pour vous lorsque l'application est générée. Vous pouvez toujours ajouter quelques nouvelles pages à générer, mais pour notre application d'aujourd'hui, une page vierge convient.

    Sélectionnez le thème pour l'application. Nous avons choisi Bootstrap ; les autres options incluent Par défaut ou Matériau. Détails de votre projet : nom de l'application - Firebaseapp ; Cadre frontal - Kendo Angular; Thème - Bootstrap ; Pages - 1.

    La dernière chose à choisir est votre thème de style, et j'ai choisi le style Bootstrap. Vous pouvez choisir le thème par défaut ou même Material.

    Après avoir généré le projet, ouvrez-le dans VS Code et dans le terminal exécutez la commande ci-dessous :

    npm install

    Il s'agit d'installer toutes les dépendances, vous pouvez maintenant vérifier l'application que vous avez générée en exécutant la commande serve :

     ng serve

    Bienvenue dans l'interface utilisateur de Kendo pour Angular. Concentrez-vous sur le cœur de votre application et passez moins de temps à transpirer sur l'interface utilisateur. Commencez.

    Maintenant que vous la voyez en direct sur votre serveur de développement, parlons de l'hébergement de cette même application en ligne pour que tout le monde puisse y accéder.

    Hébergement de votre application angulaire

    Il y a de nombreuses plateformes qui vous permettent d'héberger facilement votre application Angular. La plupart des plus populaires sont gratuits. Certains d'entre eux incluent Netlify, les pages GitHub, l'hébergement Firebase, AWS, Azure et bien d'autres. Aujourd'hui, nous utiliserons la plate-forme d'hébergement cloud Firebase pour héberger notre application Angular. par les clients et des outils qui vous aident à créer des applications natives et Web. Le service d'hébergement est une plate-forme facile à utiliser pour héberger à la fois des applications Web statiques et dynamiques et même des microservices avec une seule commande. Aucune configuration n'est requise pour utiliser Firebase – oui, aucune configuration !

    Configuration de votre compte

    Ouvrez le tableau de bord Firebase ici et connectez-vous avec vos informations d'identification Google, puis cliquez sur « Ajouter un projet » et suivez le processus de création d'un nouveau projet.

    Créez un projet, étape 1 sur 3. Nommez votre projet.

    Fournissez d'abord le nom du projet, dans notre cas, nghost. Cliquez ensuite sur " Suivant", et vous serez invité à choisir si vous souhaitez utiliser Analytics. Assurez-vous de désactiver cette option, car nous n'avons pas besoin d'Analytics pour ce didacticiel.

    Désactiver les analyses grise les tests A/B, segmentation des utilisateurs, prédiction du comportement des utilisateurs, utilisateurs sans plantage, fonctions cloud basées sur les événements, rapports gratuits et illimités.

    Cliquez ensuite sur « Terminer » pour générer votre nouveau projet appelé nghost.

    nghost - votre nouveau projet est prêt. Continuer.

    Cliquez sur « Continuer » puis, dans l'onglet de navigation à gauche, cliquez sur o n « Hébergement ». Il devrait vous montrer un écran comme celui-ci :

    Hébergement : déployez des applications Web et mobiles en quelques secondes à l'aide d'un réseau mondial de diffusion de contenu sécurisé. Commencez.

    La prochaine étape consiste pour nous à créer pour la production, puis effectuez le déploiement de l'application Angular que nous avons créée.

    Déploiement de l'application

    Il existe un moyen simple de créer votre application dans Angular pour être prête pour le déploiement. , divisez le code et créez un dossier public qui peut être téléchargé sur n'importe quelle plate-forme d'hébergement comme Firebase Hosting.

    Dans votre code VS, exécutez la commande ci-dessous :

     ng build --prod

    Cela crée le dossier dist avec les fichiers générés à télécharger. Maintenant, pour connecter notre projet à Firebase, vous devez installer les outils Firebase, puis confirmer votre identité pour pouvoir accéder au projet que vous avez créé à partir de la CLI dans VS Code.

    npm install -g firebase-tools
connexion à la base de feu

    La connexion ouvrira un service d'authentification dans votre navigateur et, une fois que vous aurez terminé, vous verrez un message de réussite :

    Woohoo ! Connexion à la CLI Firebase réussie. Vous êtes connecté à l'interface de ligne de commande Firebase. Vous pouvez immédiatement fermer cette fenêtre et continuer à utiliser la CLI.

    Ensuite, vous pouvez déployer l'application avec cette commande :

    firebase init

    Cela vous montre une série d'invites et vous devez choisir en fonction de vos besoins. La première invite vous demande quel service vous souhaitez utiliser, choisissez l'option d'hébergement :

     ? Quelles fonctionnalités Firebase souhaitez-vous configurer pour ce répertoire ? Appuyez sur Espace pour sélectionner des fonctionnalités, puis sur Entrée pour confirmer vos choix. **Hébergement : configurez les fichiers pour l'hébergement Firebase et (éventuellement) configurez les déploiements d'action GitHub**

    Le suivant vous demande si vous avez déjà créé un projet sur Firebase.

     ? Veuillez sélectionner une option : Utiliser un projet existant
? Sélectionnez un projet Firebase par défaut pour ce répertoire : nghost-68106 (nghost)
i Utilisation du projet nghost-68106 (nghost)

    Choisissez « Oui » et sélectionnez nghost (ou le nom que vous avez donné à votre propre projet).

    Les dernières questions concernent les détails du déploiement.

     ? Que voulez-vous utiliser comme répertoire public ? dist/kendo-angular-semence
? Configurer en tant qu'application d'une seule page (réécrire toutes les URL dans /index.html) ? Oui
? Configurer des builds et des déploiements automatiques avec GitHub ? Non
? Le fichier dist/kendo-angular-seed/index.html existe déjà. Écraser? Non

    Après avoir appuyé sur « Entrée », vous devriez voir un message de réussite avec un lien que vous pouvez visiter pour voir l'application en direct :

    ✔ Déploiement terminé !
Console de projet : [https://console.firebase.google.com/project/nghost-68106/overview](https://console.firebase.google.com/project/nghost-68106/overview)
URL d'hébergement : [https://nghost-68106.web.app](https://nghost-68106.web.app)

    Et juste comme ça, votre application est en ligne. Félicitations !

    Conclusion

    Dans cet article, nous avons examiné comment créer facilement une application Angular à l'aide de l'interface utilisateur Kendo pour Angular. Nous avons également vu les différentes manières de déployer nos applications et avons procédé étape par étape pour déployer notre application Angular sur la plate-forme d'hébergement Firebase. Qu'allez-vous construire ensuite ?

Le meilleur outil 2023 pour ta croissance Instagram !



Source link