ربط ملفات الـ JSON في مشروعك الذي أنشأته بإطار عمل Angular

 اليوم سنتعلم كيف نقوم بربط ملفات الـ JSON التي أنشأنها في مشروعنا الذي يعمل بإطار عمل Angular وكيف نستخدمها في أي مكان داخل المشروع وبكل أريحية:


الخطوة الأولى: سنذهب إلى مجلد الـ assets لننشئ مجلداً اسمه Data ثم ننشئ بداخله ملفات الـ JSON التي نريد:


محتوى الملفات يكون بهذا النحو في قالب الأحيان (على سبيل المثال):

[
{
"FIRST_TIRM": {
"COURSES": [
{
"ID": 1,
"NAME_AR": "أساسيات الأمن السيبراني",
"NAME_EN": "Cyber Security Basics",
"IMG": "assets/images/courses/Cyber-Security-Basics.jpg",
"UPDATED": "4/8/2021",
"TEACHER_AR": "المحاضر هو المهندس عبدالله الدحيلان",
"TEACHER_EN": "The lecturer is Eng. Abdullah Al-Duhailan",
"DESC_AR": "",
"DESC_EN": "",
"LINK": "https://youtube.com/playlist?list=PLDWGNpNXof-AEbZgnQRZwovoqweMvfUq6",
"HELP": [
{
"NAME_AR": "ملفات وواجبات واختبارات المقرر",
"NAME_EN": "Course files, assignments and exams",
"DESC_AR": "",
"DESC_EN": "",
"ICON": "mdi mdi-folder",
"LINK": "https://drive.google.com/drive/folders/1sM-VIy8phqZVzccST6j05sNfzD96j5Pd?usp=sharing"
},
{
"NAME_AR": "معامل أساسيات الأمن السيبراني",
"NAME_EN": "Computer Networking Experiments",
"DESC_AR": "من أداء المدرب المتفوق والرائع حسن السلطان",
"DESC_EN": "From the performance of the superior and wonderful coach Hassan Al-Sultan",
"ICON": "mdi mdi-playlist-play",
"LINK": "https://youtube.com/playlist?list=PLDWGNpNXof-CBW6DphUJ3npUv4Fm6NRPf"
}
]
},
{
"ID": 2,
"NAME_AR": "شبكات الحاسب",
"NAME_EN": "Computer Networks",
"IMG": "assets/images/courses/Computer-Networks.jpg",
"UPDATED": "4/1/2021",
"TEACHER_AR": "المحاضر هو الأستاذ محمد الصالح",
"TEACHER_EN": "The lecturer is Eng. Mohammed Al-Saleh",
"DESC_AR": "",
"DESC_EN": "",
"LINK": "https://youtube.com/playlist?list=PLDWGNpNXof-CxDGEWFD6tGgOw6KbyDTOX",
"HELP": [
{
"NAME_AR": "ملفات وواجبات واختبارات المقرر",
"NAME_EN": "Course files, assignments and exams",
"DESC_AR": "",
"DESC_EN": "",
"ICON": "mdi mdi-folder",
"LINK": "https://drive.google.com/drive/folders/1aEZyOfGOZEvDvOmucqLmvBuNbZvMYE-G?usp=sharing"
},
{
"NAME_AR": "تجارب شبكات الحاسب",
"NAME_EN": "Computer Networking Experiments",
"DESC_AR": "من أداء عبدالله السالم",
"DESC_EN": "Performed by Abdullah Al-Salem",
"ICON": "mdi mdi-playlist-play",
"LINK": "https://youtube.com/playlist?list=PLDWGNpNXof-B1iegeauotvThoYXtqQ7oH"
}
]
},
{
"ID": 3,
"NAME_AR": "إنجليزي 1",
"NAME_EN": "English 1",
"IMG": "assets/images/courses/English_1.jpg",
"UPDATED": "4/24/2021",
"TEACHER_AR": "المحاضر هو الدكتور عبدالله محمد الملحم",
"TEACHER_EN": "The lecturer is Dr. Abdullah Al-Molhiam",
"DESC_AR": "",
"DESC_EN": "",
"LINK": "https://youtube.com/playlist?list=PLDWGNpNXof-AWXi1E-h7bXzU53w-utwmC",
"HELP": [
{
"NAME_AR": "ملفات وواجبات واختبارات المقرر",
"NAME_EN": "Course files, assignments and exams",
"DESC_AR": "",
"DESC_EN": "",
"ICON": "mdi mdi-folder",
"LINK": "https://drive.google.com/drive/folders/1unnSGF3VBv_n-7o0orXGcaysZUhCtdNU?usp=sharing"
}
]
},
{
"ID": 4,
"NAME_AR": "مبادئ البرمجة",
"NAME_EN": "programming principles",
"IMG": "assets/images/courses/programming-principles.jpg",
"UPDATED": "4/24/2021",
"TEACHER_AR": "المحاضر هو المهندس محمد الهفوفي",
"TEACHER_EN": "The lecturer is Eng. Mohammed Al-Hafufi",
"DESC_AR": "",
"DESC_EN": "",
"LINK": "https://youtube.com/playlist?list=PLDWGNpNXof-D2TrBjCeWqR1CDQAVT6vPD",
"HELP": [
{
"NAME_AR": "ملفات وواجبات واختبارات المقرر",
"NAME_EN": "Course files, assignments and exams",
"DESC_AR": "",
"DESC_EN": "",
"ICON": "mdi mdi-folder",
"LINK": "https://drive.google.com/drive/folders/1U7WmpZLaN8dmn3W_dOlM0dZ7KbDOF1bc?usp=sharing"
},
{
"NAME_AR": "حول اختبارات مبادئ البرمجة",
"NAME_EN": "About programming principles tests",
"DESC_AR": "من أداء عبدالله السالم",
"DESC_EN": "Performed by Abdullah Al-Salem",
"ICON": "mdi mdi-playlist-play",
"LINK": "https://youtube.com/playlist?list=PLDWGNpNXof-AhseFby3DTa6WnkyGOS4Wt"
},
{
"NAME_AR": "تقوية بايثون",
"NAME_EN": "Python booster",
"DESC_AR": "من أداء عبدالله السالم",
"DESC_EN": "Performed by Abdullah Al-Salem",
"ICON": "mdi mdi-playlist-play",
"LINK": "https://youtube.com/playlist?list=PLDWGNpNXof-AhseFby3DTa6WnkyGOS4Wt"
}
]
},
{
"ID": 5,
"NAME_AR": "الرياضيات التطبيقية",
"NAME_EN": "Applied Mathematics",
"IMG": "assets/images/courses/Applied-Mathematics.jpg",
"UPDATED": "4/24/2021",
"TEACHER_AR": "المحاضر هو المهندس محمد الرصاصي",
"TEACHER_EN": "The lecturer is Eng. Mohammed Al-Rasasi",
"DESC_AR": "",
"DESC_EN": "",
"LINK": "https://youtube.com/playlist?list=PLDWGNpNXof-D2TrBjCeWqR1CDQAVT6vPD",
"HELP": [
{
"NAME_AR": "ملفات وواجبات واختبارات المقرر",
"NAME_EN": "Course files, assignments and exams",
"DESC_AR": "",
"DESC_EN": "",
"ICON": "mdi mdi-folder",
"LINK": "https://drive.google.com/drive/folders/1YKOSjENa-0mkPpBF5f-EdwWhYNOJp86y?usp=sharing"
},
{
"NAME_AR": "موقع لحساب المصفوفة",
"NAME_EN": "Matrix Calculator",
"DESC_AR": "",
"DESC_EN": "",
"ICON": "mdi mdi-web",
"LINK": "https://matrixcalc.org/ar/#%7B%7B1,1,-1%7D,%7B1,0,1%7D,%7B2,1,1%7D%7D%2a%7B%7B1%7D,%7B20%7D,%7B20%7D%7D"
}
]
},
{
"ID": 6,
"NAME_AR": "أساسيات إدارة أنظمة الشبكات",
"NAME_EN": "Network systems management basics",
"IMG": "assets/images/courses/Network-systems-management-basics.jpg",
"UPDATED": "4/24/2021",
"TEACHER_AR": "المحاضر هو المهندس يوسف التركي",
"TEACHER_EN": "The lecturer is Eng. Yousef Al-Turki",
"DESC_AR": "",
"DESC_EN": "",
"LINK": "https://youtube.com/playlist?list=PLDWGNpNXof-BqV89ijR80AmZ0mvQKdwVR",
"HELP": [
{
"NAME_AR": "ملفات وواجبات واختبارات المقرر",
"NAME_EN": "Course files, assignments and exams",
"DESC_AR": "",
"DESC_EN": "",
"ICON": "mdi mdi-folder",
"LINK": "https://drive.google.com/drive/folders/188xLOfq9zrrYIhEJ8WLjPNQamGdK3VPq?usp=sharing"
}
]
},
{
"ID": 7,
"NAME_AR": "مذاكرة وسوالف - الموسم الأول",
"NAME_EN": "Study And Sideburns - Season One",
"IMG": "assets/images/courses/Study And Sideburns - Season One.jpg",
"UPDATED": "4/24/2021",
"TEACHER_AR": "المحاضر هو المهندس يوسف التركي",
"TEACHER_EN": "The lecturer is Eng. Yousef Al-Turki",
"DESC_AR": "هي جلسات خصصتها أسبوعياً بيني وبين الزملاء في تخصص الأمن السيبراني (بكالوريوس الكلية التقنية) لتناقل الأفكار والخبرات في المجال التقني والكلام الأكبر فيها عن الدراسة والاختبارات.",
"DESC_EN": "These are sessions that I have allocated weekly between me and colleagues in the field of cybersecurity (Bachelor of Technology College) to transfer ideas and experiences in the technical field and to talk more about study and exams.",
"LINK": "https://youtube.com/playlist?list=PLDWGNpNXof-CHfVRMGTG7iLsUXAl1oHam",
"HELP": [
{
"NAME_AR": "مقتطفات مذاكرة وسوالف - الموسم الأول",
"NAME_EN": "Study excerpts and sideburns - season one",
"DESC_AR": "الأشياء المهمة من المذاكرة والسوالف",
"DESC_EN": "Important things from studying and sideburns",
"ICON": "mdi mdi-playlist-play",
"LINK": "https://youtube.com/playlist?list=PLDWGNpNXof-Cfcraz33ZDE4AgkpvnpveF"
}
]
}
]
}
}
]


