{"_id":"576d42354bcd290e00428948","category":{"_id":"576d42354bcd290e00428946","__v":0,"version":"576d42354bcd290e00428941","project":"56a526d4e7a1622b0024fae4","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-02-16T13:36:01.427Z","from_sync":false,"order":3,"slug":"guides","title":"Guides"},"version":{"_id":"576d42354bcd290e00428941","project":"56a526d4e7a1622b0024fae4","__v":1,"createdAt":"2016-06-24T14:22:45.076Z","releaseDate":"2016-06-24T14:22:45.076Z","categories":["576d42354bcd290e00428942","576d42354bcd290e00428943","576d42354bcd290e00428944","576d42354bcd290e00428945","576d42354bcd290e00428946","576d42354bcd290e00428947"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"2.0.0","version":"2"},"user":"56703859e10ecb0d0004eebb","__v":5,"project":"56a526d4e7a1622b0024fae4","parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-02-16T13:36:16.149Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":0,"body":"This guide walks you through the Chirp Text Messenger app which is included in our [iOS SDK download](https://admin.chirp.io/sign_up/create_profile). \n\nChirp Text Messenger uses the Chirp API to send text messages between devices. Since these messages are longer strings of UTF8 text, they are too long to send acoustically (i.e. encoded in the identifier) within the 50 bit limit of our standard product's chirp.\n\nThis demo shows how larger packages of data can be sent over the network while using our SDK.\n\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Setup\"\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/wlInQUCVT7SDV562UmEt_Screenshot%202016-02-18%2012.01.14.png\",\n        \"Screenshot 2016-02-18 12.01.14.png\",\n        \"1124\",\n        \"756\",\n        \"#3eb0f5\",\n        \"\"\n      ],\n      \"caption\": \"the iOS SDK download folder layout\"\n    }\n  ]\n}\n[/block]\nIt's probably easiest if you have that open as we go - if you do not already have a copy you can download or apply to become a Chirp developer [here](https://admin.chirp.io).\n\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/36DriDyETXmAGe2Xbdk0_Screenshot%202016-07-01%2008.53.06.png\",\n        \"Screenshot 2016-07-01 08.53.06.png\",\n        \"1920\",\n        \"1274\",\n        \"#45be7a\",\n        \"\"\n      ],\n      \"sizing\": \"smart\",\n      \"caption\": \"The ChirpSimpleTextMessenger Xcode project\"\n    }\n  ]\n}\n[/block]\nThe first thing we need to do is insert your app key and secret to uniquely identify your app on our systems. Get your key and secret [here](https://admin.chirp.io).\n\nOnce you have them, insert them in the correct lines of ViewController.m\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/3GJ9guwpSKWMLeZl2wXF_Screenshot%202016-07-01%2008.53.35.png\",\n        \"Screenshot 2016-07-01 08.53.35.png\",\n        \"1166\",\n        \"252\",\n        \"#6a86c9\",\n        \"\"\n      ],\n      \"caption\": \"Replace your app key and secret at the top of the ViewController.m source file.\"\n    }\n  ]\n}\n[/block]\nAt this point, you should be able to build and run the app in the simulator or attached device by pressing `⌘R`\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/ouwXKRTSdNpUWlnVC1Qy_Screenshot%202016-02-18%2011.59.24.png\",\n        \"Screenshot 2016-02-18 11.59.24.png\",\n        \"423\",\n        \"686\",\n        \"#804c30\",\n        \"\"\n      ],\n      \"caption\": \"You should be able to run this simple single-screen app.\"\n    }\n  ]\n}\n[/block]\nYou can run the app on both the simulator and an attached device, or two devices if you have them. This will allow you to chirp messages between the two apps:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/zhpNd39eTCEAjqTOgnoZ_Desktop%20HD.png\",\n        \"Desktop HD.png\",\n        \"1410\",\n        \"855\",\n        \"#7c6c19\",\n        \"\"\n      ],\n      \"caption\": \"chirping messages between two apps.\",\n      \"sizing\": \"full\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"How it works\"\n}\n[/block]\n# Sending the message\n\nThe Messenger app uses a very simple schema for sending the `message` data over the Chirp API.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"NSDictionary *data = :::at:::{ @\\\"text\\\" : self.textViewSender.text };\",\n      \"language\": \"objectivec\"\n    }\n  ]\n}\n[/block]\nHere we construct a simple dictionary with one key-value pair. We set the content of the viewController's UITextView as the value for the key `text`. This key is what we will lookup when we receive a chirp on the second device.\n\nWhen we have the data dictionary ready to send, we pass it to the Chirp SDK to complete the uploading of our data and chirping over the loudspeaker. This is as simple as calling `chirpDictionary:withCompletion` with our data dictionary:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"[Chirp createChirpWithAssociatedData:data \\n \\t\\t\\t\\t\\t\\t\\t\\t withCompletion:^(Chirp *chirp, NSError *error){\\n                   \\n        NSLog(@\\\"Shortcode is %@\\\", chirp.shortcode);\\n                   \\n}];\",\n      \"language\": \"objectivec\"\n    }\n  ]\n}\n[/block]\nThe whole send message method can thus be called every time the yellow chirp button is pressed:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"- (IBAction)sendMessage\\n{\\n    /*------------------------------------------------------------------------------\\n     * Construct a dictionary of data to send.\\n     *\\n     * The Chirp SDK can send any arbitrary dictionary of NSString, NSNumber,\\n     * NSArray and NSDictionary objects.\\n     *----------------------------------------------------------------------------*/\\n    NSDictionary *data = @{ @\\\"text\\\" : self.textViewSender.text };\\n\\n    /*------------------------------------------------------------------------------\\n     * Chirp the information.\\n     * This takes place in two steps:\\n     *  - the data is transmitted to the Chirp API server, which assigns it\\n     *    a unique identifier;\\n     *  - this identifier is played as audio.\\n     *----------------------------------------------------------------------------*/\\n    [Chirp createChirpWithAssociatedData::data withCompletion:^(Chirp *chirp, NSError *error)\\n    {\\n        NSLog(@\\\"Shortcode is %@\\\", chirp.shortcode);\\n    }];\\n}\\n\",\n      \"language\": \"objectivec\"\n    }\n  ]\n}\n[/block]\n# Receiving the message\n\nReceiving the message is just as simple.\n\nWe use the `startListening:` completion handler to parse any chirps that we hear and handle any errors that occur during transmission.\n\nIf a chirp is successfully heard and its associated data attached, the `data` property of the chirp will include the origin dictionary of key-value pairs that we created in the last section - we simply set this value for the text in our `textViewReceiver`.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"    [[ChirpSDK sdk] setChirpHeardBlock:^(Chirp *chirp, NSError *error)\\n    {\\n        if (!error && chirp)\\n        {\\n            [chirp fetchAssociatedDataWithCompletion:^(Chirp *chirp, NSError *error) {\\n                NSDictionary *data = [chirp data];\\n                NSString *body = data[@\\\"text\\\"];\\n                self.textViewReceiver.text = body;\\n            }];\\n\\n        }\\n        else\\n        {\\n            NSLog(@\\\"Error: %@\\\", error);\\n        }\\n    }];\",\n      \"language\": \"objectivec\"\n    }\n  ]\n}\n[/block]","excerpt":"A walkthrough of a simple 'online' Chirp app.","slug":"ios-online-walkthrough","type":"basic","title":"iOS Online Walkthrough"}

iOS Online Walkthrough

A walkthrough of a simple 'online' Chirp app.

This guide walks you through the Chirp Text Messenger app which is included in our [iOS SDK download](https://admin.chirp.io/sign_up/create_profile). Chirp Text Messenger uses the Chirp API to send text messages between devices. Since these messages are longer strings of UTF8 text, they are too long to send acoustically (i.e. encoded in the identifier) within the 50 bit limit of our standard product's chirp. This demo shows how larger packages of data can be sent over the network while using our SDK. [block:api-header] { "type": "basic", "title": "Setup" } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/wlInQUCVT7SDV562UmEt_Screenshot%202016-02-18%2012.01.14.png", "Screenshot 2016-02-18 12.01.14.png", "1124", "756", "#3eb0f5", "" ], "caption": "the iOS SDK download folder layout" } ] } [/block] It's probably easiest if you have that open as we go - if you do not already have a copy you can download or apply to become a Chirp developer [here](https://admin.chirp.io). [block:image] { "images": [ { "image": [ "https://files.readme.io/36DriDyETXmAGe2Xbdk0_Screenshot%202016-07-01%2008.53.06.png", "Screenshot 2016-07-01 08.53.06.png", "1920", "1274", "#45be7a", "" ], "sizing": "smart", "caption": "The ChirpSimpleTextMessenger Xcode project" } ] } [/block] The first thing we need to do is insert your app key and secret to uniquely identify your app on our systems. Get your key and secret [here](https://admin.chirp.io). Once you have them, insert them in the correct lines of ViewController.m [block:image] { "images": [ { "image": [ "https://files.readme.io/3GJ9guwpSKWMLeZl2wXF_Screenshot%202016-07-01%2008.53.35.png", "Screenshot 2016-07-01 08.53.35.png", "1166", "252", "#6a86c9", "" ], "caption": "Replace your app key and secret at the top of the ViewController.m source file." } ] } [/block] At this point, you should be able to build and run the app in the simulator or attached device by pressing `⌘R` [block:image] { "images": [ { "image": [ "https://files.readme.io/ouwXKRTSdNpUWlnVC1Qy_Screenshot%202016-02-18%2011.59.24.png", "Screenshot 2016-02-18 11.59.24.png", "423", "686", "#804c30", "" ], "caption": "You should be able to run this simple single-screen app." } ] } [/block] You can run the app on both the simulator and an attached device, or two devices if you have them. This will allow you to chirp messages between the two apps: [block:image] { "images": [ { "image": [ "https://files.readme.io/zhpNd39eTCEAjqTOgnoZ_Desktop%20HD.png", "Desktop HD.png", "1410", "855", "#7c6c19", "" ], "caption": "chirping messages between two apps.", "sizing": "full" } ] } [/block] [block:api-header] { "type": "basic", "title": "How it works" } [/block] # Sending the message The Messenger app uses a very simple schema for sending the `message` data over the Chirp API. [block:code] { "codes": [ { "code": "NSDictionary *data = @{ @\"text\" : self.textViewSender.text };", "language": "objectivec" } ] } [/block] Here we construct a simple dictionary with one key-value pair. We set the content of the viewController's UITextView as the value for the key `text`. This key is what we will lookup when we receive a chirp on the second device. When we have the data dictionary ready to send, we pass it to the Chirp SDK to complete the uploading of our data and chirping over the loudspeaker. This is as simple as calling `chirpDictionary:withCompletion` with our data dictionary: [block:code] { "codes": [ { "code": "[Chirp createChirpWithAssociatedData:data \n \t\t\t\t\t\t\t\t withCompletion:^(Chirp *chirp, NSError *error){\n \n NSLog(@\"Shortcode is %@\", chirp.shortcode);\n \n}];", "language": "objectivec" } ] } [/block] The whole send message method can thus be called every time the yellow chirp button is pressed: [block:code] { "codes": [ { "code": "- (IBAction)sendMessage\n{\n /*------------------------------------------------------------------------------\n * Construct a dictionary of data to send.\n *\n * The Chirp SDK can send any arbitrary dictionary of NSString, NSNumber,\n * NSArray and NSDictionary objects.\n *----------------------------------------------------------------------------*/\n NSDictionary *data = @{ @\"text\" : self.textViewSender.text };\n\n /*------------------------------------------------------------------------------\n * Chirp the information.\n * This takes place in two steps:\n * - the data is transmitted to the Chirp API server, which assigns it\n * a unique identifier;\n * - this identifier is played as audio.\n *----------------------------------------------------------------------------*/\n [Chirp createChirpWithAssociatedData::data withCompletion:^(Chirp *chirp, NSError *error)\n {\n NSLog(@\"Shortcode is %@\", chirp.shortcode);\n }];\n}\n", "language": "objectivec" } ] } [/block] # Receiving the message Receiving the message is just as simple. We use the `startListening:` completion handler to parse any chirps that we hear and handle any errors that occur during transmission. If a chirp is successfully heard and its associated data attached, the `data` property of the chirp will include the origin dictionary of key-value pairs that we created in the last section - we simply set this value for the text in our `textViewReceiver`. [block:code] { "codes": [ { "code": " [[ChirpSDK sdk] setChirpHeardBlock:^(Chirp *chirp, NSError *error)\n {\n if (!error && chirp)\n {\n [chirp fetchAssociatedDataWithCompletion:^(Chirp *chirp, NSError *error) {\n NSDictionary *data = [chirp data];\n NSString *body = data[@\"text\"];\n self.textViewReceiver.text = body;\n }];\n\n }\n else\n {\n NSLog(@\"Error: %@\", error);\n }\n }];", "language": "objectivec" } ] } [/block]