iOS

iOS Programming with iCloud: An Introduction


Editor’s note: This week, we work with Ziad Tamim again to give you an introduction of iCloud programming. You’ll learn how to save and retrieve data from iCloud.

In this tutorial we are going to talk about iCloud, one of the new features introduced in iOS 5. From user’s perspective, iCloud is a simple feature that allows the access of personal information from all devices wirelessly and automatically via an Apple ID. As an developer, you can use the iCloud API in the iOS SDK to integrate iCloud service in your app.

What is iCloud

Basically, iCloud is a service that helps user synchronize the data across devices. The main purpose is to let users easily put their data, whether it’s a file or document, so that they can access the data on any of their iOS devices. While you can use other cloud services for saving file or data, the core idea behind iCloud is to eliminate explicit synchronization between devices. Apple do not want users to think of the cloud servers and the syncing. Everything simply works seamlessly.

The same design philosophy also applies to developers. When you adopt iCloud, you do not need to know how to interact with the cloud server or upload data to iCloud. The iOS handles all the heavy lifting. Your focus is on the content such as managing the change of data.

iCloud Intro

How iCloud works

Kinds Of Storage

iCloud offers three kinds of iCloud storage:

  • Key-value storage for discrete values, such as preferences, settings, and simple app state.
  • Document storage for user-visible file-based information such as word processing documents, drawings, and complex app state.
  • Core Data storage for multi-device database solutions for structured content. iCloud Core Data storage is built on document storage and employs the same iCloud APIs.

Depending on the type of data you’re working with, you should pick the right kind of storage. In this tutorial we’ll just cover the key-value storage and show you how to build a simple app that saves notes using iCloud. (We will talk about the other kinds of storage in later tutorials).

TamNote App using iCloud

TamNote App

Enabling iCloud

To use iCloud, you first needs to join the Apple Developer Program. If you don’t have one, go and purchase it as it is a prerequisite for using iCloud.

Assuming you have an iOS developer account, we’ll first create the App ID with iCloud feature enabled. Log onto the iOS Provisioning Portal and select the App IDs in the sidebar. Create a New App ID by clicking on the button in the top-right of the page like below:

iOS Provisioning Portal - App ID

iOS Provisioning Portal – App ID

In the next screen, fill in TamNote for the description and com.appcoda.TamNote for the unique identifier.

Creating App ID

Creating App ID

Then, go to the App ID you’ve just created and click on the link configure to enable the iCloud service:

Enable iCloud Feature

Configure iCloud Feature

To enable the iCloud feature, simply check the option Enable for iCloud and click the Done button.

Enabling iCloud Feature

Enabling iCloud Feature

Creating a Simple Note App with iCloud Integration

After preparing the App ID, let’s move onto create the Xcode project. Open Xcode and create a new Project, choose the template Empty Application as shown below.

Create Empty Project

Creating an Empty Project

In the next screen, enter TamNote as the project and set com.appcoda in the company identifier field. Don’t forget to select the “Use Automatic Reference Counting” option. Press next and create.

Xcode Project Setting

Xcode Project Setting

Enabling Entitlements for key-value Storage

Entitlements are key-value pairs that request specific capabilities or security permissions for your app. When the system grants your app entitlements, your app gain access to its iCloud key-value storage.

To use the iCloud key-value storage, first enable entitlements in the Xcode target editor, then select the use store with identifier, it will set automatically the bundle identifier of the app in the input box.

Enable Entitlement for iCloud

Enable Entitlement for iCloud

Designing the User Interface

Editor’s note: If you follow our iOS programming course from the very beginning, you should be very familiar with Storyboard. We encourage you to build the user interface from scratch. However, if you just want to focus on the integration with iCloud, you can skip this section by downloading the Xcode project template and go directly to the “Working with iCloud” section. The template already creates the user interface and view controller classes for you.

The next thing we need to do is to create the Storyboard that defines the views of our app. Navigate to File > New > New File and choose Storyboard in the User Interface template. Click next and select the iPhone device family, click create.

Creating a new Storyboard

Creating a new Storyboard

Also don’t forget to delete all the generated code in the method -(BOOL)application:application didFinishLaunchingWithOptions:launchOptions inside the AppDelegate file. The method should be as simple as this:

Go to Storyboard and create the user interface like below:

Designing App UI

Designing App UI

First, drag a Table View Controller and embed it in a Navigation Controller. Drag a button to the top-right part of navigation bar and set the identifier as “Add”. This will automatically change the button to a “+” button. Next, select the prototype cell and change its style to “Basic”.

Designing Table View

Designing Table View

Drag another Table View Controller and embed it in a Navigation Controller. Next, drag the Bar Button into the navigation bar. Name one as Cancel and the other as Save. Then, select the Table View and set the content to Static Cells. Finally, add one static row to the Table View and add a Text Field as below:

Designing the Add Note View Controller

Designing the Add Note View Controller

This “Add Note View Controller” will be shown when user taps on the “+” button. So press and hold the Control key, click the “+” button and drag towards the “Add Note View Controller”. Select “Modal” as the Segue action.

Connect the + button with Modal Segue action

Connect the + button with Modal Segue action

Creating View Controller Classes

Next, create two new classes to associate with the table view controller. Name one of the class as NoteListViewController and set it as a subclass of UITableViewController. Navigate to the Storyboard, select the Table View Controller of the Notes and associate it with the NoteListViewController class.

Associate with our own view controller class

Assigning our own view controller class

Once done, do the same steps to create another Table View Controller and name it as AddNoteViewController. Lastly, wire up the textfield to AddNoteViewController and create two actions method, so we can Cancel and Save.

Your code in AddNoteViewController.h should like this:

Working With iCloud

We’ve been creating on the previous section the user interface. Now, we are going to implement the main functions of the app, which are:

  • Fetch all notes available on the cloud, and show them into Table View.
  • Delete note from the cloud
  • Add new note and save it to the cloud.

Fetching Notes

The First step that we need to do is to implement the class NoteListViewController, so we can display notes available on the cloud in the table view. Open the NoteListViewController.h and add this property to it:

The purpose of the property is to save notes locally. We’ll display the notes in the table view when needed. Next, we need to make a lazy instantiation of this property. Put the following code in NoteListViewController.m:

This lazy instantiation fetches all the existing notes from iCloud by using the NSUbiquitousKeyValueStore class. The key “AVAILABLE_NOTE” is the key for storing the note array in the cloud. The key-value storage of iCloud is very similar to the local user defaults store. We use NSUserDefault class to deal with the local user defaults store, while for the iCloud key-value store, we use the NSUbiquitousKeyValueStore class for reading and writing property data.

Next, edit the viewDidLoad: method with the code below:

What we are doing here is to add an Edit button in the navigator bar for users to delete certain note. We also add an observer to the controller so we can get notification when the data on the cloud was changed. Any device running the app can upload the key-value changes to the user’s iCloud account. Upon a change received from iCloud, this NSUbiquitousKeyValueStoreDidChangeExternallyNotification will be sent. So to keep track with such key-value changes, we register for the NSUbiquitousKeyValueStoreDidChangeExternallyNotification notification.

To ensure we start off with the latest available notes, we also call up the synchronize method to obtain a fresh copy of key-value pair from the iCloud.

Lastly, we register another observer to handle the “New Note” notification. This notification is a local notification sent when user adds a new note using the “AddNoteViewController”.

Okay, let’s move on to implement the methods that are executed when we get the above notifications:

The didAddNote method will be invoked when user saves a new note. We first retrieve the note newly created by user and add it to the local array, then upload the array to the iCloud. Lastly, we reload the table view to display the new note.

The storeDidChange method will be called when the data is changed in the cloud. Say, when user adds a new note using iPhone, the app in other devices (e.g. iPad) will be notified and call up this method. When there is any update, we simply retrieve latest available note from iCloud again, save it locally and reload the table view to display the notes.

Displaying Notes in Table View

We’ve pretty much completed the iCloud integration. You should be very familiar with this section if you have read through the UITableView tutorial. As we have already retrieved the note saved in iCloud, the rest of the implementation is to display the notes in the table view. In the NoteListViewController.m, add the following code:

The code is pretty straightforward. We just display the notes store in the array in the table view.

Deleting Notes From iCloud

For deleting notes from iCloud, we need to implement this code in the NoteListViewController.m:

When user delete a note from the table view, we remove the selected note from the local array and the selected row from table view. Lastly, we submitted the updated notes array to iCloud.

Adding Notes

Now we come to the last part of the implementation – implementing the AddNoteViewController for adding notes to the cloud. Go to the implementation file of AddNoteViewController and add the code below:

Recalled that we’ve registered the “New Note” notification in the NoteListViewController, here the save method is the sender of the notification. When user taps the save button to save the note, the app posts the “New Note” notification with the newly created note attached. This notification will be picked up by the NoteListViewController and saves the note to the cloud.

Testing the Note App

To test the note app, you have to compile and deploy it onto an actual device. You can’t use the Simulator to test the app as it doesn’t support iCloud. To test the iCloud sync, you can deploy to two devices. Make sure you enable iCloud on both devices. Launch the app, add a note on one device and you’ll see the note appeared on the other device. Here is a demo video to see the app in action:

What’s Coming Next

In this tutorial, we covered the basics of iCloud integration and cover how to save/retrieve data using key-value storage. However, there is a limitation for this type of storage. The total space available in your app’s iCloud key-value storage is 1 MB per user. The maximum number of keys is 1024, and the size limit for each value associated with a key is 1 MB. So if the note contains a very large amount of data, it’ll exceed the iCloud limit.

Therefore, the key-value storage is not suitable for every types of data. Normally, it is best suitable for saving app preferences and app configuration. In the upcoming tutorial, we are going to show you how to save documents using the document storage. Of course, we’ll creating an app to demonstrate the usage.

For your complete reference, you can download the Xcode project from here.

Lastly, let me end the tutorial with an exercise. Try to modify the app by adding a new feature to let user update an existing note. As always, leave me comment and share your thought about the tutorial.

iOS
Building a Search Bar in SwiftUI
Tutorial
Useful Hints To Build A Perfect Design For iPhone Xs
Tutorial
How to Use Git Pull Requests to Improve Code Quality and Developer Participation
  • 망각인간

    Thanks for your lecture.
    🙂


  • mycoolinterview

    Thank you very much for nice post on iCloud introduction with sample demo project.


  • Ravikumar

    RavikumarRavikumar

    Author Reply

    Thank you so much


  • hussein

    husseinhussein

    Author Reply

    thank you for the lecture! very clean. but i have a problem. when i run the app and tap the Add bar button, the app crashes and quits. why is that?


    • hussein

      husseinhussein

      Author Reply

      never mind i had a storyboard problem and i fixed it. Can’t wait for the the core data over icloud lecture! any release date?


  • smarterkey

    smarterkeysmarterkey

    Author Reply

    I have so far managed all your UITableView tutorials successfully. But not this 1 ? Developing in Xcode 4.3.3. for ios5.
    I had xcode problems with -(NSArray *)notes but resolved by @synthesise notes = _notes….OK.

    Also ARC problems with instance of tableView in dequeue of UITableViewCell as if it expected an IBoutlet to be created in StoryBoard?? strange as I set it up as a UITableViewController subclass….any ideas ?


  • Podster

    PodsterPodster

    Author Reply

    Thank you for the great tutorial. I wold love to see an iCloud Core Data tutorial also.


  • Rhez Jovovich

    Just another day worth learning for ,I love all your tutorials, Thumbs up! Thank you very much for this one 😉


    • Simon Ng

      Simon NgSimon Ng

      Author Reply

      Thanks! Glad to hear you love all the tutorials. Keep coming back, we’re working on more amazing tutorials.


  • Darkfire

    DarkfireDarkfire

    Author Reply

    Hello,

    I have learned so much already with your tutorials. One that would be greatly appreciated is adding iCloud to a preexisting application which uses core data using iOS7.

    I have my app written and have people using it and storing data locally, I would like to provide an update for iOS7 users (to take advantage of the easier iCloud integration) to integrate iCloud.


  • Happy Mask

    Happy MaskHappy Mask

    Author Reply

    Hi guy, thanks so much for your tutorial.
    I have a problem with my 2 iphones.

    They’re both iOS 5.1.2
    The TamNote runs the 2 iPhone but it just can work in 1 side.
    When i create or delete a note in iPhone 1, the sync is okay in iPhone 2;
    but in iPhone 2, when i make a new note, iPhone 2 does not sync :”(

    I have check the iCloud enable in 2 iPhone (it’s On)
    Do you have any recommend for this issue ???


  • Apollo

    ApolloApollo

    Author Reply

    How do I do this: ‘Select the Table View Controller of the Notes and associate it with the NoteListViewController class” ?

    Thanks.


  • Kenny

    KennyKenny

    Author Reply

    Great tutorial ! Any idea what data type I should have for selectedDevice? What could be wrong with the script below?
    if ([[segue identifier] isEqualToString:@”UpdateDevice”])
    {
    NSString *selectedDevice = [self.notes objectAtIndex:[[self.tableView indexPathForSelectedRow] row]];
    AddNoteViewController *destViewController = segue.destinationViewController;
    destViewController.note = selectedDevice;
    }


  • Umair Ahmed Sheikh

    Great job


  • VC

    VCVC

    Author Reply

    Pretty good


  • priyank Jotangiya

    Can’t Store Data in iCloud how to Store it can’t see in iCloud.


  • Retro Cube Apps

    This is quite a detailed article which really explains each and every thing about the iOS Programming with iCloud. They both are different but in this post an author show their mutalism.


  • yatendra singh

    All coaches, parents of athletes and athletes, this is a great read!
    Just a small taste of what the article says…What gets lost in the focus on practice is the massive importance of icloud programming. Researcher Jean Cote defines deliberate play as “activities such as backyard soccer betting app or street basketball that are regulated by age-adapted rules and are set up and monitored by the children


  • appdesigner

    This is a amazing video it is useful and some of new ideas after reading this article so many reader writing an article but not deep research this one its impressive keep more update thanks.


  • Variablesoft

    Enjoyed this blog. author is very clear in the explanations. Good overview of adding iCloud support for iOS apps. One thing that would be nice to add is a section on handling file conflicts.


  • Smith

    SmithSmith

    Author Reply

    Amazing blog, in this blog author will explain details information about iCloud support for iOS apps. This is very useful to us thank you for share such amazing content.


  • Tokenncoin

    TokenncoinTokenncoin

    Author Reply

    Nice one this article worth a read. thank you for sharing


  • devender singh shekhawat

    useful and valuable details you shared, thanks for the important blog post. It helped me a lot.


  • Creato Software

    Very informative blog. The author is very clear in the explaining basic concepts. Good overview of adding iCloud support for iOS apps. One thing that would be nice to add is a section on handling file conflicts.


  • word unscrambler

    A creative idea! I want to thank you!


  • Franchise Your Business

    One of the most growing company crewman solution is providing the different services like Certification And Licensing, Digital Marketing Services, Trademark Registration, Franchise Your Business, HR Consultancy, Startup Solution, Certification And Licensing eyc.


Shares