My 1st Evo (Mini) App

Learn the skills required for building a Dash Evolution (Mini) App — we’re empowering all Builders to dream BIG!

A digital image of an Evo Platform mobile device.

Introduction

Welcome to this comprehensive tutorial on building an Evo (Mini) App using Dash Drive and DAPI. This guide will walk you through the process of creating a simple to-do list application, covering everything from setting up your development environment to deploying your app. By the end of this tutorial, you’ll have a fully functional evo app that you can expand upon.

The MOST practical way to becoming a Web Builder is to start by building something that YOU value, but that also delivers value to others.

Prerequisites

Before you begin, ensure you have the following:

  1. Basic knowledge of HTML, CSS, and JavaScript.
  2. Node.js and npm installed on your local machine. You can download them from nodejs.org.
  3. A registered Dash Platform Identity.

Step 1: Set Up Your Project

  1. Create a new directory for you project and navigate into it:
mkdir todo-app
cd todo-app
  1. Initialize a new Node.js project:
npm init -y
  1. Install necessary dependencies:
npm install evoapp

Step 2: Create the HTML Structure

Create an index.html file in your project directory with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List Evo App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div>
        <h1>To-Do List</h1>
        <input type="text" id="todo-input" placeholder="Add a new task">
        <button id="add-todo">Add Task</button>
        <ul id="todo-list"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

Step 3: Style Your App

Create a style.css file in your project directory and add some basic styling:

body {
    /* TBD */
}

.container {
    /* TBD */
}

h1 {
    text-align: center;
}

input[type="text"] {
    /* TBD */
}

button {
    /* TBD */
}

button:hover {
    /* TBD */
}

ul {
    list-style: none;
    padding: 0;
}

li {
    /* TBD */
}

li button {
    /* TBD */
}

li button:hover {
    background-color: #c82333;
}

Step 4: Add Interactivity with JavaScript

Create a script.js file in your project directory and add the following JavaScript code:

document.addEventListener('DOMContentLoaded', () => {
    const todoInput = document.getElementById('todo-input')
    const addTodoButton = document.getElementById('add-todo')
    const todoList = document.getElementById('todo-list')

    addTodoButton.addEventListener('click', addTodo)

    async function addTodo() {
        // TBD
    }

    async function displayTodo() {
        // TBD
    }

    async function fetchTodos() {
        // TBD
    }

    /**
     * fetchTodos
     *
     * Here we CALL the function that we defined just above.
     *
     * We do not need to provide any parameters; and we are not concerned about
     * any value getting returned from this function call.
     */
    fetchTodos()
})

Step 5: Set Up the Evo App SDK

  1. Connect to Evo Builder Studio with your Identity

  2. Navigate to SQL Editor and create a new table for your todos:

create table todos (
    id serial primary key,
    text text not null
)
  1. Go to the API section of your DAPI project to get your API URL, API key, and anon key. Replace the placeholders in your script.js file with these values.

Step 6: Deploy with Evo Builder Studio

  1. Push your code to a Git repository. You can use GitHub, GitLab, or Bitbucket.

  2. Connect to your Studio account and create a new site from Git.

  3. Connect your Git repository and follow the prompts to deploy your site.

Step 7: Test Your Evo (Mini) App

Once your site is deployed, open it in your browser and test adding, viewing and deleting todos. Your app should now be fully functional!

Conclusion

Congratulations! You’ve built a mini to-do list evo app using Dash Drive and DAPI. This tutorial covered the basics of setting up a project, creating a simple UI, interacting with a Data Contract, and deploying your app. From here, you can expand your app by adding features like user authentication, task completion status, or even a more complex UI. Happy building!

Storing Your Data in the Cloud

You will certainly want to make sure you can store data long-term. For that we are going to utilize Dash Drive.

Dash Drive is a Layer-2 component that provides decentralized storage hosted by Masternodes. As data changes over time, Drive maintains a record of the current state of each item to support easy retrieval using DAPI.

Managing Your Secrets

For some applications, you may have data that you DO NOT want shared publicly. This could API keys to paid accounts, or even private keys to crypto wallets.

In this section, we will learn how to manage your SECRETS.

What are Edge functions?

An Edge function performs a single task, e.g. retrieving a list of registered users.

These functions run “in the cloud”, which is why they are referred to as being on the “Edge”.

A simple Edge function would be

getUserList() {
    const users = await EvoApp.fetch('https://my-1st-evo-mini-app.netlify.app/v1/users')
        .catch((err) => {
            if (err) {
                console.error('User List Error:', err)
            }
        })
}

Related Guides