כל הפוסטים של admin

שיעור 5 ב- ionic – העברת מידע בין דפים.

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

לצורך ההמחשה נדגים באמצעות דף שנקרא users (לשון רבים) , שמכיל 2 כפתורים, כל אחד מהם יעביר אותנו דף user (לשון יחיד) עם מידע על משתמש ספציפי.

כך זה נקרא בהתחלה :

<ion-content padding>

     <buttonion-button>User A</button>

     <buttonion-button>User B</button>

</ion-content>

נדגים את השינוי במספר שלבים :

  • נוסיף אירוע לכפתורים, שמעביר פרמטר של שם המשתמש
  • נבנה את הקוד שמטפל באירוע בקלאס של הקומפוננט (users). – כלומר הקוד שמעביר  את המידע הלאה.
  • נבנה את הקוד שמטפל באירוע בקלאס של הקומפוננט המקבל (user) – כלומר הקוד שמקבל את המידע.

הערה :  אני מניח שבניתם את הדף הקודם, כלומר יש בו כבר data binding  למשתנה name בתוך תבנית ה-html של העמוד user. (קישור לפוסט הקודם).

שלב 1/3 – הוספת אירוע לכפתורים

בקובץ users.html נגדיר אירוע

<ion-content padding>

<buttonion-button (click)="onLoadUser('A')">User A</button>

<buttonion-button (click)="onLoadUser('B')">User B</button>

</ion-content>

שלב 2/3 – הקוד ששולח את המידע

בקובץ users.ts  , הוספתי יבוא לדף ה-user, וכתבתי פונקציה ששולחת  אליו מידע בתוך אובייקט.

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { UserPage } from './user/user';

@IonicPage()
@Component({
 selector: 'page-users',
 templateUrl: 'users.html',
})
export class UsersPage {

 constructor(public navCtrl: NavController, public navParams: NavParams) {
 }

 onLoadUser(name:string) {
 this.navCtrl.push(UserPage, {userName: name});
 }


 ionViewDidLoad() {
 console.log('ionViewDidLoad UsersPage');
 }

}

שלב 3/3 – הקוד שמקבל את המידע

  • בקובץ user.ts , הוספתי יבוא ל- OnInit, וגם ל- NavParams.
  • בנוסף מימשתי את קבלת המידע בפונקציה ngOnInit.
import { Component, OnInit } from '@angular/core';
import { NavParams } from 'ionic-angular';

@Component({
 selector: 'page-user',
 templateUrl: 'user.html'
})

export class UserPage implements OnInit {
 name:string;
 constructor(private navParams:NavParams) { 
 }

 ngOnInit() {
 this.name = this.navParams.get("userName");
 }

}

סיכום

  • בקריאה לאירוע העברנו פרמטר לפונקציה.
  • בקובץ שמטפל באירוע
    • עשינו import ל- navController.
    • עשינו import ל- navParams.
    • הזרקנו פנימה את navController + navParams דרך ה constructor.
    • הפונקציה שטיפלה בדחיפה (push) של עמוד ה-user, גם העבירה פרמטר יחד עם פעולת ה-push.
  • בקובץ שמטפל בקבלת האירוע ובטעינת הדף הפנימי 
    • עשינו import ל- navParams.
    • עשינו import ל-OnInit.
    • הוספנו בקלאס הצהרה שהוא ממשק את האינטרפייס : implements OnInit.
    • הזרקנו פנימה את navParams דרך ה-constructor.
    • מימשנו פונקציה של ngOnInit.
    • בתוך הפונקציה קיבלנו את התוכן מתוך המשתנה (שהזרקנו) של navParms.

הערה

כמו ששלחנו מידע באובייקט, והשתמשנו במתודה get, כדי לשלוף ערך לפי ה-key של המאפיין בתוך האובייקט.

יכולנו לשלוח גם מידע במשתנה רגיל (כלומר לא אוביקט )  ופשוט לשלוף אותו באמצעות המאפיין navParams.data.

שיעור 8 באנגולר (angular) – טיפול במידע עם Data Binding

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

בפוסט הזה אראה מספר דוגמאות בסיסיות כיצד קושרים מידע ממחלקת ה-component (קובץ ts)  אל תבנית ה-html שמופיע תחת template, או תחת הקובץ שצויין תחת templateUrl.

דוגמא 1 – Data Binding של משתנים פרימיטיבים באנגולר

  • ניצור component חדש לצורך הדוגמא באמצעות ה-cli
ng g component components/a_sandbox1
  • בתוך המחלקה (של ה-component) נגדיר 2  משתנים
export class ASandbox1Component implements OnInit {

name='Bob';

age=37;
  • כעת בתוך התבנית html של הקומפוננט, "נקשור" את 2 המשתנים אל תוך התבנית.
@Component({

selector:'app-a-sandbox1',

template:`My name is {{name}} and I'm {{age}} years old.`,
  • כדי לראות את התוצאה – צריך לזכור כמובן להכניס את ה-selector אל תוך ה- app.component.html.
  • התוצאה – בכל פעם שתוכן המשתנים ישתנה – הם ישתנו אוטומטית על המסך, ללא צורך באף שורת קוד מצידנו. מספיק שקשרנו אותם פעם אחת, ומרגע זה התבנית html שלנו הפכה להיות דינמית, "חיה" ומגיבה לשינויים בתוכן המשתנים.

 

דוגמא 2 – Data Binding של אובייקטים באנגולר

בדיוק כמו שעשינו עם משתנים פרימטיבים, אפשר לעשות דבר דומה עם אובייקטים.

  • נוסיף אוביקט למחלקה
  • נקשור אותו אל תוך התבנית
  • ואותה תוצאה בדיוק – התבנית הפכה להיות חיה ונושמת.
@Component({

selector:'app-a-sandbox1',

template:`My name is {{name}} and I'm {{age}} years old.

<p>My candy is {{candy.color}} and is very {{candy.taste}}.</p>

`,

styleUrls: ['./a-sandbox1.component.css']

})

export class ASandbox1Component implements OnInit {

name='Bob';

age=37;

candy= { "color":"yellow" , "taste":"sweet"};

דוגמא 3 – חצי מילה על מחזור חיים של משתנה

כמו כל שפה מונחית עצמית, גם type script מכילה פונקצית constructor.

בדוגמא הזו, אראה כיצד למרות שהגדרתי את המשתנה בעת ההגדרה לערך מסוים – 40, עדין, כיוון שהקונסטרקטור רץ, אז אם הוא מכיל הגדרה אחרת, אז ההגדרה של הקונסטרקטור למשתנה, דורסת את ההגדרה הראשונית.

שימו לב למשתנה age בדוגמא הבאה, בזמן ההגדרה הוא מושם כ-40, ולאחר ריצת הקונסטרטור הוא מושם כ-45 –  וזה מה שיוצג על המסך – 45.

@Component({

selector:'app-a-sandbox1',

template:`My name is {{name}} and I'm {{age}} years old.

<p>My candy is {{candy.color}} and is very {{candy.taste}}.</p>

`,

styleUrls: ['./a-sandbox1.component.css']

})

export class ASandbox1Component implements OnInit {

name='Bob';

age=40;

candy= { "color":"yellow" , "taste":"sweet"};

constructor() {

this.age=45;

}

 

דוגמא 4 – Data Binding אל פונקציה.

בדיוק כמו שקשרנו את התבנית אל משתנים, אפשר לקשור גם אל פונקציות.

שימו לב לדוגמא הבאה :

@Component({

selector:'app-a-sandbox1',

template:`My name is {{name}} and I'm {{age}} years old.

<p>My candy is {{candy.color}} and is very {{candy.taste}}.</p>

<p>again...My age is {{ giveMeAge() }}</p>

`,

styleUrls: ['./a-sandbox1.component.css']

})

export class ASandbox1Component implements OnInit {

name='Bob';

age=40;

candy= { "color":"yellow" , "taste":"sweet"};

constructor() {

this.age=45;

}

giveMeAge() {

returnthis.age;

}

לסיכום, ראינו במספר דוגמאות, את האפשרות לקשור משתנים בתבנית אל משתנים במחלקה.

 

 

 

שיעור 4 ב-ionic – יצירת דף (page) וניווט בסיסי

בפוסט הזה נראה כיצד יוצרים דפים ב-ionic.

יצירת דף באמצעות כלי שורת הפקודה של ionic

  • בכלי שורת הפקודה נקליד
ionic generate page MY_PAGE_NAME
  • כמובן תחליפו את MY_PAGE_NAME לשם של הדף הרצוי לכם.
  • זה עובד תקין, רק כאשר מפעילים אותו מהתיקיה הראשית של הפרוייקט, לא מתוך תיקיות המשנה!
  • זה יוצר אוטומטית תיקיה+מספר קבצים בתוך תיקית pages.
  • עכשיו צריך לזכור לעשות 2 דברים, כמו שעושים עבור כל קומפוננט רגיל באנגולר – לייבא אותו ב-קובץ app.module.ts וגם לרשום אותו במערך שנקרא  declarations
  • בנוסף – נעשה דבר נוסף שיחודי ל- ionic.
    הרי – אילו נחשוב לרגע, נבין שכיוון שאנחנו לא משתמשים ב-component שיצרנו (=הדף) באמצעות selector, וגם לא משתמשים עבורו ב- angular router, אז בעצם…צריך בצורה כלשהיא להודיע ל-ionic שקיים דף כזה.
    לצורך כך – נרשום אותו גם במערך שנקרא entryComponents באותו קובץ – וזוהי הצורה שבה הפרימוורק ionic "יודעת" על קיומו .
    להלן הקוד במספר חלקים :
import {UsersPage } from '../pages/users/users';

---------------------------------------------------
declarations: [

MyApp,

AboutPage,

ContactPage,

HomePage,

TabsPage,

UsersPage

],
-----------------------------------------------
entryComponents: [

MyApp,

AboutPage,

ContactPage,

HomePage,

TabsPage,

UsersPage

],
  • אם נסתכל במבנה קובץ ה-html שנוצר, נוכל לראות שם שהוא מכיל חלק של "header" וחלק של "content".
  • דף נורמלי ב-ionic יכיל את החלקים האלו לרוב.
  • אפשר גם להוסיף "כותרת תחתונה" אם נשתמש בתגית ion-footer.

ביצוע שינויים בסיסיים בדף שיצרנו ב-ionic

  • נשנה את הכותרת בתגית ion-title
  • נוסיף תוכן בכותרת התחתונה, וגם נוסיף לה את ה-directive שנקרא padding שגורם לריווח מעט מסביבה.
    הכותרת התחתונה תיראה כך לדוגמא :
<ion-footer padding>

This is My Footer

</ion-footer>
  • נוסיף בחלק של התוכן 2 כפתורים, כדי שיראה כך :
<ion-content padding>

<buttonion-button>First Link</button>

<buttonion-button>Seconed Link</button>

</ion-content>

יצירת כפתור ניווט אל הדף, באמצעות ionic nav controller

כעת  נרצה להגיע באפליקציה אל הדף שיצרנו.  לצורך כך – נערוך את home.html בצורה הבאה :

  • נוסיף כפתור עם הפניה לאירוע בלחיצה :
<ion-content padding>

<buttonion-button (click)="onGoToNewPage()">Go To My New Page</button>

 

</ion-content>
  • כעת נממש את הפונקציה שתופעל בלחיצה.
    נעשה זאת בקובץ home.ts
  • הקובץ home.ts כבר מכיל import וגם הזרקת תלות של ה-nav controller, אז הגיע זמן להשתמש ב-nav controller.
  • כמו שהסברנו מדובר במערך שלמעשה דוחפים לתוכו עמודים, או גורעים ממנו עמודים – והעמוד העליון ביותר במערך – מוצג למשתמש באפליקצייה.
  • זה מצריך גם לכתוב את הפונקציה, וגם להוסיף בראש הקובץ import למודול של הקובץ החדש שיצרנו.
This is the IMPORT
import { UsersPage } from '../users/users';

-----------------------

This is the FUNCTION

-------------------
onGoToNewPage() {
      this.navCtrl.push(UsersPage);
}

אם נגלוש כעת אל האפליקציה, נראה את הכפתור שלנו, מוביל אל הדף הפנימי שיצרנו.

הערה חשובה על מיקום ה-imports

ביצירה אוטומטית של דפים, וגם כשכותבים ידנית, צריך לשים לב למיקום של ה-imports של הדפים.

משפטי היבוא של הדפים צריכים לבוא אחרי המודולים העיקריים של angular/ ionic/ navcontroller ….אחרת זה יסתיים בשגיאה.

יצירת דף ( page ) באופן ידני ב- ionic

בדוגמא הקודמת יצרנו דף באמצעות כלי שורת הפקודה של ionic  (שנקרא ionic cli).

כעת ניצור דף בצורה ידנית, כדי להכיר את התהליך עוד יותר טוב לעומק.

  • ניכנס לתוך התיקיה של ה-page הקודם שיצרנו (אצלי היא נקראת src/pages/users)
  • ניצור בתוכה תיקיה חדשה, לצורך הדוגמא אקרא לה user (בלשון יחיד).
  • ניצור בתוכה קובץ חדש בשם user.ts ( שימו לב שב-ionic, אין צורך בסיומת .component, כיוון שבלאו הכי הדפים שמורים בתיקיית pages , אז ברור שמדובר בדפים).
  • בגוף הקובץ נקליד את הדברים הרגילים עבור כל component שמייצרים ב- angular :
import { Component } from '@angular/core';

@Component({

selector:'page-user',

templateUrl:'user.html'

})

export class UserPage{

name:string;



}
  • כעת ניצור קובץ חדש בשם user.html (באותה תיקיה) , ובו נקליד מספר תגיות יחודיות שדואגות לכותרת, לסרגל הניווט ולתוכן, כולן יחודיות עבור ionic , והשמות שלהן, מעידות על משמעותן :
<ion-header>

    <ion-navbar>

       <ion-title>MyTitle</ion-title>

   </ion-navbar>

</ion-header>

<ion-content>

       <p>שמי הוא {{ name }}</p>

</ion-content>
  • בסוף התהליך – חשוב לזכור לרשום את הדף החדש שיצרנו בקובץ app.module.ts, כמו כל component חדש באנגולר, גם באמצעות import , גם באמצעות רישום במערך declerations, וגם כדי שנוכל לנווט אליו ב-ionic, נרשום אותו במערך entryComponents.

 

שיעור 7 באנגולר (angular) – פתיחת קומפוננט (component) חדש באופן ידני

בפוסט הזה אציג כיצד לפתוח component חדש באופן ידני.

  • מעורך הקוד נפתח, לצורך הסדר הטוב, תיקיה חדשה בתוך src, ונקרא לתיקיה החדשה components
  • בתוך התיקיה החדשה נפתח תיקיה עבור ה-component החדש שלנו, שנקרא לה tryComponent.
  • בתוך תיקיית tryComponent נפתח קובץ TypeScript חדש, ונקרא לו tryComponent.component.ts
  • בתוכו בשורה הראשונה נייבא את המודול Component מתוך הליבה של אנגולר.
import { Component } from '@angular/core';
  • לאחר מכן,  נרשום את ה-Decorator הבא, שבו נגדיר מה יהיה שם התגית, שבה נשתמש כדי להציג את ה-Component שאנחנו יוצרים כעת, וגם נגדיר את תוכן הקומפוננט:
@Component({

selector:'app-tryComponent',

template:`<h1> Hello from our new Component </h1>`

})
  • כעת, נייצא מחלקה החוצה, בשלב זה היא תהיה ריקה מתוכן.
    ונקפיד ששם המחלקה יכלול בסופו את המילה Component :
export class TryComponent{

}

  • נשמור את הקובץ
  • נפתח את הקובץ app.component.html, נמחק את כל התוכן בו, ונשים בתוכו רק את ה-selector שבחרנו עבור הקומפוננט החדש שלנו
<app-tryComponent></app-tryComponent>
  • אם נבדוק כעת (בהנחה שאנחנו משתמשים ב-ngServe שמקמפל את הקבצים אוטומטית)
    נראה שבינתיים זה עדין לא עובד.
    כדי שזה יעבוד אנחנו צריכים ליבא את הקומפוננט החדש.
    נעשה זאת באמצעות 2 פעולות  שנעשה בקובץ app.module.ts (לשם כך צריך לפתוח את הקובץ כמובן 🙂 ) :
  • נוסיף בראש הקובץ משפט ליבוא של הקומפוננט החדש שלנו :
import {TryComponent } from './components/tryComponent/tryComponent.component';
  • ובמערך שנקרא  declarations , נוסיף את שם המחלקה שיצאנו, כלומר TryComponent .

כעת, אם נגלוש אל אפליקציית האנגולר שלנו, נראה את המשפט שרשמנו בתוך ההגדרה template  – וזוהי, בשלב זה, הצלחה!.

למי שצריך, אז הקומפוננט במלואו נראה כך :

import { Component } from '@angular/core';

@Component({

selector:'app-tryComponent',

template:`<h1> Hello from our new Component </h1>`

})

export class TryComponent{

}

 

שיעור 6 ב- angular – מבט על NgModule

בפוסט הזה נדבר על קובץ מאוד חשוב באנגולר, שנקרא app.module.ts.

בקובץ זה יש Decorator  של אנגולר שנקרא NgModule@

ובנוסף יש בו יצוא של AppModule.

בתוך NgModule@, יש חלקים שונים בהם אנחנו מגדירים את האפליקציה שאנחנו בונים, ואת הפלאגינים שאנחנו מוסיפים.

  • החלק של declerations מיועד עבור כל מיני components שאנחנו יוצרים.
  • החלק של imports מיועד לכל מיני רכיבים של אנגולר , כמו BrowserModule, HttpModule,FormsModule וכדומה.
  • החלק של providers  – מיועד לקלאסים מסוג services ( למשל service שמלקט מידע ומוזרק לקומפוננט).

 

החזרת Http Response שונים באמצעות Asp.net core web api

בפוסט הזה אדגים כמה צורות להחזיר http response מקונטרולר של asp.net web api.  ועל הדרך נראה גם את הצורות הבסיסיות לכל הפעולות של CRUD.

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

דוגמא 1 – להחזיר קוד Http

החזרת תשובה באמצעות אובייקט HttpResponseMessgae

return new HttpResponseMessage(HttpStatusCode.Created)

זה יחזיר תשובה 200 – כלומר "הכל תקין".

כדי להחזיר תשובה 400 באותו אובייקט , נקליד כך

return HttpResponseMessage(HttpResponseCode.BadRequest);

מתי משתמשים בזה ? 

ובכן, אני מראה כאן אפשרות לשימוש, אנחנו מנסים להכניס את התוכן לדאטאבייס, אם לא מצליח, מחזירים שגיאה, אם מצליח – מחזירים הצלחה.

הדוגמא הבאה משתמשת בפועל http post :

 [HttpPost("momo")]
 public HttpResponseMessage Moko([FromBody]Post post)
 {
 try
 {
 
 this._appContext.Posts.Add(post);
 if (this._appContext.SaveChanges() > 0 )
 {
 return new HttpResponseMessage(System.Net.HttpStatusCode.Created);
 } else
 {
 return new HttpResponseMessage(System.Net.HttpStatusCode.BadRequest);
 }
 

 } catch(Exception e)
 {
 return new HttpResponseMessage(System.Net.HttpStatusCode.BadRequest);
 }
 
 }

דוגמא 2 – להחזיר קוד Http עם פונקציות קיצור

בשתי המקרים הקודמים היינו צריכים להגדיר את הפונקציה שתחזיר HttpResponseMessage אך לאובייקטים האלו יש פונקציות קיצור.

בדוגמא הזו הפונקציה מחזירה "כרגיל" IActionResult .

פונקציית קיצור להחזרת תשובה תקינה – -200:

return Ok("everything fine");

פונקציית קיצור להחזרת תשובה לא תקינה 400 :

return NotFound("your requested item didnt found in db");

כמובן שאת המחרוזת בתשובה אפשר לרשום כפי שרוצים.

 

דוגמא 3  – להחזיר מידע בתוך התשובה, באמצעות הפועל Http Get :

בדוגמא הבאה אנחנו מחזירים תשובה מסוג מאוד ספציפי – רשימה של אובייקט שאנינו יצרנו.

כמובן שהפריימוורק Asp.net יצמיד לזה קוד 200 ויחזיר את הרשימה בתור מערך JSON.

[HttpGet]
public IEnumerable<MyObj> GetAll() {
return _context.MyObj.ToList();
}

יש אפשרות כמובן גם להחזיר אובייקט מידע בודד (ולא רשימה של אובייקטים רבים).

להלן דוגמא :

[HttpGet("{id}", Name = "GetById")]
public IActionResult GetById(long id)
{
 var item = _context.MyItems.FirstOrDefault(p => p.Id == id);
 if (item == null)
 {
 return NotFound();
 }
 return new ObjectResult(item);
}

במקרה זה החזרנו תשובה תקינה אם הכל נמצא תקין.

ותשובת שגיאה – אם לא נמצא.

דוגמא 4 – לקבל נתונים גם מה-URL וגם מה-BODY – פעולת Update באמצעות הפועל Http Put

בפונקציה הבאה, אנחנו מקבלים 2 נתונים, אחד פרימטיבי – דרך ה-url, והשני מגיע כאובייקט בתוך ה-body  של הבקשה.

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

שימו לב שזוהי קריאת PUT , כלומר במידה ומנסים אותה באמצעות PostMan למשל, אז צריך להגדיר את הקריאה כ-PUT.

[HttpPut("update/{id}")]
 public HttpResponseMessage Update([FromRoute] int id, [FromBody]Post post)
 {
 try
 {

 Post po = _appContext.Posts.FirstOrDefault(x => x.Id == id);
 if (po == null)
 {
 return new HttpResponseMessage(System.Net.HttpStatusCode.NotFound);
 }
 else
 {
 po.Title = post.Title;
 po.Content = post.Content;
 if(_appContext.SaveChanges() > 0 )
 {
 return new HttpResponseMessage(System.Net.HttpStatusCode.OK);
 } else
 {
 return new HttpResponseMessage(System.Net.HttpStatusCode.BadRequest);

 }

 }


 }
 catch (Exception e)
 {
 return new HttpResponseMessage(System.Net.HttpStatusCode.BadRequest);
 }

 }

ישנה אפשרות נוספת לעשות פונקציה דומה, שמחזירה תשובה של IActionResult וגם משתמשת בפונקציות קיצור.

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

 [HttpPut("update2/{id}")]
 public IActionResult Update2([FromRoute] int id, [FromBody] Post post)
 {
 if (post == null || post.Id != id)
 {
 return BadRequest();
 }
 Post po = _appContext.Posts.FirstOrDefault(x => x.Id == id);
 if (po == null)
 {
 return NotFound();
 }
 po.Title = post.Title;
 po.Content = post.Content;
 _appContext.Posts.Update(po);
 _appContext.SaveChanges();
 return new NoContentResult();
 }

בשלב זה, כבר אפשר לשאול – מה עדיף ? שימוש ב- HttpResponseMessage או החזרה של IActionResult.

אני באופן אישי מעדיף IActionResult, פשוט משום שהקוד נראה קצת יותר קצר, קריא ומסודר. מי שרוצה להרחיב יכול לעיין בקישור הזה, שמסביר את העיקרון – מדוע IActionResult עדיף מאשר HttpResponseMessage.

 

דוגמא 5 – פעולת מחיקה באמצעות הפועל Http Delete

כמו בדוגמא הקודמת, נדגים ראשית באמצעות החזרת HttpResponseMessage.

היות ואני לא מגדיר פה שם מפורש לניתוב ( route) אזי בעצם הניתוב של הקלאס עצמו משמש פה, בתוספת הפרמטר id  שהגדרתי.

[HttpDelete("{id}")]
 public HttpResponseMessage Delete([FromRoute] int id)
 {
 try
 {


 Post po = _appContext.Posts.FirstOrDefault(x => x.Id == id);

 if (po == null)
 {
 return new HttpResponseMessage(System.Net.HttpStatusCode.NotFound);
 }
 else
 {
 _appContext.Posts.Remove(po);

 if (_appContext.SaveChanges() > 0)
 {
 return new HttpResponseMessage(System.Net.HttpStatusCode.OK);
 }
 else
 {
 return new HttpResponseMessage(System.Net.HttpStatusCode.BadRequest);
 }
 }
 } catch(Exception e)
 {
 return new HttpResponseMessage(System.Net.HttpStatusCode.BadRequest);
 }
 }

ודוגמא נוספת, לעשות את אותה פעולה, עם פונקציות קיצור ועם החזרת IActionResult .

[HttpDelete("delete2/{id}")]
 public IActionResult Delete2(int id)
 {
 Post po = _appContext.Posts.FirstOrDefault(x => x.Id == id);
 if (po == null)
 {
 return NotFound();
 }
 _appContext.Posts.Remove(po);
 _appContext.SaveChanges();
 return new NoContentResult();
 }

מקורות נוספים :

https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-web-api

 

 

טיפ קטן להאיץ את הדיבאג באפליקציות ASP.NET

באפליקציות ASP.NET , כל מתכנת מכיר את העובדה שכאשר באים להריץ, אז מתבצע build , ולאחריו, פתיחת instance נפרד של דפדפן, שמיועד עבור דיבוג.

ה-Instance הזה תמיד נפתח לאט מאוד,

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

ב-Visual Studio > נלחץ על Tools > נבחר ב-Options > נבחר ב- Debuging > ושם נסיר את הסימון מ- Enable JavaScript Debugging for ASP.NET  (Chrome And IE)

וזהו… זה מאיץ מאוד את פתיחת הדפדפן.

 

אפשרות שניה, אם רוצים לוותר לגמרי על דיבוג היא להריץ ב- Ctrl+f5  ( במקום ב-f5 ) , ואז אפשרויות הדיבוג נעלמות, אבל האפליקציה עולה מהר.

 

שיעור 5 באנגולר ( angular ) – מהו קומפוננט ( component ) ?

מה המשמעות של המונח קומפוננט ב- אנגולר ?

המונח קומפוננט ( component ) באנגולר – משמעותו היא "פיסה של ממשק משתמש (UI) "

כלומר חתיכת מסך .

קומפוננט מורכב מקובץ קלאס ts , מחלקה יעודית שמטפלת בקומפוננט, ולרוב (אך לא מחייב) יהיה גם קובץ html, שמשמש בתור התבנית של הקומפוננט.

יכולים להיות עוד קבצים כמו CSS וכדומה.

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

קומפוננט כמובן מכיל את המתודות הרלוונטיות אליו בקלאס שלו. למשל מתודות שמגיבות לאירועי קליק, או לשינוי תוכן בקומפוננט וכדומה.

מבנה טיפוסי לדוגמא של קומפוננט באנגולר

---------------------------------
in bubu.component.ts file
---------------------------------

import { Component } from '@angular/core';

@Component({

 selector: 'bubu',
 template: `<h1> Heyyyyyy!!!!`
 })
 
export class BubuComponent {
 name = 'Bubu';
 }
 
 
-----------------
In another file 
-----------------


 <body>
 <bubu></bubu>
 </body>

בתחילת הקובץ, אנחנו מייבאים את הרכיב המתאים מליבת אנגולר.

אחרי כן, אנחנו כותבים את הפקודה @Component , שמגדירה כמה דברים בסיסים.

באופן כללי, כל פעם שתראו באנגולר ביטוי שמתחיל בסימן @ , זה נקרא "Decorator", והמשמעות היא רכיב מסוים של אנגולר שמביא עימו תכונות מסויימות.

בתור ה-Decorator שנקרא @Component , הגדרנו 2 דברים :

  1. את ה-selector שישמש אותנו לאחר מכן בקובץ ה-html, שימו לב שה-selector שקראתי לו בשם החדשני bubu, הופך להיות בקובץ ה-html שמופיע בתחתית – בתור תגית html, שאנגולר יודע לפרש אותה.
  2. בתוך ההגדרה template- הגדרנו מה יופיע בקומפוננט הזה.
    אילו נגדיר זאת עם גרשיים מיוחדים כאלו ", אז זה יאפשר לכתוב מספר שורות יחד.
    לעומת זאת עם גרש רגיל, זה לא יאפשר.

בנפרד , הגדרנו למטה את הקלאס עצמו, בצורה הרגילה שבה עובדים עם קלאסים ב-node js, כלומר פותחים במילה export עם שם הקלאס, ושמים בתוכו את כל המתודות והמאפיינים ליצוא.

בתחתית – כתבתי שבקובץ אחר, לרוב בקובץ html כלשהוא – נשים את הסלקטור שבחרנו בו, וזה יגרום לכך שתוכן הקומפוננט יופיע.

מחזור החיים של קומפוננט באנגולר

באנגולר אפשר להגיב לכל מיני אירועים שמתרחשים לאורך "חיי" הקומפוננט.

אחד מהם, נפוץ מאוד, הוא האירוע שמתרחש כאשר הקומפוננט נטען לראשונה , מה שנקרא init (=יצירת מופע של אובייקט הקומפוננט).

לצורך זה נשתמש במתודה ngOnInit() בתוך הקלאס של הקומפוננט.

2 דרכים ליצור קומפוננט עם אנגולר

  1. פשוט ליצור את הקבצים, בתוך תיקיית src, עדיף שיהיו מרוכזים יחד בתיקיה יעודית לקומפוננט, ומרוכזים תחת תיקיה שתיקרא components.
    למשל הקומפונננט שנקרא bubu , ישב בתוך src/components/bubu.
    במקרה שאנחנו יוצרים ידנית את הקבצים, נצטרך לכל הפחות ליצור קובץ ts
    ולרוב גם קבצי html+css
    אז בסוף התהליך נהיה עם :
    bubu.component.ts
    bubu.html
    bubu.css
  2. אפשר להשתמש פשוט בכלי שורת הפקודה angular cli, ולהקליד
ng g component components/bubu

האות g משמעותה "תיצור" (=המילה generate ) .

המילה component – אומרת לכלי מה ליצור (אפשר ליצור עוד דברים חוץ מקומפוננטות).

ובסוף אנחנו רושמים באיזו תיקיה ליצור את הקומפוננט, והכלי יצור את הספריה בעצמו.

 

בסופו של דבר צריך להוסיף את הקומפוננט אל @ngModule, ועל כך בפוסט נפרד.

 

שיעור 3 ב- ionic – המונח Page ואיך עובד הניווט ?

נדבר הפעם על 2 נושאים :

המונח Page ב-ionic – הוא :

  • מבחינת מעשית מדובר ב-component רגיל של אנגולר.
  • מבחינת קונספט, הוא משמש כמסך אחד – שהוא מה שמוצג על המסך.
  • אפשר כמובן לכלול בתוכו קומפונטות אחרות של אנגולר.

איך עובד הניווט ב- ionic ?

  • ב-ionic 2 ואילך, לא עושים שימוש ב-angular router
  • במקום זאת, משתמשים במערכת ניווט שמאפשרת לנווט בין מערך של Pages.
  • זאת הסיבה שמוגדר ב-ionic שהיא חייבת להתחיל עם rootApp משלה – רואים את זה בקובץ app.module.ts, בחלק של bootstrap.
  • בנוסף רואים זאת בקובץ app.html.
  • אנחנו יכולים להוסיף למערך של ה-Pages כל פעם דף חדש.
  • העיקרון הוא שאנחנו רואים על המסך רק את ה-Page האחרון שהכנסנו למערך. (הכנסנו – פעולת push ) .
  • מה שאומר…שאם נסיר את ה-Page האחרון שהכנסנו, אנחנו נראה בחזרה את ה-Page שקדם לו במערך. ( הסרה – פעולת pop ).
  • העיקרון הזה מאוד חשוב להבנה – הניווט של ionic הוא ניווט בין דפים (pages).
    וכדי לנווט אנחנו מכניסים ומוציאים דפים מתוך מערך.

התגית של סרגל הניווט

בקובץ app.html מופיעה השורה הבאה :

<ion-nav [root]="rootPage"></ion-nav>

התגית ion-nav היא זו שיוצרת את סרגל הניווט, כאשר המאפיין root הוא זה שקובע מהו העמוד הראשון שרואים – בדוגמא הנוכחית , זה העמוד rootPage.

איפה רואים מה המשמעות של rootPage ? 

תשובה :  אם נסתכל בקובץ app.component.ts נראה שם את המשתנה שנקרא rootPage

 rootPage:any = TabsPage;

כעת אנחנו מבינים כיצד ionic "יודעת" איזה דף הוא הדף הראשי, ומהיכן מוגדר סרגל הניווט.

 

 

שיעור 4 ב-angular – שימוש ב-TypeScipt

מה זה TypeScript ?

TypeScript היא הרחבה ל-JavaScript שפותחה על ידי מיקרוסופט.

היא מאפשרת לנו לכתוב ב-JavaScript עם שיפורים כמו :

  • אובייקטים של מונחה עצמים.
  • ממשקים (=אינטרפייס).
  • הגדרה מפורשת של סוגי המשתנים.
  • ועוד…

בסופו של דבר, כאשר אנחנו כותבים ב-TypeScript אז זה מתקמפל ל-JS על ידי TSX שהוא הקומפיילר שעושה זאת.

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

קבצי TS מסתיימים בסייומת ts.

דוגמאות ל-TypeScript :

  • הגדרת משתנה מסוג מחרוזת :
let name:string = 'Koko Moko';
  • הגדרת פרמטרים לפונקציה בתור מספרים , והגדרת הפונקציה עצמה – ככזו שמחזירה מספר :
function Boom(firstParam:number, seconedParam:number):number {
...
...
{
  • סוגי המשתנים האפשריים ב-TypeScript הם :
    • string
    • number
    • boolean
    • array
    • any
    • void – כלומר לא מחזיר ערך.
    • null
    • tuple
  • דוגמא להגדרת מחלקה ב-TypeScript, אפשר ליצור מאפיינים, מתודות וכו' :
class MyClass {
 firstName:string;
 
 constructor(giveMeYourName:string) {
 this.firstName = giveMeYourName;
 
 }
 
 sayHi() {
 return "Hi -- " + this.firstName;
 }
 }

let obj = new MyClass("Eyal");