Ionic Making Hybrid App Series 1: In the Mac Environment, IONIC is built

The company project is going to be an app recently. Due to the short development time and three versions of web, android and ios, after consideration, I decided to try the Hybrid App development method. Speaking of Hybrid App (hybrid application), what is a hybrid application?
Hybrid App is equivalent to a native application written using Web development technology. For example, HTML5, CSS, and JavaScript are all commonly used languages ​​that enter the Native Container. The native application contains a link to an HTML file. The WebView hides the browser. The use of Cordova, PhoneGap or other similar solutions not only makes it possible to integrate HTML and native code, it can even be done without any effort, but also makes it easier to deploy apps in the app store. I believe the following two pictures can illustrate the advantages of Hybrid App.

The Ionic Framework I use is the best among Hybrid App. First of all, he has a very beautiful ui, and it is based on the very popular Angularjs, so he has very good performance. And the mainstream Cordova API or Cordova plug-in is encapsulated as an AngularJS extension, which is very convenient to use. There is also an open source Icon Font library and an extremely active online community for discussion. By the way, it also has a powerful command line function (based on nodejs).

To use Ionic, you first need to install nodeJS https://nodejs.org/en/ This is the download address of nodeJs. Then use NPM (the full name of NPM is Node Package Manager, is a NodeJS package management and distribution tool, has become an unofficial standard for publishing Node modules (packages).) Install the latest Cordova and Ionic.

$ npm install -g cordova ionic

Then you can create an Ionic application by using the ready-made application template provided by Ionic or a blank project.

$ ionic start myApp tabs

Here I choose the tabs template. After running, you can see that the project has been automatically constructed.

Here you can see the project structure of the myApp of the automatic component. After entering the www directory, open our index.html page. An error was found, as shown in the figure below.

Here is the cross-domain problem caused by the routing of AngularJs. Here you can choose to deploy the project in a server environment or block the security settings of modern browsers.

Take the Google browser as an example: open the terminal and enter the following command: open -a “Google Chrome” –args –disable-web-security or modify the chrome shortcut in the windows environment “C :\Program Files\Google\Chrome\Application\chrome.exe” –args –disable-web-security Add –args –disable-web-security at the end. At this time, open index.html and you can see that the display is normal. How about this ui is picturesque.

At this point, the ionic project components are complete. The next step is to build and run the ionic application. Take the component android project as an example:

$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic emulate android

Many Friends may report an error when they arrive at the ionic build android step.

This is because the version of the Android SDK is too low. Need to update the Android SDK. If you don’t have an Android environment, you can install android studio.

http://www.androiddevtools.cn First download the jdk environment here. Windows installation is relatively simple, but in the mac environment, because the system I upgraded is Mac osx el capitan, the jdk cannot be recognized because it is not the original mac osx el capitan reported that Oracle’s Java requires mac os x 10.7.3 or higher
here you need to use the idk package with the command pkgutil –expand /Volumes/JDK\ 8\ Update\ 05/JDK\ 8\ Update \ 05.pkg /tmp/JDK8.unpkg unzip it. Then modify the file named: Distribution

function pm_install_check() {
 if(!(checkForMacOSX('10.7.3') == true)) {
 my.result.title ='OS X Lion required'; 
 my.result.message ='This Installer is supported only on OS X 10.7.3 or Later.'; 
 my.result.type = 'Fatal'; 
 return false; 
} 
 return true; 
}

method. Change pm_install_check() directly to return true; you can bypass the detection and install it.
Then download android studio. Still on the previous website http://www.androiddevtools.cn, update the Android SDK after the installation is complete. Then execute again, successfully executed! .

$ ionic build android

Finally connect to the mobile phone and start the debugging mode operation, the operation is successful!

$ ionic run android