contains a robust and powerful embedded NoSQL database, called , that can be used within your iOS, Android, and apps. The Couchbase Mobile stack also contains . 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 protocol for data synchronization that is more efficient than its HTTP based predecessor. Couchbase Mobile Couchbase Lite Xamarin Sync Gateway brand new web-sockets based replication While considering all of the changes to Couchbase Mobile, and the recent release of , 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: version 2.5 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 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. graphics library 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 , a .NET-based, cross-platform implementation of Skia. SkiaSharp So, I created a solution, and included the SkiaSharp package. I was impressed, as after only a few lines of code I had a Skia Canvas (SkCanvasView) in my UI (XAML), Xamarin.Forms nuget < = = /> skia:SKCanvasView x:Name "canvasView" PaintSurface "OnCanvasViewPaintSurface" and was able to start listening to touch events in my page's code behind. { point = Models.Point { X = args.Location.X, Y = args.Location.Y }; (args.Type) { TouchActionType.Pressed: ... ; TouchActionType.Moved: ... ; } } ( ) void OnTouchEffectAction sender, TouchActionEventArgs args object var new switch case break case 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. ! 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. Huzzah 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 packages, and you can find more information on how to do so . Nuget here The key to storing data in a document based database centers around how the . 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. data is modeled { : , : , : , : [ { : , : , : }, { : , : , : } ], : } "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 for it! In the new " " repo, along with the source code, I've also included a with 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! new repository CouchDraw README many more 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 functionality! CouchDraw CouchDraw's 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 and features into . Stay tuned for more posts in this series! peer-to-peer replication predictive querying CouchDraw
