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: