کد پروژه آیونیک نوشتن یک اپ مثل توییتر با لاراول

ابتدا گوگل کنید how to start my first app with ionic

و سپس مراحلی که گفته رو انجام بدید

داگر نوع پروژه رو tabs انتخاب کنید صفحه ای خواهید داشت tab1.page.html و tab1.page.ts

در فایل html محتویات زیر را replace کنید

منظورم اینه که هر چی توی اون فایل هست پاک کنید

<ion-header>

<ion-toolbar>

<ion-buttons slot="start">

<ion-menu-button>

<img src="../../assets/img/sidelist2.png" alt="">

</ion-menu-button>

</ion-buttons>

<ion-title style="text-align: center">توییت ها</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

<ion-card *ngFor="let twtt of twitts" (click)="showTwitts()">

<ion-card-content>

<ion-row>

{{twtt.title}}

</ion-row>

</ion-card-content>

</ion-card>

<ion-card *ngIf="twitts==undefined">

<ion-card-content>

<ion-row>

<ion-col size="12">

<ion-card-title>لطفا چند لحظه صبر کنید</ion-card-title>

<div>احتمالا آیتمی وجود ندارد</div>

<br>

<div >روی دکمه بازگشت برای جستجوی مجدد کلیک کنید</div>

<ion-button (click)="filterTrip()">بازگشت</ion-button>

</ion-col>

</ion-row>

</ion-card-content>

</ion-card>

</ion-content>

<ion-footer>

<ion-fab vertical="bottom" horizontal="start">

<ion-fab-button (click)="onBackClicked()">

<ion-icon name="arrow-back"></ion-icon>

</ion-fab-button>

</ion-fab>

<ion-fab vertical="bottom" horizontal="end">

<ion-fab-button (click)="filterTrip()">

<ion-icon name="search"></ion-icon>

</ion-fab-button>

</ion-fab>

</ion-footer>

سپس در فایل tab1.page.ts محتویات زیر رو بعد از سازنده در کلاس paste کنید

async ionViewWillEnter() {

await this.getTwitts();

}

async getTwitts() {

this.present();

this.restService.postData2Lara(this.userData, "twitts", this.filterObj).then(async (result) => {

this.resposeData = result;

console.log(this.resposeData);

if (this.resposeData.total) {

if (this.resposeData.data) {

this.twitts = this.resposeData.data;

}

}

else if (this.resposeData.total == 0) {

this.presentToast(" نتیجه ای نداشت هیچ مسیری با فیلتر فوق نداشتیم");

}

else {

this.presentToast(" انجام نشد اشکال از سرور است با مدیر شبکه تماس بگیرید");

}

this.dismiss();

}, (err) => {

//Connection failed message

this.dismiss();

});

}

async present() {

this.isLoading = true;

return await this.loadingCtrl.create({

duration: 5000,

}).then(a => {

a.present().then(() => {

console.log('presented');

if (!this.isLoading) {

a.dismiss().then(() => console.log('abort presenting'));

}

});

});

}

async dismiss() {

this.isLoading = false;

return await this.loadingCtrl.dismiss().then(() => console.log('dismissed')).catch(() => { });

}

async presentToast(msg: string, time = 2000) {

const toast = await this.toastCtrl.create({

message: msg,

duration: time,

position: "top"

});

await toast.present();

}

سپس خطوط زیر را در مقادیر ورودری سازنده بگذارید

public navCtrl: NavController,

public loadingCtrl: LoadingController,

public restService: RestService,

public activatedRoute: ActivatedRoute,

public toastCtrl: ToastController

سپس دستور

ionic generate service rest

را اجرا کنید و محتویات زیر را بجای سازنده paste کنید

constructor(public http: Http) {

console.log('Hello rest Service Provider');

}

postDataLara(body, type) {

let apiUrl = environment.laravel.baseUrl + environment.laravel.plugin_otp_lara;

type = (type == 'otp1' ? 'requestOtp' : (type == 'otp2' ? 'verifyOtp' : type));

return new Promise((resolve, reject) => {

let headers = new Headers();

headers.set('Content-Type', 'application/json');

this.http.post(apiUrl + type, JSON.stringify(body), { headers: headers }).

subscribe(res => {

resolve(res.json());

}, (err) => {

reject(err);

});

});

}

خطوط زیر رو دربالای صفحه ی restService بگذارید

import { Http, Headers } from '@angular/http';

import { Observable } from 'rxjs';

import { catchError } from 'rxjs/operators';

import { environment } from './../environments/environment';

حالا دستور زیر را باید اجرا کنید

npm install @angular/http@latest

سپس در فایل app.module.ts

باید تغییراتی را اعمال کنید

https://teamtreehouse.com/community/using-angular-httpclientmodule-instead-of-httpmodule

مثل اینکه در بالا گفته است انجام دهید httpmodule را در ایمپورت قرار دهید

لازمه restservice رو هم در این فایل اضافه کنید

فایل envirement باید مقادیر laravel را به شکل زیر replaceکنید

export const environment = {

production: false,

wordpress: {

baseUrl: 'https://raahee.ir/',

},

laravel: {

baseUrl: 'https://api.raahee.ir',

// baseUrl: 'http://localhost:8000',

plugin_otp_lara: '/api/v1/',

otp1_url: '/api/v1/otp1/',

otp2_url: '/api/v1/otp2/',

}

};

حالا پروژه ایک ه با لاراول دیروز نوشتیم را اجرا کنید واین پروژه ه را هم اجرا کنید