Как создать бессерверное приложение Angular на основе CMS

kak sozdat besservernoe prilozhenie angular na osnove cms?v=1656612018

автор Джейк Люметта

Учебник является продолжением моего предыдущего руководства о том, как создать бессерверное приложение Vue.js на CMS, и показывает, как создать бессерверное приложение Angular на CMS.

H1ERkty7MoNY-zkHQ7ayRNAJjLhC06rnqtM6
Helloquence на Unsplash

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

Из-за простоты Angular разработчики все чаще используют его для добавления возможностей CMS на веб-сайты.

Для пользователей 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, которая имеет маркетинговые страницы (исследования клиентов), блог и часто задаваемые вопросы, работающие через API. Серверы не нужны!

Установка

Во-первых, вы начнёте, установив Angular cli.

npm install -g @angular/cli

Настройте новый проект Angular с помощью Angular cli. По умолчанию angular-cli использует стиль CSS, поэтому добавление —-style=scss flag сообщает 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:

<script src="https://cdnjs.buttercms.com/buttercms-1.1.1.min.js"></script>

Быстро начинайте

Откройте проект в выбранном редакторе кода. В разделе 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создать методы:

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 страницы, а затем заполните содержимое страницы.

fxruBTuJEAibmwUHLClhhR1g02XRq73waSsS

Когда страница определена, 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": "<p>We’ve been able to make anvils faster than ever before! — <em>Chief Anvil Maker</em></p>\r\n<p><img src=\" alt=\"\" caption=\"false\" width=\"249\" height=\"249\" /></p>",        "customer_logo": "        }     }  }

В настоящем руководстве используется фреймворк Angular и 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 <my-new-component>

под src/app создать файл под названием 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 {}

Настройте страницу списка клиентов

под apps/customer тип: ng g component

В файле apps/customer/listing/customer.listing.component.ts :

  1. Импорт butterService
  2. в OnInit крючок, польза butterService чтобы получить список клиентов
  3. Сохранять результаты в сменных страницах и разметку (HTML) будет обновлено с данными
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;  }); }}

Отразить результаты в customer.listing.component.html

&lt;mat-card&gt;  <mat-card-title class="page-title">;Customers</mat-card-title&gt;  <mat-divider></mat-divider>  <mat-card-content class="page-body">    <mat-card *ngFor="let page of pages">      <mat-card-title&gt;        <div class="container">          <a [routerLink]="[page.slug]">            <div fxLayout="row" fxLayout.xs="column"                 fxFlex class="content">            <div class="blocks">              <img src=" alt="{{page.fields.seotitle}}" height="64" width="64"/>            </div>            <div class="blocks"&gt;              {{page.fields.headline}}            </div>          </div>        &lt;/a>      </div>    </mat-card-title>  </mat-card></mat-card-content>&lt;mat-divider></mat-divider><mat-card-footer>  <div class="page-footer">    <mat-icon>whatshot</mat-icon>  </div></mat-card-footer></mat-card>

Настройте страницу информации о клиенте

под apps/customerтип ng g component details .

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

Создать страницу клиента

  1. Импорт butterService
  2. в OnInit крючок, польза butterService чтобы получить страницу клиента, предоставленную в URL-путь
  3. Сохранять результаты в изменяемой странице и разметке (HTML) будет обновлено данным клиента
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<string>;  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);          });        });      }    }

Отразить результаты в customer.details.component.html

&lt;mat-card&gt;  <div class="container"&gt;    <div fxLayout="column" class="details">      <div class="blocks">        <img src=" alt="" height="124" width="124"/>      </div>
      &lt;h1 class="blocks">        {{page.fields.headline}}      </h1&gt;      <h3 class="is-size-3"&gt;Testimonials</h3>      <div [innerHTML]="page.fields.testimonial"></div>      &lt;div [innerHTML]="page.fields.body"></div>    </div>  </div></mat-card>

Теперь вы можете перейти к странице клиента с помощью списка всех страниц клиента или непосредственно через URL.

Добавьте базу знаний

Настройте поля содержимого

Предположим, вы хотите добавить CMS к статической странице часто задаваемых вопросов с заголовком и списком вопросов с ответами.

Сделать свое содержимое динамическим с помощью Butter – это процесс в два шага:

  1. Настройте специальные поля содержимого в Butter
  2. Интегрируйте поля в свою программу

Чтобы настроить специальные поля содержимого, сначала войдите на панель Butter.

Создайте новую рабочую область или нажмите существующую. Рабочие пространства позволяют организовать поля содержимого удобным для редакторов содержимым и не влияют на разработку или API. Например, сайт недвижимости может иметь рабочую область под названием «Свойства», а другую — «О странице».

qeOtvQ6EyV2Ch2ydKxz-jZD0oudTrWPm3fIt

Находясь в рабочей области, нажмите кнопку для создания нового поля содержимого. Выберите тип объекта и назовите поле «Заголовок часто задаваемых вопросов».

fCjTN2LyszZoEbvJEFXJke4YmD0TGn6V9fZ7

