使用 Twilio 雲服務向 Android 和 iOS 應用程序添加文本消息

使用在 IBM 雲上託管的 Twilio 服務構建一個移動應用程序。這個由多個部分組成的文章系列將逐步構建一個應用程序,每個部分都將向您介紹一些新的服務。本文包括一個演示、樣例代碼,以及創建 BlueList Android 或 iOS 應用程序的完整說明。您可以應用所學到的知識,將 MobileData 和 Twilio 集成到自己的應用程序中。

您可能已經瞭解 Bluemix 的一些優勢,Bluemix 是 IBM 用於開發和部署移動應用程序和 Web 應用程序的開放式平臺。BlueMix 中的許多預構建服務使得構建和增強應用程序變得很簡單。

在本文中,我們將使用 Bluemix 服務,利用 Twilio 服務擴展一個名稱爲 BlueList 的 Android 或 iOS 應用程序。本系列中的其他文章 向您展示如何將更多基於雲的服務添加到應用程序。該 BlueList 應用程序是一個使用 Bluemix 服務的簡單移動應用程序。利用 Bluemix 上的免費服務,您可以立刻開始編寫並擴展自己的應用程序。

在以前的文章 "使用 MobileData 雲服務構建一個 Android 應用程序" 和 "使用 MobileData 雲服務構建一個 iOS 應用" 中,我們添加了 MobileData 服務,列表中的項將會持久保存。在本文中,我們將向 BlueList 應用程序添加 Twilio 服務,因此,當其中一臺設備以某種方式更新列表時,會發送通知,然後所有設備上的列表都被更新。

利用 Bluemix 上的免費服務,您可以立刻開始編寫並擴展自己的應用程序。

獲取代碼

如果您跳過了本系列 前面的文章,那麼您可以從 bluelist-mobiledata 代碼開始,但需要先執行下面的 追趕進度 任務,然後再添加 Twilio 服務。如果已經完成了前面文章的閱讀,那麼您可以從現有的代碼開始,按照下面的步驟添加 Twilio 服務。

爲了加快進度,您可以下載 bluelist-twilio(TW)代碼,您需要執行一些步驟來讓具有 MobileData 和 Twilio 服務的 BlueList 應用程序正常工作。bluelist-twilio(TW)代碼包含本文中對 bluelist-mobiledata 代碼所做的更改。

應用程序的先決條件

  • 熟悉上面提到的本系列的前面的文章,在這些文章中,我們已將 MobileData 服務添加到移動應用程序。該應用程序是本文的起點。
  • 對於 Android:應當熟悉 Android 開發和一種 Android 開發環境。我們使用了 Eclipse with ADT,但您可以隨意使用自己的首選環境。
  • 對於 iOS:應當熟悉 iOS 開發 和一種 iOS 開發環境。
  • 熟悉 git,以便下載 bluelist-mobiledata 和 bluelist-twilio Mobile Cloud 樣本。
  • bluelist-mobiledata 代碼(上面的)或來自本系列中 前面的文章 中的現有代碼。
  • 需要用於 Twilio Node.js 應用程序服務器端代碼的 bluelist-twilio 代碼(上面的)與 Twilio 服務接口
  • 一個 Twilio 帳戶,包括與之有關聯的 Account SID、Auth 令牌、Twilio 電話號碼,以及一個語音/文本驗證的電話號碼。瞭解如何在 Twilio.com 獲得該帳戶,或者如何按照我們的指示進行操作。
  • 熟悉 cf 命令行工具,該工具用於推送您的 Bluemix 應用程序的 Twilio Node.js 服務器端代碼。

限制

本文基於 Twilio 的免費試用版 安裝和 REST API。對於該試用版,有一些限制:

  • SMS 消息會被加上前綴字符串 "Sent from a Twilio trial account"。
  • SMS 消息必須發送到一個經過驗證的電話號碼,如以下消息所示: 本圖顯示了 SMS 消息必須發送到一個經過驗證的電話號碼

追趕進度的任務(Android)

