Tue, Jun 1, 2021

Get Started with PandaSuite in 10 Steps

This guide is for beginners of PandaSuite. It will help you get familiar with the steps of building an application without any line of code.

1. Create free account on pandasuite.com

Create a free account, no credit card required.

Download PandaSuite Studio for MacOS & Windows, the visual interface that allows you to build your application without a line of code.

2. Discover PandaSuite Studio and our tutorials

Open PandaSuite Studio: you have the choice between creating a blank project or selecting an existing template. Templates are mini applications that allow you to understand how to build an application in PandaSuite.

Watch this video (from 6’20) that shows you the interface of PandaSuite Studio.

Discover the tutorials in the section Getting started with PandaSuite (12 articles) to understand the fundamentals of our creation tool.

Get inspired by app examples created with our tool from our portfolio.

3. Create a wireframe

Before you start working with PandaSuite, the best thing to do is to draw up a wireframe of your application. A wireframe is a visual and schematic representation of the layout of your application. It focuses on information and navigation.

The wireframe allows you to have a working document with your stakeholders and to avoid a lot of mistakes when building the application. In the end you save time and optimize your work process.

4. Define the UI design of your app

Now that you have mapped out the content and navigation of your application, it is time to bring your screens to life.

For this you need a graphic style for your application. It is essential to bring a visual coherence to your application by harmonizing the logo, the colors, the typography…. The UI design also includes the UI components of your application such as buttons, lists, titles etc…

Make a mockup of each screen. For a cooking recipe app for example, create the home screen, a recipe listing and a recipe card for example.

To help you:

iOS Human Interface Guidelines

UI Guidelines for Android

UI Kits Uplab

5. Set up your database (optional)

Some applications need data. Connecting a database allows you to more easily modify, display and associate them with actions in your user journey.

Identify the type of data you need: Users, Products, Items, Score etc…

Select a database according to your objectives:

To create a user database, we recommend Firebase and the use of our Authentication component.

To manage data internally within the application (for example a score), you can use the PandaSuite data provider.

To manage data outside the application, we recommend an external database (Airtable, Google Sheets …) and connect it via our HTTP component

Build your database: add fields (Name, Price, Description, Image…) and fill in the corresponding data.

If you have an existing database, you can connect it to your application via our HTTP component.

6. Build your screens

It’s time to go back to PandaSuite Studio.

Import your graphic elements into the Media window and create your screens, one after the other – don’t worry about animations or effects. The idea is for you to build your application from a macro perspective.

7. Add your components and create your animations

A component is a ready-to-use module that allows you to add interactive effects (scrolling, pop-up,..) and to add functionalities (integrated purchase, authentication…) to your application. There are several types of components: graphics, layout, system and data.

Here is the list of components:

8. Build navigation between screens

By default, all the screens of your application are independent. It is up to you to create the links between your screens and to set up your navigation according to your objectives and the type of application you want to create.

Here are some of the main navigation systems: