65.9K
CodeProject 正在变化。 阅读更多。
Home

Loclville 案例研究

starIconstarIconemptyStarIconemptyStarIconemptyStarIcon

2.00/5 (1投票)

2013 年 4 月 26 日

CPOL

13分钟阅读

viewsIcon

17264

Loclville 是一款免费的 Windows* 8 应用,提供了一个易于使用的虚拟社区公告板。本文将介绍该应用的开发历程。

介绍 

Loclville 是一款免费的 Windows* 8 应用,提供了一个易于使用的虚拟社区公告板。该应用由业余应用开发者 Zubair Lawrence 开发,他目前是索尼影视图像工程公司的一名高级制作服务技术员。该应用最初是一个 网站,后来为了参加由 CodeProject 于 2012 年秋季举办的 Intel 赞助的 Windows* 8 & Ultrabook™ 应用创新竞赛 而重新设计。

Loclville 在视觉上受到了经典软木板的启发,允许任何人发布通知而无需注册,用户通过投票系统管理帖子。该应用的核心功能是能够设定用户希望互动的社区的地理范围。其易于使用的设计让即使是最不擅长电脑的用户也能轻松地在线参与当地社区的活动。

Loclville 在 Microsoft Surface* 上运行。

Loclville 应用现已在 Intel AppUp® 中心Windows* 应用商店上线,针对运行 Windows 8 的 Ultrabook™ 设备进行了优化,并且也可在 Google Android* 和 BlackBerry* 移动设备上使用。

在 Loclville 开发过程中,Lawrence 与该应用的创意和执行的构思者以及图形设计师合作完成了视觉素材。Lawrence 遇到了许多开发挑战,其中许多是第一次遇到,从如何准确管理应用核心功能所固有的地理定位,到为 Ultrabook 和手持设备上的触摸 UI 进行编程。

方法

Lawrence 将应用开发分为两个独立的部分:应用端(用户下载和交互的程序)和服务器端。每个部分都有其独特的发展过程。

JavaScript* 和 HTML5

Lawrence 最初决定使用 JavaScript 作为应用的主要编程语言,这是 HTML5 开发环境中(另一种是 CSS3)实现交互性和动画的核心技术之一。基于这一决定,他最终能够重用比他最初想象的更多的网站代码和功能,同时还能保留服务器端调用。

尽管听到其他开发者对速度的担忧,Lawrence 对使用 JavaScript 和 HTML5 仍有顾虑,但他发现 JavaScript 根据代码的编写方式能够提供快速的性能。Lawrence 早期决定使用 JavaScript 作为应用主要语言的决定最终得到了证实,他认为这是他做出的最佳选择之一。

AJAX

在编写原始网站代码时,Lawrence 严重依赖 AJAX,这是一系列客户端 Web 技术(包括 JavaScript 和 XML),用于实现异步 Web 应用程序。对于应用创建,AJAX 带来了许多效率提升,包括能够重用网站代码,尤其是在服务器端。

该应用在设计时使用了 API 调用来实现不同的功能;例如,接收帖子或从拖放式口袋功能中检索帖子。通过一次调用,应用即可提供指定区域的所有帖子。网站中的 AJAX JavaScript 编码过程被重用于该应用,这意味着应用可以更轻松地在项目截止日期前完成。

服务器

Lawrence 最初考虑在 Linux* 服务器上使用 PHP 构建该应用。然而,对可扩展性的担忧促使他尝试并最终选择了 Microsoft 的 Azure* 平台。Azure 为每个服务器提供一个虚拟机,从而提供更具可扩展性的服务器配置,通过平台分布式云解决方案在全球范围内分布所需的任意数量的虚拟机。 Windows Azure Mobile Services 被用于推送通知,所有图片都存储在 Windows Azure 内容分发网络 (CDN) 上。

HTML5 封装器

为了创建桌面应用,Lawrence 最初尝试了 AppJSIntel AppUp 封装器TideSDK,他发现后者有点过于复杂且功能过多,是他不需要的。在这些初步试用后,Lawrence 决定使用 Intel AppUp 封装器来构建 HTML5 应用,他认为这是一个快速将应用带到桌面平台的宝贵工具。

一旦基本应用运行起来,Lawrence 发现他需要更强的定位支持。为了实现这一点,Lawrence 转而使用 AppJS 解决方案,它提供了他所需的 HTML5 地理定位功能以及 Mac* 和 Linux 支持。

商店和桌面

Lawrence 还早期决定同时为 Windows 应用商店和桌面开发,以最大化受众潜力。由于与 Intel 的关联,Lawrence 认为 Intel AppUp 中心能够给消费者带来更高程度的信心,并且额外的测试有助于确保内容的安全性。此外,Intel AppUp 中心不受限于仅 Windows 8 平台的事实,帮助该应用触达了比以往更广泛的受众。

