ארכיון הקטגוריה: ionic 3

שיעור 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.

שיעור 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.

 

שיעור 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 "יודעת" איזה דף הוא הדף הראשי, ומהיכן מוגדר סרגל הניווט.

 

 

שיעור 2 ב- ionic 3 – מבנה התיקיות של ionic

אלו התיקיות בפרויקט ionic  סטנדרטי :

  • hooks – למי שמבצע שימוש ב-hooks תוך כדי \ לפני \ אחרי  של קימפול \ הפצה \ אריזה \ גיט וכו'.
  • node_modules – התיקיה של ספריות ה-node .
  • resources – כל מיני משאבים שמתאימים רק לפלטפורמה מסויימת ( אנדרואיד, IOS, וכדומה).
  • www – הספריה שמחזיקה את האתר עצמו…לא לגעת , היא פשוט נוצרת על ידי ionic לבד.
  • src מחולקת לכמה תיקיות:
    • app – המודול הראשי של אנגולר וכו'.
    • assets – מיועדת עבור קבצים סטטים, כמו תמונות וכדומה.
    • pages – המקום בו נשמור את דפי האפליקציה שלנו (די מקביל ל- angular components).
    • theme – מיועדת לתבנית העיצוב.
  • platforms – מחזיקה תיקיה עבור כל פלטפורמה שנפיץ אליה, כלומר ios, android וכו'.
  • plugins ….לא דורש הסבר.

 

שיעור 2 ב – ionic 3

  • כיוון שהפעלנו את ionic serve, אז הוא סורק את השינויים בקבצים שלנו, ו-"מקמפל" מחדש כל שינוי, כך שנוכל לראות אותו מייד בדפדפן ( בדיוק כמו באנגולר עם ng serve ) .
  • אפליקציית האנגולר, נמצאת בתוך תיקיית src/app , שם נמצא את הקבצים המוכרים של app.module.ts וכו'.

היכן ממוקם התוכן ?

  • אם מסתכלים בתוך ה-component הראשי, לא נראה שם את התוכן שמוצג על המסך.
  • זאת, כיוון ש-ionic עובדת עם "pages" – דפים (טכניקה אחרת).
  • כאשר נציץ בתיקית pages, נראה שכל עמוד הוא למעשה angular component רגיל לחלוטין.

צעד ראשון ב ionic 3

התקנת סביבה

  • יש לוודא ש-node מותקן על המחשב, עם npm כמובן.
  • נתקין את ionic בצורה גלובלית, בפקודה הבאה
npm install ionic cordova -g

יצירת פרוייקט ionic

  • היות והתקנו את ionic גלובלית, אז מכל מקום אפשר להקליד את הפקודה הבאה.
    הפקודה יוצרת תיקיה, ומביאה את כל ה depencies שצריך בשביל פרוייקט חדש.
ionic start myFirstApp --type=ionic-angular

כאשר כמובן  – במקום המילה myFirstApp – צריך לשים את שם האפליקציה הרצוי עבורכם.

  • לאחר שהפרוייקט נוצר, נכנסים אל התיקיה, ומפעלים אותו בפקודה
ionic serve

רואים המחשה של האפליקציה בדפדפן .