كيفية بناء مدونة بسيطة باستخدام الزاوي ، GraphQL و Django

لدينا مدونة بسيطة

TL. دكتور

كتب توني سبيرو مقالة حول كيفية بناء مدونة بسيطة باستخدام React و GraphQL. في هذه المقالة ، سأوضح لك كيفية إنشاء مدونة بسيطة باستخدام Angular و GraphQL و Django.

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

الذهاب بناء الاشياء!

المتطلبات

  • الثعبان
  • جانغو
  • الجرافين (تنفيذ GraphQL في بيثون)
  • زاوي

بناء واجهة برمجة تطبيقات GraphQL

الجرافين هي مكتبة بيثون لبناء واجهات برمجة التطبيقات مع GraphQL بسهولة. لنبدأ بالسقطة على تطبيقنا عن طريق تشغيل الأوامر التالية:

# إنشاء دليل المشروع
$ mkdir مدونة بسيطة
$ مؤتمر نزع السلاح بسيط بلوق

# إنشاء virtualenv لعزل تبعيات حزمة لدينا محليا
virtualenv-p python3.6 venv
المصدر venv / بن / تفعيل
# تثبيت Django والجرافين بدعم Django
$ نقطة تثبيت جانغو
$ نقطة تثبيت graphene_django
# إعداد مشروع جديد مع تطبيق واحد
$ django-admin.py startproject graphql_api
$ cd graphql_api
django-admin.py startapp بلوق

الآن ، نحن مستعدون لبناء واجهة برمجة تطبيقات GraphQL الخاصة بنا. الخطوة الأولى هي تحديد نموذج نشر المدونة البسيط الخاص بنا.

من نماذج استيراد django.db
فئة المشاركة (models.Model):
    title = models.CharField (max_length = 255)
    محتوى = models.TextField ()
    Creat_at = models.DateTimeField (auto_now = صواب)

ثم ، الخطوة التالية هي إنشاء استعلام. الاستعلام عبارة عن عملية للقراءة فقط لجلب البيانات على سبيل المثال.

استعلام الفئة (graphene.AbstractType):
    all_posts = graphene.List (PostType)
    def determ_all_posts (self، info، * args):
        إرجاع Post.objects.all ()

اختبار API حتى الآن!

يأتي Graphene مع GraphiQL ، وهي بيئة تطوير متكاملة قائمة على الويب للمساعدة في كتابة وتنفيذ استعلامات GraphQL.

لقد حان الوقت لكتابة استعلامنا الأول! دعنا نسترجع مشاركاتنا

استعلام {
  جميع المشاركات {
    هوية شخصية
    عنوان
    يحتوى
  }
}
استعلامنا

تستهلك GraphQL API مع الزاوي

يجعل Apollo جلب البيانات الدقيقة التي تحتاجها للمكون سهلًا ويسمح لك بوضع استفساراتك في المكان الذي تريده بالضبط. كل ما نحتاج إليه هو تثبيت حزم apollo-angular و angular-client و angular-tag.

لنقم بإنشاء تطبيق زاوي جديد باستخدام Angular CLI.

$ نانوغرام جديد الزاوي التطبيق
$ القرص الزاوي التطبيق
npm $ تثبيت apollo-client apollo-angular graphql-tag - حفظ
الغزل $
$ نانوغرام تخدم -o

نحتاج إلى تعيين عدة مكتبات على تطبيقنا الزاوي.

  1. apollo-client: عميل GraphQL للتخزين المؤقت جاهز تمامًا للإنتاج لكل خادم أو إطار واجهة مستخدم.
  2. أبولو الزاوي: التكامل الزاوي لعميل أبولو
  3. graphql-tag: علامة حرفية لجافا سكريبت تقوم بتوزيع استعلامات GraphQL.

استعلامات GraphQL

عندما نستخدم استعلامًا ، يمكننا استخدام طريقة Apollo.watchQuery بطريقة بسيطة جدًا. نحتاج ببساطة إلى تحليل استعلامنا في مستند GraphQL باستخدام مكتبة علامات graphql. [1]

استيراد {Injectable} من '@ angular / core' ؛
استيراد {Apollo، ApolloQueryObservable} من 'apollo-angular'؛
استيراد gql من 'graphql-tag' ؛
استيراد "rxjs / add / operator / map" ؛
const PostQuery = gql`
  الاستعلام {
    جميع المشاركات {
      هوية شخصية
      عنوان
      يحتوى
    }
  }
`.
Injectable ()
تصدير فئة BlogService {
  مُنشئ (أبولو الخاص: أبولو) {}
الكل(){
    إرجاع this.apollo.watchQuery  ({query: PostQuery})؛
  }
}

الآن يمكننا حقن BlogService وجلب منشورات المدونة الخاصة بنا. سيرسل Angular استفسارات إلى واجهة شبكتنا المحددة في ملف app.module.ts.

استيراد {ApolloClient، createNetworkInterface} من 'apollo-client' ؛
عميل const = ApolloClient جديد ({
  networkInterface: createNetworkInterface ({
    uri: 'http://127.0.0.1:8000/graphql'
  })،
})؛

الآن يمكننا الحصول على جميع المشاركات وتقديم القالب الخاص بنا. قاعدة الترميز الكاملة على جيثب.

آمل أن يكون هذا يعطي بعض الإلهام للمباني الأفضل GraphQL API ويستهلكها مع التطبيق الزاوي: D

إذا كنت تحب هذه المقالة ، يرجى التصفيق .

شكرا لك!