2010年刚开始用Drupal还是Drupal 6，移动大潮未到来，后来随着智能手机的普及，我们在Drupal 6、Drupal 7上都设置了对应的手机版网站，现在又都合并到响应式设计网站中。但以Drupal网站为基础开发App我们还没有做过，只是以前听说是可行的，在前年北京亚艾元公司在武汉大学图书馆的培训时，他们也讲过一点点cordova，但实践的时间很短，只留下一点印象。虽然现在再开发App看上去已经晚了，难以让用户接受在手机上安装更多App，但我还是想尝试一下。今年初用Drupal与微信结合的模块做了一点微信公众号的开发可以有基本的效果，现在再来做App端的结合，下面把尝试的步骤、情况作记录：
一、需要安装的程序：
- 在服务器上安装一套Drupal网站，加上Views等需要的模块；
- Drupal网站服务器上下载模块drupalgap, views_datasource, libraries, services；
- 开启DrupalGap, Views JSON, Libraries, Services, REST Server；
- Drupal网站服务器上安装：Spyc支持，安装办法见Install "Spyc" library；
- 进入“首页 » 管理 » 配置 » Web服务”查看Drupal Gap的APPLICATION DEVELOPMENT KIT安装情况，会提示下载Drupal Gap的SDK，下载、解压、放置在默认的mobile-application目录；
- 复制其中的app/default.settings.js到app/settings.js并修改连接的网站；
- 在“首页 » 管理 » 配置 » Web服务 ”的APP STATUS下按“Test Connection”按钮，如果出现“http://www.example.com/drupalgap/system/connect.json 404 Not found : Could not find the controller.”报错，查看https://www.drupal.org/node/2015065 中说GlobalRedirect与DrupalGap使用有冲突，需要修改Global Redirect的设置，取消Non-clean to Clean选项，然后再次按“Test Connection”，出现“The system connect test was successful, DrupalGap is configured properly!”则正常；
- 在浏览器中访问http://www.example.com/mobile-application/，自动跳转到http://www.example.com/mobile-application/#dashboard，显示有Welcome to DrupalGap等正常连接信息；
- 可以在Chrome浏览器中安装Ripple插件，模拟不同的手机屏幕来查看；
- 左上角有菜单（默认有Content, Taxonomy, Users三项）和返回首页两个按钮，右上角有登录账号按钮；
- 如果查看Content列表可以，但具体页面中除了标题没有内容，则进入“首页 » 管理 » 结构 » 内容类型 » 某种内容类型 » 管理显示”，修改DrupalGap标签下的字段设置，把“正文”、“标签”等字段不设置为隐藏，保存后就可以了（如果前面的Spyc支持未安装也不能显示正文等，请先安装Spyc支持）；
- 在mobile-application/app目录下创建modules/custom/my_module/my_module.js，配合Drupal中设置的Views，再修改settings.js中的首页设置，就可以把首页修改为显示博客列表等定制内容；
- 在mobile-application页面下载，如果遇到权限报错，可以在网站根目录下创建一个drupalgap-app.zip，把权限设为浏览器可读写，这样以后每次下载都会覆盖这个作为下载的临时文件；
二、上述安装以后进入内容定制开发阶段：
- 安装DrupalGap的第三方模块，以flag为例：可以在http://drupalgap.org/project/modules 找到需要的模块，下载放置到app/modules目录下，例如app/modules/flag；
- 按照drupalgap flag文档中说的，修改settings.js文件，将//Drupal.modules.contrib['example'] = {};改为Drupal.modules.contrib['flag'] = {};，这样在admin/config/services/drupalgap页面中可以看到Contrib模块中有flag；
- 还需要按照上面的文档继续进行一些设置，安装flag_service模块，启用drupalgap的drupalgap flag子模块，在admin/structure/services/list/drupalgap/resources中勾选三项flag，才能在app页面中显示出来相应的flag；
- 安装自定义模块，app/modules下创建custom目录，再在app/modules/custom下创建自己的模块目录例如my_module，在app/modules/custom/my_module下创建my_module.js作为自定义模块的主文件，这个my_module.js中自定义菜单、页面等；
- 修改settings.js文件，将//Drupal.modules.custom['my_module'] = {};改为Drupal.modules.custom['my_module'] = {};，让my_module生效；
- 在网站的views中有drupalgap模块安装后的几个默认views，可以根据需要进行修改、删除、添加；
- 修改首页：在settings.js中设置drupalgap.settings.front = 'blog_list';//default: 'dashboard';
- 修改语言设置：在settings.js中设置Drupal.settings.language_default = 'zh_hans';//'und';以及drupalgap.settings.locale = {
/* es: { } */
zh_hans: { }
};更多语言翻译方面的事情请看文档DrupalGap Translate； - 搜索功能：Drupal需要安装Services Search模块（要最新开发版或者7.x-3.1以上），在admin/structure/services/list/drupalgap/resources中勾选search_node和search_user的retrieve，在settings.js中添加block（可以在footer处把powered_by: { }改为search: { }）；
- 修改js程序办法：默认index.html中是调用bin/drupalgap-7.0.1.min.js，这种min的js文件是去掉注释等的适合运行的精简版本但不方便查看和修改，可以改为调用bin/drupalgap-7.0.1.js，然后查看和修改这个文件；
- 修改js程序办法2：也可以修改src/modules和src/includes下面的各个js文件，然后用make命令合并makefile中这些文件到bin/drupalgap.js，index.html中改为调用这个bin/drupalgap.js；
- js调试：打开Chrome浏览器的“开发者工具”，在Console控制台中可以看到一些变量等信息，在js程序中使用console.log('文字')以及dpm(变量名)就可以在浏览器的Console中跟踪这些信息，还可以用alert('here')等方式输出需要的信息；
三、内容开发完成后就可以下载、打包、发布：
- 下载：进入“首页 » 管理 » 配置 » Web服务 » DrupalGap”，可以看到：Launch app (download | publish)，其中download就是下载打包的zip文件，但下载解压后发现除了settings.js以外其它自己修改过的modules, locale, drupalgap-7.0.1.js等文件都没有或者没有修改过，改为用zip -r mobile-application.zip mobile-application/*来压缩，再下载供打包为andriod/ios应用；
- 云打包：开发者自己的机器安装phonegap desktop软件，用图形界面鼠标操作创建project，再用前述下载的zip解压后的www目录替换本机中project对应目录下的www内容，再打包成zip文件上传到adobe公司提供的PhoneGap Build，用云打包来生成android、iOS和Windows可以下载安装的程序包；
- Android本地打包：开发者自己的机器上可以安装cordova软件以及配套的java开发环境等，这样可以用命令行来创建project，并用前述下载的zip解压后的www目录替换本机中project对应目录下的www内容，然后运行命令行生成apk；
- iOS本地打包：暂缺
四、遇到的问题：
- 多语言：如果settings.js中设置为und，编辑时可以显示多语言的内容，如果设置为zh_hans，编辑时除了title的字段都是空白，解决办法：修改js程序中相关form语言设置；
- 多值字段：多值字段显示成一个值了，中间没有分隔，而编辑的时候只有第一个字段出现，解决办法：修改js程序添加<br />分隔，多值字段的编辑：如果是固定多值有办法，但如果是无限多值目前drupalgap只显示第一个出来；
- 联系我们：表单总是提示the Category field is required.，解决办法：安装services_contact模块，开启对应services；
- 作者日期：文章中没有显示出来，搜索结果中也没有，还在找解决办法；
- 留言无法保存：总是报错Comment必须填写，而实际上Comment是有内容的，检查了很长时间，发现是语言的问题，修改提交表单的json中的comment_body的语言属性解决；
- 遇到报错：options_field_widget_form() - options_buttons not yet supported for taxonomy_term_reference form elements，是分类字段暂时不支持按钮选择，可以改为下拉选择；
- 跨站ajax：在浏览器中调试的时候如果地址栏网址与获取数据站点的域名不一致，会出现js获取不到数据的情况，从console界面可以看到报错Origin http://xxx is not allowed by Access-Control-Allow-Origin，解决办法是在chrome启动命令后面加上 --disable-web-security --user-data-dir；
- 缺drupalgap模块：audio_record、quiz等drupal模块还没有对应的drupalgap模块，导致一些功能在drupalgap中无法使用，需要等待或者自行开发drupalgap模块来解决。
五、参考链接：
评论