Как создать свое первое приложение Ionic 4 с вызовами API

Автор оригинала: FreeCodeCamp Community Member.

Саймон Гримм

Таким образом, вы только что заметили, что Ionic 4 был выпущен, и вы, наконец, хотите начать работу с перекрестной разработки приложения? Ну, сегодня ваш день! Мы пройдем построение вашего первого приложения Ionic 4 с HTTP-вызовами на Откройте базу данных фильмов !

Независимо от того, совершенно новичок в Ionic или использовали предыдущие версии, мы проходим все основы. Мы рассмотрим, как настроить Новое приложение , Маршрутизация и даже API Вызывы для отображения Async Data Внутри нашего приложения.

Если вы хотите изучить IONIC еще быстрее, вы также можете Проверьте мою ионную академию Что было сделано для разработчиков так же, как вы!

Готов ? Идти !

Настройка нашего приложения Ionic 4

Если вы новичок в Ionic, вам нужно убедиться, что у вас есть Узел Установлен Узел Пакет Manager Отказ Если вы работали с другими веб-технологиями, прежде чем шансы довольно хорошие, у вас уже есть все необходимое.

Если вы также не использовали IONIC раньше, вам нужно установить его через NPM. После установки вы, наконец, готовы создать свой проект Ionic 4!

Чтобы настроить пустой проект, вы можете использовать Ionic Cli Таким образом, мы в конечном итоге со свежим проектом Ionic 4 с угловой поддержкой ( Вы также можете использовать React или Vue, лучшую поддержку, приходящую позже в этом году ).

Как только проект создан мы CD в папку. Мы используем CLI, что использует Угловые 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 Папка нашего приложения, поскольку нам не нужно беспокоиться о остальных.

Приложение

Это папка, в которой мы сделаем все изменения кода, которые следуют позже в этом руководстве. Это уже содержит Главная Папка, которая в основном страница, как мы создали раньше. Мне нравится иметь все страницы самостоятельно Страницы Папка, так что вы также можете удалить домашнюю папку также на данный момент.

Страницы Папка содержит фактические представления/страницы нашего приложения, что означает элемент, который мы увидим на экране. Прямо сейчас у нас уже есть 2 страницы здесь, и каждая страница, которую вы создаете с CLI, поставляется с 4 файлами:

• * .Module.ts: Угловой модуль для страницы. Каждая страница в основном является их собственным модулем (связанным с угловой архитектурой) с импортом и стилем
• * .page.html: HTML Разметка для страницы
• * .page.scsss: стайлинг Для конкретной страницы (подробнее о глобальном стиле позже)
• * .page.spec.ts: автоматически добавлена Тестирование Файл для вашей страницы. Хорошо, если вы хотите настроить автоматизированные модульные тесты
• * .page.ts: контроллер Для страницы, которая содержит код JavaScript, который управляет функциональностью

Услуги Папка содержит наш ранее созданный сервис – это о структурировании вашего приложения в соответствии с наилучшими практиками и разделение опасений между видом и фактическими данными вашего приложения. Услуга позаботится о обращении с вызовами API и просто вернет данные на наш представление позже!

Ресурсы

Эта папка содержит все изображения, шрифты или все необходимые вам активы для вашего приложения позже по дороге.

Среда

Время от времени ваш проект может иметь среду разработки, постановки и производства с разными серверами, которые ваши цели приложения. Папка окружающей среды помогает настроить информацию для различных сред. Позже мы можем построить наше ионное приложение с Флаг командной строки И он автоматически принимает правильные значения. Очень кстати!

Тема

Эта папка содержит только variables.scsss который содержит заранее определенную цветную информацию от IONIC. Мы всегда можем изменить этот файл и даже использовать инструмент, как Ионный цветовой генератор Чтобы создать нашу собственную ароматизированную версию этого файла!

За пределами папки у нас также есть global.scsss. Здесь мы можем написать некоторые SCSS, которые будут во всем мире на наше приложение. Мы также можем определить его только для одной страницы в своих собственных файлах стилей.

Другие файлы

