Write Apps with Web technology

I heard that people who can write the web can also write apps, and try to get on the road to experience.

Http://www.ionic.wang/start-index.html

0X00 Framework Environment Introduction

What is Ionic?

ionicframework.com/docs/
Ionic (Ionicframework) An open-source HTML5 mobile App development Framework

Is the Angularjs mobile solution, ionic the popular cross-platform mobile app development Framework Phoengap as a blueprint,

Enables developers to quickly build Android iOS mobile apps with command-line tools

What is PhoneGap?
phonegap.com/
PhoneGap is a fast-developing platform for creating mobile cross-platform mobile applications using HTML,CSS and JavaScript.

It enables developers to take advantage of Iphone,android,palm,symbian,wp7,wp8,bada and BlackBerry

Core features of smartphones – including geolocation, accelerators, contacts, sounds and vibrations

What is Cordova?

http://cordova.axuer.com/

Cordova Packaging your Html/javascript app into the native app container, you can write it all over the platform (Android, iOS, WP, BB, Firefoxos, Web, etc.)

These features are available through the unified JavaScript API, allowing you to easily write a set of code that runs on almost every phone and tablet on the market,

And can be posted to the appropriate app store. only Android phones on hand, the following for Android to get

Popular Speaking:Ionic is a ANGULARJS-based HTML5 mobile app development Framework, and CORDOVA/PHONEGAP can package the code into an APK file

This article uses the Cordova Packaging tool for packaging, starting with the environment deployment.

0x01 install ionic and Cordova

nodejs.org/

The command line for Cordova and Ionic runs on node. js and can be installed via NPM , so we need to install the NODEJS environment first.

Four at installation all selected

After installation, go to cmd to test if the installation is successful.

C:\users\yjc>node-vv8. 11.4C:\users\yjc>npm-v5.6.0

Then use NPM to install ionic and Cordova

NPM install-g Cordova Ionic

0x02 Creating the first project

$ Ionic Start myApp tabs

The following three are official templates

Start MyApp blank         #下方第一张图 start  myapp tabs          #下方第二张图, this test creates the start MyApp sidemenu      #下方第三张图

Next, run the project

CD myApp$ ionic serve

Successful operation opens the 8100 port service and automatically pops up the browser to access the service

Then package the code into a andriod platform

$ Ionic Build$ Ionic Cordova Platform add Androidrun Android

When running to Ionic Cordova run Android command, quote an error

(node:129252) UnhandledPromiseRejectionWarning:CordovaError:Failed to find ' android_home ' environment variable. Try setting it manually. Failed to find ' Android ' command in your ' PATH '. Try update your ' path ' to include the path to valid SDK directory.

By literally missing an environment variable android_home, follow the data to find out just installing Nodejs and ionic is not enough, but also need to install ANDROID Studio and Java environment.

After all, regardless of the final app build, you need to rely on the Andriod SDK and the Android build tool

0x03 Installing the Java Environment

The Java environment is installed JDK8

Http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

It's all chosen here.

Then add the environment variableJAVA_HOME, value就是jdk安装的位置

Once setup is complete, test it at the command line and enter Java popup usage.

0x05 Installing the Android Studio IDE

This goods is Google out, need to FQ, but there are a lot of developers in the domestic mirror, in fact, about FQ no sensitive

As long as you do not make trouble for the country, study hard, the country will still support, GitHub is an example. Below is the Andriod Studio website

Http://android.com

If there is no way to FQ, recommend the following domestic mirror station, basic inside tools are complete.

http://www.androiddevtools.cn/

Here I downloaded the first 64-bit, one thing to explain, the download of the Android Studio IDE contains the following

1. SDK Tools (with sdkmanger adb, etc.)

2. SDK Platform-tools (different Android version of management tools)

3. Build-tools (Compilation tool)

4. SDK (the default is 8.+ version, but Cordova with 8.0, after the error we need to change the version)

5. SDK System images (emulator image, virtual machine AVD creation need to be used, simulate app running on PC)

Wait a minute

So the installation of an IDE is enough, others do not have to install!!! after the download is complete, the decompression is free of installation, basic files such as

The main program is under the bin directory and there is no SDK at this time, Gradle is a Apache Ant and Apache Maven-based

Concept of project automation to build open source tools. It uses a groovy-based domain-specific language (DSL) to declare project settings,

The various cumbersome configurations based on XML are discarded.

Go to the Bin directory run Studio64.exe first popup whether to import the settings, default does not import, click Next the IDE will start to download the SDK

This will pop up the proxy settings, click Cancel do not set the agent is also able to continue to download and install, because I believe that study hard, the country will also help you accelerate

After this click Custom custom, the SDK default installation path changes, do not change the default use of the Appdata directory is a bit annoying

Choose the theme, Night owl Hey

More critical, here tick the AVD Android virtual machine, of course, forget to check the back can also be installed in the IDE, the following path is to install the SDK directory

This directory cannot be in the same directory as the Android Studio IDE. A new empty directory is OK.

The following sets the virtual machine to allocate memory space size RAM, by default

Click to confirm, good character, the country will not break your network, and then you can like the operation of the same person to drink a cup of coffee, smoking a cigarette what slowly wait

After drinking coffee back to see, if the following interface appears, then congratulations on your character is good, because the SDK is all dl.google.com download.

Then, in the main interface point configure, select Sdkmanager to see if the SDK is OK

The latest SDK for Sdk,android 8.+ Level28 is installed here by default.

Or we can see it in our installed catalogue.

Here is a brief explanation, the SDK is stored in platforms, which contains all of the Android SDK versions you downloaded

Build-tools is a compilation tool, and Emulator is a tool for creating virtual machines. And the virtual machine's image is stored in

System-images, skins is the theme style, Platform-tools toolset I only know ADB and sqlite3,

SDK source package stored in sources, and finally tools/bin under the Avdmanager.bat tool to create the virtual machine AVD

It's going to be used later

To do so much here, in fact, for an environment variable android_home, now with the SDK can set the variable

After that, exit the terminal and re-open command prompt execute Ionic Cordova run Android

0x04 Go one step further

Newcomers, encounter a variety of problems is very normal, do not be afraid of error, the way to solve the mistake is also very simple, read the error message, in the query

Related information Try it, configure it well android_home, rerun Ionic Cordova run Android prompt for new error

(node:110872) UnhandledPromiseRejectionWarning:CordovaError:Could not find a installed version of Gradle either in Android studio,or On your system to install the Gradle wrapper. Please include Gradlein your path, or install Android Studio

Translate the literal meaning, probably can not find grandle this thing, if there is a need to add it to the environment variable path inside. The Android Studio IDE directory structure is described above

When it comes to gradle, yes that's the thing, we can specify the location of the Gradle in the environment variable, because the Android_home variable only says the SDK location, the location of the IDE

The information has not been reported to the system environment. My gradle is here and adds him to the user environment variable.

Then turn off the terminal and run it again. The terminal does not dynamically update environment variables without rebooting. The following git test

can then rerun Ionic Cordova run Android

The results indicate that gradle to him, they do not have to run to download the low-point version, why not start to download ...

Then patiently wait for him to complete the download of the dependent package required for the compilation ...

After the download is complete, there is a new error.

File C:\Users\yjc\.android\repositories.cfg could not being loaded. Checking the license for package Android SDK Platform-in F:\android\sdk\licenseswarning:license for-package Android SD K Platform not accepted. Failure:build failed with a exception.* what went wrong:a problem occurred configuring project ': Cordovalib '.> You are not accepted the license agreements of the following SDK components: [Android SDK Platform].  before building your project, you need to accept the license agreements and complete the installation of the missing C  Omponents using the Android Studio SDK Manager. Alternatively, to learn-transfer the license agreements from one workstation to another, go to http://d.android.com /r/studio-ui/export-licenses.html* Try:run with--STACKTRACE option to get the stack trace. Run with--info or--debug option to get more log output.* get more help at help.gradle.org

The key is the blue word part, think of long time, the back only think of the IDE by default installed SDK version is level 28,

And here Cordova need to use the SDK level 26, we have not installed 26 version, so the error,

Enter Sdkmanager to install the SDK level 26 version

The following Web site (need FQ) can view the Android version and the API level of the corresponding

Developer.android.com/studio/releases/platforms

Once you're done, rerun the command Ionic Cordova run Android (as if you've knocked 4 times), don't feel tired

In fact, the wrong is like a case, through clues and investigation, step by step to understand the case, but also good, put a little background music more atmosphere

The remark just finished, and reported a mistake, but at least the compilation succeeded, that is, the virtual machine does not run up

BUILD successful in 38s46 actionable tasks:46 executedbuilt The following apk (s):        C:\USERS\YJC\DESKTOP\MYAPP\PL atforms\android\app\build\outputs\apk\debug\app-debug.apkAndroid_home=f:\android\sdkjava_home=c:\javano Target specified and no devices found, deploying to Emulator (node:112612) UnhandledPromiseRejectionWarning:TypeError:Ca Nnot Read property ' Semver ' of NULL

Compile the file in the blue Word path, if you do not want to run with the computer's virtual machine, you can ignore this error,

The computer is connected to the phone, enter the APK directory to run the following command, you can install the first demo app on the phone

ADB install app-

It's the phone test results.

But it's not always possible to install tests on your phone when you change code tests frequently.

Like web development, change the code, switch browser F5 immediately display the effect.

So the virtual machine emulator problem still needs to be solved

Refer to this URL, probably because of the emulator version of the problem,

Stackoverflow.com/questions/47018914/cordova-android-emulation-error-cannot-read-property-semver-of-null

Here, go to SDK Manager to remove the latest SDK 8.+, click Apply

Rerun the command once the deletion is successful. This time, although there is no error, but the card in this place does not move, suggesting that please define Android_studio_root

: App:assembledebugup-to-DATE: App:cdvbuilddebugup-to-DATEBUILD successful in 2sActionable tasks:1 executed, up-to-DateBuilt the following apk(s): C:\users\yjc\desktop\myapp\platforms\android\app\build\outputs\apk\Debug\app-Debug.Apkandroid_home=f:\android\Sdkjava_home=c:\Javano target specified and no devices found,deploying to Emulatorno emulator specified,defaulting to Nexus_5x_api_28_x86waiting forEmulator toStart...Panic:cannotFindAVD systemPath. Please define Android_sdk_root

The following is a reference to the StackOverflow resolution step operation, deleting the old avd, and creating a new AVD

Reference links

Stackoverflow.com/questions/41274830/panic-cannot-find-avd-system-path-please-define-android-sdk-ro

Select and download the system image here

Run the simulator and test it. Don't turn it off, put it on the side.

Then re-run the command Ionic Cordova run Android (hit Nth Times, this official website left so many pits AH),

Finally see the success of the interface, and the simulator also timely pop-up Ionic demo app Program

The road of the Web is also considered on the road, trample countless, kujinganlai, behind only need in the position, write HTML code can produce the app, is not very flattered AH

Please indicate the source: