Як створити безсерверну програму Angular на базі CMS

Програмування

Цей підручник є продовженням мого попереднього підручника про те, як створити безсерверну програму Vue.js на базі CMS, а також показує, як створити безсерверну програму Angular на основі CMS.

Angular, розроблений та підтримуваний інженерами Google, знайшов місце серед динамічних веб-додатків і є дедалі популярнішою мовою. Це надійна і вичерпна мова для інтерфейсної розробки, яка готова до модульного тестування, що робить її вибраною мовою для багатьох розробників. Angular спрощує інтерфейсну розробку, розширюючи синтаксис HTML, дозволяючи швидко створювати можливості управління вмістом.

Через простоту Angular розробники все частіше користуються нею, щоб додати можливості веб-сайтів до можливостей управління вмістом.

Для користувачів Wordpress одним із популярних способів інтеграції можливостей управління вмістом є робота з бібліотекою wp-api-angular, що дозволяє взаємодіяти з Wordpress API та програмами Angular. Якщо ви використовуєте Wordpress як платформу CMS, використання Angular і Wordpress API може зменшити час завантаження вмісту на вашій сторінці.

Для тих, хто не використовує Wordpress, існує нова різновид CMS на основі API, що значно спрощує ситуацію. Ми обговоримо тут один приклад.

У цій статті ми використовуватимемо ButterCMS як альтернативу Wordpress та приклад безголовної CMS на основі SaaS, що забезпечує розміщену інформаційну панель CMS та API вмісту, які ви запитуєте у своєму додатку Angular. Це означає, що вам не потрібно обертати будь-яку нову інфраструктуру, щоб додати CMS до вашого додатка Angular.

Цей підручник продемонструє, як створити Angular-додаток на базі CMS, який має маркетингові сторінки (тематичні дослідження клієнтів), щоденник та відповіді на поширені запитання. Сервери не потрібні!

Встановлення

Спочатку ви почнете з установки Angular cli.

npm install -g @angular/cli

Налаштуйте новий проект Angular за допомогою Angular cli. За замовчуванням angular-cli використовує стиль CSS, тому додавання —-style=scssпрапора повідомляє Angular CLI використовувати SCSS замість цього.

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

Встановіть пакети Angular Material та Angular Material.

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

Встановіть ButterCMS. Запустіть це у своєму командному рядку:

npm install buttercms --save

Масло також можна завантажити за допомогою CDN:

Швидко починайте

Відкрийте проект у вибраному редакторі коду. У розділі src / app створіть каталог із назвою_services

Ми створимо файл із назвою butterCMS.service.js. Це дозволяє вам мати свій маркер API в одному місці і не випадково його змінити.

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

Ви імпортуєте цей файл у будь-який компонент, де ви хочете використовувати ButterCMS.

Для швидкого запуску перейдіть до src/app/hello-you/hello-you.component.tsта імпортуйтеbutterService

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

Усередині HelloYouComponentметодів create:

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

Тепер викликайте цей метод, коли компонент завантажується, додаючи його до OnInitгачка життєвого циклу:

ngOnInit() { this.fetchPosts();}

Цей запит API отримує зразок публікації в блозі. У вашому обліковому записі є один приклад допису, який ви побачите у відповіді. Якщо ви отримаєте відповідь, це означає, що ви тепер можете підключитися до API.

Додайте маркетингові сторінки

Налаштування сторінок на базі CMS - це три кроки:

  1. Визначте тип сторінки
  2. Створіть сторінку
  3. Інтегруйте у свою програму

Визначте сторінку

По-перше, створіть Тип сторінки, щоб представляти сторінки Вашого випадку з клієнтами. Далі визначте поля, які ви хочете для тематичних досліджень клієнтів. Визначивши тип сторінки, тепер ви можете створити першу сторінку тематичного дослідження. Вкажіть назву та URL-адресу сторінки, а потім заповніть вміст сторінки.

Після визначення вашої сторінки API ButterCMS поверне її у форматі JSON таким чином:

{ "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", } } }

Цей посібник використовує Angular framework та Angular CLI для генерації всіх компонентів та упаковки нашого додатку.

Перейдемо до коду.

Створити новий проект

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

Ваш localhost: 4200 повинен бути готовий обслуговувати вашу сторінку Angular.

Створіть машинопис для експорту служби ButterCMS

Під src/appстворенням каталогу з назвою _services. Створіть файл із назвою butterCMS.service.js.

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

Оновіть маршрути компонентів

Ці компоненти генеруються Angular CLI з використанням:

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

Contribute a better translation

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.