פיתוח צד לקוח בסיסי עם Angular

Mean Stuck

בקורס נבנה אפליקציית WEB בסביבת MEAN

“MEAN is a fullstack JavaScript platform for modern web applications”

M
ongoDB - as the database
E
xpress - as the web framework
A
ngularJS - as the frontend framework
N
odeJS- as the server platform

AngularJS - רקע

בפיתוח צד לקוח נעשה שימוש בטכנולוגיית AngularJS של חברת גוגל, AngularJS הינה JavaScript framework המשתמשת בארכיטקטורת MVC (Model – View - Controller).

(Model (Data – הנתונים של האפליקציה
(View (UI – המסכים של האפליקציה, מה שהמשתמש רואה (Html)
(Controller (Logic – הלוגיקה של האפליקציה, בקר בין התצוגה לנתונים AngularJS, אחראי על ניהול המצבים השונים של ממשק המשתמש (UI), האינטראקציה מול Expressjs server וסנכרון הנתונים.

כמה מהתכונות הבולטות ב-AngularJS הן:

Two-way data binding- מסנכרן בין הנתונים לתצוגה ע”י הוספת attributes בתגיות ה-HTML (הנקראים Directives), מי שבעצם מחבר בין שני החלקים ומקשר ביניהם הוא כלי עזר בשם scope.
Single Page Application - אפשרות לפיתוח אפליקציית web אשר מתאימה לעמוד אינטרנטי אחד, במטרה לספק זרימה שוטפת יותר של חווית ממשק משתמש (UX). בעצם, כל הקוד מצוי כבר בתוך טעינת הדף ב- client, או שהמשאבים המתאימים מוטענים בצורה דינאמית ומתווספים לדף על פי הצורך (הדף אינו נטען מחדש בשום שלב בתהליך).

באתר של AngularJS, ניתן למצוא את כל הדוקומנטציה, התקנה ודוגמאות: https://angularjs.org.

איך זה עובד?

הלוגיקה של האפליקציה נמצאת בתוך קובץ js ראשי, בו ניצור Module. ה- Module הינו הייצוג המרכזי של האפליקציה שלנו, בו אנו מגדירים את תכונות האפליקציה ואת התנהגותה.

הגדרה של Module:

var "myApp"= angular.module("myApp", []);

נקשר ה- Module ל- view הרצוי בעזרת התגית ng-app, לדוגמה:

<html ng-app="myApp">

ה- Controller הינו פונקציית js המשתמש כבקר בין ה-view (התצוגה) ל-model (הנתונים), לדוגמה:

Angular Routing

TBD

Responsive Design

Responsive Design - היא גישה לעיצוב לאתרים שמטרתה לספק את חווית הצפייה האופטימלית (כלומר: קלות קריאה, נוויגציה ומינימום שימוש בזום-אין וזום-אאוט) למגוון רחב של מכשירים/מסכים בגדלים שונים, דסקטופ, מובייל וטאבלטים.

האתר יתאים את התצוגה שלו לסביבת השימוש בו ע”י ממשק דינאמי המבוסס על פרופורציות בין האלמנטים באתר. עיצוב במתודת ה”עיצוב תגובתי” מאפשר לאתר שלכם להיראות טוב בכל מכשיר וגודל מסך בו הוא יופיע, מכיוון שהאלמנטים באתר מגיבים לסביבה בה הם מוצגים והאלמנטים מסתדרים בהתאם לחוויה אופטימלית. דוגמאות לפלטפורמות לעיצוב רספונסיבי: Gumby, bootstrap, foundation ועוד…

Git

למי שעוד לא שולט בשימוש בגיט, נביא פה הסבר קצר לשימוש בתכנת לקוח GithubDesktop המאפשרת סנכרון פשוט של הקוד ישירות למאגר שלכם בגיטהאב, הצעדים הכללים לשימוש:

התקנת תכנת הלקוח ומילוי פרטי כניסה במהלך ההתקנה
יצירת מאגר חדש בגיטהאב או שימוש בקיים
שכפול מקומי של המאגר ע״י כפתור + שמאלי עליון ו- V clone.
ביצוע שינויים מקומיים במהלך הפיתוח
בכל שלב משמעותי מבצעים שמירת גרסה ע״י changes -> V commit to master.
כאשר מעוניינים להעביר לאחסון בגיטהאב, לוחצים על sync למעלה מימין.

התנסות

כל סטודנט נדרש להכין 2-3 מסכים (קוד, דפי HTML, CSS, JS כיוצ”ב ולא Mockup), המסכים נדרשים להיות מקושרים ביניהם (ניתן יהיה לבצע מעבר בין הדפים) באמצעות AngularJS בסיסי.

חלופה צוותית: 4-5 דפי mockup מושקעים עבור המוצר המפותח בפרויקט, לפי צרכי מפרט הדרישות (SRS), ז״א

לכל תרחיש משתמש או סיפור עיקרי צריך להיות מסך מלווה
הדפים צריכים להיות עם תוכן רלוונטי לדרישה

** חובה לכלול קישור להפצה בראש דף ה- Readme במאגר **.

הגשה

ההגשה עד לערב התרגול הרביעי (בו נעבור לפיתוח צד שרת).

יש לתת קישור למאגר הקוד של המסכים וכן להפצה (בהערות הטופס או ב- readme).

במקרה של הגשה קבוצתית, כל אחד מגיש בנפרד את הקישור, אך מציין בהערות שזו הגשה קבוצתית ומה היה חלקו בפיתוח.

טופס הגשה