Social media community for Software developers
made by developers for developers
# تسمع عن flatMap في javascript؟:
هي Array method بتجمع بين map و flat مع بعض في خطوة واحدة .. بس الاول خلونا نتعرف علي كل واحدة فيهم ع السريع كدة ونرجع لـ flatMap تاني
# اية هي Map في javascript؟:
هي callback بتتنفذ علي كل عناصر الـ array بحيث نغير قيم كل العناصر في خطوة واحدة ومن غير ما نحتاج نعمل loop
مثال
let array = [1, 2, 3];
let squareValues = array.map(el => el * 2);
console.log(squareValues);
// result: [2, 4, 6]
زي مانت شايف في المثال دة, احنا حابين نضاعف كل عنصر من عناصر array في خطوة واحدة
اية هي flat في javascript
لو عندي array جواها arrays وعاوز انقل كل عناصر ال array الداخلية للـ top level ف flat هتقدر تنفذ دة في خطوة واحدة
مثال:
// we need to flatter the internal arr ....
ماجيستير ادارة الاعمال MBA من الجامعة الامريكية ببلاش
بتدرس فيها مبادئ تمويل الشركات والتسويق والمحاسبة والموارد البشرية وادارة العمليات
في مبادئ التسويق هتتعلم ازاي تقدر قيمة أسهم الشركة وازاي تجيب تمويل لشركتك وازاي تتعام مع المستثمرين
وفي مبادئ التسويق هتتعلم ازاي تعمل منتج جديد وازاي تحدد اسعار منتجاتك وازاي تدرس السوق
وفي الموارد البشرية هتتعلم ازاي تختار موظفين لشركتك وازاي تقيم اداء موظفينك وتتعامل ازاي مع انواع الموظفين المختلفة وكمان هتتعلم المسائل القانونية ومشاكلها
وفي ادارة العمليات هتتعلم ازاي تدير المشتريات واداارة المخازن وازاي تعمل تخطيط للمشاريع وازاي تحول المواد الخام او المواد الاولية لمنتج جاهز للبيع
حمل من هنا ماتيريال ماجيستير ادارة الاعمال من الجامعة الامريكية
....
اول مشروع بأنجولار | كورس_انجولار_للمبتدئين
الاول خلينا نتعرف علي أنجولار وأجزاؤه من الدرس اللي فات
أنجولار بيوفرلنا cli tool بتساعدنا نتعامل مع تطبيق انجولار بتاعنا
ممكن مثلا ننشئ مشروع جديد, نعمل component أو directive جديد
# Angular CLI tool:
علشان نشتغل بـ cli tool الهاصة بأنجولار لازم نسطبها عن طريق npm
$npm install -g @angular/cli
لاحظ اننا استخدمنا الفلاج -g علشان نسطبها globally وبالتالي نقدر نستخدمها من اي مكان في الكمبيوتر
# انشاء اول مشروع انجولار:
دلوقت نقدر نستخدم أوامر انجولار ng وأول أمر هنتعلمه انهاردة هو new المسؤول عن انشاء مشروع جديد
يلا نسمي المشروع mobarmegeen علي اسم منصة مبرمجين دوت كوم
ng new mobarmegeen
ولو انت زيي بتحب تطلع احسن شغل ممكن انصحك تفعل stri ....
لو انت لسة جديد في Angular مهم جدا تعرف المفاهيم الاساسية دي
#انجولار بيتكون من الاجزاء دي
- Components — دة الجزء المسؤول عن تكوين واجهة البرنامج او ال UI
- Directives — ودي مسؤولة عن تغيير سلوك اي component
- Pipes — ودي مسؤولة عن تحويل قيمة في الـ template لقيمة جديدة.
- Services —دي بيكون فيها الـ business logic والـ API calls.
- Modules — دي بنجمع فيها الاجزاء كلها وبنربطها ببعض, لو بتستخدم standalone components مش هنحتاجها.
باختصار الـ component هو اي view بيظهر قدامك علي الشاشة , ممكن يكون زرار او حتي صفحة كاملة
الـ component نفسه مكون من
- template: ودة بيكون فيه كود الـ html ولكن بيدعم binding
- class: ودة فيه اكواد typescript والـ lifecycle بتاعة انجولار
- css: ودة بنحط فيه ....
# اية هي ميزة Standalone الجديدة في Angular وامتي وازاي نستخدمها؟:
علشان نعرف اية اللي الميزة الجديدة دي بتقدمهولنا خلونا ندي بصة الاول الدنيا كانت ماشية ازاي قبل الـ standalone
قبل كدة كان في حاجة اسمها NgModule ودة عبارة عن Angular module بنجمع فيه الاجزاء كلها سواء components, directives, pipes, services واي حاجة لها علاقة بانجولار
كل جزء بيكون مرتبط بـ NgModule معين, ولازم يكون مرتبط بـ NgModule واحد بس
طب اية المشكلة في الـ pattern دة؟
أولا لو انت محتاج function بسيطة بس كان لازم تـ import الـ module كله بكل اجزاؤه عشان تعرف تستخدم الفنكشن الصغيرة دي, ودة طبعا كان بيسبب بطئ في الابليكيشن بتاعنا
ثانيا بما ان كل جزء مرتبط بـ module معين فدة معناه انه مش reusable يعني ماتقدرش تستهدم ....
لو دخلت مجال الـ frontend سواء كنت Sinior أو Junior والشيطان لعب في دماغك انك تعمل مشاريع قبل ما تشوف الكورس البريميوم دة توب بسرعة وعد لرشدك في أسرع وقت ممكن
لان في الكورس دة هتتعلم تريكات واسرار برمجية مش موجودة في اي كتاب هتقراه ولا اي كورس تاني
اتعلم Angular من الصفر عن طريق انشاء تطبيقات كاملة برعاية "مبرمجين دوت كوم"
مع تطبيق أفضل الممارسات المطلوبة في المشاريع والشركات العملاقة والـ design patterns و SOLID principals
مبرمجين دوت كوم هي منصة اجتماعية تعليمية للمبرمجين اللي عاوزين يطوروا مهاراتهم ويحسنوا مسيرتهم المهنية
شوف الكورس من هنا وماتنساش تعمل شير عشان تساهم في نشر العلم
ودة كوبون خصم 100% من مبرمجين دوت كوم بشرط عمل ريفيو للكورس علي يوديمي (سواء ايجابي او سلبي براحتك)
....
ما هو Angular | كورس_انجولار_للمبتدئين
البوست دة هو بداية سلسلة شاملة لتعلم أنجولار من الصفر مع التدريب العملي
الاول خلينا نتعرف علي انجولار ونعرف اية اللي ممكن نعمله بيه واية اللي انجولار مايقدرش يدهولنا
# اية هو انجولار؟:
انجولار هو frontend framework .. يعني نقدر نعمل بيه الواجهة الأمامية للمواقع
نقصد بالواجهة الامامية أي حاجة عنيك بتشوفها لما بتدخل أي موقع
أما الواجهة الخلفية نقصد بيها أي حاجة بتحصل علي السيرفر زي قواعد البيانات والتعامل مع الملفات
أنجولار بيتكون من مجوعة أجزاء أساسية بنجمعها مع بعض عشان تشكلنا تطبيق كامل
الجزء الاساسي هو الـ component ودة بيمثل الـ view, او بطريقة أبسط: أي عنصر علي الشاشة زي الزراير مثلا والروابط والصور والنصوص وغيرها
بنقدر نتحكم في خصائص الـ ....
تدريب في جوجل مدفوع الاجر براتب يصل الي 3300 دولار بهدف تعزيز ال open source contributing
التدريب متاح للجميع من اي تخصص وللطلبة والخريجين
التدريب عبارة عن انك بتشارك في مشروع كامل, وبعد انتهاء المشروع بيتم نشره كمشروع مفتوح المصدر
التقديم
https://summerofcode.withgoogle.com
....
undefined
لما تكون بتعمل custom component في Angular غالبا هتعمل كدة
@Component({ template: `
{{ fullName }}
`, }) export class NameComponent { @Input() firstName: string; @Input() lastName: string; fullName: string; ngOnInit() { this.fullName = `${this.firstName} ${this.lastName}`; } } ممكن يتهيألك ان الكود دة صح .. بس هو غلط! طب اية مشكلته الكود دة؟!! لو جربت الكود هتلاقيه شغال معاك كويس .. او بمعني أدق هيتهيألك انه شغال كويس المشكلة عنا انك استخدمت الـ hook الغلط الهوك ngOnInit بيشتغل مرة واحدة بعد الـ inistansiation ودة معناه ان لو الـ parent component حدث الـ inputs, القيم الجديدة مش هتنعكس في الـ component بتاعك الصح هنا اننا نستخدم ngOnChanges لانها بتشتغل مع كل مرة الـ ....