الخطوة الثانية: إنشاء ملف الخدمة في المكون الذي تريده:




هكذا سيكون محتوى ملف الخدمة:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class NewCyperSecurityService {
public url = environment.url + '/assets/data/';
constructor(public http: HttpClient) { }
public getCourses(): Observable<any> {
return this.http.get<any>(this.url + 'ciperSecurity.json');
}
}

export const environment = {
production: false,
url: ''
};

الخطوة الثالثة: الاشتراك في الخدمة عن طريق الكود أدناه:

import { Component, OnInit } from '@angular/core';
import { NewCyperSecurityService } from './new-cyper-security.service';

@Component({
selector: 'app-new-cyper-security',
templateUrl: './new-cyper-security.component.html',
styleUrls: ['./new-cyper-security.component.scss']
})
export class NewCyperSecurityComponent implements OnInit {
courses: any = [];
constructor(public newyperSecurityService: NewCyperSecurityService) { }

ngOnInit(): void {
this.newyperSecurityService.getCourses().subscribe(res => {
this.courses = res;
console.log(res);
});
}
}


الخطوة الرابعة: بلا إضافة هذا وحدة الـ HttpClientModule في مصفوفة الـ imports لن تعمل الصفحة معك أبداً


الخطوة الأخيرة: بعد عمل كافة الخطوات أعلاه ستكون النتيجة معك بهذا الامتياز أدناه




