Search Posts

Get started developing apps with Ionic



Ionic
What is it?

Ionic
And that of GoogleAngularIt is a JavaScript framework created specifically for the development of HTML5 applications based on the application framework.

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 applicationPWA(Progressive Web Apps)Mechanism2Although Ionic was born, Ionic supports this PWA as standard.



Ionic
How to get started

If you want to get started at hand, you can start with the following procedure.

1.Node.jsInstall

2.Ionic,CordovaInstall

3.IonicCreate a project template with CLI

 

  • There are some interactive options, but if you get lost, please select
    • question 1:? Starter template
      • tabs
    • Question 2:? Install the free Ionic Appflow SDK and connect your app? (Y/n)
      • n

4. Move to project directory

 

5. Start the app

 

Wait a little at this point and the app will start automatically and it willhttp://localhost:8100I think that the page is displayed by the URL. Screen shot below (Simulator start version).

localhost_8100_(iPhone 7) (1).png

By the way, the environment at the time of writing is as follows.

Knowledge necessary for development

  • HTML5
  • JavaScript
  • TypeScript
  • SCSS
  • Angular

Of these, the one with the highest learning cost is stillAngularI 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.

 

 

platforms/ios/
In the directoryhoge.xcodeprojI think this file is generated, soXCodeOpen 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

  1. Install and launch the app
  2. Connect the terminal and PC to the same wifi
  3. 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.

Leave a Reply