Fermer

avril 19, 2018

Comment construire une application angulaire sans serveur et CMS –


Angulaire a décollé en popularité et est largement utilisé. Développé et maintenu par les ingénieurs de Google, Angular a trouvé sa place dans toutes les applications Web dynamiques et constitue une plate-forme de plus en plus demandée.

Angular offre les avantages d'une grande communauté enthousiaste et d'un MVC exceptionnel. temps précieux à écrire du code pour remettre plusieurs composants MVC de nouveau ensemble. En bref, Angular est un framework d'application Web robuste et complet pour le développement frontal qui est prêt pour les tests unitaires, ce qui en fait l'outil de prédilection de nombreux développeurs.

Si vous utilisez Angular, vous pourriez avoir besoin de capacités de gestion de contenu – un blog en est un exemple. Ajouter un CMS à une application Angular peut sembler intimidant, surtout si vous essayez de l'intégrer dans un CMS traditionnel comme WordPress, mais il y a une nouvelle génération de CMS basé sur API qui simplifie grandement les choses. ButterCMS est un exemple de CMS sans-tête basé sur SaaS qui fournit un tableau de bord CMS et une API de contenu que vous interrogez à partir de votre application Angular. Cela signifie que vous n'avez pas besoin de créer une nouvelle infrastructure pour ajouter un CMS à votre application Angular.

Ce tutoriel va vous montrer comment construire une application angulaire CMS avec des pages marketing (études de cas client), un blog et FAQ, tous alimentés via une API.

Installation

Pour commencer, installez l'interface CLI angulaire.

 npm install -g @ angular / cli

Configurez un nouveau projet Angular en utilisant l'interface CLI angulaire. Par défaut, Angular CLI utilise le style CSS, donc l'ajout de l'indicateur -style = scss indique à Angular CLI d'utiliser SCSS à la place:

 ng new hello-buttercms-project --style = scss
cd bonjour-buttercms-projet

Installer le package relatif aux matériaux angulaires et aux matériaux angulaires:

 npm install --save @ angular / material @ angular / cdk
npm installer --save @ angular / animations

Installez ButterCMS. Exécutez ceci dans votre ligne de commande:

 npm install buttercms --save

Le beurre peut aussi être chargé en utilisant un CDN:

Commencer rapidement

Ouvrez le projet dans votre éditeur de code de votre choix. Sous src / app créez un répertoire appelé _services .

Nous créons un fichier appelé butterCMS.service.js . Cela nous permet d'avoir votre API Token à un endroit et de ne pas le modifier accidentellement.

 import * en tant que Butter from 'buttercms';

export const butterService = Beurre ('b60a008584313ed21803780bc9208557b3b49fbb');

Vous allez importer ce fichier dans n'importe quel composant que nous voulons utiliser ButterCMS.

Pour un démarrage rapide, allez dans src / app / hello-you / hello-you.component.ts et importez butterService :

 import {butterService} à partir de '../_services';

Dans le HelloYouComponent créez des méthodes:

 fetchPosts () {
  butter.post.list ({
    Page 1,
    page_size: 10
  })
  .then ((res) => {
    console.log ('Contenu de ButterCMS')
    console.log (res)
  })
}

Appelez maintenant cette méthode lorsque le composant est chargé en l'ajoutant au hook de cycle de vie OnInit :

 ngOnInit () {
  this.fetchPosts ();
}

Cette requête API récupère les posts de votre blog. Votre compte est livré avec un exemple de message, que vous verrez dans la réponse.

Ensuite, créez une autre méthode pour récupérer le champ de contenu de la page d'accueil:

 fetchHeadline () {
  butter.content.retrieve (['homepage_headline'])
    .then ((res) => {
      console.log ('Titre de ButterCMS')
      console.log (res)
    })
}

Ajoutez cette méthode au hook de cycle de vie OnInit .

 ngOnInit () {
  this.fetchPosts ();
  this.fetchHeadline ();
}

Cette requête d'API récupère le contenu du titre de la page d'accueil. Vous pouvez configurer vos propres champs de contenu personnalisés pour gérer tout type de contenu dont vous avez besoin.

Ajouter des pages marketing

La configuration de pages CMS est un processus simple en trois étapes:

  1. Définir le type de page [19659035] Créer une page
  2. Intégrer dans votre application

Définir une page

Commencez par créer un type de page pour représenter vos pages d'étude de cas client. Ensuite, définissez les champs que vous souhaitez pour vos études de cas client. Avec votre type de page défini, vous pouvez maintenant créer la première page d'étude de cas. Spécifiez le nom et l'URL de la page, puis remplissez le contenu de la page.

Une fois votre page définie, l'API ButterCMS la renvoie au format JSON comme ceci:

 {
    "Les données": {
        "limace": "acme-co",
        "des champs": {
            "facebook_open_graph_title": "Acme Co aime ButterCMS",
            "seo_title": "Étude de cas client Acme Co",
            "headline": "Acme Co a économisé 200% sur les coûts d'Anvil avec ButterCMS",
            "testimonial": "
 Nous avons été capables de faire des enclumes plus rapides que jamais! -  Chef Anvil Maker 
 
",
            "customer_logo": "https://cdn.buttercms.com/c8oSTGcwQDC5I58km5WV",
        }
    }
}

Ce guide utilise le framework Angular et l'interface CLI angulaire pour générer tous nos composants et empaqueter notre application

Passons au code

Créer un nouveau projet

 ng new buttercms-project --style = scss
cd buttercms-projet
Installation de npm --save @ angular / material @ angular / cdk
npm installer --save @ angular / animations
npm installer -S buttercms
ng servir

Votre localhost: 4200 devrait être prêt à servir votre page Angular.

Créer TypeScript pour exporter le service ButterCMS

Sous src / app créer un répertoire appelé _services . Créez un fichier appelé butterCMS.service.js .

 import * en tant que beurre à partir de 'buttercms';
export const butterService = Beurre ('your_api_token');

Mise à jour des routes de composant

Ces composants sont générés par l'interface de ligne de commande angulaire en utilisant:

 ng g component

Sous src / app créez un fichier appelé app-routing.module.ts :

 import {NgModule} à partir de '@ angular / core';
importer {RouterModule, Routes} à partir de '@ angular / router';
importer {CustomerComponent} à partir de './customer/listing/customer.listing.component';
importer {FaqComponent} à partir de './faq/faq.component';
importer {BlogPostComponent} à partir de './blog-post/listing/blog-post.component';
importer {HomeComponent} à partir de './home/home.component';
importer {CustomerDetailsComponent} à partir de './customer/details/customer.details.component';
importer {BlogPostDetailsComponent} à partir de './blog-post/details/blog-post.details.component';
importer {FeedComponent} à partir de './feed/feed.component';
importer {HelloYouComponent} à partir de './hello-you/hello-you.component';

const appRoutes: Routes = [
    {path: 'customer', component: CustomerComponent},
    {path: 'customer/:slug', component: CustomerDetailsComponent},
    {path: 'faq', component: FaqComponent},
    {path: 'blog', component: BlogPostComponent},
    {path: 'blog/:slug', component: BlogPostDetailsComponent},
    {path: 'rss', component: FeedComponent},
    {path: 'hello-you', component: HelloYouComponent},
    {path: 'home', component: HomeComponent},
    {path: '**', redirectTo: 'home'}
];

@NgModule ({
    importations: [RouterModule.forRoot(appRoutes)],
    exportations: [RouterModule]
})
classe d'exportation AppRoutingModule {
}

Configurer la liste des clients

Sous apps / customer tapez:

 ng g Liste des composants

Dans le fichier apps / customer / listing / customer.listing.component.ts :

  1. Importation butterService
  2. Dans le crochet OnInit , utilisez butterService pour obtenir la liste des clients
  3. Stockez les résultats dans les pages variables et le balisage (HTML) sera mis à jour avec les données.
 import {Component, OnInit} from '@angular /coeur';
importer {butterService} à partir de '../../services';

@Composant({
    sélecteur: 'app-customer',
    templateUrl: './customer.listing.component.html',
    styleUrls: ['./customer.listing.component.scss']
})

la classe d'exportation CustomerComponent implémente OnInit {
  pages publiques: any [];
  constructeur () {}

  ngOnInit () {
    butterService.page.list ('customer_case_study')
      .then ((res) => {
        this.pages = res.data.data;
      });
  }
}

Afficher les résultats en customer.listing.component.html :

 
   Clients 
  
  
      
          
              

                  
                      

                          

                               {{page.fields.seotitle}} 
                          

                          

                               {{page.fields.headline}}
                          

                      

                  
              

          
      
  
  
  
      

           whatshot

Configurer la page de détails du client

Sous apps / customer tapez ng g détails du composant .

 apps / customer / details / customer. details.component.ts

Créer la page client

  1. Import butterService
  2. Dans le hook OnInit utilisez butterService pour obtenir la page du client étant donné le slug dans le URL path
  3. Stocker les résultats dans une variable de page et le marquage (HTML) sera mis à jour avec les données du client.
 import {Component, OnInit} à partir de '@ angular / core';
import {Observable} à partir de 'rxjs / Observable';
importer {ActivatedRoute} à partir de '@ angular / router';
importer {butterService} à partir de '../../services';
importer {map, take} à partir de 'rxjs / operators';

@Composant({
  selector: 'app-customer-details',
  templateUrl: './customer.details.component.html',
  styleUrls: ['./customer.details.component.scss']
})

la classe d'exportation CustomerDetailsComponent implémente OnInit {
  constructeur (route protégée: ActivatedRoute) {}

  limace protégée $: Observable ;
  page publique: any;

  ngOnInit () {
    this.slug $ = this.route.paramMap
      .tuyau(
        map (params => (params.get ('slug')))
      )

    this.slug $ .pipe (
      prendre (1))
      .subscribe (slug => {
        butterService.page.retrieve ('customer_case_study', slug)
          .then ((res) => {
            this.page = res.data.data;
          }). catch ((res) => {
          console.log (res);
        });
      });
  }
}

Afficher les résultats en customer.details.component.html .

 
  

    

      

        
      


      

        {{page.fields.headline}}
      

      
 Témoignages 

      
 

      
 

    

  

Vous pouvez maintenant naviguer vers la page client via la liste de toutes les pages client ou directement via l'URL

Ajouter une base de connaissances

Configurer des champs de contenu

Supposons que vous vouliez ajouter un CMS à une page FAQ statique avec un titre et une liste de questions avec des réponses

Rendre votre contenu dynamique avec Butter est un processus en deux étapes:

  1. Configurer des champs de contenu personnalisés dans Butter
  2. Intégrer les champs dans votre application .

Pour configurer des champs de contenu personnalisés, connectez-vous d'abord au tableau de bord Beurre.

Créez un nouvel espace de travail ou cliquez sur un espace de travail existant. Les espaces de travail vous permettent d'organiser les champs de contenu de façon conviviale pour les éditeurs de contenu et n'ont aucun effet sur le développement ou l'API. Par exemple, un site Web immobilier peut avoir un espace de travail appelé Propriétés et un autre appelé À propos de la page .

Une fois dans un espace de travail, cliquez sur le bouton pour créer un nouveau contenu. champ. Choisissez le type Objet et nommez le champ FAQ Titre

Après avoir enregistré, ajoutez un autre champ, mais cette fois choisissez le type Collection et nommez le champ FAQ Items .

Dans l'écran suivant, définissez deux propriétés pour les éléments de la collection.

Revenez maintenant à votre espace de travail et mettez à jour vos rubriques et vos éléments de FAQ.

Créer un composant FAQ

Sous apps tapez ng g component faq .

 apps / faq / faq.component.ts

Configurer le hook onInit pour charger la FAQ

 import {Component, OnInit} depuis '@ angular / core';
importer {butterService} à partir de '../_services';

@Composant({
  sélecteur: 'app-faq',
  templateUrl: './faq.component.html',
  styleUrls: ['./faq.component.scss']
})

classe d'exportation FaqComponent implémente OnInit {
  constructeur () {}

  faq publique: any = {
      articles: [],
      titre: 'FAQ'
  }

  ngOnInit () {
    butterService.content.retrieve (['faq_headline', 'faq_items'])
      .then ((res) => {
        console.log (res.data.data);
        this.faq.title = res.data.data.faq_headline;
        this.faq.items = res.data.data.faq_items;
      });
  }
}

Afficher le résultat

 
   
   
  
    
      
        

          {{item.question}}
        

        

           {{item.answer}}
        

      
    
  
  
  
    

       Whatshot 
    

  

Les valeurs entrées dans le tableau de bord Beurre mettront immédiatement à jour le contenu de notre application

Blogging

Pour afficher les messages, nous créons un simple / blog itinéraire dans votre application et récupérons les articles à partir de l'API Butter, ainsi qu'une route / blog /: slug pour gérer des messages individuels

