[TOC]
- QPython
- WebApp
- html5
- Web前端框架
在进行阅读本章节之前，我们假定你已经对Python开发和Web开发有所了解。
在移动互联网应用开发的大潮中，有那么一种技术一直都在以主角的身份不断吸引诸多开发者的关注，它就是WebApp技术，和原生开发相比，WebApp能够快速兼容Web开发模式，快速上手，部署简单，因此得到了很多开发者的青睐。
QPython的WebApp方案就是众多WebApp方案中的极为优秀的一种，QPython 的 WebApp 方案有以下优势：
-
它具有强大的本地逻辑处理解析器：Python 脚本解析器 QPython 有一个强大的本地逻辑处理解析器，能在你的手机端进行进（线）程运算、图形处理及渲染、进行多种协议的网络通讯等工作，这样不需要提交给云端就能充分地利用了手机处理能力。
-
海量的库支持，更快实现 Python 世界中积累了多年的大部分的类库都能够被快速引入到 QPython 体系中，因此您可以不必重复造轮子。
-
最小的开发环境要求 进行 QPython 开发，您只需要有一台安卓手机即可。当然您也可以在 PC 端完成开发，再将程序上传到 QPython 上；现在QPython已经推出了一个QWE(QPython Web Editor)工具，更能让你只需要通过一个浏览器就可以连接你的手机进行开发。
安装 QPython 之后，点启动按钮下方的“快速开始“即可看到一个快速开始帮助教程，里面有QPython所支持的3种运行模式：控制台模式，Kivy应用模式以及WebApp模式，在每个例子下油”拷贝到编辑器中运行“，即可将示范代码拷贝到QPython内置的编辑器中，点击编辑器底部的运行符号即可运行。
由于 QPython 就是将Python移植到了Android上，我们也可以选在在PC上开发调试，随后再上传到QPython的制定目录中。
通过 QPython，你可以在手机上启动自定义的的 Python 服务，包括 WEB 服务。有了Python强大的后端逻辑编程处理能力，再结合Web开发中大量的UI前端库，你可以很轻松地开发出一个WebApp来。
接下来，我们将用一个例子－“公交线路查询应用”来一步步介绍如何使用QPython来开发一个WebApp。
在生活当中我们经常需要坐公共汽车从某地到陌生的一个地方，查询路线、换乘是我们经常遇到的需求，在智能手机风靡之前，我们在出发前得在电脑中查询并记录好才出发，有了智能手机之后，我们完全可以借助一个App，在需要时即时查询，这将大大方便我们的出行。
在这个例子中，我们将会基于QPython的WebApp开发框架原理，使用Python来处理功能逻辑，使用Web来开发前端，最终实现一个“公交线路查询应用”。
我们要开发的“公交路线查询应用”主要能满足用户的以下查询需求：
-
路线查询：通过输入路线，能够查询指定城市的公交路线
-
换乘查询：通过输入起始站和目的站能查询换乘详情，包括经过哪些路线等
为实现上述需求，我们调研后发现了爱帮公交服务已对开发者开放了公交“线路查询”和“换乘查询”的API。开发者申请对应的API访问权限后，即可通过HTTP请求来获得对应的查询数据。我们最后只需要在Python中实现数据查询，并使用良好的WEB展示方法将结果展示出来即可达到项目目标。
由上述分析可知，整个应用的开发分为界面设计开发和逻辑开发：
我们将会使用Amaze UI前端框架来开发应用的前端。它有以下的特点
- 为移动而生：Amaze UI 以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。
- 组件丰富，模块化：Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件，更有多个包含不同主题的 Web 组件，可快速构建界面出色、体验优秀的跨屏页面，大幅提升开发效率。
- 本地化支持：相比国外框架，Amaze UI 关注中文排版，根据用户代理调整字体，实现更好的中文排版效果；兼顾国内主流浏览器及 App 内置浏览器兼容支持。 － 轻量级，高性能：Amaze UI 面向 HTML5 开发，使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让 Web 应用更快速载入。
，并将核心文件（框架的js、css文件，html文件等）放置在项目的assets文件夹中，目录结构如图1-5所示。
在我们的App中，主界面如附件所示，顶部是常见的导航，下来是公交线路查询的项目名称，在下来是我们要实现的主要功能模块，包括“线路查询”和“换乘查询”。
线路查询模块需要用户输入城市名和公交路线，查询按钮用于提交查询请求。
换乘查询需要用户输入城市名，起始地，目的地，查询按钮同样用语提交换乘查询请求。
确定了界面设计之后，我们开始设计代码文件结构，我们将会把css，js等文件放到assets目录下，在HTML页面中使用href等标记来链接即可。
完成了基础的设计之后，开始动手开发前端页面：
开发要点：
1、在应用的根目录创建assets目录，把Amazeui所需要的JS/css依赖文件放置于该目录。
2、在根目录新建一个index.html文件，使用link标签在head、body体中引入Amazeui必要的css和js文件。
3、参照AmazeUI的官方文档，根据需求去引用框架已经定义好的美观的网页控件元素。
4、定义JavaScript函数供逻辑代码调用，来处理提交查询操作，我们在index.html提交查询后，查询路线的结果展示将会使用detail.html的样式来展示，查询换成信息的查询结果将会使用transfer.html页面模版来展示。
最后实现的主界面index.html的代码如下。
开发要点：
1、在路线查询结果中，我们使用到AmazeUI的折叠菜单控件展现查询结果（具体代码请参照AmazeUI的官方文档和源码），这种展示的方式非常简洁。
2、我们需要使用JavaScript函数 appendDetail 来接收返回的结果，重新组装数据为固定的格式，最后再添加到html节点中。此外我们在实现并调用一个resultCount函数将返回结果条数显示到导航栏上。
最终查询路线结果展现页面detail.html代码如下：
开发要点：
1、同查询路线结果展示结果页面比较相似，transfer.html同样使用到AmazeUI的折叠菜单控件展现查询结果。
2、我们定义定义appendTransfer Javascript函数来将API返回的数据通过固定的格式添加到html节点中。定义resultCount函数，用以将返回结果条数显示到导航栏上。
完成了界面的开发之后，我们开始实现逻辑功能开发，在这里我们将会使用 QPython 的bottle Web开发框架开发框架。 掌握了QPython的WebApp之后，我们来熟悉下QPython的WebApp模版：
掌握了QPython的WebApp之后，我们爱帮API交互获得查询数据，同时将结果展示出来。
Python有大量的和HTTP交互的库，在这里我们使用urllib2库来发起API请求来获取结果。相关代码如下：
获得了结果之后，我们直接使用了bottle的模版引擎来将爱帮API的请求结果返回到模版页面中。
这是将路线查询结果返回到页面模版中
这是将换乘查询结果返回到页面模版中
QPython 内置了强大的SL4A库 － 一个可以让你轻松访问手机特性的 API库，你可以获取地理位置，蓝牙，网络状态等数据。最后我们使用SL4A接口来获取地理位置坐标，再通过百度的查询接口，即可知道我们现在在哪个城市。
完成了查询的请求和数据的获取及传递之后，我们再将前后端数据对接起来，最后由前端的javascript代码来判断用户的输入，以及进行结果的匹配和格式化，即可完成。
使用QPython之后，基本能用Web的开放模式来开发一个体验良好的WebApp。我们可以充分使用成熟的web前端框架来方便地构建风格友好的界面；基于Python的强大的库，我们能在手机上就轻松地处理网络请求等事务。由此可见，使用QPython开发能大大地加速WebApp的开发。除了网络、本地IO等处理能力外，QPython还具备SL4A库来操作安卓的摄像头、地理位置、蓝牙等特性。
项目源码： https://github.com/qpython-apps/BusHelper/
QPython网站： http://qpython.com/
QPython快速开始： http://qpython.org/quick-start/
QPython之如何用QPython极速开发PyConChinaApp： http://qpython.org/pyconchina2015/
QPython的优酷频道： http://i.youku.com/qpython
爱帮公交线路查询API文档： http://www.aibang.com/api/usage#bus_lines
AmazeUI前端框架官方网站： http://amazeui.org/
获取地理位置需要开启地理位置的权限，未打开该权限，获得的数据就会为NULL。有时及时打开该权限但如果还未获取到地理坐标时也会为NULL。
解决方法： 调用时如果为NULL则提示用户需要打开地理位置权限再返回。