de Jake Lumetta

Cum să construiți o aplicație angulară CMS fără server

Acest tutorial este o continuare a mea tutorialul anterior despre cum să construiți o aplicație Vue.js fără server CMS și vă arată cum să creați o aplicație angulară CMS fără server.

Cum sa construiti o aplicatie angulara CMS fara server
Helloquence pe Unsplash

Angular, dezvoltat și întreținut de inginerii Google, și-a găsit un loc în aplicațiile web dinamice și este un limbaj din ce în ce mai solicitat. Este un limbaj robust și cuprinzător pentru dezvoltarea front-end, care este pregătit pentru testarea unităților, făcându-l limba preferată pentru mulți dezvoltatori. Angular simplifică experiența de dezvoltare front-end prin extinderea sintaxei HTML pentru a vă permite să creați rapid capacitatea de gestionare a conținutului.

Datorită simplității Angular, dezvoltatorii profită din ce în ce mai mult de acesta pentru a adăuga capacitatea CMS site-urilor web.

Pentru utilizatorii WordPress, o modalitate populară de a integra capacitatea de gestionare a conținutului este de a lucra cu biblioteca wp-api-angulară care vă permite să interacționați cu API-ul WordPress și aplicațiile Angular. Dacă utilizați WordPress ca platformă CMS, utilizarea Angular și API-ul WordPress pot reduce timpul de încărcare a conținutului de pe pagina dvs.

ad-banner

Pentru cei care nu folosesc WordPress, există o nouă rasă de CMS bazate pe API care simplifică mult lucrurile. Vom discuta un exemplu aici.

În acest articol, vom folosi ButterCMS ca alternativă la WordPress și un exemplu de CMS fără cap, bazat pe SaaS, care oferă un tablou de bord CMS găzduit și un API de conținut pe care îl interogați din aplicația dvs. Angular. Aceasta înseamnă că nu este nevoie să creați o infrastructură nouă pentru a adăuga CMS la aplicația dvs. Angular.

Acest tutorial va demonstra cum să creați o aplicație angulară CMS care are pagini de marketing (studii de caz pentru clienți), un blog și întrebări frecvente, toate alimentate prin API. Nu sunt necesare servere!

Instalare

În primul rând, veți începe prin instalarea Angular cli.

npm install -g @angular/cli

Configurați un nou proiect Angular utilizând Angular cli. În mod implicit, angular-cli folosește stilul CSS, deci adăugând fișierul —-style=scss steagul îi spune Angular CLI să folosească SCSS în schimb.

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

Instalați pachetele legate de Material unghiular și Material unghiular.

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

Instalați ButterCMS. Rulați acest lucru în linia de comandă:

npm install buttercms --save

Untul poate fi, de asemenea, încărcat folosind un CDN:

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

Începeți rapid

Deschideți proiectul în editorul de cod la alegere. Sub src / app, creați un director numit _services

Vom crea un fișier numit butterCMS.service.js. Acest lucru vă permite să aveți simbolul API într-un singur loc și să nu îl modificați accidental.

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

Veți importa acest fișier în orice componentă în care doriți să utilizați ButterCMS.

Pentru o pornire rapidă, accesați src/app/hello-you/hello-you.component.ts și import butterService

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

În interiorul HelloYouComponent, creați metode:

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

Acum apelați această metodă când componenta este încărcată adăugând-o la OnInit cârlig ciclu de viață:

ngOnInit() {  this.fetchPosts();}

Această cerere API obține un exemplu de postare pe blog. Contul dvs. vine cu un exemplu de postare pe care îl veți vedea în răspuns. Dacă primiți un răspuns, înseamnă că acum vă puteți conecta la API.

Adăugați pagini de marketing

Configurarea paginilor CMS este un proces în trei pași:

  1. Definiți tipul de pagină
  2. Creaza o pagina
  3. Integrează-te în aplicația ta

Definiți pagina

Mai întâi, creați un tip de pagină pentru a reprezenta paginile de studiu de caz ale clienților. Apoi, definiți câmpurile pe care le doriți pentru studiile de caz ale clienților dvs. Cu tipul de pagină definit, puteți crea acum prima pagină de studiu de caz. Specificați numele și adresa URL a paginii, apoi completați conținutul paginii.

Cum sa construiti o aplicatie angulara CMS fara server

Cu pagina dvs. definită, API-ul ButterCMS o va returna în format JSON astfel:

{    "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>rn<p><img src="https://cdn.buttercms.com/NiA3IIP3Ssurz5eNJ15a" alt="" caption="false" width="249" height="249" /></p>",        "customer_logo": "https://cdn.buttercms.com/c8oSTGcwQDC5I58km5WV",        }     }  }

Acest ghid folosește cadrul angular și CLI angular pentru a genera toate componentele și a împacheta aplicația noastră.

Să trecem la cod.

Creați un proiect nou

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

Localhost: 4200 ar trebui să fie gata să vă difuzeze pagina Angular.

Creați text pentru a exporta serviciul ButterCMS

Sub src/app creați un director numit _services. Creați un fișier numit butterCMS.service.js.

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

Actualizați rutele componente

Aceste componente sunt generate de Angular CLI utilizând:

ng g component <my-new-component>

Sub src/app creați un fișier numit 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 {}

Configurați pagina Lista clienți

Sub apps/customer tip: ng g component

În dosar apps/customer/listing/customer.listing.component.ts :

  1. Import butterService
  2. În OnInit cârlig, folosește butterService pentru a obține lista clienților
  3. Rezultatele stocării în variabile de pagini și marcajul (HTML) vor fi actualizate cu datele
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;  }); }}

Afișați rezultatele în 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="https://www.freecodecamp.org/news/how-to-build-a-serverless-cms-powered-angular-app-3eb76605799f/{{page.fields.customer_logo}}" 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>

Configurați pagina Detalii client

Sub apps/customer, tip ng g component details .

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

Creați pagina clientului

  1. Import butterService
  2. În OnInit cârlig, folosește butterService pentru a obține pagina clientului slug în calea URL
  3. Rezultatele stocării în variabile de pagină și marcare (HTML) vor fi actualizate cu datele clienților
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);          });        });      }    }

Afișați rezultatele în customer.details.component.html

&lt;mat-card&gt;  <div class="container"&gt;    <div fxLayout="column" class="details">      <div class="blocks">        <img src="https://www.freecodecamp.org/news/how-to-build-a-serverless-cms-powered-angular-app-3eb76605799f/{{page.fields.customer_logo}}" 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>

Acum puteți naviga la pagina clientului prin lista tuturor paginilor clienților sau direct prin URL.

Adăugați o bază de cunoștințe

Configurați câmpuri de conținut

Să presupunem că doriți să adăugați un CMS la o pagină de întrebări frecvente statice cu un titlu și o listă de întrebări cu răspunsuri.

Dinamicizarea conținutului cu unt este un proces în doi pași:

  1. Configurați câmpuri de conținut personalizate în Unt
  2. Integrați câmpurile în aplicația dvs.

Pentru a configura câmpuri de conținut personalizate, conectați-vă mai întâi la tabloul de bord Butter.

Creați un spațiu de lucru nou sau faceți clic pe unul existent. Spațiile de lucru vă permit să organizați câmpurile de conținut într-un mod prietenos pentru editorii de conținut și nu au niciun efect asupra dezvoltării sau API-ului. De exemplu, un site web imobiliar poate avea un spațiu de lucru numit „Proprietăți” și un altul numit „Despre pagina”.

1611936548 675 Cum sa construiti o aplicatie angulara CMS fara server

După ce vă aflați într-un spațiu de lucru, faceți clic pe buton pentru a crea un câmp de conținut nou. Alegeți tipul „Object” și denumiți câmpul „FAQ Headline”.

1611936548 663 Cum sa construiti o aplicatie angulara CMS fara server

După salvare, adăugați un alt câmp, dar de data aceasta alegeți tipul „Colecție” și denumiți câmpul FAQ Items .

În ecranul următor, configurați două proprietăți pentru elementele din colecție.

Acum reveniți la spațiul de lucru și actualizați titlul și elementele de întrebări frecvente.

Integrează-ți aplicația

Creați componenta FAQ

Sub apps tip: ng g component faq

apps/faq/faq.component.ts

Configurați onInit hook pentru a încărca 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;    });  }}

Afișați rezultatul

&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>

Valorile introduse în tabloul de bord Butter vor actualiza imediat conținutul din aplicația noastră.

Blogging

Pentru a afișa postări, trebuie să creați un /blog rută în aplicația dvs. și preluați postări de blog din API-ul Butter, precum și un /blog/:slug traseu pentru a gestiona postările individuale.

Consultați referința API pentru opțiuni suplimentare, cum ar fi filtrarea după categorie sau autor. Răspunsul include, de asemenea, câteva metadate pe care le vom folosi pentru paginare.

Configurați pagina principală a blogului

Sub apps/blog-post, tip: ng g component listing .

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

Actualizați componenta pentru a obține toate postările:

  1. Import butterService
  2. Obțineți toate postările 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;  }); }}

Afișați rezultatul:

&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="https://www.freecodecamp.org/news/how-to-build-a-serverless-cms-powered-angular-app-3eb76605799f/{{post.featured_image}}" 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>

Configurați pagina de postare pe blog

Sub apps/blog-post, tip: ng g component details

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

Pentru a afișa o singură postare:

  1. Import butterService
  2. În OnInit cârlig, folosește butterService pentru a obține postarea de pe blog pe calea URL-ului
  3. Rezultatele stocării în variabile post și markup (HTML) vor fi actualizate cu datele clienților
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);       });   }); }}

Afișați rezultatul:

<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>

Acum aplicația dvs. are un blog funcțional care poate fi actualizat cu ușurință în tabloul de bord ButterCMS.

Categorii, etichete și autori

Utilizați API-urile lui Butter pentru categorii, etichete și autori pentru a prezenta și filtra conținutul de pe blogul dvs.

Enumerați toate categoriile și obțineți postări pe categorii

Apelați aceste metode pe onInit() cârlig ciclu de viață:

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

Învelire

Felicitări, ați transformat cu succes aplicația dvs. unghiulară statică într-o aplicație alimentată de CMS utilizând API-uri de conținut și menținând astfel o arhitectură fără server. Echipa dvs. de dezvoltare poate profita de aspectele economice de timp ale Angular și ați economisit și mai mult timp utilizând un CMS fără server.

Dacă ți-a plăcut acest articol, te rog ajută-l să se răspândească aplaudând mai jos! Pentru mai mult conținut de acest gen, urmați-ne Stare de nervozitate și Abonati-va pe blogul nostru.

Și dacă doriți să adăugați un blog sau CMS unghiular pe site-ul dvs. fără a vă deranja cu WordPress, ar trebui să încercați Butter CMS.