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模塊來解決。
五、參考鍊接：
评论