انشاء مكونات الصفحة الرئيسية للتطبيق

كما أوضحنا سابقا أن فكرة التطبيق ستكون بسيطة عن مؤسسة لكراء سيارات ننشيء لها تطبيق يستعرض السيارات التي تعرضها الشركة .

الصفحة الرئيسية Home app

سنقوم بانشاء الصفحة الرئيسية حيث محتوى هده الصفحة سيكون استعراض منتجات الشركة من السيارات   مع قائمة رئيسية جانبية تعرض مختلف الانتقالات المختصرة للتطبيق أما برأس الصفحة سنضع زرين حاليا أحدهما لتسجيل الدخول والأخر زر يحولك الى السلة

مبدئيا سيكون شكل الصفحة الرئيسية بهدا الشكل البسيط

عندما ندخل الى ملجلد src/pages بالمشروع سنلاحظ وجود صفحتين على شكل مجلدات home و list  فصفحة home تمثل الصفحة الرئيسية التي تظهر بواجهة المشروع أول مانقوم بعمل serve  اما  الصفحة list فهي تمثل القائمة الرئيسية الجانبية menu 

سنختصر هيكلة شكل الصفحة الرئيسية بهده النقاط

1. تصميم رأس الصفحة header

2. هيكلة محتوى الصفحة الدي سيكون لائحة السيارات المعروضة للتأجير (الكراء) 

3. انشاء ملف خدمة provider يدير بيانات السيارات (لن نستعمل api الان..سنستعمل السرفر بالدروس المتقدمة)

4. اضافة بعض المؤثرات البسيطة animations عن طريق css من أجل عرض ناعم على التطبيق

والان سننتقل الى تفاصيل هده الجزئيات

1. تصميم رأس الصفحة

بداية ندخل لملف src/pages/home/homehtml  ونضيف الكود

<ion-header >
  <div class="main-header">
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      <strong>Location</strong> Auto
    </ion-title>
 
    <ion-buttons end>
      <button ion-button tappable (click)="account()">
        <ion-icon name="person"></ion-icon>
      </button>
      <button ion-button tappable (click)="cart($event)">
          <ion-icon name="ios-cart"></ion-icon>
        </button>
    </ion-buttons>
</ion-navbar>
 
   <ion-toolbar padding>
      <ion-searchbar 
      (ionCancel)="onCancel($event)">
    </ion-searchbar> 
 </ion-toolbar>
</div>
</ion-header>

شرح سريع للكود

• <ion-header> هو وسم يعبر عن حاوية رأس الصفحة التي توضع به جميع مكونات الرأسية
• <div class="main-header"> هو حاوية قمنا باضافتها بغرض اعطاء دلك اللون المميز للرأس 
• <ion-navbar> هو محتوى القائمة العلوية التي تحتوي على الأيقونات menu cart login title
• <ion-title>  عنوان الصفحة العلوية الموجود برأس الصفحة 
• <ion-buttons end> حاوية الأزرار التي نضع بداخله  زرين على شكل أيقونات وهي cart + login  .
• <ion-toolbar>  عبارة عن عنصر قد يمثل قائمة اضافية أو عنوان تفسيري (ثانوي) وقد استخدمنا هدا العنصر كرأس ثانوي للصفحة حيث ان ion-navbar هو الراس الرئيسي والثانوي يمثل ion-toolbar
• <ion-searchbar> يمثل خانة البحث search 

التعليمات التي قد تلاحظها في بعض الوسوم بالتطبيق مثل <ion-buttons end>   <ion-toolbar padding>

• no-margin الغاء  المسافات  عن العنصر من كل الجوانب
• margin-bottom اعطاء مسافة افتراضية للعنصر من الجهة السفلية  
• padding  يقصد بها ازاحة فراغ يفصل المكونات  بـ 15px  
• end تعني ازاحة جميع الأزرار أو العناصر نحو أقصى اليسار كما هو بالصورة فوق أما في حال كان التطبيق مصمم بشكل  rtl  "معرب" فسوف يزيحها نحو أقصى اليمين.

ننتقل الى ملف css من اجل وضع تنسيق لرأس الصفحة

أول شيء سنختار أحد الخطوط من google fonts للخطوط  وسنختار هدا كمثال

https://fonts.google.com/specimen/Charm

قم بتحميل  الملف الخطي  التالي وقم بوضعه بهدا المسار src/assets/fonts/charm/

تحميل الملف هنا 

بعد الانتهاء سنقوم بوضع التنسيق داخل src/app/app.scss   هدا الملف الدي سيحتوى على كافة التنسيقات المشتركة بصفحات التطبيق

/*تعريف ملف الخط*/
@font-face {
  src: url(./../assets/fonts/charm/7cHmv4oii5K0MdYoK-4W4nIp.woff2) format("woff2") ;
  font-family: 'Charm';
  font-style: normal;
  font-weight: 400;
}

$font-family-base: 'Charm', cursive !important;

/*تنسيق رأس الصفحة*/
  ion-header{ 
    .toolbar-background {
     background: transparent;
    }
  
    .toolbar-title{
      font-size: 24px;
    }

    .main-header {
      background: -webkit-linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%) !important;
      background: -moz-linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%) !important;
      background: -o-linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%) !important;
      background: linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%) !important;
      font-family: $font-family-base ;
    }

    div{
        color:white !important;
    }
    button{
        color:white !important;
    }

  .searchbar-input {
      border-radius: 0 ;
    }
}

بعدما انتهينا من هيكلة راس الصفحة سنقوم الان  باضافة بعض السيارات بمحتوى الصفحة الرئيسية    

1. سننشيء بيانات السيارات   والتي مبدئيا ستكون عبارة عن ملف JSON يحتوى بداخله على مصفوفة array   تتألف من ماركة السيارة ونوعيتها وصورة لها حيث ستكون المصفوفة حاليا static  اي دون الحاجة ل api  او سرفر على الأقل بالوقت الحالي  حتى لانعقد من الأمور 

الان ننتقل الى مرحلة التطبيق

قبل كل شيء يجب انشاء ملف خدمة حيث سيتواصل ملف الخدمة مع ملف json  عوضا على التواصل مع الـ api  ( من لم يفهم معنى ملفات الخدمة عليه مراجعة الدورة 102 من angular) حيث ان ملف json  في هده الحالة سنعتبره مخزن البيانات أو قاعدة بيانات افتراضية  حيث سنضع داخله كافة بيانات السيارات وكأن ملف الخدمة يتصل بقاعدة بيانات وهمية

-ننشيء ملف الخدمة service  وسنسميه مثلا car عن طريق هده التعليمة 

ionic generate provider car

ننشيء دالة جلب بيانات السيارات بملف الخدمة الدي قمنا بانشائه  ليصبح الملف car بهدا الشكل

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';  //+ اضف

@Injectable()
export class CarProvider {

  constructor(public http: HttpClient) {
  }

  getCars(){  //+ اضف
    let url:string='assets/data/cars.json';
    return  this.http.get(url)
      .pipe(
        map(res => res) 
      );
  }

}

لاحظ اننا قد استخدمنا HttpClient لدا لاتنسى تضمين الموديل HttpClientModule بداخل ملف app.module   (راجع الدورة 101 من angular)

ندكر أن تضمين الموديل يكون بهدا الشكل

-ادخل لملف app.module.ts  وأضف

import { HttpClientModule } from '@angular/common/http';

imports: [
    // ....
    HttpClientModule,  //+ أضف
    // ....
 
  ],

الان ننشيء ملف دو امتداد json  يدويا ولنسميه مثلا cars.josn  حيث يكون مسار الملف بهدا الشكل src/assets/data/cars.json 

محتوى الملف cars.json  سيكون مصفوفة تحتوى على مجموعة من السيارات هكدى 

[
      {
        "id":1,
        "image":"assets/images/image1.jpg",
        "reference":"IBIZA",
        "brand":"Seat"
       },
       {
        "id":2,
        "image":"assets/images/image2.jpg",
        "reference":"Sandero",
        "brand":"Dacia"
       },
       {
        "id":3,
        "image":"assets/images/image3.jpg",
        "reference":"Symbol",
        "brand":"Renault"
       },
       {
        "id":4,
        "image":"assets/images/image4.jpg",
        "reference":"307",
        "brand":"Peugeot"
       }
    ]

ندخل الى ملف src/pages/home/home.ts

نضيف  دالة جلب بيانات السيارات  التي ستتصل بملف الخدمة car والدي بدوره يجلب البيانات من ملف الـ json الدي قمنا بانشائه قبل قليل  وستكون النتيجة على شكل مصفوفة  تحتوي على كائنات objects تتكون من image band reference

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { map } from 'rxjs/operators';  //+
import { CarProvider } from './../../providers/car/car';  //+

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  cars:any=[];

  constructor(
    public navCtrl: NavController,
    public carProvider: CarProvider,
  ) {

  
    this.carProvider.getCars()
      .subscribe(
          result => {
            let response:any = result; 
            this.cars = response; 
            console.log(result); // + من خلال debugger من اجل فحص البيانات بالمتصفح
          },
          error => {
              console.log(error);
          }
    );
}   


}

2. ندخل الى ملف home.html  ونعمل حلقة على المصفوفة وسنأخد الشكل cards من الموقع الرسمي لionic  -شاهد المثال من هدا المسار ادا ترغب بدلك-

https://ionicframework.com/docs/components/#card-background

نضيف هدا الكود مباشرة أسفل الـ  <ion-header> 

<ion-content  class="animated fadeIn common-bg">
    <div class="card-background-page">
        <div *ngIf='cars'>
          <ion-card *ngFor="let car of cars" no-margin class="full-width">
            <a (click)="detail(car.id)">
                <img [src]="car.image" >
                <div class="card-title">{{ car.reference}}</div>
                <div class="card-subtitle">{{ car.brand }}</div>
            </a>
          </ion-card>
        </div>
   </div>
</ion-content>

نضيف التنسيق الخاص بالمحتوى بملف app.scss

.card-background-page {

  ion-card {
    position: relative;
    text-align: center;
    border-bottom: 3px solid #ffffff;
    font-family: $font-family-base ;
    text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.65) ;
  }

  .card-title {
    position: absolute;
    top: 36%;
    font-size: 2.0em;
    width: 100%;
    font-weight: bold;
    color: #fff;
  }

  .card-subtitle {
    font-size: 1.0em;
    position: absolute;
    top: 52%;
    width: 100%;
    color: #fff;
  }

  .full-width {
    width: 100% !important;
  }
  
}

نضيف animation  من أجل عرض مميز وناعم بعض الشيء حيث سيظهر المحتوى على شكل fade

// Animate CSS
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}



.fadeIn {
  animation-name: fadeIn;
}

3. نضيف بعض الصور (صور السيارات) تحمل نفس الاسماء الموجودة بالمسارات image1.jpg image2.jpg image3.jpg   وسنضعها داخل مجلد images والدي ستجده بالملف الأساسي src

اختر اي صور ترغب باظهارها واضفها بالمسار  

src/assets/images/

احفظ التغييرات والنتيجة  ستكون هكدى بالمتصفح

المرفقات :

ستجد جميع ملفات الدرس الخاصة بالمجلد src  هنا

ملفات الخطوط الصور ملف cars.js  وملف الخدمة والصفحات الخ.. 

https://www.mediafire.com/file/aow9dwane0qwbk4/cars-auto-v0.0.1.zip/file

دائما ننصح باعادة  كتابة الكود من أجل تقوى مستواك افضل من تحميل الكود جاهز