كيفية بناء أول تطبيق Ionic 4 الخاص بك مع مكالمات API

هل لاحظت للتو أنه تم إصدار Ionic 4 وتريد أخيرًا البدء في تطوير التطبيقات عبر الأنظمة الأساسية؟ حسنًا ، اليوم هو يومك! سننتقل إلى بناء أول تطبيق Ionic 4 الخاص بك باستخدام مكالمات HTTP إلى قاعدة بيانات الأفلام المفتوحة!

سواء كنت جديدًا تمامًا على Ionic أو استخدمت الإصدارات السابقة ، فإننا ننتقل إلى جميع الأساسيات. نحن سوف تغطي كيفية إعداد التطبيق الجديد ، التوجيه وحتى المكالمات API لعرضه المتزامن البيانات داخل التطبيق لدينا.

إذا كنت ترغب في تعلم اللغة الأيونية بشكل أسرع ، يمكنك أيضًا الاطلاع على أكاديمية Ionic التي تم إنشاؤها للمطورين مثلك تمامًا!

جاهز ؟ انطلق !

إعداد تطبيق Ionic 4 الخاص بنا

إذا كنت جديدًا على Ionic ، فأنت بحاجة إلى التأكد من تثبيت Node Package Manager. إذا كنت قد عملت باستخدام تقنيات الويب الأخرى قبل أن تكون الفرص جيدة ، فستحصل بالفعل على كل ما تحتاجه.

إذا لم تكن قد استخدمت Ionic من قبل ، فأنت بحاجة إلى تثبيته من خلال npm. بمجرد التثبيت ، تكون جاهزًا أخيرًا لإنشاء مشروع Ionic 4 الخاص بك!

لإعداد مشروع فارغ ، يمكنك استخدام Ionic CLI حتى ننتهي بمشروع Ionic 4 جديد مع دعم Angular ( يمكنك أيضًا استخدام React أو Vue ، دعم أفضل يأتي لاحقًا هذا العام ).

بمجرد إنشاء المشروع ، نقوم بإدخال القرص المضغوط في المجلد. نستخدم CLI ، الذي يستخدم Angular CLI تحت الغطاء ، لإنشاء صفحات جديدة لتطبيقنا نريد عرضها.

# Install Ionic if you haven't before npm install -g ionic # Create a blank new Ionic 4 app with Angular support ionic start movieApp blank --type=angular cd movieApp # Use the CLI to generate some pages and a service ionic g page pages/movies ionic g page pages/movieDetails ionic g service services/movie

يمكنك الآن عرض تطبيقك مباشرة عن طريق تشغيل الأمر التالي داخل مشروعك:

ionic serve

سيؤدي هذا إلى فتح المتصفح بمعاينة تطبيقك والذي سيعيد التحميل تلقائيًا بمجرد تغيير أي شيء داخل مشروعك.

بالحديث عن المشروع ، لدينا مجموعة من الملفات والمجلدات هنا ، دعنا نرى ما يعنيه كل هذا. سنركز على مجلد src الخاص بتطبيقنا حيث لا داعي للقلق بشأن الباقي في الوقت الحالي.

تطبيق

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

على صفحات مجلد يحتوي على آراء الفعلية / صفحات التطبيق لدينا، مما يعني أن العنصر سوف نرى على الشاشة. لدينا الآن صفحتان هنا ، وكل صفحة تنشئها باستخدام CLI تأتي مع 4 ملفات:

  • * .module.ts: الوحدة الزاويّة للصفحة. كل صفحة هي في الأساس وحدة خاصة بها (تتعلق بالعمارة الزاويّة) مع استيراد وتصميم
  • * .page.html: ترميز HTML للصفحة
  • * .page.scss: إن التصميم لصفحة معينة (أكثر على التصميم العالمي في وقت لاحق)
  • * .page.spec.ts: ملف اختبار مضاف تلقائيًا لصفحتك. جيد إذا كنت ترغب في إعداد اختبارات الوحدة الآلية
  • * .page.ts: وحدة التحكم للصفحة التي تحتوي على كود Javascript الذي يدير الوظائف

و الخدمات مجلد يحتوي على خدمتنا التي تم إنشاؤها مسبقا - وهذا هو حول هيكلة التطبيق الخاص بك وفقا لأفضل الممارسات وفصل المخاوف بين الرأي والبيانات الفعلية للتطبيق. ستهتم الخدمة بمعالجة استدعاءات واجهة برمجة التطبيقات (API) وستعيد البيانات ببساطة إلى وجهة نظرنا لاحقًا!

الأصول

يحتوي هذا المجلد على جميع الصور أو الخطوط أو أي أصول تحتاجها لتطبيقك لاحقًا.

البيئات

من وقت لآخر ، قد يكون لمشروعك بيئة تطوير وتدريج وإنتاج مع خوادم مختلفة يستهدفها تطبيقك. يساعد مجلد البيئة في إعداد المعلومات لبيئات مختلفة. يمكننا لاحقًا إنشاء تطبيق Ionic الخاص بنا باستخدام علامة سطر أوامر ويأخذ القيم الصحيحة تلقائيًا. سهل جدا!

موضوع

يحتوي هذا المجلد فقط على المتغيرات variables.scss التي تحتوي على معلومات لون محددة مسبقًا من Ionic. يمكننا دائمًا تغيير هذا الملف وحتى استخدام أداة مثل Ionic Color Generator لإنشاء نسختنا الخاصة من هذا الملف!

خارج المجلد لدينا أيضًا الملف global.scss. هنا يمكننا كتابة بعض SCSS التي سيتم تطبيقها عالميًا على تطبيقنا. يمكننا أيضًا تعريفه لصفحة واحدة فقط في ملفات التصميم الخاصة بهم.

ملفات اخرى

قد يكون الملف index.html هو الأكثر صلة بالملفات الأخرى لأنه تمامًا كما هو الحال مع أي موقع ويب آخر ، يمثل هذا الملف نقطة الدخول إلى تطبيقنا! في الوقت الحالي ، على الرغم من أننا لسنا بحاجة إلى تغيير أي شيء هنا ، فلنبدأ الآن في الدخول إلى الكود الفعلي.

التوجيه المتطلب ومكالمات HTTP

مع Ionic 4 ننتقل من مفهوم التوجيه الخاص إلى جهاز التوجيه الزاوي القياسي. قد تبدو الترميز أكثر صعوبة في البداية ، لكنها في الواقع منطقية تمامًا.

بالنسبة لجميع الاتصالات داخل تطبيقك ، فأنت تقوم بإعداد معلومات التوجيه مقدمًا - تمامًا مثلما تتنقل في موقع ويب!

في تطبيقنا نحتاج إلى طريقين:

  • / أفلام - انتقل إلى صفحتنا الأولى التي يجب أن تعرض قائمة الأفلام
  • / movies /: id - نريد أن نكون قادرين على إظهار التفاصيل لفيلم واحد لذلك نضيف معلمة : id إلى المسار الذي يمكننا حله ديناميكيًا

نحتاج أيضًا إلى توصيل الصفحة وفقًا ( أكثر تحديدًا : وحدة الصفحة) بالمسار حتى يعرف Angular كيفية حل مسار معين. نوفر هذه المعلومات باستخدام loadChildren الذي يحصل في الواقع على سلسلة فقط من مسار الوحدة .

هذا يعني أننا لا نستورد وحدة أخرى هنا ، وبالتالي ، فإن الصفحات تستخدم التحميل البطيء. هذا يعني أنه سيتم تحميلها فقط بمجرد الانتقال إلى هناك!

لإعداد معلومات التوجيه الخاصة بنا ، افتح app / app-routing.module.ts وقم بتغييره إلى:

import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = [ { path: '', redirectTo: 'movies', pathMatch: 'full' }, { path: 'movies', loadChildren: './pages/movies/movies.module#MoviesPageModule' }, { path: 'movies/:id', loadChildren: './pages/movie-details/movie-details.module#MovieDetailsPageModule' } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

من خلال إجراء هذا التغيير ، قمنا أيضًا بفصل الصفحة الرئيسية التي كانت في البداية في المشروع (والتي ربما تكون قد حذفتها بالفعل في هذه المرحلة).

الآن سيقوم التطبيق بتحميل صفحة الأفلام الخاصة بنا كصفحة أولى ، رائع! يجب أن تلاحظ أيضًا هذا التغيير في مثيلك قيد التشغيل ionic serveبالفعل.

نصيحة: إذا كنت ترغب في الحصول على شعور أفضل بالشكل الذي سيبدو عليه تطبيقك على جهاز حقيقي ، يمكنك أيضًا تشغيله ionic labبدلاً من الخدمة ولكن عليك تثبيت الحزمة مقدمًا:

# Install the Lab Package npm i @ionic/lab # Run your app with device preview and platform styles ionic lab

تم تجميع هذه الحزمة مسبقًا مع كل تطبيق جديد ولكن يجب تثبيتها لـ Ionic 4 الآن.

/ نهاية تلميح

نحتاج أيضًا إلى تطبيق تغيير آخر على تطبيقنا لأننا نريد إجراء مكالمات HTTP. لذلك نحتاج إلى استيراد وحدة Angular أخرى لإجراء هذه الطلبات.

The way of doing this is the same as with Ionic 3. We just need to add the HttpClientModule to our main module file and add it to the array of imports like this inside our app/app.module.ts:

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouteReuseStrategy } from '@angular/router'; import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; import { SplashScreen } from '@ionic-native/splash-screen/ngx'; import { StatusBar } from '@ionic-native/status-bar/ngx'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [AppComponent], entryComponents: [], imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule], providers: [ StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } ], bootstrap: [AppComponent] }) export class AppModule {}

