كيفية إنشاء تطبيق Angular يعمل بنظام CMS بدون خادم

هذا البرنامج التعليمي هو متابعة لبرنامجي التعليمي السابق حول كيفية إنشاء تطبيق Vue.js بدون خادم يعمل بنظام CMS ، ويوضح لك كيفية إنشاء تطبيق Angular يعمل بنظام CMS بدون خادم.

Helloquence على Unsplash

عثر موقع Angular ، الذي طوره مهندسو Google وصيانته ، على مكان عبر تطبيقات الويب الديناميكية ، وهو لغة يزداد الطلب عليها. إنها لغة قوية وشاملة للتطوير الأمامي جاهزة لاختبار الوحدات ، مما يجعلها اللغة المفضلة للعديد من المطورين. يعمل Angular على تبسيط تجربة التطوير الأمامية عن طريق توسيع بناء جملة HTML للسماح لك بإنشاء إمكانية إدارة المحتوى بسرعة.

بسبب بساطة Angular ، يستفيد المطورون بشكل متزايد منه لإضافة إمكانية CMS إلى مواقع الويب.

بالنسبة لمستخدمي Wordpress ، تتمثل إحدى الطرق الشائعة لدمج إمكانية إدارة المحتوى في العمل مع مكتبة wp-api-angular التي تتيح لك التفاعل مع Wordpress API والتطبيقات Angular. إذا كنت تستخدم Wordpress كنظام CMS ، فإن استخدام Angular و Wordpress API يمكن أن يقلل من أوقات تحميل المحتوى على صفحتك.

بالنسبة لأولئك الذين لا يستخدمون Wordpress ، هناك سلالة جديدة من CMSs المستندة إلى واجهة برمجة التطبيقات (API) التي تبسط الأمور إلى حد كبير. سنناقش مثال واحد هنا.

في هذه المقالة ، سوف نستخدم ButterCMS كبديل لبرنامج Wordpress ومثال على CMS مقطوعة الرأس قائمة على SaaS والتي توفر لوحة تحكم CMS ومحتوى واجهة برمجة التطبيقات للمحتوى تستعلمه من تطبيق Angular الخاص بك. هذا يعني أنك لست بحاجة إلى إنشاء أي بنية تحتية جديدة لإضافة CMS إلى تطبيق Angular الخاص بك.

سيوضح هذا البرنامج التعليمي كيفية إنشاء تطبيق Angular مدعوم من CMS يحتوي على صفحات تسويقية (دراسات حالة العملاء) ، ومدونة ، والأسئلة الشائعة ، وكل ذلك مدعوم عبر واجهة برمجة التطبيقات. لا الخوادم اللازمة!

التركيب

أولاً ، ستبدأ بتثبيت CLI Angular.

تثبيت npm -g @ angular / cli

قم بإعداد مشروع Angular جديد باستخدام Angular cli. افتراضيًا ، يستخدم angular-cli نمط CSS ، لذا فإن إضافة العلم —style = scss يخبر Angular CLI باستخدام SCSS بدلاً من ذلك.

نانوغرام جديد مرحبا buttercms-project --style = scss
مؤتمر نزع السلاح مرحبا الزبده المشروع

تثبيت حزم المواد الزاوي والمواد ذات الصلة الزاوي.

تثبيت npm - حفظ @ الزاوي / المواد @ الزاوي / CDK
npm تثبيت - حفظ @ الزاوي / الرسوم المتحركة

تثبيت ButterCMS. قم بتشغيل هذا في سطر الأوامر الخاص بك:

npm تثبيت buttercms - حفظ

يمكن أيضًا تحميل الزبدة باستخدام CDN:

البدء بسرعة

افتح المشروع في محرر الكود الخاص بك. ضمن src / app ، قم بإنشاء دليل يسمى _services

سننشئ ملفًا باسم butterCMS.service.js. يتيح لك ذلك وضع رمز واجهة برمجة التطبيقات (API Token) في مكان واحد وعدم تغييره عن طريق الخطأ.

استيراد * كزبد من "الزبد" ؛
export const butterService = الزبدة ('b60a008584313ed21803780bc9208557b3b49fbb') ؛

ستقوم باستيراد هذا الملف إلى أي مكون تريد استخدام ButterCMS فيه.

للحصول على Quickstart ، انتقل إلى src / app / hello-you / hello-you.component.ts واستورد خدمة butterService

