在实践中学习：如何开发跨平台的Web应用程序

摘要：随着移动设备的普及，应用程序的需求变得必不可少。开发一个应用程序有多困难，尤其是跨平台的应用程序？该论文分享了一个涉及跨平台在移动设备上运行的学生服务Web应用程序的项目经验。本文首先介绍了项目的背景，目标用户以及解决方案。然后，重点介绍开发流程，并提供所使用的书面代码和技术说明。目的是让读者了解如何开发适合在移动设备上使用的Web应用程序。本文总结了教学的意义，并提出了进一步发展的思路。

关键词：Web应用程序，移动体验友好的Web应用程序，开源软件，Web数据库，跨平台的应用程序，HTML5，PHP，CSS，JavaScript。

介绍

         随着用户越来越多地转向使用移动设备和平板电脑来代替台式电脑，人们也越来越需要能够在移动设备上运行良好的应用程序。Pew研究中心最近的研究指出：18-34岁是迄今为止在技术上拥有最大优势的用户群体，拥有手机的人数占比高达95%。教育工作者不仅需要使用移动设备来以新的方式向这些年轻一代传达知识，而且需要提供对应的应用程序来满足这些精通技术的学生需求。对于许多参与教学或开发移动应用程序的人来说，面临着两个挑战：一个是提供一个优秀的应用程序，尤其是教育相关的应用程序。另一个挑战是没有建立统一的移动设备平台。

        每个移动设备平台都会提供自己的开发工具，而且每个平台的开发工具都是不一样的。例如，苹果的iOS的开发工具不能在谷歌的安卓系统上使用，反之亦然。因此，要想在不同的平台上运行必须分别为每个平台编写应用程序。对于那些没有时间和能力的教育工作者来说，掌握多种工具几乎是不切实际的，况且掌握一种开发工具已经十分困难了，更别提学习多种开发工具了。

        在本文中，我们想分享我们开发跨平台应用程序的经验。这是一个简单的应用程序，但开发这个应用程序的方法是对教学是非常有用的。此外，这里介绍的知识也可以用于开发更复杂的应用程序。因此，本文的主要目的是描述我们的应用程序的开发过程，说明我们的代码，分享我们在这个项目中的经验以及我们的工作愿景。我们希望我们分享的内容有助于降低移动应用程序开发过程中的阻碍，并减少那些对移动应用程序开发教学感兴趣的人的学习成本。本文的重点是我们的项目-即设计和开发学生服务应用程序。它的主要功能是显示我们校园的学生服务信息。具体来说，我们的论文结构如下：首先描述项目的背景，目标用户和解决方案。然后，逐步描述发展过程，并展示了所使用的书面代码和技术。接下来是介绍学生服务Web应用程序的工作原理。最后，总结实践意义和未来的发展工作。

项目背景

确定软件的需求

        起初，我们的兴趣是研究和学习使用不同的方式来开发一个移动应用程序供学生使用。我们希望应用程序对学生有用。我们为潜在的应用程序提出了一些想法，但最终我们决定把重点放在学生服务上。这个应用程序的主要目的是为学生提供有关我们校园服务的信息。我们猜想，这样的应用程序不仅对现在的学生有用，而且对新生和校园的其他访问者也有用。

        基于这个需求，我们着手收集所有与学生有关的服务信息。 我们确定了大多数校园里20多种典型的服务。包括财务，学术以及技术支持。有了这些信息，我们打算设计和开发一个应用程序，允许学生搜索特定的服务，并从他们的移动设备上检索有关该特定服务的基本信息。更重要的是，我们希望应用能够在iPhone，Android和Window等设备上运行，实现跨平台的需求。

了解移动应用开发的三大选择

        基于与行业专业人士的讨论，移动应用程序的开发基本上有三个主要方式。第一种是使用平台特定的开发工具来开发特定平台的应用程序。第二种是使用HTML / JQuery和CSS创建Web应用程序。最后是使用诸如Sencha和RhoMobile等RAD工具来创建平台中立的基于Web的应用程序。

        对于第一种，使用特定的平台开发工具，结果就是开发出原生应用程序。原生应用程序通常是使用特定的平台开发工具和由硬件/设备提供商（如Google和Apple）提供的应用程序接口（API）编写的应用程序，专门针对特定的平台（如Google Android，Apple iOS，Microsoft Windows（Lutes ，2012）。本地应用程序通常使用编译的编程语言（如Java，Objective C, C#）进行编码。原生应用程序通常是功能更为健全的，因为他们可以访问设备提供的特定功能（Lutes，2012）。所有原生应用程序都是通过应用程序商店（如Apple App Store，Google Play商店）获取的。本地应用程序直接安装到设备上，在本地上可以直接使用，因此可以在没有连接到网络的情况下也可以运行。

        对于使用HTML / JQuery和CSS的第二个种方式，使用它作为开发工具的结果是开发出移动Web应用程序。移动Web应用程序的功能基本上与使用针对移动设备优化的网站功能相同它不依赖于设备，因为它通常使用基于标准的Web浏览器技术编码，如HTML，CSS，JavaScript，PHP，而不是编译的程序语言。尽管它像本地应用程序一样工作，但不需要下载或安装。移动设备上的网络浏览器通过指定的URL调用它。因此必须需要互联网连接来运行它。

        对于第三种方式，使用平台中立的基于web的应用程序创建的混合应用程序。这种应用程序结合了原生应用程序和移动Web应用程序的特点。像移动网络应用程序一样，它是使用HTML，CSS，JavaScript或PHP编写的，但是它被编译为原生应用程序，通过供应商软件商店进行分发。从用户的角度来看，原生应用程序和混合应用程序之间几乎没有区别。只要设备具有网络浏览器，混合应用程序就可以像本地应用程序一样运行。从开发人员的角度来看，混合应用程序是真正跨平台的：相同的HTML代码可以在不同的平台上运行。这种方式是可能的，因为几乎所有的操作系统都支持运行HTML5，CSS和JavaScript代码的移动浏览器，并且可以使用本地设备存储。而且相关的开源库和工具提供了一个公用的框架，主要的用户界面是一个单一的Web浏览器小部件。这个小部件处理了HTML5，CSS和JavaScript代码，并将它们打包成一个本地应用程序（Lutes，2012）。

在原生应用与Web应用程序/混合应用程序做出选择

        多年来，关于原生应用程序与Web应用程序/混合应用程序有很多讨论。例如，Hinchly（2014）在他的博客中描述了“金融时报”如何在Web上与原生应用的辩论。博客指出了开发应用程序的两种方式的优点和缺点。随着变化越来越快，很难知道哪一个会占上风。在不久的将来，两者之间的界线可能变得更加模糊，因为两者之间不再有区别。由于本文的重点不在于探索哪个开发方案是更好，我们对适合于我们项目的方法更有兴趣分享。因此，在本文中，我们将更详细地讨论在现有的资源和知识的基础上如何使用所选方法来设计，开发应用程序。

开发流程

第1步：概念设计，基本需求和开发工具选择

        我们做的第一件事情是抽象化我们的应用程序。我们确定了基本的要求，然后选择了开发所需的工具。

第2步：为Web应用程序设计数据库

        在我们确定并收集了我们校园内学生服务数据后，我们将信息保存在Excel电子表格中。接下来，我们开始将信息从Excel电子表格传输到在线MySQL数据库中。

第3步：使用PHP进行编码，并从jQuery和jQueryMobile集成JavaScript库

        在应用的编码过程中，我们使用PHP创建了几个重要的文件。下表描述了这些PHP文件的主要功能。对于那些有兴趣采用和使用这个网络应用程序来进行教学或者为了进一步开发这个应用程序来适应他/她自己的情况，这些解释可能是有用的。

文件名	描述
index.php	该文件在用户启动时加载。它根据检测到的设备来显示相对应的视图。
home.php	程序的主页。包括数据库和一些界面布局。
Info.php	根据用户选择的服务加载与该服务相对应的一些特定的信息
Map.php	使用谷歌Map API开发的地图界面
Phone.php	专门移动设备（手机）开发的界面

 

第4步：探索通过不同的方式来帮助学生注意到到并访问学生服务Web应用程序

要想使用原生应用程序，用户只需前往各自的应用程序商店即可下载。例如，如果用户想查找iPhone应用程序，他/她将点击AppStore，然后通过关键字搜索应用程序。这是一个原生应用程序的优势。然而，要找到一个Web应用程序，用户必须明白自己正在寻找什么。一个网络应用程序基本上是一个互动网站，所以可以通过以下渠道找到，包括搜索引擎，其他网站上的链接，社交媒体上的分享，口碑和/或广告。因此，对于我们来说，这意味着我们需要让学生注意到我们的Web应用程序，以便他们可以使用以上任何一个渠道访问和下载它。此外，我们想出了一个额外的方式，来使访问Web应用程序变得轻松方便，那就是使用二维码来访问我们的Web应用程序。

了解学生服务Web应用程序的工作原理

