使用PhoneGap，配合 Drupal 7, HTML5, CSS, jQuery Mobi...

PhoneGap允许你使用HTML5，CSS，Javascript来创建移动应用程序。而且是跨平台的应用程序，应用可以在Android，苹果的IOS（iPhone, iPad）等设备上运行。

如果想让你的应用允许别人注册，登陆，添加或编辑内容。你可以使用Drupal做为处理内容的核心。Drupal 太酷啦 !

这篇文章介绍了一下创建基于Drupal本地应用的大概的流程。

演示：

• 下载应用并安装在手机上
• 到与应用配套的Drupal网站上注册一个用户（http://demo.ninghao.net/drupal-app/）
• 在手机应用上，用注册好的用户登录，然后尝试去创建内容，再点击“查看内容”，或到http://demo.ninghao.net/drupal-app/ 查看自己创建的内容。

如果你是Android 用户，应用的下载地址是：https://build.phonegap.com/apps/116250/download/android

如果你是iPhone，iPad用户，很抱歉，我只能在本地用IOS模拟器来测试应用，如果想生成真正的应用需要先花掉99美金成为Apple开发者。

流程：

• 安装Drupal与所需的模块。
• 配置Service模块。
• 用Views创建内容列表。
• 安装开发环境。无论你想开发IOS应用，还是Android，先要安装相关的开发环境。IOS的开发环境只能用在苹果的MAC电脑上，而Android提供多平台的开发环境。
• 在不同的开发环境上安装相应的PhoneGap。准备好以后，试下PhoneGap官方入门教程：http://phonegap.com/start 。
• 在开发环境中创建并调试应用程序
• 使用PhoneGap的Build服务来编译出应用在不同平台的应用程序。

下面针对几个关键的步骤来介绍一下：

下载所需的Drupal模块：

• services：http://drupal.org/project/services
• libraries：http://drupal.org/project/libraries
• views：http://drupal.org/project/views
• views datasource：http://drupal.org/project/views_datasource
• ctools：http://drupal.org/project/ctools
• spyc：http://code.google.com/p/spyc/ 下载以后放在“servers/rest_server/lib/spyc.php”

启用所需模块：

• Services
• REST Server
• Views
• Views JSON
• Views UI
• Chaos tools

配置模块：

添加Servies

• 结构->Services，点击“添加”
  • 名称：nignhao_service
  • Server：REST
  • Path to endpoint：ninghao_service
  • Authentication：选中“Session authentication”
• 点击“保存”
• 编辑新创建的Service，也就是ninghao_service，点击“Edit Resources”。
• 选中全部“Resource”，比如“comment, file, node ,system …”
• 点击“Server”选项卡，在Response formatters里选择“json”，在Request parsing里选择“application/x-www-form-urlencoded”

创建Views

• 结构->Views，点击“Add new view”（添加视图）
• View name（视图名称）输入ninghao_app
• 内容类型选择“Basic page”
• 取消选择“Create a page”
• 点击“Continue & edit”（继续编辑）
• 为视图添加一个“内容：Nid（Nid）的字段
• 在“格式”里，选择“JSON data document”
• 为视图添加一个页面
• 在“Page Setting”（页面设置）里设置页面的路径为 ninghao_app
• 点击“保存”

 

打开结构->内容类型，编辑 Basic page 类型，在 发布选项 里，选中 推荐到首页 。

修整应用的源文件

下载源文件：http://115.com/file/e77mq5ra#drupal-app-source.zip

说明：

• index.html，应用的主文件。
• jquery开头的都是jQuery架构相关的文件。
• cordova-1.7.0.js，PhoneGap架构。
• *.png，是应用的图标。
• config.xml，使用PhoneGap生成应用时使用的一个说明文件，比如应用的名称，描述，作者，使用的图标…
• scripts目录，里面的文件是应用与Drupal交互内容时使用的。

修改：

你可以根据自己的情况去修改“scripts”目录下的文件。把文件里所有出现：http://demo.ninghao.net/drupal-app/?q=ninghao_service ，替换成你自己的地址。注：后面的ninghao_service是我在service模块中创建的service。

编译成真正的应用

使用PhoneGap Build（ https://build.phonegap.com），可以很容易把做好的应用编译成能用在多平台上的真正的应用软件，比如IOS，Android，WebOS，Windows phone等等。

注：如果你想编译成能在苹果的IOS设备（iPhone，iPad）上使用的应用，你需要做一些额外的设备。官方的文档有很好的说明：https://build.phonegap.com/docs/ios-builds。

应用截图

转载于:https://my.oschina.net/ninghao/blog/57228