استيراد {butterService} من '../_services' ؛

داخل HelloYouComponent ، قم بإنشاء طرق:

fetchPosts () {
  butter.post.list ({
    صفحة 1،
    page_size: 10
  })
  .then ((res) => {
    console.log ('المحتوى من ButterCMS')
    console.log (احتياط)
  })
}

اتصل الآن بهذه الطريقة عندما يتم تحميل المكون عن طريق إضافته إلى ربط دورة حياة OnInit:

ngOnInit () {
  this.fetchPosts ()؛
}

طلب API هذا يجلب نموذجًا لنشر مدونة. يأتي حسابك مع مثال واحد للنشر ستراه في الرد. إذا تلقيت ردًا ، فهذا يعني أنك الآن قادر على الاتصال بواجهة برمجة التطبيقات.

إضافة صفحات التسويق

يعد إعداد الصفحات التي تعمل بنظام CMS عملية من ثلاث خطوات:

  1. تحديد نوع الصفحة
  2. إنشاء صفحة
  3. دمج في applicaton الخاص بك

تحديد الصفحة

أولاً ، قم بإنشاء "نوع الصفحة" لتمثيل صفحات دراسة حالة العميل الخاصة بك. بعد ذلك ، حدد الحقول التي تريدها لدراسات حالة العملاء الخاصة بك. مع تحديد نوع الصفحة الخاص بك ، يمكنك الآن إنشاء صفحة دراسة الحالة الأولى. حدد اسم وعنوان URL للصفحة ، ثم قم بتعبئة محتوى الصفحة.

مع تعريف صفحتك ، فإن واجهة برمجة تطبيقات ButterCMS ستعيدها بتنسيق JSON كما يلي:

