GitBook: [lowcoder-org#86] add docs: "DigitalOcean"

Author: Openblocks-docs

docs/.gitbook/assets/Add a library (1) (1) (1).png

@@ -3,6 +3,7 @@
 * [Openblocks overview](README.md)
 * [Self-hosting](self-hosting/README.md)
   * [Access local database or API](self-hosting/access-local-database-or-api.md)
+  * [DigitalOcean](self-hosting/digitalocean.md)
 * [Security](security.md)
 
 ## Data sources

docs/.gitbook/assets/DigitalOcean-1.png

@@ -2,7 +2,7 @@
 
 In Openblocks, event handlers are responsible for collecting and processing events from components and queries, and executing subsequent actions. For example, for a **Button** component, you can add an event handler to trigger the **Run query** action **** in response to the button **Click** event.
 
-<figure><img src="../.gitbook/assets/image (19).png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../.gitbook/assets/image (8) (1).png" alt=""><figcaption></figcaption></figure>
 
 Set event handlers wisely to provide a reactive and responsive user experience (UX). For example, triggering a **get-all** query after **insert-new-data** query finishes enables table automatically refresh.
 
@@ -32,7 +32,7 @@ Running a query can result in success or failure, so queries have two events: **
 
 There are a number of event handler actions available in Openblocks for handling different scenarios. Set them in the **Action** dropdown list in an event handler.
 
-![](<../.gitbook/assets/image (1) (1).png>)
+![](<../.gitbook/assets/image (9) (1).png>)
 
 {% hint style="info" %}
 See [advanced](event-handlers.md#advanced) on this page to know advanced settings.
@@ -48,7 +48,7 @@ Trigger the selected query.
 
 To control a component, select a component in the **Component** dropdown list and call one of its methods in the **Method** dropdown list.
 
-![](<../.gitbook/assets/image (17).png>)
+![](<../.gitbook/assets/image (29).png>)
 
 ### Set temporary state
 

docs/.gitbook/assets/DigitalOcean-10.png

@@ -4,7 +4,7 @@ When building an app, you want to reuse components and queries across different
 
 <figure><img src="../.gitbook/assets/module-1.png" alt=""><figcaption><p>Build a <a href="module.md#demo-a-statistics-module">statistics module</a></p></figcaption></figure>
 
-<figure><img src="../.gitbook/assets/module-2.png" alt=""><figcaption><p>Reuse this module anywhere</p></figcaption></figure>
+<figure><img src="../.gitbook/assets/module-2 (1).png" alt=""><figcaption><p>Reuse this module anywhere</p></figcaption></figure>
 
 ## Module basics
 
@@ -67,7 +67,7 @@ Module inputs are parameters passed to the module from external apps. The suppor
 
 This section guides you through the steps to build a statistics module and reuse it in an app. &#x20;
 
-<figure><img src="../.gitbook/assets/module-2.png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../.gitbook/assets/module-2 (1).png" alt=""><figcaption></figcaption></figure>
 
 1.  Create module inputs:
 
@@ -86,7 +86,7 @@ This section guides you through the steps to build a statistics module and reuse
     <figure><img src="../.gitbook/assets/module-17.png" alt=""><figcaption></figcaption></figure>
 5.  Reuse the module multiple times by passing different input values.&#x20;
 
-    <figure><img src="../.gitbook/assets/module-2.png" alt=""><figcaption></figcaption></figure>
+    <figure><img src="../.gitbook/assets/module-2 (1).png" alt=""><figcaption></figcaption></figure>
 
 #### Input Test
 

docs/.gitbook/assets/DigitalOcean-11.png

@@ -70,23 +70,23 @@ https://unpkg.com/cowsay@1.5.0/build/cowsay.umd.js
 
 Navigate to the left sidebar, click <img src="../.gitbook/assets/image (1) (2).png" alt="" data-size="line"> > **Other** > **Scripts and style** > **Add a library**. Then paste the **cowsay** link here.
 
-<figure><img src="../.gitbook/assets/Add a library (1).png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../.gitbook/assets/Add a library (1) (1) (1).png" alt=""><figcaption></figcaption></figure>
 
 Now you can write code in **JS query** to test its usage with `cowsay.say`:
 
-<figure><img src="../.gitbook/assets/write code in JS query (1).png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../.gitbook/assets/write code in JS query (1) (1).png" alt=""><figcaption></figcaption></figure>
 
 or in component **Properties**:
 
-<figure><img src="../.gitbook/assets/or in Properties (1).png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../.gitbook/assets/or in Properties (1) (1) (1).png" alt=""><figcaption></figcaption></figure>
 
 And since you have set up cowsay just for **Openblocks's new application 1,** you can not use cowsay in another app.
 
-<figure><img src="../.gitbook/assets/in another app (2).png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../.gitbook/assets/in another app (1) (1).png" alt=""><figcaption></figcaption></figure>
 
 ### Import on Workspace-level
 
 Navigate to **Workspace settings** > **Advanced** > **JavaScript library** > **Add a library**. Then paste the **cowsay** link here and click **Save**. Now you can use **cowsay** library **** in any app of your workspace.\
-![](<../.gitbook/assets/Import on  Workspace-level libraries (2).png>)
+![](<../.gitbook/assets/Import on  Workspace-level libraries (1) (1) (1).png>)
 
-<figure><img src="../.gitbook/assets/Import on  Workspace-level libraries-advanced (1) (1).png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../.gitbook/assets/Import on  Workspace-level libraries-advanced (1).png" alt=""><figcaption></figcaption></figure>

docs/.gitbook/assets/DigitalOcean-2.png

@@ -37,7 +37,7 @@ Navigate back to to [Google Sheets](https://docs.google.com/spreadsheets), and f
 1. Open the JSON file of the key.
 2.  Copy the value of `client_email`, which is an identity used for access management of your sheet.
 
-    <figure><img src="../../.gitbook/assets/Google-sheets-key-client-email (1).jpeg" alt=""><figcaption></figcaption></figure>
+    <figure><img src="../../.gitbook/assets/Google-sheets-key-client-email.jpeg" alt=""><figcaption></figcaption></figure>
 3.  Click **Share** at the top right and paste the copied `client_email` value to add a member with access.
 
     <figure><img src="../../.gitbook/assets/Google-sheets-share.jpg" alt=""><figcaption></figcaption></figure>

docs/.gitbook/assets/DigitalOcean-3.png

@@ -15,7 +15,7 @@ Follow the steps below:
 1. Click **Data Sources** on Openblocks homepage.
 2.  Click **New data source** on the upper right. This permission is restricted to workspace admins and developers.
 
-    <figure><img src="../.gitbook/assets/image (12) (1).png" alt=""><figcaption></figcaption></figure>
+    <figure><img src="../.gitbook/assets/image (31) (1).png" alt=""><figcaption></figcaption></figure>
 3.  Select the database or API type you need to connect.&#x20;
 
     <figure><img src="../.gitbook/assets/data source basics-2.png" alt=""><figcaption></figcaption></figure>

docs/.gitbook/assets/DigitalOcean-4.png

@@ -6,7 +6,7 @@ Queries support you to read data from or write data to your data sources. You ca
 
 You can connect to a data source that was already in your data source library or create a new one. For detailed information, see [data-source-basics.md](../data-sources/data-source-basics.md "mention").
 
-<figure><img src="../.gitbook/assets/image (31) (1).png" alt=""><figcaption></figcaption></figure>
+<figure><img src="../.gitbook/assets/image (12) (1).png" alt=""><figcaption></figcaption></figure>
 
 ## Create a query
 

docs/.gitbook/assets/DigitalOcean-5.png

@@ -0,0 +1,59 @@
+# DigitalOcean
+
+You can deploy Openblocks on DigitalOcean using our [Openblocks docker image](https://marketplace.digitalocean.com/apps/openblocks) from the DigitalOcean Marketplace. Based on the pre-built image, you can create a DigitalOcean droplet as your cloud-based infrastructure and set up an Openblocks instance in seconds. [Create a DigitalOcean account](https://cloud.digitalocean.com/registrations/new) or [Log in](https://cloud.digitalocean.com/login) to get started.
+
+## Deploy
+
+1. Search **Openblocks** in DigitalOcean Marketplace or visit [Openblocks page](https://marketplace.digitalocean.com/apps/openblocks) directly.
+2.  Click **Create Openblocks Droplet** to enter the configuring page.
+
+    <figure><img src="../.gitbook/assets/DigitalOcean-1.png" alt=""><figcaption></figcaption></figure>
+3.  Choose the region and datacenter. The closest one to you and your users is recommended.
+
+    <figure><img src="../.gitbook/assets/DigitalOcean-2.png" alt=""><figcaption></figcaption></figure>
+4.  The Openblocks image should already be listed as shown below, so you don't need to choose here.
+
+    <figure><img src="../.gitbook/assets/DigitalOcean-3.png" alt=""><figcaption></figcaption></figure>
+5.  Choose a plan and size for your Droplet, which determines its RAM, disk space, and vCPUs as well as its price. Note that the **Basic** shared CPU with **Regular with SSD (1 GB CPU / 25GB SSD Disk / 1000GB transfer)** CPU option is more than capable of hosting an Openblocks instance.
+
+    <figure><img src="../.gitbook/assets/DigitalOcean-4.png" alt=""><figcaption></figcaption></figure>
+6.  Choose an [SSH key](https://docs.digitalocean.com/products/droplets/how-to/add-ssh-keys/) if you've added one, or create a root password for the Droplet.
+
+    <figure><img src="../.gitbook/assets/DigitalOcean-5.png" alt=""><figcaption></figcaption></figure>
+7.  Set the droplet name, add tags, and click **Create Droplet** to finish the deployment.
+
+    <figure><img src="../.gitbook/assets/DigitalOcean-6.png" alt=""><figcaption></figcaption></figure>
+
+    It usually takes around a minute to start the droplet.
+
+    <figure><img src="../.gitbook/assets/DigitalOcean-7.png" alt=""><figcaption></figcaption></figure>
+
+{% hint style="info" %}
+For more help, see [Droplets | DigitalOcean Documentation](https://docs.digitalocean.com/products/droplets/).
+{% endhint %}
+
+## Sign up
+
+After deployment, your new Openblocks instance should be available at **http://your\_droplet\_public\_ipv4:3000**.
+
+<figure><img src="../.gitbook/assets/DigitalOcean-8.png" alt=""><figcaption></figcaption></figure>
+
+In the welcome page, Click **Sign up** to get started. Openblocks will automatically create a workspace for you. Then you can start building your apps and invite members to your workspace.
+
+<figure><img src="../.gitbook/assets/DigitalOcean-9.png" alt=""><figcaption></figcaption></figure>
+
+## Droplet Web Console
+
+Find the deployed droplet in your [DigitalOcean projects](https://cloud.digitalocean.com/) and redirect to its details page. Click **Console** on the right to enter the Droplet Web Console.
+
+<figure><img src="../.gitbook/assets/DigitalOcean-10.png" alt=""><figcaption></figcaption></figure>
+
+<figure><img src="../.gitbook/assets/DigitalOcean-11.png" alt=""><figcaption></figcaption></figure>
+
+## Update
+
+For information about how to update the Openblocks image to the latest version, see [Update](./#update).
+
+## Customize deployment configurations
+
+For information about how to customize deployment configurations, see [Customize deployment configurations](./#customize-deployment-configurations).

docs/.gitbook/assets/DigitalOcean-6.png

@@ -37,7 +37,7 @@ Group-based management helps to organize members from different functional depar
 
 ### Developers group
 
-Openblocks creates a **Developers** group by default and it cannot be deleted, and workspace admins can add members into it. The members of it can create new apps, modules and data sources. Workspace admins can add members to the developers group.
+Openblocks creates a **Developers** group by default and it cannot be deleted, and workspace admins can add members into it. The members of it can create new resources including apps, modules, navigations, folders, and data sources, and can manage query library. Workspace admins can add members to the developers group.
 
 <figure><img src="../.gitbook/assets/members4.png" alt=""><figcaption></figcaption></figure>