Sencha Learn Note 2: Pack your first Sencha Android app apk installation package

Through the introduction of the official article of the previous translation we have a preliminary impression of Sencha, and we have also generated the first sample application code framework through the wizard, so the next step may be that many people feel that you should look at the details of how an app is built, based on what the wizard suggests. But I think we can change the path of learning.

Heaven Zhuhai The rudder is a relatively quick buck, so with the first auto-generated code example, he is more eager to know how to package the sample into an Android APK installation package to install on the target Android machine. Liu Bei did well, the long should look at Shu, a man or a little pursuit of good.

Let's try a helloworld example to see how the Sencha command can be used to package the Sencha app into an APK installation package and install it on the target Android device.

First step: Create the sample code

Based on the previous translation of the official article "Sencha Study notes 1:getting Started with Sencha touch-the official Sencha touch Getting Started Guide" approach, we first locate the Sencha SDK is located under the directory, Then execute the corresponding Sencha Generate app command to generate the corresponding application framework file in the SDK's parent directory:

To create the command output for the sample code:

Second step: Modify the MVC mode view file App/view/main.js to change the display content

This step and the third step can actually skip, if you are absolutely sure that the newly created sample application runs without any problems, but after all, heaven Zhuhai rudder is only a beginner, I believe that crossing is interested in this article should also be as I am generally a beginner, So it's a good idea to do a few more steps by the way and have some initial impressions of the Sencha automatically generated code.

The example code generated by the Sencha command is the view in the MVC pattern, which is responsible for how the taxi renders the UI to the user, so we can modify some of the UI's display by modifying some of these options. Sencha default generated app is two tab tag app, below we will apply one of the label's title to "My first Sench app", change its main content to "what a app!" and change the title of the other label to "Woohoo":

After you modify it, save it, and then, in the next step, check the success of the change through the browser.

Step three: Start the Web server with the Sencha command

After modifying the view display in MVC, we need to debug in the browser to see if the change is successful, we can access the sample app with most popular web servers, but for simplicity's sake, and our primary purpose is to learn Sencha touch, So here we use the Sencha command provided by the Web server to do this work. Shows the process of opening Sencha's own Web server with a command, note that before executing the command, I am going to CD to the application directory, so that we do not have to make additional paths in the browser to access the app:

Note the last line of printed information contains the port information to access the sample app: 1841, which we need to use next.

Fourth step: Access the app through the browser

Ultimately, by using the browser to navigate to our app, I believe this Web server plus browser access is primarily designed to debug the convenience of the Sencha Touch app, after all, Sencha touch is built on apps based on a browser or hybrid application shell, So debugging with a browser should be the most convenient.

Shows the contents of the sample displayed by the local IP and the port mentioned in the previous step of the browser to access our modified view, where we can see that what we have modified is working:

Fifth step: Determine the SDK version

This step is primarily to determine the version of the SDK that is downloaded from our system, as the next time you invoke the Sencha command to generate the APK package, you need to specify the corresponding API level that the Sencha sample application should compile in addition to the location where the Android SDK should be developed.

According to my experience, Heaven Zhuhai Branch rudder that there should be two ways to judge the current API level supported by the SDK, the first is to check the SDK directory under the platforms directory below what API level folder:

The second is that we can use "Android SDK Manager" to determine which level of Android API we have installed:

With the above two methods we can know that our system now supports the level of the API levels of the Android system, of course, if you do not meet your needs, you can download more to meet the requirements of the Android SDK manager. Here we will choose one, for example we choose API level 19 here.

Sixth step: Modify the Packager.json file in the top-level directory of the app

This file is a file that indicates how Sencha should package the application, and there are several places that need to be modified.

First of all, we need to modify the example application of the namespace, in fact, in heaven Zhuhai Rudder, the namespace on Android is equivalent to the application of the package name, down we will verify. First look at the changes shown in the namespaces ApplicationID option:

The value of this option is modified before "HelloWorld", in order to follow the Android package naming rules, we need to modify it to the following format "Com.sample.HelloWorld". The other formats shown in the picture do not move first, keep the original value of what values.

And then down we need to modify the signature and other related information as shown in:

First platform should be modified to Android, because our example now is to demonstrate how to pack an Android APK installation package. The next step is to set the information about the certificate signature, which can be obtained from the previous steps. The last point is the path of the Ding ' an SDK and the API level obtained in the previous step. Don't forget to save after you modify it.

Seventh Step: Call the Sencha command to build the APK installation package

Now is all things have only the East wind, how to package the configuration file in the previous step has been completed, we only need to execute the "Sencha app build Native" command, if not unexpected, can generate the corresponding APK installation package. If there is a problem in this process, it is recommended that you carefully review the error output prompt, which is often the problem that the configuration file in the previous step is not configured. Of course, Sencha, in addition to providing the "Sencha app build Native" command to package the APK installation package, but also provides some other packaging methods, but here we do not care, in the process of learning in the future I think it is necessary to try and share it to everyone.

Take a look at some of the output information for the Sencha Pack apk command:

The packaged APK installer will be saved in the appropriate subdirectory of the build folder under the top-level directory of the sample app, as shown in the following list:

Eighth Step: Install the installation package on the target machine and run

With the APK installer, we can install the installation package to the target Android device like any other normal installation package by using the "adb install" command. The icon for the app after installation is as follows:

When you tap the app icon and open the sample app, you can see that the content is consistent with the previous Sencha sample app accessed through the browser:

Nineth Step: Verify that the app namespace and the sample app package name are the same

In the sixth step above, we set the example application's namespace to "Com.sample.HelloWorld" in the Packager.json package configuration file, when I asserted that the namespace should be the package name for the Android app, where we can "PM List Packages "This is specifically a command to list all the installation packages to verify:

From the fact that we can verify that all of the previous package names and namespaces are the same thing.

Author	Autonomous blog		csdn
Heaven Zhuhai Sub-rudder	http://techgogogo.com	Service Number : Techgogogo Scan Code :	Http://blog.csdn.net/zhubaitian

Sencha Learn Note 2: Pack your first Sencha Android app apk installation package