{
    "البيانات": {
      "سبيكة": "acme-co" ،
      "مجالات": {
        "facebook_open_graph_title": "Acme Co يحب ButterCMS" ،
        "seo_title": "دراسة حالة Acme Co Customer" ،
        "العنوان": "وفر Acme Co 200٪ من تكاليف سندان باستخدام ButterCMS" ،
        "testimonial": "

لقد تمكنا من جعل السنادين أسرع من أي وقت مضى! - Chief Anvil Maker

\ r \ n

"،         "customer_logo": "https://cdn.buttercms.com/c8oSTGcwQDC5I58km5WV" ،         }      }   }

يستخدم هذا الدليل إطار عمل Angular و Angular CLI لإنشاء جميع المكونات وحزم تطبيقنا.

دعنا نصل الى الكود

إنشاء مشروع جديد

نانوغرام جديدة buttercms المشروع - ستايل = scss
مؤتمر نزع السلاح الزبد المشروع
تثبيت npm - حفظ @ الزاوي / المواد @ الزاوي / CDK
npm تثبيت - حفظ @ الزاوي / الرسوم المتحركة
npm تثبيت -S buttercms
نانوغرام تخدم

يجب أن يكون مضيفك المحلي: 4200 جاهزًا لتقديم صفحتك الزاوية.

قم بإنشاء typescript لتصدير خدمة ButterCMS

ضمن src / app ، قم بإنشاء دليل يسمى _services. قم بإنشاء ملف يسمى butterCMS.service.js.

استيراد * كزبد من "الزبد" ؛
export const butterService = Butter ('your_api_token')؛

تحديث مسارات المكون

يتم إنشاء هذه المكونات بواسطة Angular CLI باستخدام:

ng g component

ضمن src / app ، قم بإنشاء ملف يسمى app-routing.module.ts

استيراد {NgModule} من '@ angular / core' ؛
استيراد {RouterModule، Routes} من '@ angular / router'؛
استيراد {CustomerComponent} من './customer/listing/customer.listing.component' ؛
استيراد {FaqComponent} من './faq/faq.component' ؛
استيراد {BlogPostComponent} من './blog-post/listing/blog-post.component' ؛
استيراد {HomeComponent} من './home/home.component' ؛
استيراد {CustomerDetailsComponent} من './customer/details/customer.details.component' ؛
قم باستيراد {BlogPostDetailsComponent} من './blog-post/details/blog-post.details.component' ؛
استيراد {FeedComponent} من './feed/feed.component' ؛
استيراد {HelloYouComponent} من './hello-you/hello-you.component' ؛
const appRoutes: Routes = [
    {path: 'customer' ، المكون: CustomerComponent} ،
    {path: 'customer /: slug' ، المكون: CustomerDetailsComponent} ،
    {path: 'faq' ، المكون: FaqComponent} ،
    {path: 'blog' ، المكون: BlogPostComponent} ،
    {path: 'blog /: slug' ، المكون: BlogPostDetailsComponent} ،
    {path: 'rss' ، المكون: FeedComponent} ،
    {path: 'hello-you' ، المكون: HelloYouComponent} ،
    {path: 'home' ، المكون: HomeComponent} ،
    {path: '**'، redirectTo: 'home'}
].
NgModule ({
    الواردات: [RouterModule.forRoot (appRoutes)] ،
    الصادرات: [RouterModule]
})
فئة التصدير AppRoutingModule {
}

قم بإعداد صفحة قائمة العملاء

ضمن التطبيقات / نوع العميل: مكون ng g

في ملف التطبيقات / customer / insert / customer.listing.component.ts:

  1. استيراد الزبدة
  2. في ربط OnInit ، استخدم butterService للحصول على قائمة العملاء
  3. تخزين النتائج في صفحات متغير وسيتم تحديث العلامات (HTML) مع البيانات
استيراد {Component، OnInit} من '@ angular / core'؛
استيراد {butterService} من '../../_services' ؛
@مكون({
    محدد: "التطبيق العميل" ،
    templateUrl: './customer.listing.component.html' ،
    styleUrls: ['./customer.listing.component.scss']
})
فئة التصدير CustomerComponent ينفذ OnInit {
  الصفحات العامة: أي [] ؛
  البناء() { }
ngOnInit () {
  butterService.page.list ( 'customer_case_study')
    .then ((res) => {
      this.pages = res.data.data؛
  })؛
 }
}

عرض النتائج في customer.listing.component.html

<حصيرة بطاقة>
   العملاء 
  <حصيرة-المفرق> 
  
    
      <حصيرة بطاقة عنوان>
        
                       
              {{page.fields.seotitle}}                          
              {{}} page.fields.headline                                                 <حصيرة-المفرق> <حصيرة بطاقة تذييل>   

قم بإعداد صفحة تفاصيل العميل

ضمن التطبيقات / العميل ، اكتب تفاصيل مكون ng g.

التطبيقات / العميل / تفاصيل / customer.details.component.ts

إنشاء صفحة العملاء

  1. استيراد الزبدة
  2. في ربط OnInit ، استخدم butterService للحصول على صفحة العميل التي تم تحديدها في مسار URL
  3. سيتم تخزين نتائج المتجر في صفحة متغير والترميز (HTML) مع بيانات العميل
استيراد {Component، OnInit} من '@ angular / core'؛
استيراد {Observable} من 'rxjs / Observable' ؛
استيراد {ActivatedRoute} من '@ angular / router' ؛
استيراد {butterService} من '../../_services' ؛
استيراد {map ، take} من 'rxjs / operator' ؛
@مكون({
  المحدد: "تفاصيل التطبيق للعملاء" ،
  templateUrl: './customer.details.component.html' ،
  styleUrls: ['./customer.details.component.scss']
})
فئة التصدير CustomerDetailsComponent تنفذ OnInit {
  مُنشئ (المسار المحمي: ActivatedRoute) {}
  slug محمية $: الملاحظة ؛
  صفحة عامة: أي ؛
  ngOnInit () {
    this.slug $ = this.route.paramMap
    .يضخ(
      الخريطة (params => (params.get ('slug'))))
   )؛
    this.slug $ .pipe (
      تأخذ 1))
        .subscribe (slug => {
          butterService.page.retrieve ('customer_case_study'، slug)
            .then ((res) => {
              this.page = res.data.data؛
            }). catch ((res) => {
            console.log (احتياط)؛
          })؛
        })؛
      }
    }

عرض النتائج في customer.details.component.html

<حصيرة بطاقة>
  
    
      
               
      

        {{}} page.fields.headline              

الشهادات       
      
       

يمكنك الآن الانتقال إلى صفحة العميل عبر قائمة جميع صفحات العملاء أو مباشرة عبر عنوان URL.

إضافة قاعدة المعرفة

قم بإعداد حقول المحتوى

لنفترض أنك تريد إضافة CMS إلى صفحة أسئلة وأجوبة ثابتة مع عنوان وقائمة من الأسئلة مع الإجابات.

جعل محتواك ديناميكيًا مع الزبدة هي عملية من خطوتين:

  1. قم بإعداد حقول محتوى مخصصة في الزبدة
  2. دمج الحقول في التطبيق الخاص بك

لإعداد حقول محتوى مخصصة ، قم أولاً بتسجيل الدخول إلى لوحة بيانات Butter.

قم بإنشاء مساحة عمل جديدة أو انقر فوق مساحة موجودة. تتيح لك مساحات العمل تنظيم حقول المحتوى بطريقة سهلة لمحرر المحتوى وليس لها أي تأثير على التطوير أو واجهة برمجة التطبيقات. على سبيل المثال ، قد يحتوي موقع الويب العقاري على مساحة عمل تسمى "خصائص" وموقع آخر يسمى "حول الصفحة".

بمجرد دخولك إلى مساحة العمل ، انقر فوق الزر لإنشاء حقل محتوى جديد. اختر نوع "كائن" وقم بتسمية الحقل "عنوان الأسئلة الشائعة".

بعد الحفظ ، أضف حقلًا آخر ، لكن هذه المرة اختر نوع "التجميع" وقم بتسمية الحقل الأسئلة الشائعة.

في الشاشة التالية ، قم بإعداد خاصيتين للعناصر في المجموعة.

انتقل الآن إلى مساحة العمل الخاصة بك وقم بتحديث عنوانك وعناصر الأسئلة الشائعة.

دمج التطبيق الخاص بك

إنشاء مكون التعليمات

تحت نوع التطبيقات: ng g component faq

التطبيقات / أسئلة وأجوبة / faq.component.ts

إعداد onInit هوك لتحميل التعليمات

استيراد {Component، OnInit} من '@ angular / core'؛
استيراد {butterService} من '../_services' ؛
@مكون({
  محدد: 'app-faq' ،
  templateUrl: './faq.component.html' ،
  styleUrls: ['./faq.component.scss']
})
فئة التصدير FaqComponent تنفذ OnInit {
  البناء() {}
  أسئلة شائعة عامة: any = {
      العناصر: []،
      العنوان: "الأسئلة الشائعة"
 }؛
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؛
    })؛
  }
}

عرض النتيجة

<حصيرة بطاقة>
   
  <حصيرة-المفرق> 
  
    
      <حصيرة بطاقة المحتوى>
        

          {{}} item.question                
         {{}} item.answer                      <حصيرة-المفرق>    <حصيرة بطاقة تذييل>      

ستعمل القيم التي تم إدخالها في لوحة بيانات Butter على تحديث المحتوى في تطبيقنا على الفور.

المدونات

لعرض المنشورات ، تحتاج إلى إنشاء مسار / blog في تطبيقك وجلب منشورات المدونة من Butter API ، بالإضافة إلى / blog /: طريق slug للتعامل مع المنشورات الفردية.

راجع مرجع API للحصول على خيارات إضافية مثل التصفية حسب الفئة أو المؤلف. تتضمن الاستجابة أيضًا بعض البيانات الوصفية التي سنستخدمها في ترقيم الصفحات.

إعداد الصفحة الرئيسية للمدونة

ضمن التطبيقات / نشر المدونة ، اكتب: ng g component insert.

التطبيقات / بلوق ما بعد / قائمة / بلوق-post.listing.component.ts

تحديث المكون للحصول على جميع المشاركات:

  1. استيراد الزبدة
  2. الحصول على كل وظيفة onInit
استيراد {Component، OnInit} من '@ angular / core'؛
استيراد {butterService} من '../../_services' ؛
@مكون({
  محدد: 'app-blog-post' ،
  templateUrl: './blog-post.component.html' ،
  styleUrls: ['./blog-post.component.scss']
})
تصدير فئة BlogPostComponent تنفذ OnInit {
 المشاركات العامة: أي [] ؛
 البناء() { }
ngOnInit () {
  butterService.post.list ({
  صفحة 1،
  page_size: 10
}). ثم ((res) => {
  console.log (res.data)
  this.posts = res.data.data؛
  })؛
 }
}

عرض النتيجة:

<حصيرة بطاقة>
  مشاركات المدونة 
 <حصيرة-المفرق> 
 
   
     <حصيرة بطاقة عنوان>
     
       
<حصيرة بطاقة تذييل>
  

إعداد صفحة نشر المدونة

ضمن التطبيقات / نشر المدونة ، اكتب: ng g تفاصيل المكون

التطبيقات / بلوق-آخر / تفاصيل / بلوق-post.details.component.ts

لإظهار منشور واحد:

  1. استيراد الزبدة
  2. في ربط OnInit ، استخدم butterService للحصول على منشور منشور المدونة الذي تم إعطاؤه القيمة في مسار URL
  3. سيتم تخزين نتائج المتجر في متغير النشر والترميز (HTML) مع بيانات العميل
import {Component، OnInit، ViewEncapsulation} من '@ angular / core'؛
استيراد {Observable} من 'rxjs / Observable' ؛
استيراد {ActivatedRoute} من '@ angular / router' ؛
استيراد {butterService} من '../../_services' ؛
استيراد {map ، take} من 'rxjs / operator' ؛
@مكون({
  المحدد: "app-blog-post-details" ،
  templateUrl: './blog-post.details.component.html' ،
  styleUrls: ['./blog-post.details.component.scss'] ،
  التغليف: ViewEncapsulation.None
})
تصدير فئة BlogPostDetailsComponent تنفذ OnInit {
    مُنشئ (المسار المحمي: ActivatedRoute) {
    }
    slug محمية $: الملاحظة ؛
    مشاركة عامة = {
      الفوقية: لاغية ،
      البيانات: فارغة
}؛
ngOnInit () {
  this.slug $ = this.route.paramMap
      .يضخ(
        الخريطة (params => (params.get ('slug'))))
      )؛
  this.slug $ .pipe (
      تأخذ 1))
      .subscribe (slug => {
        butterService.post.retrieve (سبيكة)
          .then ((res) => {
            this.post = res.data؛
          }). catch ((res) => {
          console.log (احتياط)؛
       })؛
   })؛
 }
}

عرض النتيجة:

<حصيرة بطاقة>
  
    
      
        
          

            {{}} post.data.title                                                   

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

يحتوي تطبيقك الآن على مدونة عاملة يمكن تحديثها بسهولة في لوحة بيانات ButterCMS.

الفئات والعلامات والمؤلفين

استخدم واجهات برمجة تطبيقات Butter للفئات والعلامات والمؤلفين لعرض المحتوى وتصفيته في مدونتك.

قائمة جميع الفئات والحصول على وظائف حسب الفئة

استدعاء هذه الأساليب على ربط دورة حياة onInit ():

طرق: {
 ...
 getCategories () {
   butter.category.list ()
     .then ((res) => {
       console.log ('قائمة الفئات:')
       console.log (res.data.data)
     })
 }،
 getPostsByCategory () {
   butter.category.retrieve ('example-category'، {
       تشمل: "Recent_posts"
     })
     .then ((res) => {
       console.log ('المشاركات مع فئة محددة:')
       console.log (احتياط)
     })
   }
 }،
 خلقت() {
 ...
 this.getCategories ()
 this.getPostsByCategory ()
}
 getCategories () {
  butter.category.list ()
  .then ((res) => {
   console.log (قائمة الفئات: ')
   console.log (res.data.data)
  })
 }،
 getPostsByCategory () {
  butter.category.retrieve (‘example-category '، {
   تشمل: "Recent_posts"
  })
  .then ((res) => {
   console.log ('المشاركات مع فئة محددة:')
   console.log (احتياط)
  })
 }
}،
خلقت() {
 ...
 this.getCategories ()
 this.getPostsByCategory ()
}

يتم إحتوائه

مبروك ، لقد نجحت في تحويل تطبيقك الثابت الزاوي إلى تطبيق يعمل بنظام CMS باستخدام واجهات برمجة التطبيقات للمحتوى ، وبالتالي الحفاظ على بنية بدون خادم. يمكن لفريق التطوير الخاص بك الاستفادة من الجوانب الموفرة للوقت في Angular ، وقد وفرت المزيد من الوقت باستخدام CMS بدون خادم.

إذا كنت قد استمتعت بهذا المقال ، فيرجى مساعدته على الانتشار من خلال التصفيق أدناه! لمزيد من المحتوى مثل هذا ، تابعنا على Twitter واشترك في مدونتنا.

وإذا كنت ترغب في إضافة مدونة أو Angular CMS إلى موقع الويب الخاص بك دون العبث باستخدام Wordpress ، فعليك تجربة Butter CMS.