Creating Your First App

Overview

In this guide, we'll walk through the process of creating your first calculator app using Minivolve. By the end, you'll have a functional calculator that you can embed on your website.

Prerequisites

• A Minivolve account (if you don't have one, sign up here)
• Basic understanding of your calculation needs (what inputs you need and what output you want to show)

Step 1: Start a New App

1. Log in to your Minivolve account and navigate to your Dashboard.
2. Click the "Create App" button in the top right corner of your Dashboard.
3. Select "Calculator" from the app type options.
4. Enter basic information:
   • App Name (e.g., "Pricing Calculator")
   • Description (optional but recommended)
5. Click "Create" to enter the app builder interface.

Step 2: Understanding the App Builder Interface

Before adding fields, take a moment to familiarize yourself with the app builder interface:

Step 3: Adding Input Fields

Let's start by adding input fields to collect data from users:

1. From the left panel, locate the "Number" field type and click on it or drag it to the canvas.
2. In the properties panel (right side), configure the field:
   • Set the Label to "Price"
   • Add a placeholder like "Enter price" (optional)
   • Set any default value if needed
   • Configure min/max values if applicable
3. Add a second number field by repeating the process and name it "Quantity".
4. Add a third number field and name it "Tax Rate (%)" with a default value of 10.

Step 4: Adding a Result Field

Now let's add a result field to display the calculated output:

1. From the left panel, find the "Result" field type and add it to your canvas below the input fields.
2. In the properties panel, configure the result field:
   • Set the Label to "Total Cost"
   • Select "Currency" from the format dropdown
   • Set decimal places to 2
3. Click on the "Formula" tab in the properties panel to open the formula editor.
4. Create your formula using the formula editor:
   • Click "Fields" dropdown and select "Price"
   • Click the "*" (multiply) operator
   • Click "Fields" dropdown and select "Quantity"
   • Click the "+" (add) operator
   • Open parentheses "("
   • Click "Fields" dropdown and select "Price"
   • Click the "*" (multiply) operator
   • Click "Fields" dropdown and select "Quantity"
   • Click the "*" (multiply) operator
   • Click "Fields" dropdown and select "Tax Rate (%)"
   • Click the "/" (divide) operator and type "100"
   • Close parentheses ")"

Step 5: Enhancing Your Calculator

Let's add some additional elements to make your calculator more user-friendly:

1. Add a heading field:
   • From the left panel, select "Heading"
   • Place it at the top of your calculator
   • Set the text to "Price Calculator"
   • Choose an appropriate size (H2 recommended)
2. Add a paragraph field:
   • From the left panel, select "Paragraph"
   • Place it below the heading
   • Add a brief description of your calculator
   • Example: "Calculate the total cost including tax for your order."
3. Add a container field to group related items:
   • From the left panel, select "Container"
   • Drag your price and quantity fields into this container
   • In the container properties, add the title "Order Details"
   • Select a background color (optional)

Step 6: Testing Your Calculator

Before publishing, it's important to test your calculator to ensure it works correctly:

1. Click the "Preview" button in the top toolbar to enter preview mode.
2. Test with different input values:
   • Enter a price of 10
   • Enter a quantity of 2
   • Leave the tax rate at the default 10%
3. Verify the result: The total cost should be $22 (subtotal of $20 plus $2 tax).
4. Try different scenarios to ensure your calculator handles various inputs correctly.
5. Exit preview mode by clicking the "Edit" button.

Step 7: Saving and Publishing

Once you're satisfied with your calculator, it's time to save and publish it:

1. Click the "Save" button in the top toolbar to save your changes.
2. Click the "Publish" button to make your calculator available for embedding.
3. In the publish dialog, review your app details and make any final adjustments.
4. Click "Publish" to finalize.

Step 8: Getting the Embed Code

To add your calculator to your website, you'll need the embed code:

1. From your dashboard, locate your calculator in the "My Apps" section.
2. Click the "Embed" button (or three dots menu and select "Embed").
3. Copy the provided HTML code from the dialog.
4. Paste this code into your website where you want the calculator to appear.

Next Steps

Congratulations on creating your first calculator app! Here are some next steps to consider: