标签 phonegap 下的文章

PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone,Android,Palm,Symbian,WP7,Bada和Blackberry智能手机的核心功能——包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以以此扩展无限的功能。

本文介绍的方法是一个用来创建简单的手机应用的PhoneGap简单实现,其步骤为:

  1. 创建类似为App的手机网页(这个就是把网页做得和手机应用的风格差不多,为的是给人的感觉是这个是个应用即可) 创建一个引导页
  2. index.html ,打开该文件可以直接跳转到手机网页即可 在 PhoneGap 上面注册个应用,上传包文件即可创建
  3. 手机网站本文就不再阐述了,index.html 文件的代码如下:
    <!DOCTYPE html>
    <html lang="zh-CN">
        <head>
            <meta charset="utf-8" />
            <title>Sage Wind · PhoneGap App</title>
            <meta http-equiv="refresh" content="5;http://wind.ofsz.com" />
        </head>
        <body>
        </body>
    </html>

上面这段HTML代码的作用其实很简单,就是打开该文件之后,不作任何的待立马跳转至 http://wind.ofsz.com 这个网址,然后把这个文件放在一个空的名为 www 的目录下,再把 www 整个目录打包成为一个www.zip文件。 到这一步之后,我们剩下的工作就全部得在PhoneGap的Build网站上进行了,打开 http://build.phonegap.com/ 网页,注册一个新的帐户,如下图所示,点击网页右上角的 Register 链接:选择 completely Free。

PhoneGap Choose You Plan.jpg

然后选择 AdobeID,如果你已经有了AdobeID,那么这里直接登陆即可,如果没有,需要重新注册一个新的,注册表单如下:

  • Adobe ID (Email Address) -- 填写Adobe ID,也就是你以后使用的帐号,是一个邮箱地址
  • Password 与 Retype Password -- 你的密码
  • First Name 与 Last Name 你的名和姓
  • Country/Region 是你的国家或者地区

填写完成之后,点击Create即可创建成功,登陆成功之后会进入下面这个页面:

Start Building an App.jpg

这里我们可以直接把 Github 上面的项目地址复制到这里,但是这不简单,看到右边有一个 Upload a .zip file,还记得我们前面的那个 www.zip 文件的话,就知道了下一步该怎么做了,点击这个按钮,上传前面的 www.zip 文件,跳转到下面这个网页:

PG Build App.jpg

这里,我们需要填写App的名称以及介绍,还可以设置App的图标,如下是我填写的信息:

Build App Sage Wind.jpg

点击右下方的 Ready to Build 按钮,即可跳转到Sage Wind页面,我们会看到如下页面:

Sage Wind App Pending.jpg

这个页面所展示的信息包括:

  • 当前这个App使用的PhoneGap版本
  • App ID与App版本
  • App的所有者等等

通过此页面,即可直接下载App的打包文件,iOS 的的在提供iOS sign key 之前是无法打包的,但是其它的系统一般都是可以使用的,通过上面的操作,我现在下载打好包的应用,只需要点击每一系统右侧的那个下载链接即可,本文至此为止创建的App包可以点击下面这个下载链接下载:

SageWindAppStarter.zip

接下来我这里不再上传除Android系统之外的其它版本,反正都一样。

到现在为止我们的应用只是可以跑通而已,点击上面截图中的 Settings 标签页,还可以对应用进行设置,设置分为 Basic 与 Configuration,前者就是我们在创建完这个应用时候的设置,页下面的Configuration如下图所示:

PhoneGap App Configuration.jpg

我的设置如下:

PhoneGap App Configuration Wind.jpg

修改配置之后需要重新构建应用,点击应用下方的 Rebuild all 按钮即可生成新的应用:

SageWind-debug-Concifugrated.zip

有史以来最强大的开源内容管理系统 Drupal,有史以来最简单的应用开发框架 Phonegap(或者称之为 Cordova),当这两者相遇,就有了这强大的 DrupalGap

首先,我是一名忠实的Drupal用户,虽然Drupal很多时候让我很苦恼,但是我从来没有打算放弃过它,因为它在别的东西都解决不了问题的时候,总能帮我更快的解决,而PhoneGap(开源版本为 Cordova)我才用没到一年,但是已经感觉到,在一般的应用中,它能给我们带来更快的开发效率,虽然运行效率是差了一点点,不如原生态的,但是,对于一般的小项目,在这开发效率与运行效率之间,它能取得一个很好的平衡,这就已经完全满足我的要求了,最主要的是,HTML5+CSS3太强大了,现在的总是是我需要Drupal来做后端,Phonegap来实现前端,它们之间怎么联系?这就用到了一个杂交体 DrupalGap

需要完成的项目介绍

写本文的原因是最近要做一个手机端项目,项目的需求其实很简单:

  • 用户可以通过App查看湖南省所有高速公路广告牌(包括其状态,价格,位置,地图展示等)
  • 管理者有一个很方便使用的后台管理这些广告牌资源
  • 管理者可以通过登陆手机端来发布新的广告牌

其实解决方案很多,完全用不着用Drupal这么个东西,只是,为了统一整个公司的技术结构,总前想后的还是用了Drupal,这个项目的服务器端(包括管理程序)地址为:http://zhuoyue.projects.ofsz.com,你可以通过这个网址下载该应用。

安装 DrupalGap 模块

DrupalGap本身只是一个Drupal模块,该模块要求你的Drupal系统中已经安装了以下模块:

配置开发环境

PhoneGap 应用本身可以简单的认为是一个HTML5+CSS3+JavaScript实现的手机版网站,所以在电脑上开发PhoneGap应用的最合适的开发环境就是浏览器,当然,最好的选择肯定就是Chrome 莫属了,除了Chrome自身提供的各种各样的开发扩展工具外,PhoneGap还提供了一个强大的Chrome插件—— Emulate,通过该插件,我们可以在浏览器中模拟出移动终端,安装完该插件之后,我们可以开发部署DrupalGap的第二部分了—— Mobile Application Development Kit

下载 Mobile Application Development Kit ,将其解压并移动至你的Drupal站点根目录下,然后将其文件夹名称改为 mobile(除 appdrupalgap 外的任何名称都可以),现在,整个开发环境已经部署完了,但是在正式开发前,我们还需要对 Mobile Application Development Kit 进行一些简单的设置。

修改 Mobile Application Development Kit 配置

进入 Mobile Application Development Kit 中的 app 目录,将 default.settings.js 文件复制一个复本并命名为 settings.js ,打开 settings.js 文件,找到下面这一行:

drupalgap.settings.site_path = ''; // e.g. http://www.example.com

将其修改成为您的Drupal站点的路径,比如我在卓越广告这个项目中的开发站点地址是:http://zhuoyue.projects.ofsz.com,填写进去即可:

drupalgap.settings.site_path = 'http://zhuoyue.projects.ofsz.com'; // e.g. http://www.example.com

然后将 ripple.index.html 中的内容覆盖至 index.html 中,将 Phonegap的示例配置文件 config.xml 保存在应用的根目录中,在本例中我们的应用根目录是 mobile ,我们还需要为应用制作一个图标,保存为 icon.png 文件至 mobile 目录中。下面已经可以通过下面链接访问到你的应用了:

比如我的示例是:

[phonegap] : http://www.phonegap.com
[cordova] : http://cordova.apache.org
[drupalgap] : http://drupalgap.org

[ctools] : http://drupal.org/project/ctools
[libraries] : http://drupal.org/project/libraries
[oauth] : http://drupal.org/project/oauth
[services] : http://drupal.org/project/services
[views] : http://drupal.org/project/views
[views_datasource] : http://drupal.org/project/views_datasource