以下是学生在访问应用程序时的情况的描述。用户输入应用程序的URL后，将加载“index.php”文件。 随之后台会发生一系列事件。 首先，“index.php”中的代码获取数据库中所有服务的列表以及与特定服务关联的对应ID（主键）。当用户输入字母时，应用程序将显示与输入字母匹配的学生服务列表。例如，当输入字母“p”时，将显示包含字母“p”的所有服务的列表。这是可以实现的，因为我们编写了代码来过滤包含被键入的字母的服务名称，并显示匹配字母的服务名称。继续上面的输入字母“p”的例子，如果“警察局（police）”是与之匹配的服务，那么用户可以点击它以获得更多的信息。这个活动将打开一个新的页面，显示警察部门所需的信息。

讨论

        从事信息技术，信息系统开发和编程的教学人员，他们已经了解了应对快速发展的技术变革的挑战。七年前，全球有近四十亿的人口没有接入互联网，因此手机行业得到了巨大的发展机会和提供了大量的就业市场。到现在，移动设备的数量相对七年前已经增加了两倍。技术的进步已经淘汰了许多传统（非智能）手机。随着功能的增加，这些移动设备迅速得到普及。因此，应用程序一直都有巨大的需求量。

结论

        意识到在教授移动应用程序开发方面的挑战，我们希望在本文中做的是分享我们自己在移动Web应用程序实际开发中的经验。根据我们的经验，我们可以提供一些实际的指导经验来降低开发难度。在前面的章节中，我们描述了开发流程以及我们创建的学生服务Web应用程序的功能。到目前为止，我们成功地开发和提供了一个功能性的Web应用程序。回顾整个开发流程，我们意识到开发移动应用程序需要精心策划。要想取得成功，每一个环节都要做好，最终形成一个统一的项目。就像我们的一样，我们的项目是从一个想法开始，接下来我们选择了适合项目的方法。对于我们来说，这个方法是使用HTML / JQuery和CSS的web应用程序选项。之后，我们进行了规划，程序设计，编码，测试，并最终部署应用程序在跨平台的移动设备上运行。然而，最重要的部分是选择正确的方式。我们选择遵循Web应用程序路径来创建和提供可支持跨平台的内容。我们的Web应用程序是用HTML，CSS和JavaScript实现的。这与Lutes提出的使用网络开发技术的建议相吻合。我们依靠浏览器来提供运行时环境，并利用多平台的浏览器支持。因此，我们能够实现应用程序在各种移动设备上运行。这种方式考虑了不同的屏幕尺寸和移动设备。虽然移动设备的构建方式不同，但是它们的浏览器是相似的，因为这些浏览器基于通用技术，具有开放和成熟的标准和协议。我们的学生服务网络应用程序也不需要高级编程知识。因此，我们的应用程序的开发流程可以做为一个模型，它可以轻松地移植到其他跨平台。

未来的开发计划

        我们的学生服务网络应用程序功能齐全。目前，它旨在我们自己的服务器上运行，并提供主要的学生服务信息。在开发的下一阶段，我们计划修改当前代码，并扩展我们的设计概念，以创建更灵活，可共享和易于复用的源代码。其目标是让其他人能够轻松快速地开发更多专门涉及在线访问数据库的Web应用程序。 另外，我们还会增加更多功能，包括以下功能：

    •允许用户在数据库中指定自己的内容

    •支持灵活的数据字段和多种数据类型

    •显示位置和方向的地图

    •支持视频和音频以及允许更多的搜索字段，

    •简化输入过程，如允许用户直接输入数据到服务器上，

    •支持国际字符/字体

局限

        由于本文主要关注我们的第一次开发工作，所以是具有一定的限制的。第一个是对我们的学生服务应用程序的有效性和可用性缺乏深入思考，缺少用户反馈机制。因此，在下一个阶段，我们计划增加收集用户反馈的方法。当我们将这种体验转化为一个课堂项目时，我们可以进行实际的研究并收集数据来衡量学生是如何评估应用程序并从中学到了多少。我们没有注意到的第二个因素是应用程序开发本身的质量和维护方面的问题。例如，本文没有涉及到与度量，代码质量和长期维护相关的要点。这些都是整个系统开发以及跨平台移动应用程序开发的重要考虑因素，特别是考虑到移动设备技术正在以惊人的速度发生着变化。

        尽管有上述限制，但我们希望通过阅读本文，读者不仅可以了解我们的学生服务Web应用程序如何工作以及如何开发的，而且可以将这些代码和想法用于教学或者一些其他的方面。

原文地址：http://www.jite.org/documents/Vol14/JITEv14IIPp145-169Huynh1842.pdf

（对原文有所删改，本人并非web程序开发人员，若文中翻译有不恰当的地方还请再评论中指出）