物联网控制APP入门专题(四)---使用android studio制作一个控制页面的APP框架

16 篇文章 2 订阅
94 篇文章 21 订阅

摘要:上篇文章讲了如何用阿里云IoT Studio快速制作一个网页版的手机端,以及通过第三方平台将这个网页打包成一个APK文件,使它可以安装到手机实现APP的功能。但是使用第三方平台做的APP是需要收费的,如果想免费做APP,我们也可以使用android studio来做,本篇文章就讲一下如何作出自己的APP框架,文章最后提供作者调试好的源代码供大家下载学习。

软件:android studio。

应具备的知识:会android studio基本操作,知道gradle原理,会配置build.gradle的一些参数。

制作出来的效果如下图:

目录

1.基本实现原理

2.选用什么浏览器组件?

3.腾讯X5内核简介

4.用腾讯X5内核做一个APP框架

5.源代码链接

6.小结


1.基本实现原理

无论是第三方平台收费制作的APP框架,还是自己使用android studio制作的APP框架,核心其实很简单---做一个浏览器,让这个浏览器只能显示一个网址。

2.选用什么浏览器组件?

为什么单独说一下这个步骤?

是因为android studio内置的浏览器组件不好用。

我们搜索这方面的文章,比如“使用android studio制作一个网站APP”之类的,一般会推荐你使用android studio原生的webview控件/组件。

通过简单的编程,即可实现webview的使用。

在loadUrl函数里面输入需要打开的网址(这个网址是前几篇文章中提到的IoT studio设计制作的控制页面的地址,域名是买的,公网ip也是买的,不过很便宜)

到这一步,总该能顺利实现网页打开了吧?使用android studio原生控件还不行?

对,不行!

打开网页是空白页。

我们试着将网址修改为新浪网址,编译成功之后,发现打开的网页是下图这样的。也就是说,默认打开的网址其实和我们平时访问的网址是不一样的。可能是谷歌的控件默认解析到了国际网站,而我们平时用的默认解析到国内网站。

这个webview控件不太好用,还反映在点击二级链接时,会弹出错误对话框。

啰嗦了这么多,其实就是想告诉各位,webview不好使。

有没有比较好用的控件呢?当然有,有很多。在此推荐使用腾讯的控件。

腾讯的X5内核是腾讯浏览服务,国内很多APP使用浏览服务时,很多都是用这个内核,编程方便,而且运行稳定。

3.腾讯X5内核简介

如下图所示,具有很多的技术优势。我们主要用到的优势是“稳定”。提交给客户手机端软件,总不能老是有页面打不开,或者干脆出错的严重问题吧。太影响公司形象了。

腾讯浏览服务网址如下:

https://x5.tencent.com/

编程比较简单

它也有一个webview类

下载的X5内核文件解压后的文件如下图所示,有android studio源代码,也有eclipse源代码。

如果直接编译X5内核下载文件的例程,就是X5WebDemo例程。假设大家具有安卓编程基础,解决了各种配置问题之后,将例程编译成功。(步骤比较复杂,不一一列举了,每个人遇到的问题也可能各不相同)

编译成APK文件,然后安装到手机之后的界面入下图所示

运行“浏览器demo”,可以看到下图界面。可以输入网址进行访问。我们要实现的是打开APP之后,直接进入到物联网控制的页面,怎么做呢?看下一步。

4.用腾讯X5内核做一个APP框架

前面介绍了为何选用腾讯X5内核,以及X5内核有什么优势。下面介绍如何用X5内核做一个APP框架,让APP打开就显示指定的网页。

参考文章:https://blog.csdn.net/wuqingsen1/article/details/87180390

吴庆森的博客介绍的非常详细,建议大家看看,我提供给大家的代码也是基于他的源代码基础上的,我的工作主要是修改了gradle,让这个代码可以在国内得以正常编译。

其实这个过程也挺痛苦的,反复遇到了很多问题,一个个解决之后才编译成功。在此不再详述。本文最后附的源代码为已经修改过仓库地址和gradle的源代码,大家可以省略中间过程。

下面介绍一下基本的步骤:

首先将官网下载的jar包复制到您的App的libs目录,并且通过Add As Library的方式集成TBS SDK

打开android studio,展开project目录,在jar包上右键即可选择Add As Library,它就成为当前工程的库了。

其次,需要在您的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" />

将源码和XML里的系统包和类替换为SDK里的包和类,相当于咱们不用谷歌原生的webview了,用腾讯X5的webview。具体对应如下:

系统内核SDK内核
android.webkit.ConsoleMessagecom.tencent.smtt.export.external.interfaces.ConsoleMessage
android.webkit.CacheManagercom.tencent.smtt.sdk.CacheManager(deprecated)
android.webkit.CookieManagercom.tencent.smtt.sdk.CookieManager
android.webkit.CookieSyncManagercom.tencent.smtt.sdk.CookieSyncManager
android.webkit.CustomViewCallbackcom.tencent.smtt.export.external.interfaces.IX5WebChromeClient.CustomViewCallback
android.webkit.DownloadListenercom.tencent.smtt.sdk.DownloadListener
android.webkit.GeolocationPermissionscom.tencent.smtt.export.external.interfaces.GeolocationPermissionsCallback
android.webkit.HttpAuthHandlercom.tencent.smtt.export.external.interfaces.HttpAuthHandler
android.webkit.JsPromptResultcom.tencent.smtt.export.external.interfaces.JsPromptResult
android.webkit.JsResultcom.tencent.smtt.export.external.interfaces.JsResult
android.webkit.SslErrorHandlercom.tencent.smtt.export.external.interfaces.SslErrorHandler
android.webkit.ValueCallbackcom.tencent.smtt.sdk.ValueCallback
android.webkit.WebBackForwardListcom.tencent.smtt.sdk.WebBackForwardList
android.webkit.WebChromeClientcom.tencent.smtt.sdk.WebChromeClient
android.webkit.WebHistoryItemcom.tencent.smtt.sdk.WebHistoryItem
android.webkit.WebIconDatabasecom.tencent.smtt.sdk.WebIconDatabase
android.webkit.WebResourceResponsecom.tencent.smtt.export.external.interfaces.WebResourceResponse
android.webkit.WebSettingscom.tencent.smtt.sdk.WebSettings
android.webkit.WebSettings.LayoutAlgorithmcom.tencent.smtt.sdk.WebSettings.LayoutAlgorithm
android.webkit.WebStoragecom.tencent.smtt.sdk.WebStorage
android.webkit.WebViewcom.tencent.smtt.sdk.WebView
android.webkit.WebViewClientcom.tencent.smtt.sdk.WebViewClient

代码中,也相应地做了替换

关键代码如下:打开网址替换成为您做成的网页地址。

此外,再提供一下gradle的信息,用的阿里云云效。

5.源代码链接

作者将已经配置好的源代码发送至CSDN资源,大家可放心下载。

https://download.csdn.net/download/youngwah292/14012529

6.小结

相比第三方平台生成的“网站打包APP”,采取本文方式生成的“框架式APP”的优点如下:

首先是免费,节约开发成本。

其次是源代码可控,防止恶意代码打包在自己的APP中。

然后是后续可更新,说到底还是源代码可控,自己想在界面上加入一些其他功能,有源代码就会方便很多。

 

此外还有一个比较好的地方,就是APP安装之后,基本上就不用再让用户到应用商店或者其他途径更新APP的版本了。

开发者只需要使用IoT Studio,在阿里云物联网平台像修改一个网页一样修改控制功能和界面外观,点击发布即可实时更新APP重新打开后的外观。

所以说,这种APP其实并非一种真正的APP,而是一种“框架”或者“外壳”。核心还是类似网站开发一样的技术。

 

如果还觉得这种“框架式”“网页式”开发费劲,那么我们再提供一种真正的安卓APP开发方式来开发。就是说用android studio直接开发安卓APP,来实现对阿里云物联网设备的控制。

下一篇文章再讲。

也会提供源代码。

 

 

  • 8
    点赞
  • 33
    收藏
  • 打赏
    打赏
  • 0
    评论
<h2>1.物联网开发难度越来越低</h2> <p>当小王被老板要求开发一个物联网项目时,他面临这许多种解决方案,从硬件到软件一应俱全。有提供了模块化硬件,有提供了高度集成软件开发环境,有支持python开发,有支持图形化开发,有提供硬件SDK,有提供从端到移动端成套解决方案。小王该如何选择?</p> <p>确,物联网开发难度越来越低,只要你想,就可以拖拖拽拽做出来一个简单设备。</p> <p>移动端APP呢?也是如此,你甚至可以登陆某平台网站在线生成一个安装包直接安装到手机上。</p> <p>但是这些便利化前提是失去对核心技术掌握,以及跳转界面、使用习惯等无法把控。</p> <h2>2.移动端APP技能是必备</h2> <p>当学习物联网技术小赵到某公司应聘时,公司技术主管对他知识结构基本满意。然后让他开发一个物联网项目,要软硬件结合,移动端APP是必备。小赵可以很快做出来一台基于ESP8266硬件设备,连接到某物联网平台,做出来一个手机端APP。但是主管对这个APP不太满意,问小赵自己会不会制作手机APP?小赵有些尴尬。</p> <p>为什么移动端APP技能是必备?因为物联网技术涉及到知识领域有很多个,能够自己做出APP才算是将这些领域知识完全掌握。就像是一个侠客武功,最厉害那个还没有练成,还不能算是真正高手。</p> <h2>3.定制APP价格很贵</h2> <p>市场上有不少物联网软件公司开展物联网应用APP定制业务,当然价格不菲。</p> <p>如果是公司采购,你将花费较大价格采购到一个未来并不可控APP。</p> <p>反过来说,如果是学生应聘,你学到移动端应用知识,将大大提升你竞争力,你技能将成为核心竞争力。</p> <h2>4.没有类似教程</h2> <p>原因就不多说了。即使有一些片段代码给了大家,大家也做不出来一个能用APP。</p> <h2>5.本课程要讲什么</h2> <p>基于阿里云物联网平台其他物联网平台类似,带您使用Android Studio编写一个安卓APP,实现连接阿里云物联网平台,控制一台智能灯。</p> <p>通过一个软硬件结合项目,结合源代码,一点一点为大家讲解怎么样连接阿里云物联网平台,每一个步骤是怎么回事,源代码怎么实现。</p> <p>为了照顾一些零基础朋友,课程中还会用一些通俗语言介绍这些知识,让大家掌握书上和网络上一些不太注意技术细节。</p> <p> </p> <p> </p>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

TMS320VC5257H

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值