标签 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(除 app 与 drupalgap 外的任何名称都可以),现在,整个开发环境已经部署完了,但是在正式开发前,我们还需要对 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