Simple and Synchronized Drawing Apps with Couchbase and Xamarin

Couchbase Mobile contains a robust and powerful embedded NoSQL database, called Couchbase Lite, that can be used within your iOS, Android, and Xamarin apps. The Couchbase Mobile stack also contains Sync Gateway. Sync Gateway enables secure data synchronization across Couchbase Lite enabled clients. Sync Gateway has existed for years, but last year Couchbase Mobile 2.0 officially introduced a brand new web-sockets based replication protocol for data synchronization that is more efficient than its HTTP based predecessor.

While considering all of the changes to Couchbase Mobile, and the recent release of version 2.5, I started thinking about unique ways I could visualize the improvements using an app. I started by nailing down a couple of simple requirements. I wanted the app to:

• Be simple
• Be fun
• Display the power of Couchbase Mobile

Ultimately, I decided to look into what it would take to create an app that involves something we've all likely done as kids, for fun, or when we're just plain bored. Drawing! And what's more fun than drawing? That's right, collaborative drawing!

Getting started

I hadn't created an app that supported real-time drawing before, but I was familiar with a few approaches that might get the job done.  The front-runner for me was a library that has had some buzz around it for a few years; Skia.

Skia is an open source 2D graphics library which provides common APIs that work across a variety of hardware and software platforms. It serves as the graphics engine for Google Chrome and Chrome OS, Android, Mozilla Firefox and Firefox OS, and many other products including mobile. Skia is mostly maintained by Google, but is completely free for anyone to use.

I liked the idea of using Skia to support my touch effect driven drawings, but I wanted to create a cross-platform app. Having more than a few years of Xamarin experience under my belt I was already familiar with SkiaSharp, a .NET-based, cross-platform implementation of Skia.

So, I created a Xamarin.Forms solution, and included the SkiaSharp nuget package. I was impressed, as after only a few lines of code I had a Skia Canvas (SkCanvasView) in my UI (XAML),

<skia:SKCanvasView x:Name="canvasView" PaintSurface="OnCanvasViewPaintSurface" />

and was able to start listening to touch events in my page's code behind.

void OnTouchEffectAction(object sender, TouchActionEventArgs args)
{
    var point = new Models.Point
    {
        X = args.Location.X,
        Y = args.Location.Y
    };

    switch (args.Type)
    {
        case TouchActionType.Pressed:
            ...
            break;
        case TouchActionType.Moved:
            ...
            break;
    }
}

From those events I was able to gather the foundation for 2D vector renderings on a canvas. After all, two dimensional drawings boil down to a core component; a point. A collection of points creates a path, and a collection of paths creates... a drawing.

Huzzah! Now that I was able to capture the points, create paths from those points, and ultimately drawings from those paths, I had the data I needed to share between canvases on separate app instances.

The Power of Couchbase Mobile

As mentioned before, the Couchbase Mobile stack contains both an embedded NoSQL database called Couchbase Lite, and a data synchronization mechanism called Sync Gateway. Combined with the power of Couchbase Server, a distributed JSON based NoSQL database, data can be synchronized to and from the edge.

As many developers have come to realize mobile synchronization (or replication) is not a trivial problem to solve. There are many considerations such as:

• Providing conflict resolution capabilities for documents that can be updated or deleted by multiple users at the same time.
• Creating and maintaining a flexible configuration to adapt to changing needs
• Regulating/controlling access to data through authentication and authorization.
• Limiting the amount of unnecessary data from being replicated between embedded database instances.

Sync Gateway support is fully integrated into Couchbase.Lite and Couchbase.Lite.Enterprise Nuget packages, and you can find more information on how to do so here.

The key to storing data in a document based database centers around how the data is modeled. Luckily, in this app, data modeling was easy. It all came full circle because all I needed to store, via JSON, was a collection of points within collections of paths.

{
    "color": "#000000",
    "createdBy": "cca6ebe8-a713-49ac-bb86-cff0fb095ab2",
    "id": "059fee8c-fbb3-450e-a1f1-61d82a28e68b",
    "points": [
        {
            "type": "point",
            "x": 101.333,
            "y": 339.667
        },
        {
            "type": "point",
            "x": 101.333,
            "y": 340.3333282470703
        }
    ],
    "type": "path"
}

Next, I simply saved the point and path information into the embedded Couchbase Lite database. From there Sync Gateway handles the rest, and, voilà, a shared canvas made simple with Couchbase Mobile!

Introducing CouchDraw

Obviously, I've glossed over some of the nitty-gritty details of app I've been babbling on about, but fear not, I have created a new repository for it! In the new "CouchDraw" repo, along with the source code, I've also included a README with many more details on how to download, configure, and run the solution. Feel free to drop everything you're doing right now and go check it out!

CouchDraw is a very basic app, and, as such, there are many ways it can be improved (This is where you come in). I challenge the mobile and Couchbase community to dive in and expand on CouchDraw's functionality!

Some new feature ideas may include:

• Replacing the color buttons with a range slider for color selection.
• Adding the ability to change the line thickness.
• Adding the ability to erase lines that have been drawn.

Next Steps

Along with extending synchronized drawing support to native iOS and Android, I'll also be integrating Couchbase Mobile's peer-to-peer replication and predictive querying features into CouchDraw. Stay tuned for more posts in this series!