Наиболее актуальными для других файлов могут быть index.html Потому что, как и с каждым другим веб-сайтом, этот файл отмечает точку входа в наше приложение! На данный момент, хотя нам не нужно менять вещь здесь, так что давайте теперь начнем попасть в реальный код.

Предварительные вызовы маршрутизации и HTTP

С IONIC 4 мы переходим из фиксированной концепции маршрутизации к стандарту Угловой роутер Отказ Разметка может выглядеть немного сложнее в начале, но это на самом деле делает совершенно смысл.

Для всех соединений внутри вашего приложения вы настраиваете Информация о маршрутизации Аванс – так же, как вы ориентируетесь на сайт!

В нашем приложении нам нужно 2 маршрута:

• /фильмы – Перейдите на нашу первую страницу, которая должна отображать список фильмов
• /Фильмы/: ID – Мы хотим иметь возможность показать детали для одного фильма, поэтому мы добавляем MARAM : id на маршрут, который мы можем динамически разрешать

Нам также необходимо подключить всю страницу ( более специфические : модуль страницы) на маршрут, так что угловой, знает, как разрешить определенный маршрут. Мы поставляем эту информацию, используя loadchildren что на самом деле только получает строка в путь модуля Отказ

Это означает, что мы не на самом деле не импортируем другой модуль здесь, поэтому страницы используют Ленивая нагрузка. Это означает, что они будут загружены только после того, как мы там перемещаемся!

Чтобы настроить нашу информацию маршрутизации открыть наши Приложение/приложение-маршрутирование. 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 { }

Приняв это изменение, мы также отключили домашнюю страницу, которая была первоначально в проекте (и которую вы могли бы уже удалить на данный момент).

Теперь приложение загрузит наши фильмы как первая страница, отличная! Вы также должны заметить это изменение в работе Ионическая подача Экземпляр уже.

Совет: Если вы хотите получить лучшее ощущение того, как ваше приложение будет выглядеть на реальном устройстве, вы также можете запустить Ионная лаборатория Вместо того, чтобы служить, но вы должны установить пакет APFFRONT:

# Install the Lab Package

npm i @ionic/lab

# Run your app with device preview and platform styles

ionic lab

Этот пакет был ранее в комплекте с каждым новым приложением, но теперь необходимо установить для IONIC 4.

/Конец кончика

Нам также нужно применить еще одно изменение в наше приложение, как мы хотим сделать HTTP вызовы. Поэтому нам нужно импортировать другой угловой модуль для изготовления этих запросов.

Способ выполнения этого такое же, как с IONIC 3. Нам просто нужно добавить HttpclientModule в наш основной файл модуля и добавьте его в Массив импорта Как это внутри наших Приложение/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 {}

Перед тем, как мы погрузимся в более ионный 4-код, мы сначала должны настроить службу, которая способствует нашему приложению и обрабатывает все HTTP-запросы, которые мы позже хотим позвонить.

Делать HTTP-запросы

Сервис такой же, как и в предыдущих версиях поставщика и может быть введен в наш контроллер, чтобы вызвать его функции.

Для того, чтобы использовать базу данных открытых фильмов, вам нужно Запросить ключ API И вставить его в наш сервис – процесс свободен, так что идти прямо сейчас.

С API теперь мы можем найти строки и получить результаты в виде фильмов, эпизодов или даже игр. Кроме того, мы можем получить подробную информацию для одного конкретного объекта этих результатов, поэтому идеальное место для использования для нашего первого приложения Ionic 4!

Наш сервис требует только 2 функции:

• searchdata () : Эта функция ищет результаты для конкретного типа заголовка и типа поиска – enum, который мы определили UPFRONT для представления типов, которые мы можем перейти к API, используя Teamscript!
• getdetails () : Эта функция возвращает подробную информацию для одного конкретного элемента, будет использоваться на наших деталях.

Обе функции вернут Наблюдаемый Что похоже на обещание на стероидах. Нет серьезных, это как поток событий, которые мы можем Подписаться к. Объясняя эту концепцию примет другой пост. На данный момент давайте использовать его и имеем в виду, что оба наших функция являются async – Они вернут данные API не сразу.

Теперь иди и измените свой Услуги/Фильм. Service.ts к:

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 = 'http://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}`);
  }
}