如果您跳過了本系列中以前的文章,請儘量追趕上進度:

  1. 如果還沒有這樣做,請下載 bluelist-mobiledata code 將 bluelist-mobiledata-android 項目導入您的 Android 開發環境。一旦完成剩下的追趕步驟,就可以將導入項目後看到的所有編譯錯誤都糾正過來。
  2. 轉到本系列前面的文章中的 步驟 1. 在 Bluemix 上創建一個 Mobile Cloud 應用程序,並執行步驟 1.1-1.10。這些步驟將指導您完成: 
    • 在 Bluemix 上登錄並創建名爲 BlueList 的應用程序
    • 下載 Android SDK
    • 用您的 BlueList 應用程序值更新 bluelist.properties 文件
    • 將 JAR 文件添加到您的 libs 目錄
  3. 保存您的 Bluemix 應用程序名稱。您稍後需要使用此應用程序名稱。
  4. 一旦完成這些步驟,您就可以在自己的模擬器或設備上運行該代碼,以便驗證您的 Andr​​oid 開發環境已得到正​​確設置,然後再添加 Twilio 服務。現在,您應該可以執行前面文章中的步驟 7 和步驟 8。

如果應用程序能夠成功運行,那麼您已經追上了進度,並準備好添加 Twilio 和服務器端的雲服務。

追趕進度的任務(iOS)

如果您跳過了本系列中以前的文章,請儘量追趕上進度:

  1. 如果還沒有這樣做,那麼請下載 bluelist-mobiledata 將 bluelist-mobiledata-iOS 項目導入您的 iOS 開發環境。
  2. 轉到本系列前面的文章中的 步驟 1. 在 Bluemix 上創建一個 Mobile Cloud 應用程序,並執行步驟 1.1–1.6 和步驟 2.1-2.7。這些步驟將指導您完成: 
    • 在 Bluemix 上登錄並創建名爲 BlueList 的應用程序
    • 下載 iOS SDK
    • 用您的 BlueList 應用程序值更新 bluelist.plist 文件
    • 將 JAR 文件添加到您的 libs 目錄
  3. 保存您的 Bluemix 應用程序名稱。您稍後需要使用此應用程序名稱。
  4. 一旦完成這些步驟,您就可以在自己的模擬器或設備上運行該代碼,以便驗證您的 Andr​​oid 開發環境已得到正確設置,然後再添加 Twilio 服務。現在,您就可以執行前面文章中的步驟 6 和步驟 7 了。

如果應用程序能夠成功運行,那麼您就已經追趕上了進度,並準備好添加 Twilio 和服務器端的雲服務。

建立您的 Twilio 帳戶

在開始之前,先建立您的 Twilio 帳戶:

  1. 轉到 Twilio 並註冊一個免費的試用帳戶。
  2. 輸入所需信息(姓名、電子郵件和密碼),然後單擊 Get Started
  3. 輸入有效的(真實的)電話號碼,讓 Twilio 可以驗證您是人類,並完成驗證。

    備註:該號碼也將是您的 BlueList 購物清單應用程序發送短信的號碼。

  4. 一旦完成驗證,您就會分配到一個 Twilio 電話號碼。您可以選擇接受所分配的電話號碼,或選擇自己的電話號碼。保存您的 Twilio 電話號碼,因爲您很快就會再次用到它。
  5. 完成帳戶的設置。單擊 DASHBOARD 頁面,您會看到自己的 ACCOUNT SID 和 AUTH TOKEN。保存這些值;稍後需要使用它們。複製/粘貼 TOKEN, 單擊鎖圖標,如下圖所示。
本圖顯示了鎖圖標

利用 Twilio 擴展您的 BlueList 應用程序

步驟 1. 在 Bluemix 中將 Twilio 服務添加到您的應用程序

  1. 登錄到 Bluemix
  2. 假設您已經完成了 前面的文章 中的步驟,或上述 追趕進度的 步驟,在 DASHBOARD 視圖中單擊您的應用程序。
  3. 單擊 ADD A SERVICE 並將 Twilio 服務添加到您的應用程序。本圖顯示瞭如何添加 Twilio 服務
  4. 您會看到系統提示,要求您輸入 Twilio 的 Account SID 和 Auth Token。從 Select an application 下拉菜單中選擇您的應用程序,然後(複製/粘貼)之前保存的 Twilio 值,單擊 CREATE本圖顯示了已完成 Twilio 的添加備註:新的 Twilio 服務將被分配一個名稱(比如,Twilio-XX),但您可以把它改成自己喜歡的任何名稱。在本例中,Twilio 服務名稱是 “Twilio”。
  5. 保存 Twilio 服務名稱;在編輯 Node.js 應用程序代碼時會用到它。
  6. 您的應用程序需要重新啓動。單擊 OK 重新啓動您的 BlueList 應用程序。
  7. 現在,當查看 Bluemix 儀表盤時,應該可以看到新的 Twilio 服務已被添加到您的 BlueList 應用程序。本圖顯示了 BlueList 中的 Twilio
  8. 單擊 BlueList 應用程序,訪問其概述頁面。
  9. 單擊 Runtime 鏈接查看 BlueList Node.js 運行時的詳細信息。本圖顯示了 BlueList Node.js 運行時
  10. 滾動到 Environment Variables 部分和 VCAP_SERVICES 選項卡。本圖顯示了 VCAP_SERVICES
  11. 檢查 JSON 代碼的 "user-provided" 部分。這一部分是在將 Twilio 服務添加到應用程序時創建的。我們能夠使用 VCAP_SERVICES 變量在我們的 Node.js 運行時代碼中動態檢索 Twilio accountSID 和 authToken 值。利用我們的服務器端代碼中的 ibmconfig 模塊,我們能夠訪問這些 Bluemix 應用程序的環境變量。本圖顯示了 JSON 代碼

步驟 2. 讓自己熟悉服務器端 Node.js Twilio 代碼

  1. 如果不熟悉這些代碼的話,請使用 git 從 IBM DevOps Services 下載 Twilio 的 Node.js 應用程序代碼。Node.js 代碼在 bluelist-twilio-node 子文件夾中。
  2. 仔細查看 <gitRepository>/bluelist-twilio/bluelist-twilio-node 目錄中的代碼(其是 app.js 文件)並讓自己熟悉代碼。
  3. 該 app.js 文件需要執行一些更新,我們現在將介紹相關的步驟。在編輯器中打開 app.js,並進行以下更新: 
    • 用應用程序的值替換 applicationId 和 applicationRoute 值佔位符。在您的應用程序的 Bluemix 概述頁面上可以找到這些值。
    • 更新 toPhone 和 fromPhone 值佔位符。用短信發送的目標電話號碼替換 toPhone 號碼,並使用所分配的 Twilio 電話號碼替換 fromPhone 號碼。
      //change these to your Bluemix application values
      var appConfig = {
          applicationId:"<INSERT_APPLICATION_ID_HERE>",
          applicationRoute:"<INSERT_APPLICATION_ROUTE_HERE>"
      };
      //change these to your Twilio values
      var twilioConfig = {
          twilioServiceName:"<INSERT_TWILIO_SERVICE_NAME>",
          toPhone:"+15551234567",
          fromPhone:"+15557654321"
      };
  4. 編輯 manifest.yml 文件。更新 host: 和 name: 值,使之與您的 Bluemix 應用程序名稱相匹配。
    host: my_bluemix_app_name
    disk:1024M
    name: my_bluemix_app_name
    command: node app.js
    path:.
    domain: mybluemix.net
    mem:128M
    instances:1
  5. 保存更改並準備使用 Cloud Foundry 命令行界面 (cf) 將您的代碼向上推送到 Bluemix。
  6. 打開命令提示符並導航到您的 Twilio Node.js 應用程序所在的位置。例如: cd <gitRepository>/bluelist-twilio-node/bluelist_twilio。 列出目錄內容,確保能夠看到您的 app.js,manifest.yml 和 package.json 文件(以及其他文件)。
  7. 發出以下命令,驗證已正確安裝 cf:
    cf –version
  8. 此命令的結果應該顯示已經在您的計算機上安裝的 cf 版本。例如:
    cf version 6.0.1-9df4861
  9. 使用下面的命令登錄 Bluemix:
    cf login -a https://api.ng.bluemix.net
  10. 將新的應用程序代碼向上推送(上傳)到 Bluemix Node.js 運行時,運行以下命令,用您的應用程序的名稱替換 ${yourBlueList}
    cf push ${yourBlueList} -p .-m 512M
  11. 確認 push 命令是成功的,而且新的 Twilio Node.js 應用程序正在 Bluemix 上運行。

    點擊查看代碼清單

步驟 3 (Android). 修改客戶端代碼

假設您已經完成了 前面文章 中的步驟或上述 追趕進度的 步驟,我們將開始修改客戶端 Android 項目的代碼,使之達到 TW 的水平,並能夠與您剛剛設置的 Twilio Node.js 運行時進行交互。

  1. 打開您的 Andr​​oid 開發環境來執行必要的代碼更改。
  2. 要使用服務器端的雲代碼,則需要使用另一個 Andr​​oid SDK JAR 文件。導航到 Android SDK,在前面的文章中,或在 追趕進度的 步驟中進行解壓縮,並將 ibmcloudcode.jar 複製到您的 libs 文件夾。您的 libs 目錄現在看起來應該如下圖所示。本圖顯示了 libs 目錄
  3. 編輯您的 assets 文件夾中的 bluelist.properties 文件。如果尚未完成此任務,請使用您的 Bluemix 應用程序 ID 更新 applicationID 值。將兩個新的屬性值添加到文件:applicationNAME 和 twilioTextMessageapplicationNAME 應該與您的 Bluemix 應用程序名稱相匹配;twilioTextMessage 是 Twilio 將向您的手機發送的消息文本。
    applicationID=<INSERT_APPLICATION_ID_HERE>
    applicationSecret=<INSERT_APPLICATION_SECRET_HERE>
    applicationRoute=<INSERT_APPLICATION_ROUTE_HERE>
    # Text preceding grocery list (keep < 30 chars to allow room for list items) 
    twilioTextMessage=Pick up groceries:
  4. 編輯 BlueListApplication.java 文件,並準備執行一些修改。
  5. 創建一個新的 Activity 變量來追蹤購物清單活動狀態。
    publicfinalclass BlueListApplication extends Application {
    	private Activity mActivity;
    	publicstaticfinalintEDIT_ACTIVITY_RC = 1;
    	privatestaticfinal String
    		CLASS_NAME = BlueListApplication.class.getSimpleName();
    	privatestaticfinal String APP_ID = "applicationID";
    	privatestaticfinal String PROPS_FILE = "bluelist.properties";
    	List<Item> itemList;
  6. 在四個 ActivityLifecycleCallbacks 中跟蹤活動狀態(創建、已啓動、已恢復和暫停)。

    點擊查看代碼清單

  7. 修改 Bluemix 初始化調用。
    // initialize the IBM core backend-as-a-service
    IBMBluemix.initialize(this, props.getProperty(APP_ID), 
    				props.getProperty(APP_SECRET), props.getProperty(APP_ROUTE));
  8. 將您的修改保存到 BlueListApplication.java。您此時可能仍會看到一些告警,在您繼續執行代碼更新之前,應該解決這些告警。
  9. 編輯 MainActivity.java 文件,並準備執行一些修改。
  10. 定義一些新的變量來檢索 bluelist.properties 文件中的信息。
    	/* Define values found in properties file */
    	private static final String TWILIO_TEXT_MSG = "twilioTextMessage";
    	private static final String PROPS_FILE = "bluelist.properties";
    	private static String twilioTextMessage;
  11. 在執行 /* refresh the list */ 命令(在 onCreate 中)之後,添加一些代碼,以便讀取 bluelist.properties 文件。
    	/* refresh the list */
    	listItems();
    		
    	/* get text message from properties file */
    	Properties props = new java.util.Properties();
    	Context context = getApplicationContext();
    	try {
    		AssetManager assetManager = context.getAssets();					
    		props.load(assetManager.open(PROPS_FILE));
    		Log.i(CLASS_NAME, "Found configuration file:" + PROPS_FILE);
    	} catch (FileNotFoundException e) {
    		Log.e(CLASS_NAME, "The bluelist.properties file was not found.", e);
    	} catch (IOException e) {
    		Log.e(CLASS_NAME, "The bluelist.properties file could not be read properly.", e);
    	}
    	Log.i(CLASS_NAME, "Twilio Text Message to send is:" + props.getProperty(TWILIO_TEXT_MSG));
    	twilioTextMessage =  props.getProperty(TWILIO_TEXT_MSG);
  12. 添加一個新的方法,updateOtherDevices(),以便調用我們的服務器端雲模塊。請注意,在 bluelist.properties 文件中定義的 twilioTextMessage 是通過 POST 請求上的 JSONObject 進行傳遞的。
    	private void updateOtherDevices() {
    		// initialize and retrieve an instance of the IBM CloudCode service
    		IBMCloudCode.initializeService();
    		IBMCloudCode myCloudCodeService = IBMCloudCode.getService();
    		JSONObject jsonObj = new JSONObject();
    		try {
    			jsonObj.put("text", twilioTextMessage);
    		} catch (JSONException e) {
    			e.printStackTrace();
    		}
    		// Call the node.js application hosted in the IBM Cloud Code service
    		// with a POST call, passing in a non-essential JSONObject
    		// The URI is relative to, appended to, the Bluemix context root
    		myCloudCodeService.post("notifyOtherDevices", jsonObj);
    	}
  13. 現在,我們只需將調用添加到 updateOtherDevices。在編輯、創建新的項目,或者刪除現有項目時添加調用。
    • 編輯代碼
          public void onActivityResult(int requestCode, int resultCode, Intent data) {
      		switch (resultCode)
      		{
      		/* if an edit has been made, notify that the data set has changed.*/
      		case BlueListApplication.EDIT_ACTIVITY_RC:
      			updateOtherDevices();
      			sortItems(itemList);
      			lvArrayAdapter.notifyDataSetChanged();
      			break;
      		}
      	}
    • 創建代碼

      點擊查看代碼清單

    • 刪除代碼

      點擊查看代碼清單

  14. 將您的修改保存到 MainActivity
  15. 現在所有的代碼修改都已完成。不要忘記使用 Eclipse 來組織導入 (Ctrl+Shift+O)。這會自動從之前複製到項目中的 SDK JAR 文件導入所有必需的元素。如果由於缺少導入語句而仍然有一些編譯錯誤,請確保已將下面的導入內容添加到 MainActivity.java。
    	import java.util.Properties;
    	import org.json.JSONException;
    	import org.json.JSONObject;
    	
    	import bolts.Continuation;
    	import bolts.Task;
    	
    	import com.ibm.mobile.services.cloudcode.IBMCloudCode;
    	import com.ibm.mobile.services.data.IBMDataException;
    	import com.ibm.mobile.services.data.IBMDataObject;
    	import com.ibm.mobile.services.data.IBMQuery;

步驟 3 (iOS). 修改客戶端代碼

假設您已經完成了 前面文章 中的步驟或上述 追趕進度的 步驟,我們將開始修改客戶端 Android 項目的代碼,使之達到 TW 的水平,並能夠與您剛剛設置的 Twilio Node.js 運行時進行交互。

  1. 打開您的 iOS 開發環境,執行必要的代碼更改。
  2. 要使用服務器端的雲代碼,則需要使用另一個 iOS SDK JAR 文件。在 Finder 中,找到 iOS SDK,在前面的文章中,或在 追趕進度的 步驟中進行解壓縮,並將 IBMCloudCode 框架拖動到 Frameworks 文件夾下的 BlueList Xcode 項目中。本圖顯示了 libs 目錄

    點擊查看大圖

  3. 編輯您的 Supporting Files 文件夾中的 bluelist.plist 文件。如果尚未完成此任務,請使用您的 Bluemix 應用程序值來更新 applicationIdapplicationSecret 和 applicationRoute 值。將一個新的屬性值添加到文件:twilioTextMessagetwilioTextMessage 是 Twilio 將要發送到您的手機的消息文本。本圖顯示瞭如何更新 applicationId

    點擊查看大圖

  4. 打開 IBM_AppDelegate.m 並添加對使用 Cloud 代碼的支持。添加一個新的 #import 語句和 IBM_AppDelegate() 接口,並初始化 IBMCloudCode 服務。在完成現有 IBMData 初始化後立即添加 IBMCloudCode 初始化。
    #import "IBM_AppDelegate.h"
    #import <IBMBluemix/IBMBluemix.h>
    #import <IBMData/IBMData.h>
    #import <IBMCloudCode/IBMCloudCode.h>
                                    
    @interface IBM_AppDelegate ()
    @end
                                    
    @implementation IBM_AppDelegate
                                    
    ...
                                    
    if(hasValidConfiguration){
        // Initialize the SDK and BlueMix services
        [IBMBluemix initializeWithApplicationId:applicationId
            andApplicationSecret:applicationSecret
                andApplicationRoute:applicationRoute];
        [IBMData initializeService];
        [IBMCloudCode initializeService];
    }else{
        [NSException raise:@"InvalidApplicationConfiguration" format:@"%@", errorMessage]
    }
  5. 將您的修改保存到 IBM_AppDelegate.m。
  6. 打開 IBM_ListViewController.m 進行多項代碼修改。爲 IBMCloudCode 添加一個新的 #import 語句,並添加一些新的屬性來引用 IBMCloudCode 服務和 Twilio 文本消息。
    #import "IBM_ListViewController.h"
    #import "IBM_CreateEditItemViewController.h"
    #import "IBM_Item.h"
    #import <IBMCloudCode/IBMCloudCode.h>
    
    ...
    
    // If edit was triggered, the cell being edited.
    @property UITableViewCell *editedCell;
    
    @property IBMCloudCode *cloudCodeService;
    @property NSDictionary *jsonDict;
    @property NSString *twilioText;
    
    @property NSData *jsonData;
  7. 添加代碼來初始化 IBMCloudCode 服務,然後從 bluelist.plist 文件中讀取 Twilio 文本消息。

    點擊查看代碼清單

  8. 更新 createItemupdateItem 和 deleteItem 方法,以便調用我們的服務器端的雲模塊。請注意,在 bluelist.plist 文件中定義的 twilioTextMessage 是通過 POST 請求上的 JSON 對象進行傳遞的。還要注意的是,我們正在利用 Bolts 鏈來調用雲代碼。
    - (void) createItem:(IBM_Item*) item
    {
        [self.itemList addObject: item];
        [self reloadLocalTableData];
        //save the new item and then notify other devices via cloud code for twilio notifications
        [[[item save] continueWithSuccessBlock:^id(BFTask *task) {
            return [self.cloudCodeService post:@"notifyOtherDevices" withJsonPayload: self.jsonDict];
        }] continueWithBlock:^id(BFTask *task) {
            if(task.error) {
                NSLog(@"createItem failed with error:%@", task.error);
            }
            return nil;
        }];
        
    }
    - (void) updateItem:(IBM_Item*) item
    {
        self.editedCell.textLabel.text = item.name;
        //save the updated item and then notify other devices via cloud code for twilio notifications
        [[[item save] continueWithSuccessBlock:^id(BFTask *task) {
            NSLog(@"in continueWithSuccessBlock");
            return [self.cloudCodeService post:@"notifyOtherDevices" withJsonPayload: self.jsonDict];
        }] continueWithBlock:^id(BFTask *task) {
            NSLog(@"in continueWithBlock");
            if(task.error) {
                NSLog(@"updateItem failed with error:%@", task.error);
            }
            return nil;
        }];
        
    }
    
    -(void) deleteItem:(IBM_Item*) item
    {
        [self.itemList removeObject: item];
        [self reloadLocalTableData];
        //delete the item and then notify other devices via cloud code for twilio notifications
        [[[item delete] continueWithSuccessBlock:^id(BFTask *task) {
            return [self.cloudCodeService post:@"notifyOtherDevices" withJsonPayload: self.jsonDict];
        }] continueWithBlock:^id(BFTask *task) {
            if(task.error) {
                NSLog(@"deleteItem failed with error:%@", task.error);
            }
            return nil;
        }];
        
        // Exit edit mode to avoid need to click Done button
        [self.tableView setEditing:NO animated:YES];
    }
  9. 將您的修改保存到 IBM_ListViewController.m。
  10. 現在所有的代碼修改都已完成。

步驟 4. 運行應用程序

現在我們已經完成了代碼更改,您的代碼應該相當於 bluelist-twilio 版本。爲了驗證一切都正常:

  1. 在您的模擬器中運行更新後的代碼。
  2. 添加一些其他列表項。
  3. 在更新購物清單時,檢查您的手機(在 app.js 代碼中輸入爲 toPhone: 號碼的那臺手機)上的 Twilio 文本消息。本圖顯示了您的手機上的 BlueList 更新

結束語

到此爲止,您已經完成了所有操作。通過使用 Bluemix 中提供的 Twilio 服務來擴展這個移動應用程序,您應該瞭解到使用移動雲服務來使用和集成移動數據功能是多麼容易。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章