Comment créer une application angulaire alimentée par CMS sans serveur

Ce didacticiel fait suite à mon précédent didacticiel sur la création d'une application Vue.js alimentée par un CMS sans serveur et vous montre comment créer une application angulaire alimentée par un CMS sans serveur.

Angular, développé et maintenu par les ingénieurs de Google, a trouvé sa place dans les applications Web dynamiques et est un langage de plus en plus demandé. C'est un langage robuste et complet pour le développement frontal, prêt pour les tests unitaires, ce qui en fait le langage de choix pour de nombreux développeurs. Angular simplifie l'expérience de développement front-end en étendant la syntaxe HTML pour vous permettre de créer rapidement une capacité de gestion de contenu.

En raison de la simplicité d'Angular, les développeurs en profitent de plus en plus pour ajouter des fonctionnalités CMS aux sites Web.

Pour les utilisateurs de Wordpress, un moyen courant d'intégrer la capacité de gestion de contenu consiste à travailler avec la bibliothèque wp-api-angular qui vous permet d'interagir avec l'API Wordpress et les applications Angular. Si vous utilisez Wordpress en tant que plate-forme CMS, l'utilisation d'Angular et de l'API Wordpress peut réduire les temps de chargement du contenu de votre page.

Pour ceux qui n'utilisent pas Wordpress, il existe une nouvelle génération de CMS basés sur des API qui simplifient considérablement les choses. Nous allons discuter d'un exemple ici.

Dans cet article, nous utiliserons ButterCMS comme alternative à Wordpress et un exemple de CMS headless basé sur SaaS qui fournit un tableau de bord CMS hébergé et une API de contenu que vous interrogez depuis 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 didacticiel montrera comment créer une application Angular alimentée par CMS qui a des pages marketing (études de cas client), un blog et une FAQ, le tout alimenté via API. Aucun serveur nécessaire!

Installation

Tout d'abord, vous commencerez par installer Angular cli.

npm install -g @angular/cli

Configurez un nouveau projet Angular à l'aide de Angular cli. Par défaut, angular-cli utilise le style CSS, donc l'ajout de l' —-style=scssindicateur indique à Angular CLI d'utiliser SCSS à la place.

ng new hello-buttercms-project --style=scsscd hello-buttercms-project

Installez les packages relatifs aux matériaux angulaires et aux matériaux angulaires.

npm install --save @angular/material @angular/cdknpm install --save @angular/animations

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

npm install buttercms --save

Le beurre peut également être chargé à l'aide d'un CDN:

Commencez rapidement

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

Nous allons créer un fichier appelé butterCMS.service.js. Cela vous permet d'avoir votre jeton API au même endroit et de ne pas le modifier accidentellement.

import * as Butter from 'buttercms';
export const butterService = Butter('b60a008584313ed21803780bc9208557b3b49fbb');

Vous importerez ce fichier dans n'importe quel composant où vous souhaitez utiliser ButterCMS.

Pour un démarrage rapide, accédez à src/app/hello-you/hello-you.component.tset importezbutterService

import {butterService} from '../_services';

Dans le HelloYouComponent, créez des méthodes:

fetchPosts() { butter.post.list({ page: 1, page_size: 10 }) .then((res) => { console.log(‘Content from ButterCMS’) console.log(res) })}

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

ngOnInit() { this.fetchPosts();}

Cette demande d'API récupère un exemple d'article de blog. Votre compte est accompagné d'un exemple de publication que vous verrez dans la réponse. Si vous obtenez une réponse, cela signifie que vous pouvez maintenant vous connecter à l'API.

Ajouter des pages marketing

La configuration de pages alimentées par CMS est un processus en trois étapes:

  1. Définir le type de page
  2. Créer une page
  3. Intégrez à votre application

Définir la page

Tout d'abord, créez 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 clients. Une fois votre type de page défini, vous pouvez désormais 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 renverra au format JSON comme ceci:

{ "data": { "slug": "acme-co", "fields": { "facebook_open_graph_title": "Acme Co loves ButterCMS", "seo_title": "Acme Co Customer Case Study", "headline": "Acme Co saved 200% on Anvil costs with ButterCMS", "testimonial": "

We’ve been able to make anvils faster than ever before! — Chief Anvil Maker

\r\n

", "customer_logo": "//cdn.buttercms.com/c8oSTGcwQDC5I58km5WV", } } }

Ce guide utilise le framework Angular et Angular CLI pour générer tous les composants et empaqueter notre application.

Passons au code.

Créer un nouveau projet

ng new buttercms-project --style=scsscd buttercms-projectnpm install --save @angular/material @angular/cdknpm install --save @angular/animationsnpm install -S buttercmsng serve

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

Créer un texte dactylographié pour exporter le service ButterCMS

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

import * as Butter from 'buttercms';export const butterService = Butter('your_api_token');

Mettre à jour les itinéraires des composants

Ces composants sont générés par Angular CLI en utilisant:

ng g component nt>

Under src/app create a file called app-routing.module.ts

import {NgModule} from '@angular/core';import {RouterModule, Routes} from '@angular/router';import {CustomerComponent} from './customer/listing/customer.listing.component';import {FaqComponent} from './faq/faq.component';import {BlogPostComponent} from './blog-post/listing/blog-post.component';import {HomeComponent} from './home/home.component';import {CustomerDetailsComponent} from './customer/details/customer.details.component';import {BlogPostDetailsComponent} from './blog-post/details/blog-post.details.component';import {FeedComponent} from './feed/feed.component';import {HelloYouComponent} from './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({ imports: [RouterModule.forRoot(appRoutes)], exports: [RouterModule]})export class AppRoutingModule {}

Set up the Customer List page

Under apps/customer type: ng g component

In the file apps/customer/listing/customer.listing.component.ts :

  1. Import butterService
  2. In OnInit hook, use butterService to get the list of customers
  3. Store results in pages variable and markup (HTML) will be updated with the data
import {Component, OnInit} from '@angular/core';import {butterService} from '../../_services';
@Component({ selector: 'app-customer', templateUrl: './customer.listing.component.html', styleUrls: ['./customer.listing.component.scss']})
export class CustomerComponent implements OnInit { public pages: any[]; constructor() { }
ngOnInit() { butterService.page.list(‘customer_case_study’) .then((res) => { this.pages = res.data.data; }); }}

Display the results in customer.listing.component.html

 ;Customers     

whatshot

Set up the Customer Detail page

Under apps/customer, type ng g component details .

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

Create customer page

  1. Import butterService
  2. In OnInit hook, use butterService to get the customer page given the slug in the URL path
  3. Store results in page variable and markup (HTML) will be updated with the customer data
import {Component, OnInit} from '@angular/core';import {Observable} from 'rxjs/Observable';import {ActivatedRoute} from '@angular/router';import {butterService} from '../../_services';import {map, take} from 'rxjs/operators';
@Component({ selector: 'app-customer-details', templateUrl: './customer.details.component.html', styleUrls: ['./customer.details.component.scss']})
export class CustomerDetailsComponent implements OnInit { constructor(protected route: ActivatedRoute) { }
 protected slug$: Observable; public page: any;
 ngOnInit() { this.slug$ = this.route.paramMap .pipe( map(params => (params.get('slug'))) );
 this.slug$.pipe( take(1)) .subscribe(slug => { butterService.page.retrieve('customer_case_study', slug) .then((res) => { this.page = res.data.data; }).catch((res) => { console.log(res); }); }); } }

Display the results in customer.details.component.html

 

 

{{page.fields.headline}}

Testimonials

You can now navigate to the Customer Page via the list of all Customer Pages or directly via URL.

Add a knowledge base

Set up content fields

Let’s suppose you want to add a CMS to a static FAQ page with a title and a list of questions with answers.

Making your content dynamic with Butter is a two-step process:

  1. Setup custom content fields in Butter
  2. Integrate the fields into your application

To setup custom content fields, first sign in to the Butter dashboard.

Create a new workspace or click on an existing one. Workspaces let you organize content fields in a friendly way for content editors and have no effect on development or the API. For example, a real-estate website might have a workspace called “Properties” and another called “About Page”.

Original text


Once you’re in a workspace click the button to create a new content field. Choose the “Object” type and name the field “FAQ Headline.”

After saving, add another field, but this time choose the “Collection” type and name the field FAQ Items .

On the next screen, setup two properties for items in the collection.

Now go back to your workspace and update your heading and FAQ items.

Integrate your app

Create FAQ Component

Under apps type: ng g component faq

apps/faq/faq.component.ts

Set up onInit hook to load FAQ

import {Component, OnInit} from '@angular/core';import {butterService} from '../_services';
@Component({ selector: 'app-faq', templateUrl: './faq.component.html', styleUrls: ['./faq.component.scss']})
export class FaqComponent implements OnInit { constructor() {}
 public faq: any = { items: [], title: '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; }); }}

Display the result

      

; {{item.question}}

The values entered in the Butter dashboard will immediately update the content in our app.

Blogging

To display posts, you need to create a /blog route in your app and fetch blog posts from the Butter API, as well as a /blog/:slug route to handle individual posts.

See the API reference for additional options such as filtering by category or author. The response also includes some metadata we’ll use for pagination.

Set up Blog Homepage

Under apps/blog-post, type: ng g component listing .

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

Update component to get all posts:

  1. Import butterService
  2. Get all post onInit
import {Component, OnInit} from '@angular/core';import {butterService} from '../../_services';
@Component({ selector: 'app-blog-post', templateUrl: './blog-post.component.html', styleUrls: ['./blog-post.component.scss']})export class BlogPostComponent implements OnInit { public posts: any[];
 constructor() { }
ngOnInit() { butterService.post.list({ page: 1, page_size: 10}).then((res) => { console.log(res.data) this.posts = res.data.data; }); }}

Display the result:

 Blog Posts;    
  ; 

;

 whatshot 

Set up Blog Post page

Under apps/blog-post, type: ng g component details

apps/blog-post/details/blog-post.details.component.ts

To show a single post:

  1. Import butterService
  2. In OnInit hook, use butterService to get the blog-post post given the slug in the URL path
  3. Store results in post variable and markup (HTML) will be updated with the customer data
import {Component, OnInit, ViewEncapsulation} from '@angular/core';import {Observable} from 'rxjs/Observable';import {ActivatedRoute} from '@angular/router';import {butterService} from '../../_services';import {map, take} from 'rxjs/operators';
@Component({ selector: 'app-blog-post-details', templateUrl: './blog-post.details.component.html', styleUrls: ['./blog-post.details.component.scss'], encapsulation: ViewEncapsulation.None})
export class BlogPostDetailsComponent implements OnInit {
 constructor(protected route: ActivatedRoute) { }
 protected slug$: Observable; public post = { meta: null, data: null};
ngOnInit() { this.slug$ = this.route.paramMap .pipe( map(params => (params.get('slug'))) );
 this.slug$.pipe( take(1)) .subscribe(slug => { butterService.post.retrieve(slug) .then((res) => { this.post = res.data; }).catch((res) => { console.log(res); }); }); }}

Display the result:

 

{{post.data.title}} < ;> ; {{post.data.author.first_name}} {{post.data.author.last_name}}

Now your app has a working blog that can be updated easily in the ButterCMS dashboard.

Categories, tags, and authors

Use Butter’s APIs for categories, tags, and authors to feature and filter content on your blog.

List all categories and get posts by category

Call these methods on the onInit() lifecycle hook:

methods: { ... getCategories() { butter.category.list() .then((res) => { console.log('List of Categories:') console.log(res.data.data) }) }, getPostsByCategory() { butter.category.retrieve('example-category', { include: 'recent_posts' }) .then((res) => { console.log('Posts with specific category:') console.log(res) }) } }, created() { ... this.getCategories() this.getPostsByCategory()}
 getCategories() { butter.category.list() .then((res) => { console.log(‘List of Categories:’) console.log(res.data.data) }) }, getPostsByCategory() { butter.category.retrieve(‘example-category’, { include: ‘recent_posts’ }) .then((res) => { console.log(‘Posts with specific category:’) console.log(res) }) }},created() { … this.getCategories() this.getPostsByCategory()}

Wrap up

Congrats, you’ve successfully turned your static Angular application into a CMS-powered app using content APIs and thereby maintaining a serverless architecture. Your development team can take advantage of the time-saving aspects of Angular, and you’ve saved even more time by using a serverless CMS.

If you’ve enjoyed this article, please help it spread by clapping below! For more content like this, follow us on Twitter and subscribe to our blog.

And if you want to add a blog or Angular CMS to your website without messing around with Wordpress, you should try Butter CMS.