Всем привет! Новый пост каждую неделю или две на актуальную техническую тему — Ionic! К концу этой серии цель состоит в том, чтобы создать простое приложение списка дел CRUD (создание, чтение, обновление и удаление), которое также подключено к онлайн-базе данных, такой как Firebase.
В этом посте вы узнаете, как;
- Настройте Ionic Project.
- Запустите его в своем браузере.
Гибридное мобильное приложение — что это?
Проще говоря, это мобильные приложения, созданные на более простых для изучения языках; HTML, CSS и JavaScript. Прелесть разработки гибридных мобильных приложений заключается в том, что их можно скомпилировать для работы с любой платформой. Если вы ленивы, как ваш покорный слуга, вам будет проще использовать один код для создания множества приложений, а не разрабатывать отдельные приложения для каждой платформы.
Ionic — одна из популярных платформ для создания собственного гибридного мобильного приложения. Его можно встроить в приложение для Android, iOS, Windows phone, Progressive Web или Desktop. И тестировать приложение намного проще, поскольку его можно перезагружать прямо в ваш браузер.
Шаг 1 — Настройка всего этого
Первоначально зарегистрируйте учетную запись Ionic Pro здесь. Это упростит создание и доставку приложения. Возможно, вам придется войти в систему в процессе создания проекта.
Чтобы начать кодировать свое первое приложение Ionic, вам нужно несколько вещей;
- Node.js — это довольно просто. Просто зайдите на веб-сайт Node.js и загрузите идеальный для вас установщик. Нам нужен менеджер пакетов Node с метким названием npm, чтобы установить все зависимости для многих модулей, которые вы хотели бы использовать в своем приложении. Если вы разрабатываете на Mac и у вас установлен Homebrew, просто введите команду
brew install npm
в консоли. - TypeScript — TypeScript, надмножество JavaScript, используется вместо JS для большей части кода. После установки Node.js введите в консоли
npm install -g typescript
. - Cordova — Cordova — это фреймворк, который встраивает код HTML, CSS и JS/TS в приложение. Для установки введите
npm install -g cordova
- И, наконец, 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 — Давайте посмотрим на это
Есть две разные команды для просмотра приложения в браузере.
ionic serve
ionic serve -l
ionic serve
отображает приложение в представлении веб-приложения.
ionic serve -l
отображает приложение на многих платформах мобильных устройств. Вам нужно будет загрузить его из консоли, когда будет предложено, чтобы получить это представление.
И это итог на сегодня! Мы успешно создали и связали приложение Ionic 4 с хостом контроля версий. В следующем посте мы продолжим и начнем с C в CRUD.
Найдите коммит для этого шага здесь.
P. S.: Ссылка на следующий пост