После сохранения добавьте еще одно поле, но на этот раз выберите тип «Коллекция» и назовите поле FAQ Items .

На следующем экране установите два свойства для элементов в коллекции.

Теперь вернитесь в рабочее пространство и обновите заголовок и элементы часто задаваемых вопросов.

Интегрируйте свое приложение

Создайте компонент FAQ

под apps тип: ng g component faq

apps/faq/faq.component.ts

Настройте хук onInit для загрузки часто задаваемых вопросов

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;    });  }}

Отобразить результат

&lt;mat-card&gt;  <mat-card-title class="page-title"></mat-card-title&gt;  <mat-divider></mat-divider>  <mat-card-content class="page-body">    <mat-card *ngFor="let item of faq.items">      <mat-card-content>        <h3>;          {{item.question}}       &lt;/h3>       <div&gt;         {{item.answer}}       </div>     </mat-card-content>   <;/mat-card&gt; </mat-card-content> <mat-divider&gt;</mat-divider&gt;   &lt;mat-card-footer&gt;     <div class="page-footer">       <mat-icon>whatshot</mat-icon>     </div>   </mat-card-footer> </mat-card>

Значения, введенные на информационной панели Butter, немедленно обновят содержимое нашей программы.

Ведение блогов

Чтобы отображать сообщение, необходимо создать файл a /blog маршрут в вашем приложении и получение сообщений в блоге с Butter API, а также a /blog/:slug маршрут для отделки отдельных постов.

Дополнительные параметры, такие как фильтрация по категории или автору, см. в разделе Ответ также содержит некоторые метаданные, которые мы будем использовать для разбиения на страницы.

Настройте домашнюю страницу блога

под apps/blog-postтип: ng g component listing .

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

Обновите компонент, чтобы получить все сообщения:

  1. Импорт butterService
  2. Получить все сообщения 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;  }); }}

Показать результат:

&lt;mat-card&gt; <mat-card-title class="page-title">Blog Posts</mat-card-title>; <mat-divider></mat-divider> <mat-card-content class="page-body">   <mat-card *ngFor=”let post of posts”>     <mat-card-title>
     &lt;a [routerLink]="[post.slug]">       <div class="container">;         <div fxLayout="row" fxLayout.xs="column"           fxFlex class="content"&gt;          <div class="blocks">            <img *ngIf="post.featured_image" src=" height="64" width="64"/>;          </div>          <div class="blocks"&gt;            {{post.title}}          <;/div>        </div>;      </div>      <div class="container"&gt;        <div fxLayout="column" class="summary">          &lt;div [innerHTML]="post.summary"></div>        </div&gt;      </div>    </a>  </mat-card-title></mat-card></mat-card-content><mat-divider></mat-divider>
&lt;mat-card-footer&gt;  <div class="page-footer">    <mat-icon>whatshot&lt;/mat-icon>  &lt;/div> </mat-card-footer></mat-card>

Настройте страницу сообщений в блоге

под apps/blog-postтип: ng g component details

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

Чтобы показать одну публикацию:

  1. Импорт butterService
  2. в OnInit крючок, польза butterService чтобы получить сообщение в блоге, учитывая логику в URL-пути
  3. Сохранять результаты в переменной публикации и разметке (HTML) будут обновлены данными клиента
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<string>;    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);       });   }); }}

Показать результат:

<mat-card&gt;  <div class="container"&gt;    <div fxLayout="column" class="blog-details">      <div class="container">        <div fxLayout="row">          <h1 class="blocks">            {{post.data.title}}          </h1>          <div *ngIf="post.meta.previous_post">&lt;a [routerLink]="post.meta.previous_post">&lt;</a></div>          <div *ngIf="post.meta.next_post">;&lt;a [routerLink]="post.meta.next_post">></a></div>        </div>;        <;h4>          {{post.data.author.first_name}}     {{post.data.author.last_name}}        </h4>        <div class="post-body" [innerHTML]="post.data.body"></div>      </div>    </div>  </div></mat-card>

Теперь в вашем приложении есть рабочий блог, который можно легко обновлять на информационной панели ButterCMS.

Категории, теги и авторы

Используйте API Butter для категорий, тегов и авторов, чтобы разместить и отфильтровать содержимое в своем блоге.

Перечислите все категории и получайте уведомления по категориям

Назовите эти методы на onInit() крючок жизненного цикла:

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()}

Заверните

Поздравляем, вы успешно превратили свою статическую программу Angular в программу на базе CMS с помощью API содержимого и, таким образом, поддерживая бессерверную архитектуру. Ваша команда разработчиков может воспользоваться преимуществами Angular, которые экономят время, а вы сэкономите еще больше времени, используя CMS без сервера.

Если вам понравилась эта статья, пожалуйста, помогите ее распространению, хлопая ниже! Чтобы получить больше такого содержимого, следите за нами в Twitter и подпишитесь на наш блог.

И если вы хотите добавить блог или Angular CMS на свой веб-сайт, не возиться с WordPress, вам следует попробовать Butter CMS.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *