Get Started With App Building
  • 21 Sep 2022
  • 19 Minutes to read
  • Contributors

Get Started With App Building


Article Summary

Welcome to Tulip

This Article will walk you through the onboarding experience and share resources to help you get moving quickly.

Welcome to Tulip!

Tulip is a no code platform built for the unique needs of frontline operations. With Tulip, you can design robust, composable solutions for your hairiest production challenges. This guide will focus on the basics of the Tulip platform. We'll review key features, locations, and concepts, and build a simple "Hello World" application together.

NOTE:

This article assumes you have access to a Tulip Instance. If you don’t, you can get access by starting a free trial, or contacting the individual or group that manages Tulip access for your organization.

Resources to Help Your Learn

Before we go any further, let’s introduce a few key resources you can use as you get acquainted with Tulip.

Knowledge Base

The Knowledge Base is a collection of articles, videos, and documentation to help you learn how to use Tulip. If you’re reading this article, you’ve already found it. Nice!

Follow the file structure on the left nav, or use the search bar to look for content related to any topic you need more information on.

Tulip University

Tulip University is a free, on-demand resource for learning Tulip. Tulip University contains dozens of courses, certifications, and app-building challenges to help you take your app building to the next level. Take your first steps by enrolling in the Tulip Essentials, practice your skills with Tulip Challenges, and share your accomplishments by becoming a Tulip Certified App Builder.

Library

The Tulip Library is a collection of ready-to-use content developed by Tulip experts. You’ll find plenty of content to get you going, ranging from full applications and app suites to templates, custom widgets, and connectors.

Community

Have questions but can’t find the answer in the Knowledge Base or University? Got an idea for a feature that would make your life 100x easier? Need a way to keep up with the latest and greatest in the Tuliverse? Check out Tulip Community.

Tulip Community is an active, online forum for users to post questions, have discussions, and help one another use Tulip to solve their problems.

Getting Oriented - A Quick Tour of Your Instance

Let’s get started by taking a quick tour of your instance. For the purposes of this overview, there are 5 key locations you should know how to find in Tulip.

  • Applications and the App Editor
  • Tables
  • Shop Floor
  • Dashboards
  • Account Settings

We can look at each in turn.

Applications and the Application Editor

App Page

When you log into your account, you’ll find yourself on the Apps home screen. Here, you can view and manage all of the applications in your instance.

Screen Shot 2022-09-19 at 3.13 1 (5).png

To find this page, hover over “Apps” in the top nav and click "Apps" in the drop down menu.

Group 1 (1).png

App Homescreen and App Editor

The Application Editor is where you’ll do the work of building applications. To get to the application editor, you can select an existing application or create a new one. Click into your application. From this screen you can view application Completion data, manage app Permissions and Approvals, and publish a Version of your app.

Group 13 (1).png

Click on any Step in this menu, and you’ll be taken to the App Editor.

app editor 4 (1).png

Now that we’re here, let’s take stock of what we’re seeing. There are a few key areas you’ll find yourself working with.

NOTE:

For an in-depth tour of the app editor, check out this article

Let's review 4 key tools in the App Editor:

  • Drag and Drop Interface
  • Toolbar
  • Context Pane
  • Step and Record Pane

Drag and Drop Interface

In the center of the screen, you have your drag and drop interface—your blank slate.

Group 2 (1).png

This is where you’ll design a user interface. Here you’ll embed widgets, create interactive elements, and organize all of the information and features a user will need to interact with your application.

Toolbar

Above your canvas, you’ll see a series of dropdowns we refer to as the tool bar. Use these menus to add text, inputs, and other Widgets to your application.

Group 3 (2).png

Context Pane

On the right, you’ll find the Context Pane, where you'll configure application, step, and widget details. Here you’ll add logic to applications, manage app-level design settings, and tweak the widgets you add to your app.

Group 15.png

Step and Record Pane

Finally, on the left pane you’ll add new steps to your application, and manage the tables your app connects to.

Group 5 (1).png

Tables

Tables are custom databases you build for storing data collected by your applications.

Screen Shot 2022-09-19 at 3.09 1.png

Tables strike a happy medium between spreadsheet tools like Excel and full-fledged relational databases, allowing you to construct a data model as simple or complex as you feel comfortable working with.

NOTE:

For a quick overview of building apps with tables, try the "Build a Simple Data Entry App" course in University. Tables are also covered extensively elsewhere in the Knowledge Base.

To find tables, navigate to the “Apps” tab in the top nav and select “Tables” from the drop down.

On the Tables homescreen, you’ll have the option to view an existing table, or to create a new one.

Shop Floor

The Shop Floor tab is used for managing Stations and physical Devices associated with your Tulip Instance. Under the Shop Floor tab, you’ll find options for creating and managing stations, managing Edge Devices, Machines, and Tulip Vision.

Group 6 (1).png

For now, let’s focus on “Stations.” When you click “Stations,” you’ll be brought to a page where you create stations and assign applications to them—a critical step in the publication workflow.

NOTE:

You can learn more about stations in the Knowledge Base and in Tulip University

You’ll interact with this page much more as you prepare to move your finished applications into production.

Dashboards

As you start to build analytics, they’ll appear under the “Dashboards” section of your instance. Navigate here by clicking the “Dashboards” option in the top nav.

You can think of dashboards as collections of Analytics. You can organize your dashboards according to any logic you desire.

Group 7 (1).png

Importantly, dashboards can be exported as a URL and shared with anyone—irrespective of whether they have a Tulip account.

This allows you to share your results and metrics with anyone in your organizations.

Account Settings

Your account settings can be accessed by clicking on the icon in the top right corner of your Tulip instance. The options accessible to you here will vary based on your permission levels.

Group 8 (1).png

Tulip Player

One of the most important parts of Tulip—the Tulip Player—isn’t located in your web instance.

The Tulip Player is an application designed specifically for running applications. It can be run on many devices on several operating systems. Crucially, it needs to be downloaded onto any device on which you’d like to run applications.

To download the Tulip Player follow this link. For installation and configuration instructions, check here

Building Apps

Now that you can find your way around your instance, let’s take a crash course in building applications. There’s no better way to do that than building an application together. So pull up your instance, and let’s build a “Hello World” application together.

Creating a New Application

The first thing we need to do is create a new application. To do this, navigate to the “Apps” section of the platform using the “Apps” menu in the top nav.

Once there, click “create application” in the top right. You’ll then be prompted with a modal that will ask you whether or not you’d like to create a new application or start from a template. We encourage you to play around with the different templates available, but for now, let’s start with a blank app by clicking “create” in the bottom right of the modal.

ezgif-4-42b23129c0.gif

You’ll be directed to the app home screen, where you’ll manage this app’s settings moving forward. Go ahead and name your app “Hello World” by clicking on the pencil next to “Untitled App” in the top left. Then, click on any step and you’ll be taken to the app editor.

Building a “Hello World” Application

We can break the app building process into a few key steps that you’ll replicate at different levels of scale and complexity throughout your journey with Tulip.

  • User Interface Design
  • Adding Logic
  • Testing

We’ll keep it as simple as possible, and focus just on designing a basic interface, adding a single line of logic, and testing our app using developer mode.

Designing an Application UI

Your User Interface is the arrangement of graphical and interactive elements across the steps of your applications. Designing a good UI is essential for enabling your users to successfully interact with your apps.

NOTE:

User Interface Design is covered in depth in Tulip University.

For now, let’s keep it basic. We’re going to add 4 elements to our UI:

  • A shape to create a header bar
  • A variable that displays the application name
  • A menu button
  • A button that displays the message “Hello World” when clicked

Design a Base Layout

Base Layouts are design patterns that are applied to every step in your application.

We’ll design our UI as the Base Layout for our application.

To access the Base Layout, click the text “Base Layout” in the bottom left of the App Editor. You’ll know you’re editing the Base Layout when the background behind the text is highlighted light blue.

Group 9 (1).png

To add your header bar, navigate to the Assets Menu in the toolbar, and select the “rectangle” option. If it’s not immediately visible, search “rectangle” using the search bar.

When you click “rectangle,” you’ll find that a shape was added to the sandbox area of your app editor. Click on the shape to select it. On the right pane, you’ll see options for adjusting the settings of your asset. Change the color to dark gray. Adjust the settings of the widget so that its dimensions are 1920w x 100h, or simply drag it into place so that it spans the top of your application.

Add a Step Name to the Top Nav

When a user accesses our app, we want the app to display the name of the step their currently using. In this case, we want our app to read “Hello World” across the top bar that we just created.

To do this, click on the “Text” menu in the toolbar, and select “Variable” from the drop down. Alternatively, you might use the keyboard shortcut and just press “V”.

Variables in Tulip are placeholders for values. When you select to display a variable, your application will display whatever value is currently stored in that variable.

To access the name of the step, we need to configure our variable.

Make sure the embedded variable is selected, and navigate to the widget pane on the right panel. Under “Datasource,” select “App Info”. Select “Step Name” from the “Select App Info” drop down.

Drag and drop your variable into place in the top bar. You may wish to change the color of the text to make it more readable against the dark background.

Alternatively, you can simply add a "step name" from the Text menu in the toolbar.

The last thing we need to do is name our step. Double click on the “Untitled Step” under the left Steps pane and rename your step “Hello World”.

Add a Menu Button

Using the “Buttons” menu in the toolbar, add a Menu button to your application. Drag it into place in the top left or right corner of your top bar.

It’s important that a menu button is accessible from each step in you application so that a user can change, cancel, or pause their applications.

Add a Hello World Button

Using the “Buttons” menu in the toolbar, add a button to your application. Center it on your layout.

We’ll add logic to this button in the next section.

Adding Logic to Apps

Trigger logic is what makes apps smart. It’s what separates slideshow software from the dynamic, responsive apps you’ll build in Tulip.

The structure of logic in Tulip

Logical statements in Tulip follow the same pattern: WhenIfThen.

Group 10 (1).png

When an event occurs, If certain conditions are met or not met, Then the application performs a specified actions.

The trigger for our “Hello World” application will follow this same structure.

When a user presses a button, Then the application will display the message “Hello World”. We won’t put any conditional statements in this trigger.

Where you add triggers in Tulip

In Tulip, logic is associated with events. A user pushing a button, a change in a machine state, or scanning a barcode are all examples of events. There are several common locations you’ll add triggers in Tulip:

  • To widgets, like buttons and interactive tables
  • To steps, for actions like “on step open” or “on step close,” or “when device fires”
  • To apps, for actions like “when app opens”
  • Build your first trigger

Let’s write our first trigger.

Our trigger is going to do two things:

  1. Store a string of text in a variable
  2. Display a message that contains that variable

When you're done, it should like this:

Screen Shot 2022-09-19 at 2.08.45 PM.png

Go ahead and select the button you placed in the middle of your user interface. Once you’ve selected the widget, on the Context Pane find the fold labeled “triggers” and click the plus sign to add a trigger. This will bring up the trigger modal.

Give your trigger a name, something like “Print Hello World.”

Because this trigger is attached to a button, our WHEN statement is taken care of for us: WHEN the button is pressed.

So our task is to write our action statements, the THENs. Let’s start with storing a string of text to a variable.

Click “Add new action.” Using the drop down menu, select “Data Manipulation,” and then “Store.” With this action, we need to specify what data we’d like to store, and where. Using the drop down after “Data:” select “static value,” and then “Text.” We’ll put our message in this static value. In the input field, write your message, “Hello World”.

The next piece of this trigger is determining the “location:”, or where your data will be stored. Select “Variable” from the drop down, and then elect to create a new variable. Give your variable a name, something like “Hello World Variable”, and click the green check.

Almost done. The next thing we need to do is display our variable in a message. We’ll create another action in our trigger to do this.

So click “add new action,” and select “Show Message” from the drop down. The last thing we need to do is specify what data goes in our Message. Since we’ve already created a variable, you can select “Variable” from the dropdown, and then select your “Hello World” variable.

Save your trigger. Now you’re ready to test your app.

Testing Your App

At any point in the design process, you can test your application using the “Test” button to the right of the toolbar in the app editor. This will open Developer Mode, a sandbox environment that allows you to test applications without jeopardizing production data or systems.

Group 17.png

Once you’ve opened Developer Mode, you can test your application. Hit “begin,” and then press your button. You should see a message that reads “Hello World” displayed at the bottom of the screen.

Publish Your Application

Before you push your application into production, you need to publish that application. This will create a read-only version of your application that you can access at a Station.

Applications are published as Versions. Everytime you make changes to an application, you’ll need to publish a new version to access your most recent changes in the Player. This helps with change management, and ensures that only approved versions and modifications make there way into production.

Group 16.png

To publish your application, return to the Application Editor. Click the “publish” button in the top right corner of the screen. This will bring up a modal prompting you to comment on what changed in this version. Add any comment you’d like. Comments will be more important as you start to work at scale, but for now you can keep it simple. Then, click “Publish Version 1”.

What You Build With Tulip

Tulip is an extremely flexible solution. Because it’s a true platform, there’s no limit to types of applications you can build. Which raises an important question: What do I build with Tulip?

The answer, of course, depends on your operational needs. Many users have concrete objectives for Tulip in mind such as:

  • Reducing errors in a manual assembly operation
  • Tracking machine uptime and downtime
  • Increasing visibility into production
  • Simplifying product genealogy in high-mix environments

These concrete business objectives can easily be transformed into an application–or series of applications–that provide the desired outcome. We usually refer to these sets of applications by use-case, or the specific operational challenge they help address. Use-cases that address the above list of operational goals would be:

  • Digital work instructions
  • Machine monitoring
  • Production tracking
  • Traceability and genealogy

These projects can range in scope from targeted quality inspection apps on a single station in a single cell, to large-scale electronic batch record solutions for a full pharmaceutical manufacturing operation. Often, Tulip customers start small with a simple use-case that provides fast value and builds capabilities, expanding their solutions as their comfort with Tulip grows.

NOTE

Learn how to pick your first use-case in this Tulip University course.

The essential takeaway here is that the same basic Tulip features can be used to design any application you can imagine, for any operational challenge you might face, at any scale.

By learning a few key features at Tulip, you’ll give your team the ability to design software solutions for your toughest challenges today, tomorrow, and next year.


Was this article helpful?