{"id":23577930,"url":"https://github.com/couchbaselabs/couchdraw","last_synced_at":"2025-05-05T23:32:07.548Z","repository":{"id":50442827,"uuid":"198321001","full_name":"couchbaselabs/CouchDraw","owner":"couchbaselabs","description":"A synchronized drawing app that utilizes Couchbase Sync Gateway and Xamarin to enable shared canvases.","archived":false,"fork":false,"pushed_at":"2019-11-02T23:08:42.000Z","size":5663,"stargazers_count":25,"open_issues_count":1,"forks_count":5,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-31T00:51:10.361Z","etag":null,"topics":["2d-ve","couchbase","couchbase-community","couchbase-lite","couchbase-mobile","couchbase-server","couchbase-sync-gateway","drawing-app","mobile","mobile-app","offline-first","offline-sync","rick-and-morty","skia","skiasharp","sync-gateway","xamarin","xamarin-android","xamarin-forms","xamarin-ios"],"latest_commit_sha":null,"homepage":"https://www.couchbase.com","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/couchbaselabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-23T00:24:31.000Z","updated_at":"2024-10-15T05:14:48.000Z","dependencies_parsed_at":"2022-08-30T18:20:18.226Z","dependency_job_id":null,"html_url":"https://github.com/couchbaselabs/CouchDraw","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/couchbaselabs%2FCouchDraw","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/couchbaselabs%2FCouchDraw/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/couchbaselabs%2FCouchDraw/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/couchbaselabs%2FCouchDraw/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/couchbaselabs","download_url":"https://codeload.github.com/couchbaselabs/CouchDraw/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252592833,"owners_count":21773343,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["2d-ve","couchbase","couchbase-community","couchbase-lite","couchbase-mobile","couchbase-server","couchbase-sync-gateway","drawing-app","mobile","mobile-app","offline-first","offline-sync","rick-and-morty","skia","skiasharp","sync-gateway","xamarin","xamarin-android","xamarin-forms","xamarin-ios"],"created_at":"2024-12-26T22:31:50.572Z","updated_at":"2025-05-05T23:32:07.530Z","avatar_url":"https://github.com/couchbaselabs.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CouchDraw\n\n**CouchDraw** combines the power of [SkiaSharp](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/graphics/skiasharp/), [Xamarin](https://visualstudio.microsoft.com/xamarin/), and [Couchbase](https://www.couchbase.com/) to create a fully synchronized canvas across devices and platforms. This readme will walk you through the steps for getting this app up and running (locally) in under 15 minutes!\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"media/snake.gif\" /\u003e\n\u003c/p\u003e\n\n# Table of Contents\n1. [Overview](#overview)\n2. [Requirements](#requirements)\n3. [Getting Started](#getting-started)\n    1. [Mobile](#installation-mobile)\n    2. [Sync Gateway](#installation-sg)\n    3. [Couchbase Server](#installation-cbs)\n5. [Configuring Couchbase Server for Sync Gateway](#configure-cbs)\n    1. [Create a bucket](#create-bucket)\n    2. [Create a user](#create-user)\n6. [Starting Sync Gateway](#start-sg)\n7. [Mobile Solution Architecture](#mobile-architecture)\n8. [Running the solution](#running) \n9. [Support and Contribution](#support-contribute)\n\n## Overview \u003ca name=\"overview\"\u003e\u003c/a\u003e\n\nCouchDraw is a simple synchronized drawing app powered by:\n\n* An embedded [Couchbase Lite](https://www.couchbase.com/products/lite) database.\n* The synchronization engine of [Sync Gateway](https://www.couchbase.com/products/sync-gateway)\n* A distributed [Couchbase Server](https://www.couchbase.com/products/server) database.\n* The cross-platform mobile solution capabilities of [Xamarin](https://visualstudio.microsoft.com/xamarin/).\n\n## Requirements \u003ca name=\"requirements\"\u003e\u003c/a\u003e\n\nThis project assumes familiarity with building Xamarin, more specifically [Xamarin.Forms](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/), apps using C# and XAML.\n\n* iOS (Xcode 9+)\n* Android (SDK 21+)\n* git (Optional) - this is required if you would prefer to pull the source code from GitHub repo.\n    - Create a [free github account](https://github.com/) if you don’t already have one\n    - git can be downloaded from git-scm.org\n\n## Getting Started \u003ca name=\"getting-started\"\u003e\u003c/a\u003e\n\nCouchDraw is a made of three parts:\n\n* A [Xamarin.Forms](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/) cross-platform mobile solution.\n* [Couchbase Sync Gateway](https://www.couchbase.com/products/sync-gateway) that facilitates the data synchronization between app instances.\n* [Couchbase Server](https://www.couchbase.com/products/server) which functions as the distributed database that houses CouchDraw's canvas data.\n\nBefore jumping into the details here's TLDR; steps for getting this app up and running:\n\n1. Pull down this repository.\n2. [Install Sync Gateway](#installation-sg)\n3. [Install Couchbase Server](#installation-cbs)\n4. [Configure Couchbase Server](#configure-cbs)\n5. [Start Sync Gateway](#start-sg)\n6. [Build and run the app](#running)\n\n### Mobile \u003ca name=\"installation-mobile\"\u003e\u003c/a\u003e\n\nAfter pulling down this repository no additional installation is needed to build the [solution file](src/xamarin/CouchDraw.sln).\n\nWithin the solution there are several notable Nuget packages that have been referenced and will be installed upon opening the solution within an IDE (i.e. Visual Studio).\n\n* [Couchbase.Lite](https://www.nuget.org/packages/Couchbase.Lite/)\n* [Couchbase.Lite.Mapping](https://www.nuget.org/packages/Couchbase.Lite.mapping/)\n* [SkiaSharp](https://www.nuget.org/packages/SkiaSharp/)\n* [Robo.Mvvm](https://www.nuget.org/packages/Robo.Mvvm/)\n\n### Couchbase Sync Gateway \u003ca name=\"installation-sg\"\u003e\u003c/a\u003e\n\nSync Gateway is the synchronization server in a Couchbase Mobile deployment.\n\nSync Gateway is designed to provide data synchronization for large-scale interactive web, mobile, and IoT applications. Commonly used features include:\n\n* User authentication, ensuring that only authorized users can connect to Sync Gateway (see user [authentication guide](https://docs.couchbase.com/sync-gateway/current/authentication.html)).\n\n* Access Control, guaranteeing that only relevant documents are synced. Sync Gateway accomplishes this by examining document and applying business logic to decide whether to assign the documents to channels. Access control and ensuring that only relevant documents are synced are achieved through the use of channels and the [Sync Function](https://docs.couchbase.com/sync-gateway/current/sync-function-api.html).\n\n#### Installation\n\nDownload the latest Sync Gateway 2.x installer from [Downloads](https://www.couchbase.com/downloads#couchbase-mobile) page. Be sure to select the \"Mobile\" tab.\n\n#### Settings\n\nTo learn more about how to modify the Sync Gateway configuration file please see the documentation [here](https://docs.couchbase.com/sync-gateway/current/config-properties.html).\n\n### Couchbase Server \u003ca name=\"installation-cbs\"\u003e\u003c/a\u003e\n\nCouchbase Server is an open source, distributed, NoSQL document-oriented engagement database. It exposes a fast key-value store with managed cache for sub-millisecond data operations, purpose-built indexers for fast queries and a powerful query engine for executing SQL-like queries. \n\n#### Installation\n\nTo install Couchbase Server please follow the instructions [here](https://docs.couchbase.com/server/6.0/getting-started/start-here.html).\n\n**Note:** I advise installing Couchbase Server _manually_ to start. If you install using Docker you will need to ensure that both Sync Gateway and Couchbase Server are running on the same Docker Host, and then you'll need to configure accordingly. You can find more instructions using Docker [here](https://blog.couchbase.com/using-docker-with-couchbase-mobile/).\n\n#### Starting Couchbase Server\n\nOnce Couchbase Server has been installed simply navigate to where it has been installed and start \"Couchbase Server\".\n\nTo start Couchbase Server using Docker please see the documentation [here](https://docs.couchbase.com/server/6.0/getting-started/do-a-quick-install.html).\n\n#### Accessing Couchbase Server\n\nCouchbase Server can be accessed using\n * [CLI](https://docs.couchbase.com/server/6.0/cli/cli-intro.html)\n * [API](https://docs.couchbase.com/server/6.0/rest-api/rest-intro.html)\n * An [administration (web) portal](https://docs.couchbase.com/server/6.0/getting-started/look-at-the-results.html)\n\n## Configuring Couchbase Server for Sync Gateway \u003ca name=\"configure-cbs\"\u003e\u003c/a\u003e\n\nOnce Couchbase Server has been started navigate to the admin portal at **http://localhost:8091**.\n\n**Note:** Because CouchDraw is a simple demo app you're only going to be using [one node within a single cluster](https://docs.couchbase.com/server/6.0/learn/architecture-overview.html). \n\n### Create a bucket \u003ca name=\"create-bucket\"\u003e\u003c/a\u003e\n\nCouchbase uses [buckets](https://docs.couchbase.com/server/5.5/understanding-couchbase/buckets-memory-and-storage/buckets.html) to group collections of keys and values logically. Simply put, documents are stored in buckets, and you're going to need a bucket to store CouchDraw documents in.\n\nTo create a bucket that can be accessed by Sync Gateway and the embedded Couchbase Lite database do the following:\n\n1. Within the Couchbase Server admin portal click \"Buckets\", located on the left hand navigation menu.\n\n    \u003cimg src=\"media/buckets.png\" width=\"200px\" /\u003e\n\n2. Click \"Add Bucket\".\n\n    \u003cimg src=\"media/add_bucket.png\" width=\"200px\" /\u003e\n\n3. Fill in the details with the following. \n\n    \u003cimg src=\"media/add_bucket_dialog.png\" width=\"600px\" /\u003e\n\n    **Note:** The Sync Gateway JSON configuration file that is included in the repo currently has a username of \"couchdraw_user\" and a password of \"password\". The key here is that whatever is in the Sync Gateway configuration file needs to be the same as the user you create in Couchbase Server in order to allow application access. \n\n### Create a user \u003ca name=\"create-user\"\u003e\u003c/a\u003e\n\nIn order for Sync Gateway to access the \"couchdraw\" bucket we need to create a user for it to use with the appropriate permissions. To do that you'll need to create a new users with the following steps.\n\n1. Click \"Security\", located on the left hand navigation menu.\n\n    \u003cimg src=\"media/security.png\" width=\"200px\" /\u003e\n\n2. Click \"Add User\"\n\n    \u003cimg src=\"media/add_user.png\" width=\"200px\" /\u003e\n\n3. Once the dialog is displayed, do the following:\n\n    * Add a username.\n    * Add a password.\n    * Select \"Read-Only Admin\" access under the \"Administration \u0026 Global Roles\" section.\n    * Select \"Application Access\" under the \"couchdraw\" section. \n\n    \u003cimg src=\"media/add_user_dialog.png\" width=\"600px\" /\u003e\n\n    **Note:** The Sync Gateway JSON configuration file that is included in the repo currently has a username of \"**couchdraw_user**\" and a password of \"**password**\". The key here is that whatever is in the Sync Gateway configuration file needs to be the same as the user you create in Couchbase Server in order to allow application access. \\\n\n## Starting Sync Gateway \u003ca name=\"start-sg\"\u003e\u003c/a\u003e\n\nAfter Couchbase Server is running and configured for CouchDraw you'll need to start Sync Gateway. To start Sync Gateway execute the following command. \n\n```bash\n~/where-you-installed-sync-gateway/couchbase-sync-gateway/bin/sync_gateway ~/path/to/basic-sync-function.json\n```\n\n**Note:** \"basic-sync-function.json\" is included within the repo [here](src/basic-sync-function.json).\n\nWhen Sync Gateway initially starts and accesses Couchbase Server it will create a variety of indexes on the \"couchdraw\" bucket. \n\n\u003cimg src=\"media/indexes.png\" width=\"600px\" /\u003e\n\n## Mobile Solution Architecture \u003ca name=\"mobile-architecture\"\u003e\u003c/a\u003e\n\nAs mentioned before, CouchDraw is a Xamarin.Forms solution. Now that you've pulled down the project you can open it in your favorite IDE. You'll notice that the solution contains six projects:\n\n1. [**CouchDraw**](src/xamarin/CouchDraw/CouchDraw.csproj): The main Xamarin.Forms project.\n2. [**CouchDraw.Core**](src/xamarin/CouchDraw.Core/CouchDraw.Core.csproj): A .NET Standard project containing ViewModels and Repository interfaces.\n3. [**CouchDraw.Models**](src/xamarin/CouchDraw.Models/CouchDraw.Models.csproj): A .NET Standard project that containing domain models.\n4. [**CouchDraw.Repositories**](src/xamarin/CouchDraw.Repositories/CouchDraw.Repositories.csproj): A .NET Standard project containing the repositories and database managers used for integrating with Couchbase Lite and Sync Gateway.\n5. [**CouchDraw.iOS**](src/xamarin/CouchDraw.iOS/CouchDraw.iOS.csproj): The Xamarin.iOS platform project.\n6. [**CouchDraw.Android**](src/xamarin/CouchDraw.Android/CouchDraw.Android.csproj): The Xamarin.Android platform project.\n\n## Running the solution \u003ca name=\"running\"\u003e\u003c/a\u003e\n\nNow that Couchbase Server has been configured and Sync Gateway is running you're ready to build and run the app!\n\nBy default the app is set up to run locally, but it can certainly be configured to point to external instance of Sync Gateway and Couchbase Server as well. \n\nThe connection information for Sync Gateway resides in [DatabaseManager.cs](src/xamarin/CouchDraw.Repositories/DatabaseManager.cs).\n\n```C#\n// Note: User 'localhost' or '127.0.0.1' when using a simulator \nreadonly Uri _remoteSyncUrl = new Uri(\"ws://localhost:4984\");\n\n// Note: Use '10.0.2.2' when using an emulator\n//readonly Uri _remoteSyncUrl = new Uri(\"ws://10.0.2.2:4984\");\n```\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"media/N1QL_Rick.gif\" /\u003e\n\u003c/p\u003e\n\n## Support and Contribution \u003ca name=\"support-contribute\"\u003e\u003c/a\u003e\n\nThanks so much for taking a look at CouchDraw! This is a very simple example, and there's a lot of potential for customization. Please feel free to contribute to this project. Here are a couple of ideas for features to add:\n\n- Replacing the color buttons with a range slider for color selection.\n- Adding the ability to change the line thickness.\n- Adding the ability to erase lines that have been drawn.\n\nIf you have any questions, comments, or would like to contribute to this projects please reach out to me directly at robert.hedgpeth@couchbase.com or on [Twitter](https://twitter.com/probablyrealrob).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcouchbaselabs%2Fcouchdraw","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcouchbaselabs%2Fcouchdraw","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcouchbaselabs%2Fcouchdraw/lists"}