Set up.

Configure.

Show the list of tasks.

Edit tasks.

Review your app.

Before getting started, you will need the latest version of Xcode and Visual Studio 2022 for Mac.

Once the Visual Studio installer is complete, launch Visual Studio and open the Preferences dialog (Visual Studio menu -> Preferences..., or the ⌘, keyboard shortcut).

Navigate to the Build and Debug -> SDK Locations -> .NET Core section on the left. Under .NET Core Command Line browse to or enter the following in the Location: box:

Finally, add the following lines to your AppName.csproj file:

Open Visual Studio and click File > New Project under IOS select App and then Single View App. Make sure language is C#

Fill out the information on the form similar to the screenshot below. These are recommended values however they are not crucial to complete this tutorial:

And finally click Continue and select a directory to create the application.

Follow the instructions on the Installation page for C# to use Package Manager or .NET CLI.

Now open Tasks.csproj.

First import Ditto with using DittoSDK.

Next, we'll need to hold a reference to our Ditto instance.

After the app has finished launching we will add a working directory. Currently, Xamarin.iOS apps need to provide a working directory inside the app's sandbox. Without this, the default directory used by the SDK won't be writable and an exception will be thrown.

Construct an instance of Ditto with an online playground identity using the APP ID and Playground Token of the app that you just created on the portal.

We are using an .OnlinePlayground setup, which should suffice for this tutorial.

However, you should never deploy this to a production environment.

We want to enable all peer to peer transport configurations.

We will call startSync().

Import Ditto with using DittoSDK.

Add the matching variables public string _id;, public string body;, and public bool isCompleted; to the class.

We will use this to match the document values to to the class.

Add a constructor to Task that takes in a DittoDocument. Parse out the document's keys with Ditto's type safe value accessors. This will safely map all the document's values to the struct's variables that we created in step 1.

Once we set up our user interface, you'll notice that reading these values becomes a bit easier with this added class.

Right-click Main.storyboard and select Open With > Xcode Interface Builder.

This will open up the Xcode application and allow you to design the user interface inside of Xcode using storyboards.

When Xcode opens select the Main file and open it, and then delete the default ViewController.

Open the UI components Library and type "Navigation Controller" into the search. Drag a new Navigation Controller onto the screen. This will create a Navigation Controller and a Root View Controller with a Table View. Select the Navigation Controller and make sure the box Is Initital View Controller is selected.

Open the UI components Library again and type in "Bar Button Item". Drag the button to the top right of the "Root View Controller" screen. Then, select the button, go to the Inspector panel and select the Attributes inspector. Change System Item to Add. This will make the bar button item we just added into a ''+'' Sign.

Select the Root View Controller top bar. Then go to the Inspectors panel and select the identity inspector. We will create a custom class for this View Controller. In the Class section type "TasksTableViewController".

Next, select the Prototype cells and give it an identifier of "taskCell".

Save that file in Xcode, then open the poject up in Visual Studio again. At this point, Visual Studio should have auto generated two files for you. A TasksTableViewController.cs file and a TasksTableViewController.designer.cs file. These are the class files that were created from the TasksTableViewController we created in Xcode.

Open the project up in Xcode again and you should now see two new files added to the project directory. A TasksTableViewController.h file and a TasksTableViewController.m file.

Open the Main.storyboard file. While pressing the control button on your keyboard select the button and drag under the @interface SceneDelegate : UIResponder { } code inside the TasksTableViewController.h file. Fill the information as follows:

Save the file.

First, we need to add some variables that will be created on viewDidLoad of the TasksTableViewController so adjust the class to match this code:

Let's break down what this code does. First, we create the variables needed and then initialize them in ViewWillAppear().

After setting up the variables and starting Ditto, we then use Ditto's key API to observe changes to the database by creating a live-query in the setupTaskList() function. This allows us to set the initial state of the UITableView after the query is immediately run and then subsequently get callbacks for any new data changes that occur locally or that were synced from other devices:

This is a best-practice when using Ditto, since it allows your UI to simply react to data changes which can come at any time given the ad-hoc nature of how Ditto synchronizes with nearby devices. With this in place, we can now add user actions and configure the UITableview to display the tasks.

Look in the TasksTableViewController.design.cs file and you should see [Action ("didClickAddTask:")] partial void didClickAddTask (UIKit.UIBarButtonItem sender);. This is the button we created earlier in Xcode. Now we need to add an action to it.

When we Upsert the new task into the ditto collection then the live query that is observing the collection will be triggered.

Open File->New File-> Empty Class (C#) and name it "TaskTableSource".

Import UIKit with using UIKit.

This class will implement UITableViewSource.

Now we need to get our instance of Ditto and setup the other class variables we will be using.

Implement is the UITableViewSource inherited method  RowsInSection  by checking whether the tasks array is empty. If its not empty then return the number of tasks in the tasks array.

Implement is the UITableViewSource inherited method  GetCell by doing the following:

The next thing to add to our TasksTableSource is the updateTasks method we called earlier.

This method will take a list of Tasks and then assign it to our Tasks array that is used for displaying the tasks.

The last thing that we need to do is to add a way to delete any tasks that we no longer want.

To do so, we will override the CommitEditingStyle method. This method has a default delete value and so we just need to tell the app what to do when the delete is called.

In this case, we want to remove the task document from the Ditto Collection. When we remove that documents the live query we setup earlier will be called and will refresh the UI with the removed task.