كيفية إنشاء تطبيق Angular؟
Angular هو إطار عمل شائع مفتوح المصدر لبناء تطبيقات ويب ديناميكية وسريعة الاستجابة ومعقدة. تم تطوير Angular لأول مرة بواسطة Google في عام 2010 تحت اسم “AngularJS”.
يتيح لك Angular إنشاء تطبيقات ديناميكية من صفحة واحدة مع بنية كود نظيفة ومنظمة.
يستخدم Angular TypeScript، وهي مجموعة فائقة من JavaScript، والتي تضيف ميزات مثل التحقق من النوع والواجهات والفئات إلى اللغة. هذا يجعل شيفرة Angular أكثر قابلية للصيانة وأقل عرضة للأخطاء.
لتبسيط عملية تطوير الويب باستخدام Angular، من المفيد استخدام حل Backend كخدمة (BaaS) مثل Back4app.
يوفر Back4app بنية تحتية خلفية مبنية مسبقًا مع ميزات مثل المصادقة وتخزين البيانات والمنطق من جانب الخادم.
يتيح لك ذلك التركيز على بناء الواجهة الأمامية لتطبيقاتك دون القلق بشأن تعقيدات تطوير الواجهة الخلفية.
في هذه المقالة، سوف تستكشف Angular وتبني تطبيق مدونة أساسي باستخدام Angular و Back4app.
Contents
مزايا الزاوي
اكتسبت Angular شعبية بين المطورين بسبب مزاياها العديدة. فيما يلي بعض المزايا الرئيسية لـ Angular:
ربط البيانات في اتجاهين
يعد الربط ثنائي الاتجاه للبيانات ميزة موفرة للوقت ومعززة للإنتاجية تعزز جودة تطبيقات Angular. يسمح الربط ثنائي الاتجاه للبيانات بالتغييرات التي تطرأ على النموذج (البيانات) لتنعكس تلقائيًا في طريقة العرض (واجهة المستخدم).
تنعكس أي تغييرات على النموذج على الفور في طريقة العرض. هذا يجعل تطوير تطبيقات معقدة وديناميكية أسهل وأسرع، مما يلغي الحاجة إلى كتابة شيفرة برمجية لمزامنة النموذج والعرض.
حقن التبعية
حقن التبعيات هي ميزة مهمة في Angular تجعل إدارة التبعيات بين المكونات والخدمات أسهل. يعد حقن التبعيات ميزة قوية تعزز موثوقية تطبيقات Angular وقابلية الصيانة والاختبار.
يُمكِّن حقن التبعيات في Angular المكونات والخدمات من إعلان التبعيات على المكونات والخدمات الأخرى. ثم يتولى نظام حقن التبعيات مهمة إنشاء وتوفير هذه التبعيات تلقائيًا. هذا يلغي الحاجة إلى إنشاء وإدارة التبعيات يدويًا، مما يقلل من مخاطر الأخطاء.
يجعل نظام حقن التبعيات في Angular من السهل إدارة التبعيات ويقلل من كمية التعليمات البرمجية التي تحتاج إلى كتابتها.
البنية القائمة على المكونات
تجعل بنية Angular القائمة على المكونات من السهل بناء واجهات مستخدم معقدة من خلال تقسيمها إلى مكونات أصغر قابلة لإعادة الاستخدام.
يمكن إعادة استخدام المكونات بسهولة عبر أجزاء التطبيق المختلفة. يمكن تطوير المكونات بشكل مستقل، مما يجعل إدارة التطبيقات المعقدة ذات الأجزاء الكثيرة المتحركة أسهل. تجعل هذه البنية أيضًا اختبار وتصحيح الشيفرة البرمجية أسهل، حيث يمكن عزل المكونات واختبارها بشكل منفصل.
تايب سكريبت
TypeScript هي مجموعة فائقة من JavaScript تضيف تدقيقًا ثابتًا للنوع والواجهات والفئات وغيرها من الميزات إلى اللغة. وهي لغة مفتوحة المصدر تحتفظ بها مايكروسوفت وهي خيار شائع لتطوير تطبيقات الويب واسعة النطاق.
تتم كتابة Angular بلغة TypeScript. وهذا يوفر أدوات أفضل وتجربة تطوير أكثر قوة. تسمح الكتابة الثابتة في TypeScript للمطوّرين باكتشاف الأخطاء في وقت التحويل البرمجي بدلًا من وقت التشغيل، مما يسهّل صيانة الشيفرة البرمجية وإعادة هيكلتها.
مجتمع كبير
تمتلك Angular مجتمعًا كبيرًا ونشطًا من المطورين، والذي يمكن أن يكون ذا قيمة كبيرة لعدة أسباب.
يوفر المجتمع الكبير العديد من الموارد، مثل البرامج التعليمية والوثائق والمنتديات. يمكن أن تكون هذه الموارد مفيدة بشكل لا يصدق للمطورين الجدد في Angular أو الذين يبحثون عن حلول لمشاكل محددة.
يعني وجود مجتمع كبير أن العديد من المطورين يعملون بنشاط على تحسين إطار العمل من خلال إنشاء ومشاركة ملحقات وإضافات الطرف الثالث ل Angular. وهذا يمكن أن يوفر عليك الوقت والجهد، حيث يمكنك الاستفادة من الشيفرة الموجودة لإضافة وظائف جديدة لمشاريعك.
حدود الزاوي
على الرغم من أن Angular هو إطار عمل قوي وشائع لبناء تطبيقات الويب، إلا أن له بعض القيود التي يجب أن تكون على دراية بها. تتضمن بعض قيود Angular ما يلي:
منحنى التعلّم الحاد
يمكن أن يكون تعلم Angular صعبًا بالنسبة لبعض المطورين نظرًا لأنه يقدم العديد من المفاهيم والأساليب الجديدة لتطوير الويب. قد تحتاج إلى قضاء وقت طويل في تعلم الوحدات النمطية والمكونات والخدمات وحقن التبعية والبرمجة التفاعلية.
حجم كبير
Angular هو إطار عمل كبير نسبيًا مقارنةً بالأطر الأمامية الأخرى. يرجع الحجم الكبير ل Angular في المقام الأول إلى مجموعة ميزاته الواسعة، والتي تتضمن العديد من الوظائف المدمجة، مثل التعامل مع النماذج والتوجيه وإدارة البيانات.
يمكن أن يؤدي الحجم الكبير لـ Angular إلى إبطاء أوقات تحميل تطبيقات الويب، مما قد يؤثر سلبًا على تجربة المستخدم. وهذا ينطبق بشكل خاص على المستخدمين الذين يستخدمون اتصالات الإنترنت البطيئة.
يمكن للحجم الكبير لـ Angular أن يجعل تطوير المشاريع المعقدة وصيانتها أكثر صعوبة.
تحسين محركات البحث المحدود
ترجع إمكانيات تحسين محركات البحث المحدودة في Angular بشكل أساسي إلى أنه إطار عمل تطبيق صفحة واحدة (SPA). تم تصميم SPAs للتشغيل بالكامل في المتصفح، مما يعني أن كود HTML يتم إنشاؤه ديناميكيًا باستخدام JavaScript. هذا يجعل من الصعب على برامج زحف محركات البحث فهرسة محتوى موقع ويب يعمل بنظام Angular بدقة.
بناء تطبيق المدونة
قم بإنشاء تطبيق Angular وأطلق عليه اسم “تطبيق المدونة”. لإنشاء تطبيق Angular، قم بتشغيل الأمر التالي في دليل مشروعك في دليل مشروعك على جهازك الطرفي:
ng new blog-application
بعد إنشاء تطبيق Angular الخاص بك، ستقوم بإنشاء مكونين. سيكون المكونان هما مكونا الصفحة الرئيسية ومكون ما بعد. بعد إنشاء المكونين، ستقوم بتوجيه المكونين.
لإنشاء المكونات، قم بتشغيل الأوامر التالية:
cd blog-application
ng generate component home-component
ng generate component post-component
بمجرد إنشاء المكونات، قم بتهيئة التوجيه الخاص بها في ملف app-routing.module.ts.
هكذا
//app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponentComponent } from './home-component/home-component.component';
import { PostComponentComponent } from './post-component/post-component.component';
const routes: Routes = [
{path: '', component: HomeComponentComponent},
{path: 'post', component: PostComponentComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
تُعرِّف كتلة الشيفرة أعلاه مسارين في مصفوفة المسارات. يحتوي المسار الخاص ب HomeComponentComponentComponent على مسار فارغ. يُشير المسار الفارغ إلى أنّ المكوّن المكوّن الرئيسي سيُعرض بمجرد تصيير تطبيقك.
يُعرَّف مسار PostComponentComponent بمسار “مشاركة”، مما يعني أنه عند الانتقال إلى هذا المسار، سيُصيَّر PostComponentComponentComponent ويُعرض في طريقة العرض.
للانتقال إلى المسارات المحددة، ستضيف رأسًا إلى تطبيقك. ستنشئ الرأس في ملف app-component.html. سيحتوي الرأس على العناصر التي تنتقل إلى المسارات المختلفة.
على سبيل المثال:
<!--app.component.html-->
<div>
<div class="header">
<a routerLink=""><h2>Blog</h2></a>
<a routerLink="post"><button>write</button></a>
</div>
<router-outlet></router-outlet>
</div>
يحتوي قسم الرأس على عنصري ربط فرعيين. تلتف عناصر الارتساء بعنصر h2 وعنصر زر. ينقلك النقر على h2 إلى المسار الافتراضي، بينما ينقلك النقر على عنصر الزر إلى مسار المشاركة. يعرض مخرج الموجه المكونات التي تم توجيهها تحت قسم الرأس.
بعد إنشاء الرأس، يمكنك تصميم الرأس في ملف app-compnent.scss:
/* app.component.scss*/
.header{
display: flex;
justify-content: space-between;
padding: 1rem 0;
}
دمج تطبيق Back4App
للبدء في إنشاء تطبيق مع Back4app، تأكد أولاً من امتلاكك لحساب. إذا لم يكن لديك حساب على Back4app، فاتبع التعليمات المقدمة:
- انتقل إلى الموقع الإلكتروني Back4app.
- ابحث عن زر التسجيل في الجزء العلوي الأيمن من الصفحة الرئيسية وانقر فوقه.
- أكمل نموذج التسجيل وأرسله.
بمجرد أن تقوم بالتسجيل بنجاح، قم بتسجيل الدخول إلى حساب Back4app الخاص بك وتابع على النحو التالي:
- حدد موقع زر تطبيق جديد في الزاوية العلوية اليمنى وانقر فوقه.
- سيتم توجيهك إلى نموذج حيث ستدخل اسم التطبيق الذي تريده.
- أدخل اسم تطبيقك وحدد زر CREATE (إنشاء) لبدء عملية إنشاء تطبيقك.
بعد النقر على زر “إنشاء”، سيتم إنشاء طلبك، وسيتم توجيهك إلى لوحة تحكم التطبيق.
ربط تطبيقك ب Back4app
لربط تطبيق Angular الخاص بك بتطبيق Back4app الذي أنشأته، يجب عليك تثبيت Parse JavaScript SDK.
قم بتثبيت SDK عن طريق تشغيل أي من الأمرين أدناه، اعتمادًا على مدير الحزم لديك:
#using npm
npm install parse
or
#using yarn
yarn add parse
بعد تثبيت Parse JavaScript SDK، يجب أن تحصل على معرّف التطبيق ومفتاح JavaScript. ستحتاج إليهما لربط تطبيق Angular الخاص بك بتطبيق Back4app.
لاسترداد معرف التطبيق ومفتاح جافا سكريبت من Back4app، انتقل إلى قسم الأمان والمفاتيح عن طريق تحديد إعدادات التطبيق في لوحة التحكم. هناك، يمكنك الوصول بسهولة إلى المفاتيح الضرورية المطلوبة لربط تطبيقك Angular بتطبيق Back4app.
بعد استرداد معرّف التطبيق ومفتاح JavaScript، قم بتخزينهما بشكل آمن في تطبيقك.
في ملف app.component.ts الخاص بك، استورد النسخة المصغرة من Parse من Parse. ثم استدع طريقة التهيئة في Parse. تأخذ طريقة التهيئة معرف التطبيق ومفتاح JavaScript كوسيطين. أخيرًا، عيّن الخادمURL في Parse إلى“https://parseapi.back4app.com/”.
بعد القيام بذلك، يجب أن يبدو ملف app.component.ts الخاص بك بهذا الشكل:
//app.component.ts
import { Component } from '@angular/core';
import * as Parse from 'parse';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
}
Parse.initialize(PARSE_APPLICATION_ID, PARSE_JAVASCRIPT_KEY);
(Parse as any).serverURL = "<https://parseapi.back4app.com/>";
إضافة بيانات إلى تطبيق Back4app الخاص بك
لإضافة البيانات إلى تطبيق Back4App الخاص بك، ستقوم بإنشاء نموذج لتلقي البيانات من المستخدم. عند إرسال النموذج، ستقوم بتشغيل دالة التعامل مع الإرسال. ستحتوي دالة التعامل مع الإرسال على منطق إضافة منشور جديد من تطبيق مدونتك إلى تطبيق Back4App.
هكذا
// post-component.component.ts
import { Component } from '@angular/core';
import * as Parse from 'parse';
@Component({
selector: 'app-post-component',
templateUrl: './post-component.component.html',
styleUrls: ['./post-component.component.scss']
})
export class PostComponentComponent {
data: postData = {
title: '',
body: '',
}
handleSubmit(){
try {
const Post = new Parse.Object("Post");
Post.set("title", this.data.title);
Post.set("body", this.data.body);
Post.save().then(() => {
console.log("New Post added successfully");
});
} catch (error) {
console.log(error);
}
}
}
interface postData {
title: string,
body: string
}
كتلة التعليمات البرمجية أعلاه هي ملف post-component.component.component.ts**.** تنشئ دالة التعامل مع الإرسال كائن Parse Post جديدًا وتعيّن خاصية العنوان إلى قيمة خاصية data.title وخاصية الجسم إلى خاصية data.body. أخيرًا، تحفظ الدالة خصائص كائن المشاركة إلى خادم Parse باستخدام Post.save().
ستحصل خصائص البيانات على قيمها من المستخدم من خلال نموذج. للقيام بذلك، ستنشئ نموذجًا في ملف post-component.component.html.
هكذا
<!-- post-component.component.html -->
<form class="post" (ngSubmit)="handleSubmit()">
<input type="text" placeholder="Title..." name="title" [(ngModel)]="data.title" >
<textarea name="body" placeholder="Body..." cols="30" rows="10" [(ngModel)]="data.body"></textarea>
<button type="submit">Post</button>
</form>
يربط نموذج ngModel قيم حقلي إدخال العنوان والجسم بخصائص البيانات. يعالج ngSubmit إرسال النموذج عن طريق استدعاء الدالة handleSubmit المعلنة في ملف post-component.ts.
بعد ذلك، ستصمم المكون الخاص بك. في ملف SCSS الخاص بالمكوّن اللاحق، أدخل الشيفرة التالية:
/* post-component.component.scss */
.post{
margin-block-start: 4rem;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
input{
border: none;
inline-size: 100%;
padding: 1rem;
border-radius: 7px;
&::placeholder{
color: #e2e2e2;
}
textarea{
border: none;
inline-size: 100%;
padding: 1rem;
&::placeholder{
color: #e2e2e2;
}
}
}
جلب البيانات من Back4app
لجلب البيانات من تطبيق Back4app الخاص بك، أنشئ استعلام Parse للفئة التي تريد جلب البيانات منها. سيتم تشغيل الاستعلام في خطاف دورة حياة ngOnInit.
على سبيل المثال:
// home-component.component.ts
import { Component } from '@angular/core';
import * as Parse from 'parse';
@Component({
selector: 'app-home-component',
templateUrl: './home-component.component.html',
styleUrls: ['./home-component.component.scss']
})
export class HomeComponentComponent {
data: postData[] = [];
async ngOnInit() {
try {
const query = new Parse.Query("Post");
const post = await query.find();
this.data = post;
} catch (error) {
console.log(error);
}
}
}
interface postData {
id: string,
get: any,
}
تبحث كتلة التعليمات البرمجية أعلاه عن كائن “مشاركة” من قاعدة بيانات تطبيق Back4app الخاص بك باستخدام طريقة Parse.Query(). ثم يُرجع مصفوفة تحتوي على نتائج الاستعلام عن طريق استدعاء طريقة Parse .Query() الخاصة ب Parse.Query(). وأخيرًا، يقوم بتعيين المصفوفة التي تم إرجاعها إلى متغير البيانات.
باستخدام مصفوفة البيانات، ستجعل قالب HTML الخاص بك:
<!-- home-component.component.html -->
<div class="home">
<div class="post" *ngFor="let post of data">
<h3>{{ post.get('title') }}</h3>
<p>{{ post.get('body') }}</p>
<button>Delete</button>
</div>
</div>
يقوم التوجيه ngFor بالحلقات من خلال المصفوفة وإنشاء عناصر HTML ملفوفة في القسم الخاص بها. تسترجع طريقة post.get() قيم خصائص العنوان والجسم للسمات في قاعدة بيانات Back4App الخاصة بك.
يمكنك الآن تصميم مكوّنك بإضافة الشيفرة التالية في ملف SCSS الخاص بالمكوّن:
/* home-component.component.scss */
.home{
display: flex;
flex-direction: column;
gap: 2rem;
margin-block-start: 4rem;
.post{
border-radius: 12px;
padding: 1rem;
&:hover{
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
background-color: #e2e2e2;
}
h3{
text-transform: uppercase;
margin-block-end: 0.4rem;
}
button{
margin-block-start: 1rem;
}
}
}
حذف البيانات من تطبيق Back4app الخاص بك
لحذف البيانات من تطبيق Back4App الخاص بك، يمكنك استخدام طريقة التدمير لإزالة السجل (السجلات) المقابلة من قاعدة البيانات الخاصة بك. ستقوم بإنشاء دالة حذف المنشور في ملف home-component.component.component.ts الخاص بك. ستحتوي دالة DeletePost على منطق حذف المنشورات من قاعدة بيانات تطبيق Back4App الخاص بك استنادًا إلى معرف معين.
هكذا
// home-component.component.ts
async deletePost(id: string) {
try {
const Post = Parse.Object.extend("Post");
const todo = new Post();
todo.id = id;
await todo.destroy();
const newData = this.data.filter( (item: postData) => item.id !== id )
this.data = newData;
} catch (error) {
console.log(error);
}
}
تنشئ الشيفرة البرمجية أعلاه كائن منشور جديد باستخدام طريقة Parse.Object.extension. ثم يُعيِّن خاصية المُعرِّف لكائن المنشور إلى المُعرِّف الذي تم تمريره إلى الدالة.
بعد ذلك، يستدعي طريقة التدمير لكائن المنشور لحذف المنشور الذي يحمل المُعرِّف المُعطى من قاعدة بيانات Back4app. ثم يقوم بتصفية مصفوفة البيانات وإرجاع مصفوفة جديدة newData، مع جميع المشاركات باستثناء المشاركة المحذوفة. ثم يتم تعيين مصفوفة البيانات الجديدة إلى متغير البيانات.
بعد أن تُعرِّف دالة DeletePost في ملف home-component.component.components.ts، ستربط الدالة بزر الحذف في ملف HTML الخاص بالمكوّن باستخدام حدث النقر.
يجب أن يبدو ملف home-component.component.html الخاص بك بهذا الشكل:
<!-- home-component.component.html -->
<div class="home">
<div class="post" *ngFor="let post of data">
<h3>{{ post.get('title') }}</h3>
<p>{{ post.get('body') }}</p>
<button (click)="deletePost(post.id)">Delete</button>
</div>
</div>
أخيرًا، أضف بعض الأنماط العامة إلى التطبيق عن طريق إضافة الكتلة البرمجية أدناه إلى ملف styles.scss:
/* styles.scss */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
inline-size: 50%;
margin: 0 auto;
background-color: #f2f2f2;
}
a{
text-decoration: none;
color: inherit;
}
button{
border: 1px #333333 solid;
padding: 0.3rem 0.5rem;
border-radius: 0.4rem;
background-color: inherit;
inline-size: min-content;
&:hover{
background-color: #333333;
color: #FFFFFF;
}
}
اختبار التطبيق
لاختبار التطبيق، افتح طرفية المشروع الخاص بك وقم بتشغيل الأمر أدناه:
ng serve
يقوم الأمر أعلاه بتجميع التطبيق واستضافته على خادم محلي على http://localhost:4200 بشكل افتراضي.
عند تشغيل تطبيقك، يجب أن ترى واجهة المستخدم الموضحة في الصورة أدناه:
سيؤدي النقر على زر الكتابة إلى نقلك إلى مكوِّن المشاركة. يحتوي مكون المشاركة على نموذج يحتوي على حقول إدخال وزر.
سيبدو المكون اللاحق على هذا النحو:
بعد ملء حقول الإدخال، سيؤدي النقر على زر النشر إلى إضافة قيم الإدخال إلى قاعدة بيانات Back4app. لتأكيد ذلك، يمكنك التحقق من لوحة معلومات تطبيق Back4app أو إعادة التوجيه إلى الصفحة الرئيسية للتطبيق.
سيؤدي النقر على زر الحذف إلى حذف المشاركة. على سبيل المثال، حذف منشور “ما هو الأسد؟” بالنقر على زر الحذف الخاص به:
الخاتمة
Angular هو إطار عمل قوي لبناء تطبيقات ويب قوية وقابلة للتطوير. وهو يتميز ببنية معيارية، وربط بيانات قوي، ومكونات واسعة مبنية مسبقًا. وتشمل مزاياه زيادة إنتاجية المطورين، وعملية تطوير مبسطة، والقدرة على إنشاء واجهات مستخدم ديناميكية وسريعة الاستجابة وذات أداء عالٍ.
يمكن أن يؤدي إنشاء تطبيق Angular مع Back4app كحل Backend كخدمة إلى تبسيط وتسريع عملية التطوير بشكل كبير. مع البنية التحتية المبنية مسبقًا في Back4app، يمكنك التركيز على إنشاء الواجهة الأمامية لتطبيقك دون القلق بشأن تعقيدات تطوير الواجهة الخلفية، مثل المصادقة وتخزين البيانات.
