Abstract: The last article talked about how to use Alibaba Cloud IoT Studio to quickly make a web version of the mobile terminal, and package this web page into an APK file through a third-party platform, so that it can be installed on the mobile phone to achieve APP functions. However, there is a charge for apps made using third-party platforms. If you want to make apps for free, we can also use android studio to do it. This article will talk about how to make your own APP framework. At the end of the article, we will provide the source code debugged by the author. For everyone to download and learn.
Software: android studio.
Required knowledge: know the basic operation of android studio, know the principle of gradle, and configure some parameters of build.gradle.
The effect produced is as follows:
table of Contents
1. Basic realization principle
2. What browser component to choose?
3. Introduction to Tencent X5 kernel
4. Use Tencent X5 kernel to make an APP framework
1. Basic realization principle
Whether it is an APP framework made by a third-party platform for a fee or an APP framework made by android studio, the core is actually very simple---make a browser so that this browser can only display one URL.
2. What browser component to choose?
Why talk about this step separately?
It is because the built-in browser component of android studio is not easy to use.
We search for articles in this area, such as "Use android studio to make a website APP" and so on, generally recommend you to use the native webview control/component of android studio.
Through simple programming, the use of webview can be realized.
Enter the URL that needs to be opened in the loadUrl function (this URL is the address of the control page designed and produced by IoT studio mentioned in the previous articles, the domain name is bought, and the public network ip is also bought, but it is very cheap)
At this point, it should be possible to open the webpage smoothly, right? Can't use android studio native controls?
Yes, no!
The open page is a blank page.
We tried to modify the URL to the Sina URL. After the compilation was successful, we found that the opened webpage looks like the following picture. In other words, the URL opened by default is actually different from the URL we usually visit. It may be that Google’s controls are resolved to international websites by default, but we usually use default resolutions to domestic websites.
This webview control is not easy to use, and it also reflects that an error dialog box pops up when you click on the secondary link.
I've been so long-winded, but I just want to tell you that webview doesn't work well.
Are there any better controls? Of course, there are many. It is recommended to use Tencent's controls.
Tencent’s X5 kernel is Tencent’s browsing service. Many domestic apps use this kernel when they use the browsing service, which is convenient for programming and stable.
3. Introduction to Tencent X5 kernel
As shown in the figure below, it has many technical advantages. The main advantage we use is "stable". Submit to the client's mobile software, and there should never be a serious problem that the page cannot be opened or simply made an error. It affects the company's image too much.
The website of Tencent browsing service is as follows:
Programming is relatively simple
It also has a webview class
The downloaded X5 kernel file is decompressed as shown in the figure below. There are android studio source code and eclipse source code.
If you directly compile the X5 kernel download file routine, it is the X5WebDemo routine. Assuming that you have a foundation in Android programming, after solving various configuration problems, the routine is compiled successfully. (The steps are more complicated, not listed one by one, and the problems encountered by each person may also be different)
Compile into an APK file, and then install it to the phone, the interface is shown in the figure below
Run "browser demo", you can see the interface as shown below. You can enter the URL to access. What we want to achieve is to directly enter the Internet of Things control page after opening the APP, how to do it? See the next step.
4. Use Tencent X5 kernel to make an APP framework
In the previous section, I explained why Tencent's X5 kernel was used and what advantages the X5 kernel has. The following describes how to use the X5 kernel to make an APP framework, and let the APP open and display the specified webpage.
Reference article: https://blog.csdn.net/wuqingsen1/article/details/87180390
Wu Qingsen’s blog is very detailed. I suggest you take a look. The code I provide to you is also based on his source code. My work is mainly to modify gradle so that this code can be compiled normally in China.
In fact, this process is quite painful. I encountered many problems repeatedly, and the compilation was successful after solving them one by one. I will not go into details here. The source code attached at the end of this article is the source code of the warehouse address and gradle that have been modified. You can omit the intermediate process.
Here are the basic steps:
First copy the jar package downloaded from the official website to the libs directory of your App, and integrate the TBS SDK through Add As Library
Open android studio, expand the project directory, right-click on the jar package to select Add As Library, and it will become the library of the current project.
Secondly, you need to add the following permissions to your AndroidManifest.xml:
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />Replace the system packages and classes in the source code and XML with the packages and classes in the SDK, which is equivalent to not using Google's native webview, but using Tencent X5's webview. The specific correspondence is as follows:
| System kernel | SDK core |
|---|---|
| android.webkit.ConsoleMessage | com.tencent.smtt.export.external.interfaces.ConsoleMessage |
| android.webkit.CacheManager | com.tencent.smtt.sdk.CacheManager(deprecated) |
| android.webkit.CookieManager | com.tencent.smtt.sdk.CookieManager |
| android.webkit.CookieSyncManager | com.tencent.smtt.sdk.CookieSyncManager |
| android.webkit.CustomViewCallback | com.tencent.smtt.export.external.interfaces.IX5WebChromeClient.CustomViewCallback |
| android.webkit.DownloadListener | com.tencent.smtt.sdk.DownloadListener |
| android.webkit.GeolocationPermissions | com.tencent.smtt.export.external.interfaces.GeolocationPermissionsCallback |
| android.webkit.HttpAuthHandler | com.tencent.smtt.export.external.interfaces.HttpAuthHandler |
| android.webkit.JsPromptResult | com.tencent.smtt.export.external.interfaces.JsPromptResult |
| android.webkit.JsResult | com.tencent.smtt.export.external.interfaces.JsResult |
| android.webkit.SslErrorHandler | com.tencent.smtt.export.external.interfaces.SslErrorHandler |
| android.webkit.ValueCallback | com.tencent.smtt.sdk.ValueCallback |
| android.webkit.WebBackForwardList | com.tencent.smtt.sdk.WebBackForwardList |
| android.webkit.WebChromeClient | com.tencent.smtt.sdk.WebChromeClient |
| android.webkit.WebHistoryItem | com.tencent.smtt.sdk.WebHistoryItem |
| android.webkit.WebIconDatabase | com.tencent.smtt.sdk.WebIconDatabase |
| android.webkit.WebResourceResponse | com.tencent.smtt.export.external.interfaces.WebResourceResponse |
| android.webkit.WebSettings | com.tencent.smtt.sdk.WebSettings |
| android.webkit.WebSettings.LayoutAlgorithm | com.tencent.smtt.sdk.WebSettings.LayoutAlgorithm |
| android.webkit.WebStorage | com.tencent.smtt.sdk.WebStorage |
| android.webkit.WebView | com.tencent.smtt.sdk.WebView |
| android.webkit.WebViewClient | com.tencent.smtt.sdk.WebViewClient |
In the code, it is replaced accordingly
The key code is as follows: Open the URL and replace it with the web page address you made.
In addition, provide information about gradle, using Alibaba Cloud cloud effect.
5. Source code link
The author sends the configured source code to CSDN resources, and you can download it with confidence.
https://download.csdn.net/download/youngwah292/14012529
6. Summary
Compared with the "website packaging APP" generated by a third-party platform, the advantages of the "framework APP" generated by this article are as follows:
The first is free, saving development costs.
The second is that the source code is controllable to prevent malicious code from being packaged in your APP.
Then it can be updated later. After all, the source code is controllable. If you want to add some other functions to the interface, the source code will be much more convenient.
In addition, there is a better place, that is, after the APP is installed, there is basically no need for users to update the version of the APP in the app store or other channels.
Developers only need to use IoT Studio to modify the control functions and interface appearance on the Alibaba Cloud Internet of Things platform like a web page, and click Publish to update the appearance of the APP after reopening in real time.
Therefore, this kind of APP is not a real APP, but a kind of "framework" or "shell". The core is still the same technology as website development.
If you still feel this kind of "framework" and "webpage" development is strenuous, then we will provide a real Android APP development method to develop. In other words, use android studio to directly develop Android apps to control Alibaba Cloud IoT devices.
I'll talk about it in the next article.
The source code will also be provided.