Before we dive into more Ionic 4 code we first have to set up the service that powers our app and handles all the HTTP requests that we later want to call.

Making HTTP Requests

A service is the same as in previous versions a provider and can be injected into our controller in order to call its functions.

In order to use the Open Movie Database you need to request an API key and insert it into our service — the process is free so go ahead right now.

With the API we can now search for strings and get results in form of movies, episodes or even games. Also, we can get detailed information for one specific object of those results so a perfect use case for our first Ionic 4 app!

Our service only needs 2 functions:

  • searchData(): This function searches for results to a specific title and search type – an enum we defined upfront to represent the types that we can pass to the API using TypeScript!
  • getDetails(): This function returns the detailed information for one specific element, will be used on our details page

Both functions will return an Observable which is like a Promise on steroids. No serious, it’s like a stream of events that we can subscribe to. Explaining this concept would take another post. For now, let’s use it and keep in mind that both of our functions are async — they will return the API data not immediately.

Now go ahead and change your services/movie.service.ts to:

import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; // Typescript custom enum for search types (optional) export enum SearchType { all = '', movie = 'movie', series = 'series', episode = 'episode' } @Injectable({ providedIn: 'root' }) export class MovieService { url = '//www.omdbapi.com/'; apiKey = ''; // <-- Enter your own key here! /** * Constructor of the Service with Dependency Injection * @param http The standard Angular HttpClient to make requests */ constructor(private http: HttpClient) { } /** * Get data from the OmdbApi * map the result to return only the results that we need * * @param {string} title Search Term * @param {SearchType} type movie, series, episode or empty * @returns Observable with the search results */ searchData(title: string, type: SearchType): Observable { return this.http.get(`${this.url}?s=${encodeURI(title)}&type=${type}&apikey=${this.apiKey}`).pipe( map(results => results['Search']) ); } /** * Get the detailed information for an ID using the "i" parameter * * @param {string} id imdbID to retrieve information * @returns Observable with detailed information */ getDetails(id) { return this.http.get(`${this.url}?i=${id}&plot=full&apikey=${this.apiKey}`); } }

I’ve also added some documentation to the functions — with a tool like Compodoc you could now create nice documentation!

Alright, now we are finally ready for some more Ionic 4 code!

Searching for Movies

We start our apps functionality with the things that happen in the background and then build the view on top of it.

So right now we need to implement the logic to submit a search term and type to our service and receive the results. Therefore, we inject the service through our constructor so it’s available to the class.

In another function that we call searchChanged() we will now simply call the according function of our service and set the result to a local variable b>results. Our view will later handle the data that comes from the API and display it using this variable.

We also keep 2 more variables for the searchTerm and type inside our class that we pass to the service. We will connect with them from the view as well so we can change them.

Now go ahead with the code for your controller inside the pages/movies/movies.page.ts:

import { MovieService, SearchType } from './../../services/movie.service'; import { Component, OnInit } from '@angular/core'; import { Observable } from 'rxjs'; @Component({ selector: 'app-movies', templateUrl: './movies.page.html', styleUrls: ['./movies.page.scss'], }) export class MoviesPage implements OnInit { results: Observable; searchTerm: string = ''; type: SearchType = SearchType.all; /** * Constructor of our first page * @param movieService The movie Service to get data */ constructor(private movieService: MovieService) { } ngOnInit() { } searchChanged() { // Call our service function which returns an Observable this.results = this.movieService.searchData(this.searchTerm, this.type); } }

Now the view which looks a lot like Ionic 3 code, just a few of the elements changed their names and properties. For everyone new to Ionic in general: Welcome to your first Ionic components!

A page can be separated into 3 areas: Header, content, footer. In our case, we don’t want a footer so we only define the header area with a title and the content with our actual elements for the search.

The first element that affects the search is the ion-searchbar which is a simple input you have seen in many apps before to search for a term.

We always want to call our search functionality when the type or searchTerm changes. We can do this by catching the (ionChange) event of some of our elements.

Below we got a select drop down with options and the according value for the different types that we could pass back to the API.

You should have also noticed the [(ngModel)] syntax through which both elements are connected to our controller properties. If one side changes, the other will automatically get the new value as well (also known as 2-way data binding).

So we got the search in place and now add another list with elements below our previous components.

For the list, we use an iteration over our results variable. Because this variable is an Observable (remember the implementation in our service) we need to add an Angular Pipe “| async” to it. The view subscribes to the Observable and handles the changes accordingly.

We also add the routing directly to this element by using [routerLink]. We construct the path that we want to open when we click on the element. We use the imdbID property of the item so we can resolve the information on our details page later.

Besides that, we create the markup for one item using the Poster which is an image, the title, year and finally also a cool icon at the and based on the type of the item. Yes, those cool icons are already bundled with your app and are called Ionicons!

With all of that in mind change your pages/movies/movies.page.html to:

  My Movie Search      Select Searchtype  All Movie Series Episode      

{{ item.Title }}

{{ item.Year }}

By now you should be able to search for a specific term inside your app and get a list of results — that’s already a big win!

If you are coming form Ionic 3 you might have also noted another new property called slot so here’s some info on that:

Ionic 4 components are built using Stencil (yeah, they actually created that tool as well!) so they are standard web components — you could import them basically everywhere on the web! These components also use the Shadow DOM API and are basically living outside of the scope of your regular DOM elements.

That means also standard styling will sometimes not affect these components like it was possible in previous versions!

In order to get information into these components, we can inject certain parts of HTML into their slots that are defined on these elements. You can see how their implementation looks like on the example of the ion-item we used here.

Presenting Detailed Information

Ok enough of background information, let’s put some more work into the details page of our app. We have implemented a route and we also created a button that passed an ID with that route so the details page will be open, but we need to get access to the ID!

With previous Ionic versions we could easily pass whole objects to new pages, this is now not a best practice anymore. Instead, we pass only small chunks of information (like an ID) with the URL. Otherwise, you would end up with a huge JSON stringified term inside the URL. This isn’t really something we want to have.

To get access to this ID field (that we already defined inside our routing in the beginning) we can use the ActivatedRoute and its properties.

So after we extract the ID from the params we can make another call to our service (that we injected through the constructor again) and get the detailed information for whatever ID we got.

Nothing really new so let’s add the following code to our pages/movie-details/movie-details.page.ts:

import { MovieService } from './../../services/movie.service'; import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-movie-details', templateUrl: './movie-details.page.html', styleUrls: ['./movie-details.page.scss'], }) export class MovieDetailsPage implements OnInit { information = null; /** * Constructor of our details page * @param activatedRoute Information about the route we are on * @param movieService The movie Service to get data */ constructor(private activatedRoute: ActivatedRoute, private movieService: MovieService) { } ngOnInit() { // Get the ID that was passed with the URL let id = this.activatedRoute.snapshot.paramMap.get('id'); // Get the information from the API this.movieService.getDetails(id).subscribe(result => { this.information = result; }); } openWebsite() { window.open(this.information.Website, '_blank'); } }

We also added another function to open a website using the window object and the information from the data of the API that we stored in the local information variable.

Now we just need to create a view based on the JSON information of the API. It always helps to log() out the info you got so you see keys that you can use to display some values.

In our case, we use the Ionic card component and add the image and some items with information and more icons (did I say I really like the Ionicons?).

We also added a button below that card that will be displayed if the result information contains the website key. We just have to add our function to the (click) event of the button in order to hook everything up!

On another note, we also have to add an ion-back-button to the header of that page in order to get a nice little back arrow to our previous movie list page. This was automatically done in v3 but needs to implemented manually as of v4!

Now finish your details view by changing your pages/movie-details/movie-details.page.html to:

     {{ information?.Genre }}       {{ information.Title }}   {{ information.Year }}     {{ information.Plot }}   {{ information.imdbRating }}    {{ information.Director }}    {{ information.Actors }}    Open Website    

If you now take a look at your browser you might notice that the image looks waaaay to big as its taking all the space available. Let’s change this through some good old CSS so open your pages/movie-details/movie-details.page.scss and insert:

.info-img { max-height: 30vh; object-fit: contain; padding: 10px; }

Now our results look a lot more appealing.

We can search, select a movie type, dive into a search result and have a fully functional Ionic 4 app with HTTP calls finished!

Conclusion

While it was a straight forward experience to build our first Ionic 4 app there are so many things we haven’t talked enough about.

UI patterns like Tabs and side menu, CSS variables, responsive layout and PWA to just name a few on the side of Ionic and Angular.

And we haven’t even touched the Cordova side of things to actually build this app into a real native mobile app!

If you want to learn how to develop Ionic 4 apps as fast as possible and get them to the iOS & Android app stores quickly you can join the Ionic Academy today and enjoy expert screencasts, a library of quick wins and a community to support you on your journey!

And of course, I (Simon) am also present inside to answer all your questions all the time

You can also find a video version of this guide below!

نُشر في الأصل على موقع ionicacademy.com في 24 يناير 2019.