Use IONIC3 to start your own app development path

As a result of this change of job, my technical route also has some changes. I originally preferred react, the front-end JS framework has been biased in favor of react. The first time I came to this company for an interview, I heard that they were going to develop an app that would be a cross-platform technical solution. So what I was proposing was react native. But to tell the truth, I am not very confident to do react native. Although some of their own Java foundation, there are more familiar with react, but react native look at the document only made a small wheel, compared to the real production is still relatively far.

But I believe in myself that these things are pulling my wheels, I don't have to study the bottom-up of these frameworks at this stage, and it's too late to deepen with experience. Since you don't have to look at the source code, it's used to watch the documents and the previous technology share to build their own wheels. Of course, the lack of experience is sometimes reflected in the shortcomings, after this. In this way, I with slowly confidence with the interviewer to talk about a number of cross-platform solutions, I am related to the knowledge of the more.

It was not long before I received their offer and gave the answer to the agreement. After I got there, the interviewer talked to me and said he was going to use the IONIC3+ANGULAR4 technology stack. To tell the truth, my understanding of ionic still stays in the Ionic1 era, Angularjs's shortcomings are clear to many people. Later also heard of angular+typescript development of the strong, knowledge did not go deep to understand. Since the technical director decided to use the technology stack, and very confident to tell me that the technology stack, the performance of my last interview is still possible, he still affirmed my skill level. He chose the technology stack I was unfamiliar with and chose me to say that he thought I could learn quickly and put into production, which was a positive for my ability to learn. Side very happy, general some worry, after all, this set of technology stack I am not familiar with a lot of unknown, I also some panic.

Since it has been decided, there is no way, to come a wave of challenges. So, began the development of their own cordova+ionic3+angular4+typescript route. Now, our app mood development is on the line, and the problem is almost no, the speed is very good, the user experience is also very good. I also have some research on IONIC3, here to share with you.

First of all, we should consider carefully before choosing this technology stack. Because Ionic3 and Ionic2 basically special like, but the difference is still there. ANGULAR4 and Angular2 not to mention, the most important is Cordova plugin This many previous versions can not be used in the new Ionic CLI. So there are many problems that need to be self-tossing. There is hardly any Chinese document of this technology stack in China, which requires michihide civil network to view relevant documents.

Well, here we can start our first IONIC3 app.

First step, last dry.

http://ionicframework.com/docs/

This is the official IONIC3 document.

Https://github.com/nurdun/ionic3-App

This is a demo I wrote when I was studying.

The first step requires a global installation IONIC3

NPM install-g Cordova Ionic

And then we can start our IONIC3 app.

Ionic Start myApp Tabs

That's how it started. Our first ionic3 App with a bottom tab

After the MyApp project is created, we can enter the MyApp directory

Ionic serve

Or

Ionic serve--lab

To start the project in the browser.

Add Platform (platform)

Before adding an Android or iOS-related platform to our project we need to install our computer for the development environment of the relevant platform we need.

Android SDK needs to be installed, downloaded and installed to the system environment variables to configure our Android SDK path into the system environment variables. How to add Android simulator, you can go to Baidu or Bing to search for a lot of relevant good answers.

iOS needs to download and install Xcode (of course the iOS platform needs to be developed in a Mac environment), how to download and install and how to add the iOS simulator to search, there are many answers.

Ionic Cordova Platform Add androidionic Cordova Platform add iOS

Remove platform-related code

Ionic Cordova Platform Remove Androidionic Cordova Platform Remove iOS

To start a project in the emulator

Ionic Cordova Platform Add Android   //android        Ionic Cordova Platform Add iOS     // iOS

Usually in development we need to refresh (livereload)

So when you start the project in the emulator, you need to add the--livereload command

Ionic Cordova emulate run Android----livereload

In addition, we need to see the console output (Console.log, etc.) in development.

So you need to add the-C command when starting the project in the Emulator (--console)

Combine the--livereload command to simplify the command to-LC

Ionic Cordova emulate run ANDROID-LC    //android//iOS

Real-Machine debugging

Ionic Cordova Run androidionic Cordova run iOS // Livereload  ----livereload//Livereload and console--LC

These are the processes that ionic3 create the first app and run on different platforms and see the effects.

UI builds that need to be called can be viewed on the IONIC3 website and selected for use by their favorite UI build.

Use IONIC3 to start your own app development path