Я также добавил некоторую документацию к функциям – С помощью инструмента как Compodoc Теперь вы можете создать приятную документацию!

Хорошо, теперь мы наконец готовы к ещему ионному 4 коду!

Ищет фильмы

Мы начинаем наши приложения функциональность с вещами, которые происходят на заднем плане, а затем построить вид сверху.

Поэтому сейчас нам нужно реализовать логику, чтобы отправить поисковый термин и введите на наш сервис и получать результаты. Поэтому мы вставлять Сервис через наш конструктор, так что это доступно для класса.

В другой функции, которую мы называем searchChanged () Теперь мы просто позвоним в зависимости от нашего сервиса и установили результаты в локальную переменную B> результаты. Позже наш взгляд будет обрабатывать данные, которые поставляются от API и отображают его с помощью этой переменной.

Мы также храням еще 2 переменных для поиска и введите в нашему классу, которые мы передаем на службу. Мы свяжемся с ними с вида, поэтому мы можем изменить их.

Теперь идите вперед с кодом для вашего контроллера внутри страницы/фильмы/фильмы. 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);
  }
}

Теперь представление, которое очень похоже на IONIC 3 код, просто несколько элементов изменили свои имена и свойства. Для всех новых для Ionic в целом: Добро пожаловать на ваши первые ионные компоненты !

Страница может быть разделена на 3 области: заголовок, контент, нижний колонтитул. В нашем случае мы не хотим нижнего колонтитула, поэтому мы определяем только зону заголовка с заголовком и содержанием с нашими фактическими элементами для поиска.

Первый элемент, который влияет на поиск Ион-поиск Какой простой вход вы видели во многих приложениях, прежде чем искать срок.

Мы всегда хотим вызвать нашу функциональность поиска, когда тип или поиска изменяется. Мы можем сделать это, ловив событие (IonChange) некоторых из наших элементов.

Ниже мы получили выбору выпадают с опциями и значением по значению для различных типов, которые мы могли бы вернуться к API.

Вы также должны были заметить синтаксис [(NGModel)], через который оба элемента подключены к нашему свойствам контроллера. Если одна сторона изменяется, другая автоматически получит новое значение (также известное как 2-сторонняя передача данных ).

Таким образом, мы получили поиск на месте и теперь добавляете другой список с элементами под нашими предыдущими компонентами.

Для списка мы используем итерацию по нашим переменным результата. Поскольку эта переменная является наблюдаемым (запомнить реализацию в нашем сервисе), нам нужно добавить угловую трубу «| async». Взгляд подписывается на наблюдаемые и обрабатывает изменения соответственно.

Мы также добавляем маршрутизацию напрямую к этому элементу, используя [RouterLink]. Мы строим путь, который мы хотим открыть, когда мы нажимаем на элемент. Мы используем ИМДИПИП Свойство элемента, чтобы мы могли решить информацию о наших деталях страницы позже.

Кроме того, мы создаем разметку для одного элемента, используя Плакат Какое изображение, название, год и, наконец, также прохладный значок на основе и на основе типа элемента. Да, эти классные иконки уже связаны с вашим приложением и называются Ionicons !

Со всем этим в виду изменить свой Страницы/Фильмы/Фильмы. Page.html к:

  
    My Movie Search
  

 

 
  
 
  
    Select Searchtype
    
      All
      Movie
      Series
      Episode
    
  
 
  
 
    
      
        
      
 
      
        
{{ item.Title }}
        {{ item.Year }}
      
 
      
      
      
 
    
 
  
 

К настоящему времени вы должны иметь возможность искать определенный термин внутри вашего приложения и получить список результатов – Это уже большая победа !

Если вы приходите форму IONIC 3, вы могли бы также отметить еще одну новую недвижимость под названием Слот Итак, вот некоторая информация о том, что:

Ionic 4 компонента построены с использованием Трафарет (Да, они на самом деле также создали этот инструмент!) Так что они являются стандартными веб-компоненты – Вы можете импортировать их в основном везде в Интернете! Эти компоненты также используют Shadow DOM API И в основном живут за пределами объема ваших обычных элементов DOM.