开发挑战

Location

Lawrence 面临的最重大的开发挑战之一是确保单个用户位置数据的完整性,这对于应用的正常运行至关重要。仅靠全球定位系统 (GPS) 数据存在一些缺点,包括数据年龄的不确定性——用户可能距离上次读取位置很远——以及 GPS 在读取数据时是否真正正确锁定。

Loclville 在移动设备上的屏幕布局。

在开发早期阶段,Lawrence 注意到位置数据存在不准确的情况,数据要么不精确,要么显示多个位置。为了解决这个问题,Lawrence 实现了一个混合过程,应用通过该过程收集设备本身的 GPS 数据和 IP 地址数据。这些读数会在用户会话期间自动更新,以确保定位信息的准确性,并保证应用关键距离半径功能的有效运行。

当根据用户特定位置提供帖子时,服务器首先接收帖子请求,然后将请求者的经纬度坐标与数据库中帖子的经纬度进行比较。位于指定半径内的帖子将被返回(图 1)。

图 1. Loclville 应用使用的样本代码,用于建立两组经纬度坐标之间的距离。

触摸和用户界面

由于 Lawrence 没有实现触摸 UI 的经验,理解与菜单、屏幕尺寸、按钮大小和屏幕上定位相关的不同要求极具挑战性。Lawrence 采用了响应式设计方法,以一种方式进行设计,使得应用或网站能够在各种不同的设备和屏幕尺寸上提供优化的观看体验。通过这种方法,Lawrence 能够确保应用为其运行的设备提供适当的 UI,从而提供高度的易读性和直接的导航,用户只需进行最少的缩放、平移和滚动。

Loclville 在各种不同屏幕配置上响应式运行。

为了确定 UI 如何响应,应用会查询屏幕和设备的像素尺寸,然后利用这些条件来决定如何绘制 UI 并适应任何变化。如果用户旋转设备屏幕(例如,平板电脑或智能手机),或者如果 Web 浏览器窗口大小被调整,应用都会做出响应并相应地调整 UI。

原始 Loclville 网站采用了醒目简洁的按钮和菜单,这有助于相对平滑地过渡到较小的屏幕和触摸控件。对下拉菜单和一些链接进行了调整,以优化触摸操作。这些修改包括使按钮更易于触摸,确保它们之间有足够的间隔,以帮助防止意外按下。

适应较小的屏幕还涉及重新定位一些菜单,以更好地利用有限的空间。距离、类别和帖子按钮被移至底部菜单,帖子被改为以列表视图显示,从而可以在更小的空间中显示更多内容。由于布局整体简洁,Lawrence 决定不实施任何与手机或平板电脑在纵向和横向视图之间切换相关的特定更改。优化的总体结果是一个适应多种设备和屏幕尺寸的应用。

jQuery

Lawrence 面临的另一个挑战是需要让 jQuery 在 Windows 8 JavaScript 应用中工作。与桌面版应用不同,Windows 应用商店版本必须满足代码合规性要求,这意味着需要移植 jQuery 库才能使其与 Windows 应用商店版本协同工作。

下面的图 2 显示了应用中用于移植 jQuery 以在 Windows 8 JavaScript 应用中工作的代码。

图 2. Loclville 应用中用于移植 jQuery 的示例代码。

测试

应用的 Beta 测试是一个非正式的过程,主要由合作者、他们的朋友以及用户自己进行。在每次更改后,Lawrence 都会发布新版本代码,然后主动收集用户关于其功能、可用性和错误的反馈。Lawrence 表示,测试是开发过程中最困难的部分,他指出用户在使用应用时行为常常不可预测,这使得测试既非常重要又充满挑战。

当要求用户输入地址时(这是应用正常运行的关键数据),发生了一个意外行为的例子。Lawrence 反复看到一个错误,说明应用无法找到该地址。他最终意识到输入问题含糊不清,导致用户输入他们的电子邮件地址,这自然无法让应用精确定位他们的物理位置。通过实现使用 GPS 和 IP 地址数据自动进行用户地理定位,解决了这个问题。

Lawrence 使用触摸屏超极本设备进行测试,以确保触摸界面与传统的鼠标和键盘控件一起能够正常运行并保持完整性。

评论反馈在至少一次识别和修复 bug 中也很有用,尽管 Lawrence 对评论者单向沟通感到沮丧。缺乏回复能力意味着无法直接告知评论者他们发现的 bug 已经修复。

指标