المشروعان اللذان عملنا عليهما في هذه الدورة:







تعليقات

إرسال تعليق

المشاركات الشائعة من هذه المدونة

ngx-extended-pdf-viewer

https://www.npmjs.com/package/ngx-extended-pdf-viewer https://pdfviewer.net/extended-pdf-viewer/simple المكتبة: https://github.com/vadimdez/ng2-pdf-viewer  To view a PDF file using a lightbox in Angular, you can use the ngx-extended-pdf-viewer library for displaying the PDF and ng-gallery for the lightbox functionality. Here’s a step-by-step guide: Step 1: Install the Required Packages Install ngx-extended-pdf-viewer : This library provides an efficient way to display PDFs in Angular. Install ng-gallery : This library provides a customizable lightbox gallery. Run the following commands: bash نسخ الكود npm install ngx-extended-pdf-viewer npm install ng-gallery Step 2: Import Modules in Your Angular Module In your main Angular module (e.g., app.module.ts ), import both NgxExtendedPdfViewerModule and GalleryModule . typescript نسخ الكود import { NgxExtendedPdfViewerModule } from 'ngx-extended-pdf-viewer' ; import { GalleryModule } from 'ng-gallery' ; @NgModule ({...
قراءة المزيد

how to getting access token for https://fcm.googleapis.com/v1/projects/al-ayahya-co/messages:send for angular and backend nestjs

صورة
  Getting Access Token for FCM in Angular and NestJS To send messages using the Firebase Cloud Messaging (FCM) HTTP v1 API, you need to obtain an access token that authorizes your requests. Below are the steps to achieve this using Angular for the frontend and NestJS for the backend. Step 1: Set Up Firebase Project Create a Firebase Project : Go to the  Firebase Console  and create a new project if you haven't already. Enable FCM : In your Firebase project, navigate to the Cloud Messaging section and enable it. Step 2: Service Account Key Generate a Service Account Key : In the Firebase Console, go to  Project Settings  >  Service accounts . Click on  Generate new private key . This will download a JSON file containing your service account credentials. Step 3: Backend (NestJS) Implementation Install Required Packages : You need to install the  google-auth-library  to handle authentication: bash npm install google-auth-library Create a Serv...
قراءة المزيد

طريقة تفعيل زر Inline Keyboard في Telegram Bot

https://g.co/bard/share/85e904a02dd1 https://g.co/bard/share/99e480e0dca7  there are two main approaches to achieve this functionality in your Telegram bot: 1. Inline Keyboard with URL Button: This approach uses an inline keyboard with a button linked to the desired website URL. Here's how: Create an inline keyboard: Use the InlineKeyboardMarkup object provided by your chosen bot development library (e.g., Telegraf for Python). Define a list of lists where each sublist represents a row of buttons. Add a URL button: In each sublist, add an InlineKeyboardButton object with the button text and the url parameter set to the website URL. Send the message with the keyboard: Use the sendMessage method with the inline_keyboard parameter set to your created inline keyboard object. Example (Python with Telegraf): Python from telegraf.ext import Updater, CommandHandler, MessageHandler, Filters def open_website(update, context):   keyboard = InlineKeyboardMarkup([     [InlineKeyb...
قراءة المزيد