Всем привет! Новый пост каждую неделю или две на актуальную техническую тему — Ionic! К концу этой серии цель состоит в том, чтобы создать простое приложение списка дел CRUD (создание, чтение, обновление и удаление), которое также подключено к онлайн-базе данных, такой как Firebase.

В этом посте вы узнаете, как;

  1. Настройте Ionic Project.
  2. Запустите его в своем браузере.

Гибридное мобильное приложение — что это?

Проще говоря, это мобильные приложения, созданные на более простых для изучения языках; HTML, CSS и JavaScript. Прелесть разработки гибридных мобильных приложений заключается в том, что их можно скомпилировать для работы с любой платформой. Если вы ленивы, как ваш покорный слуга, вам будет проще использовать один код для создания множества приложений, а не разрабатывать отдельные приложения для каждой платформы.

Ionic — одна из популярных платформ для создания собственного гибридного мобильного приложения. Его можно встроить в приложение для Android, iOS, Windows phone, Progressive Web или Desktop. И тестировать приложение намного проще, поскольку его можно перезагружать прямо в ваш браузер.

Шаг 1 — Настройка всего этого

Первоначально зарегистрируйте учетную запись Ionic Pro здесь. Это упростит создание и доставку приложения. Возможно, вам придется войти в систему в процессе создания проекта.

Чтобы начать кодировать свое первое приложение Ionic, вам нужно несколько вещей;

  1. Node.js — это довольно просто. Просто зайдите на веб-сайт Node.js и загрузите идеальный для вас установщик. Нам нужен менеджер пакетов Node с метким названием npm, чтобы установить все зависимости для многих модулей, которые вы хотели бы использовать в своем приложении. Если вы разрабатываете на Mac и у вас установлен Homebrew, просто введите команду brew install npm в консоли.
  2. TypeScript — TypeScript, надмножество JavaScript, используется вместо JS для большей части кода. После установки Node.js введите в консоли npm install -g typescript .
  3. Cordova — Cordova — это фреймворк, который встраивает код HTML, CSS и JS/TS в приложение. Для установки введите npm install -g cordova
  4. И, наконец, Ionic — введите npm install -g ionic.

Бонус — с помощью этой команды вы также можете скачать все три за один раз! npm install -g typescript cordova ionic.

Теперь, когда вы настроили среду, давайте начнем эту вечеринку!! 🎉🎉

Шаг 2 — Создание вашего первого приложения

В консоли перейдите в папку, в которой вы хотите сохранить приложение. Лично я предпочитаю иметь отдельную папку для всех моих проектов Ionic в моих документах.

Затем введите ionic start . Затем консоль предложит вам ввести имя проекта, например, Project name: Tasks.

Затем вам будет предложено указать тип приложения.

? Starter template: (Use arrow keys)
  tabs     | A starting project with a simple tabbed interface
> blank    | A blank starter project
  sidemenu | A starting project with a side menu with navigation in the content area
  super    | A starting project complete with pre-built pages, providers and best practices for Ionic development.
  tutorial | A tutorial based project that goes along with the Ionic documentation
  aws      | AWS Mobile Hub Starter

А пока давайте сделаем пустой проект, список дел со всеми функциями CRUD на одной странице. Затем он запросит у вас разрешение на добавление платформ Android и iOS.

? Integrate your new app with Cordova to target native iOS and Android? (y/N) y

Он продолжит загрузку дополнительных зависимостей, которые позволят вам перезагрузить приложение в режиме реального времени в эмуляторах и устройствах. После загрузки собственного SDK вам будет предложено добавить Ionic Pro SDK, если вы хотите это сделать.

? Install the free Ionic Pro SDK and connect your app? y

Если вы выберете «да», консоль предложит вам ввести адрес электронной почты и пароль Ionic Pro, настроенные в начале этого поста.

? Email: 
? Password:

После этого у вас есть возможность либо связать это приложение с существующим, либо полностью создать новое.

? What would you like to do? (Use arrow keys)
  Link an existing app on Ionic Pro
> Create a new app on Ionic Pro

Затем консоль попросит предпочитаемый хост git сохранить ваш репозиторий. Я предпочитаю GitHub, так как с ним я лучше знаком.

? Which git host would you like to use? (Use arrow keys)
> GitHub
  Ionic Pro

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

? Does the repository exist on GitHub? y

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

? Which would you like to do? (Use arrow keys)
> Link to master branch only
  Link to specific branches

И, НАКОНЕЦ, мы закончили создание приложения!! 🤩🤩

Но если вы выбрали Ionic Pro в качестве хоста git, выберите вариант для создания пары ключей SSH.

? How would you like to connect to Ionic Pro? (Use arrow keys)
> Automatically setup new a SSH key pair for Ionic Pro
  Use an existing SSH key pair
  Skip for now
  Ignore this prompt forever

И здесь мы тоже закончили!

Шаг 3 — Давайте посмотрим на это

Есть две разные команды для просмотра приложения в браузере.

  1. ionic serve
  2. ionic serve -l

ionic serve отображает приложение в представлении веб-приложения.

ionic serve -l отображает приложение на многих платформах мобильных устройств. Вам нужно будет загрузить его из консоли, когда будет предложено, чтобы получить это представление.

И это итог на сегодня! Мы успешно создали и связали приложение Ionic 4 с хостом контроля версий. В следующем посте мы продолжим и начнем с C в CRUD.

Найдите коммит для этого шага здесь.

P. S.: Ссылка на следующий пост