Consultez notre référence API pour des options supplémentaires, telles que le filtrage par catégorie ou par auteur. La réponse inclut également certaines métadonnées que nous utiliserons pour la pagination.

Configurer la page d'accueil du blog

Sous apps / blog-post tapez pour la liste des composants .

 apps / blog-post / liste / blog-post.listing.component.ts

Mettre à jour le composant pour obtenir tous les messages:

  1. importer butterService
  2. obtenir tous les posts onInit
 importer {Component, OnInit} depuis '@ angular / core';
importer {butterService} à partir de '../../services';

@Composant({
  sélecteur: 'app-blog-post',
  templateUrl: './blog-post.component.html',
  styleUrls: ['./blog-post.component.scss']
})
classe d'exportation BlogPostComponent implémente OnInit {
  postes publics: any [];

  constructeur () {}

  ngOnInit () {
    butterService.post.list ({
      Page 1,
      page_size: 10
    }). then ((res) => {
      console.log (res.data)
      this.posts = res.data.data;
    });
  }
}

Afficher le résultat:

 
   Articles du blog 
  
  
    
      

        
          

            

              

                
              

              

                 {{post.title}}
              

            

          

          

            

              

            

          

        
      
    
  
  

  
    

       whatshot

Créer un blog Page de publication

Sous apps / blog-post tapez ng g détails du composant .

 apps / blog-post / détails /blog-post.details.component.ts

Pour afficher le post unique:

  1. Import butterService
  2. Dans le hook OnInit utilisez butterService pour obtenir le post du blog donné le slug dans le chemin de l'URL
  3. Stocker les résultats dans la variable post et le marquage (HTML) sera mis à jour avec les données du client.
 import {Component, OnInit, ViewEncapsulation} de '@ angular / core';
import {Observable} à partir de 'rxjs / Observable';
importer {ActivatedRoute} à partir de '@ angular / router';
importer {butterService} à partir de '../../services';
importer {map, take} à partir de 'rxjs / operators';


@Composant({
    sélecteur: 'app-blog-post-details',
    templateUrl: './blog-post.details.component.html',
    styleUrls: ['./blog-post.details.component.scss'],
    encapsulation: ViewEncapsulation.None
})
classe d'exportation BlogPostDetailsComponent implémente OnInit {

    constructeur (route protégée: ActivatedRoute) {
    }

    limace protégée $: Observable ;
    poste publique = {
        meta: null,
        données: null
    }

    ngOnInit () {
        this.slug $ = this.route.paramMap
            .tuyau(
                map (params => (params.get ('slug')))
            )

        this.slug $ .pipe (
            prendre (1))
            .subscribe (slug => {
                butterService.post.retrieve (limace)
                    .then ((res) => {
                        this.post = res.data;
                    }). catch ((res) => {
                    console.log (res);
                });
            });
    }
}

Afficher le résultat:

 
  

    

      

        

          

            {{post.data.title}}
          

          
          
        

        

           {{post.data.author.first_name}} {{post.data.author.last_name}}
        

        
 

      

    

  

Votre application dispose désormais d'un blog qui peut être facilement mis à jour dans le tableau de bord ButterCMS

Utilisez les API Butter pour les catégories, tags et auteurs afin de filtrer et de filtrer le contenu de votre blog

. posts par catégorie

Appelez ces méthodes sur les méthodes [: onInit () lifecycle hook:

: {
  ...
  getCategories () {
    butter.category.list ()
      .then ((res) => {
        console.log ('Liste des catégories:')
        console.log (res.data.data)
      })
  },
  getPostsByCategory () {
    butter.category.retrieve ('example-category', {
        inclure: 'recent_posts'
      })
      .then ((res) => {
        console.log ('Messages avec une catégorie spécifique:')
        console.log (res)
      })
  }
},
créé() {
  ...
  this.getCategories ()
  this.getPostsByCategory ()
}

L'emballant

Félicitations! Vous avez réussi à transformer votre application Angular statique en une application basée sur CMS à l'aide d'API de contenu, conservant ainsi une architecture sans serveur. Votre équipe de développement peut tirer parti des aspects d'Angular qui vous font gagner du temps et vous avez gagné encore plus de temps en utilisant un CMS sans serveur.


Jake Lumetta

Le meilleur outil 2023 pour ta croissance Instagram !



Source link