What is it?
Build amazing apps in one codebase, for any platform, with the web.
As you know, Web / iOS / Android apps are all good at the same time, so-called hybrid development.1Also, in recent years, make the Web convenient as an application
PWA(Progressive Web Apps)Mechanism2Although Ionic was born, Ionic supports this PWA as standard.
How to get started
If you want to get started at hand, you can start with the following procedure.
$ npm i -g ionic cordova
$ ionic -v
IonicCreate a project template with CLI
$ ionic start hoge --type=ionic-angular
- There are some interactive options, but if you get lost, please select
- question 1:
? Starter template
- Question 2:
? Install the free Ionic Appflow SDK and connect your app? (Y/n)
- question 1:
4. Move to project directory
$ cd hoge
5. Start the app
$ ionic serve
Wait a little at this point and the app will start automatically and it will
http://localhost:8100I think that the page is displayed by the URL. Screen shot below (Simulator start version).
By the way, the environment at the time of writing is as follows.
$ ionic info (git)-[master]
cli packages: (/Users/k_kuwahara/.nodebrew/node/v8.9.1/lib/node_modules)
@ionic/cli-utils : 1.19.0
ionic (Ionic CLI) : 3.19.0
cordova (Cordova CLI) : 8.0.0
@ionic/app-scripts : 3.1.6
Cordova Platforms : none
Ionic Framework : ionic-angular 3.9.2
Node : v8.9.1
npm : 5.5.1
OS : macOS Sierra
Xcode : Xcode 9.2 Build version 9C40b
ANDROID_HOME : not set
backend : pro
Knowledge necessary for development
Of these, the one with the highest learning cost is still
AngularI think, but for simple application development,
AngularCan be developed without knowledge of3
Verification on a real machine
For example, to check on the actual iPhone, execute the following command to create a project for XCode.
$ ionic cordova build ios (or android)
In the directory
hoge.xcodeprojI think this file is generated, so
XCodeOpen it, connect your iPhone to your Mac, and build it on that iPhone.
In this way, the confirmation on the actual machine took a little time, but the other day the application that makes the confirmation on the actual machine much easier was released from the Ionic Team! that name as well”Ionic DevApp“is!
For details, see this articleAnnouncing Ionic DevApp“.
How to use
- Install and launch the app
- Connect the terminal and PC to the same wifi
- On PC
$ ionic serveRun
Then, it will be displayed on the previously installed Ionic DevApp, and tap it to run the app on the actual device. This is fantastic. of course,
watchSince it is started in the mode, if you edit the source code, the change is automatically reflected on the actual machine! I am impressed, so please try it by all means.