为了收集 Loclville 的用户行为指标,Lawrence 实施了开源分析工具 Piwik*,该工具收集数据,包括应用版本(例如,浏览器、Android、iOS* 或 Windows 8)、用户所在城市、用户是否点击了帖子、点击离开网站的链接以及会话时长。Lawrence 还从应用中收集自己的数据,包括帖子数量、用户位置以及增长和使用模式。

Lawrence 分析数据以确定用户来自何处,然后通过创建特定帖子来为当地用户提供直接支持,目标是帮助用户发展社区。

后续步骤

Lawrence 考虑将来实现的一些功能包括

  • 本地化。使网站支持除英语以外的语言,但具体支持哪些语言以及何时可用尚未确定。
  • 货币化。能够付费发布商业优惠和信息。此功能将基于相同的用户投票规则,从而鼓励仅有真正价值的内容。

               

                Loclville 移动应用中的促销优惠。

  • 家庭过滤器。将更多权力交还给个人用户,而不是社区,关于用户看到的内容;例如,提供过滤脏话的能力。此功能还可能包括防止未注册用户发布图片的功能。一个相关的挑战是找到一种在多种语言中进行过滤的方法,这是一个 Lawrence 仍在努力解决的问题。
  • 社交媒体集成。屏幕上的按钮允许用户通过选择的社交网络(如 Facebook*)直接分享 Loclville 内容。
  • 近场通信 (NFC)。允许用户通过 NFC 技术触摸两个设备来共享帖子的功能。

Loclville 的下一个主要计划更新是 3.0 版本,目前定于 2013 年 9 月发布。

结论

除了核心编码过程,Lawrence 还列出了创建应用时需要考虑的重要事项:

  • 触摸很重要,但开发者不应忽略鼠标和键盘。应用需要对这两种用户界面都友好。
  • 注意屏幕尺寸和方向至关重要。现在应用需要比以往任何时候都在更多设备上运行,从 Microsoft Surface* 的 10 英寸屏幕和 13 或 14 英寸超极本设备屏幕,到 30 英寸的桌面屏幕。对于平板电脑和超极本变形本,开发者还需要注意横向和纵向布局的不同设计需求,并相应地进行开发。
  • 花时间和精力将应用提交到 Windows 应用商店和 Intel AppUp 中心,因为潜在受众非常庞大。

尽管他对 HTML5 和 JavaScript 作为应用开发平台的使用有所顾虑,Lawrence 坚信 HTML5 和 AJAX 技术的结合是正确的选择,并且他计划在后续应用中继续使用类似的流程。

关于开发者

Zubair Lawrence 于 2009 年获得佐治亚州萨凡纳艺术与设计学院硕士学位,他作为视觉效果学位课程的一部分开始编程,并迅速对其产生了深厚的喜爱和明确的亲和力。此后,他将自己的编码知识和能力扩展到了课程中的 Python* 编程之外,成为了一名熟练的自学应用程序员。

2011 年 6 月,Lawrence 以“Helix Ten”的化名加入了 CodeProject 独立开发者社区 (https://codeproject.org.cn),即使在 2012 年 1 月加入位于加州的索尼影视图像工程公司*后,他仍然在业余时间热衷于编码。2012 年 12 月,Lawrence 成功将 Loclville 应用提交给了在 CodeProject 网站上举办的 Intel 赞助的 Windows* 8 和 Ultrabook™ 应用创新竞赛。Lawrence 通过业余时间编程来补充他在索尼影视图像工程公司的工作,包括对 Loclville 应用和网站的持续支持和更新。

有用的资源

在 Loclville 应用开发过程中,Lawrence 最宝贵的资源之一是 CodeProject 上的开发社区,该网站承办了 Windows* 8 & Ultrabook™ 应用创新竞赛。在应用开发过程中,Lawrence 与社区成员频繁互动,并且他仍然经常访问该网站。 Intel HTML5 封装器 在让 Lawrence 快速将应用带到桌面方面发挥了巨大作用,提供了大量文档和视频来支持开发过程。Lawrence 引用了 Intel AppUp 中心提供的文档,称其为 应用提交过程 中的重要资源,并形容其非常清晰和详尽。

本文档部分内容经许可使用,版权归 CodeProject 所有,2012 年。Intel 不对第三方供应商及其设备的质量、可靠性、功能或兼容性作任何陈述或保证。有关优化信息,请参阅 software.Intel.com/en-us/articles/optimization-notice/。所有产品、日期和计划均基于当前预期,如有更改,恕不另行通知。Intel、Intel 标识、Intel AppUp、Intel Atom、Intel Inside 标识和 Ultrabook 是 Intel Corporation 在美国和/或/或其他国家/地区的商标。*其他名称和品牌可能被声明为他人财产。版权所有 © 2013。Intel Corporation。保留所有权利。

© . All rights reserved.