Это означает, что также стандартный стиль иногда не влияет на эти компоненты, как можно в предыдущих версиях !

Чтобы получить информацию в эти компоненты, мы можем вводить определенные части HTML в их слоты которые определены на этих элементах. Вы можете Посмотрите, как выглядит их реализация На примере ионного предмета мы использовали здесь.

Представление подробной информации

Хорошо, достаточно справочной информации, давайте поставим еще немного работы на страницу сведения о нашем приложении. Мы реализовали маршрут, и мы также создали кнопку, которая передавала идентификатор с этим маршрутом, поэтому страница сведений будет открыта, но нам нужно получить доступ к идентификатору!

С предыдущими ионными версиями мы могли бы легко пройти целые объекты на новые страницы, теперь это уже не лучшая практика. Вместо этого мы пройти только небольшие куски информации (как идентификатор) с URL. В противном случае вы получите огромный JSON Stringified Term внутри URL. Это не то, что мы хотим иметь.

Чтобы получить доступ к этому идентификатору (мы уже определены внутри нашей маршрутизации в начале), мы можем использовать ActivatedRoute и его свойства.

Поэтому после того, как мы извлеките идентификатор по параметрам, мы можем сделать другой звонок на наш сервис (что мы снова вводим конструктор) и получите подробную информацию для того, что мы получили.

Ничего особенного, так что давайте добавим следующий код для нашего Страницы/Фильм-Детали/Фильм-Детали. 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');
  }
}

Мы также добавили еще одну функцию, чтобы открыть веб-сайт, используя окно объекта и информацию из данных API, которые мы сохранили в локальном Информация Переменная.

Теперь нам просто нужно создать вид на основе информации JSON API. Он всегда помогает воспользоваться () из информации, которую вы получили, чтобы вы видели клавиши, которые вы можете использовать для отображения некоторых значений.

В нашем случае мы используем Компонент Ionic Card И добавьте изображение и некоторые элементы с информацией и более значками ( Я говорю, что я действительно люблю иониконы? ).

Мы также добавили кнопку ниже этой карты, которая будет отображаться, если информация о результатах содержит ключ веб-сайта. Мы просто должны добавить нашу функцию в (нажмите) Событие кнопки для того, чтобы все все!

На другом заметке мы также должны добавить ion-back-кнопка на заголовок этой страницы, чтобы получить приятную маленькую спину стрелку на наш предыдущий список фильмов. Это было автоматически сделано в V3, но необходимо реализовать вручную по V4!

Теперь закончите свои данные посмотреть, изменив свой Страницы/Фильм-Детали/Movie-detail.page.html к:

  
    
      
    
    {{ information?.Genre }}
  

 

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

Если вы теперь посмотрите на ваш браузер, вы можете заметить, что изображение выглядит ваааай в целом, так как его принимает все доступное пространство. Давайте изменим это через несколько старых CSS, так что откройте свой Страницы/Фильм-Детали/Фильм-Детали. Page.Scsss и вставить:

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

Теперь наши результаты выглядят намного более привлекательным.

Мы можем найти, выберите тип фильма, погрузитесь в результат поиска и иметь полностью функциональное приложение Ionic 4 с HTTP CONSET!

Заключение

Хотя это был прямой опыт, чтобы построить наше первое приложение Ionic 4, существуют так много вещей, о которых мы не разговаривали.

Узоры UI, такие как вкладки и боковое меню, переменные CSS, отзывчивый макет и PWA, чтобы просто назвать несколько на стороне ионных и угловых.

И мы даже не коснулись вещей Cordova, чтобы на самом деле создать это приложение в Настоящее родное мобильное приложение !

Если вы хотите узнать, как Разработать IONIC 4 приложения как можно быстрее и заставить их быстро магазины приложений iOS & Android, вы можете Присоединяйтесь к Ионской академии сегодня И наслаждайтесь Expert Screencasts, библиотекой быстрого победа и сообщество, чтобы поддержать вас в вашем путешествии!

И, конечно, я (Симон) также представляю внутри, чтобы ответить на все ваши вопросы все время

Вы также можете найти видео версию этого руководства ниже!

Первоначально опубликовано ionicacademy.com 24 января 2019 года.