The two basic components of Appeggio are parts and connections.
Parts are the building blocks of Appeggio. There are also parts within parts! Each piece that you add or edit is a part, and each part has lots of different functionality so that your app is uniquely yours.
Connections represent the various pieces of data you want to display for your users, and can also be the data you collect from your users.
To illustrate the navigation, let’s start with a template. You’ll notice there’s a navigation drawer on the left, and a toolbar across the top:
The left navigation drawer is your ‘working’ toolbar, and that will be used to add different parts to your app. The top toolbar will show what your app looks like in various sizes.
Navigate. The navigator helps you find the location of the parts you want to edit.
Screens. Add a screen. Adding a screen component is like adding a new ‘page’ to your app.
Assets. An asset is a file that you’ve uploaded for use in your app. It could be an image, a video or another type of file.
Data connections. Data connections enable applications to pipe data into and out of your application. Appeggio has a number of data connections available that allow you to do business from day one.
Texts and languages. This is where you see the list of text items and can translate those texts.
Styles. Where you’ll get to set the font, primary color, the secondary color, accent color, default background color and default text color. This is where you can also use the palette generator to create your own complimentary color scheme.
Manage settings. This is where you manage your general settings, and settings for Web, iOS and Android.
Manage publishing. This is where you publish to Web, iOS and Android.
Help. Click on this when you need help or more information.
Moving from left to right, the top toolbar shows the editor menu, the name of the template you’ve chosen, and how to preview your app:
The middle of the top toolbar shows what your app will look like across a range of screen sizes:
a mobile with an extra small screen (size 1),
a mobile or tablet with a small screen (size 2),
a tablet with a medium screen (size 3),
on the web with a large screen (size 4),
on the web with an extra large screen (size 5),
and to fit the screen (size 6).
The right of the top toolbar allows you to scan a QR code to see your app’s progress on your mobile device, and also shows the autosave indicator:
Before we go into more detail about the left navigation drawer, it’s worth providing a quick run down about using the editor to create, change, delete or connect actions, processes or data to parts in your application.
It is important to know that with Appeggio your application is always running so it looks and works to you the way your customers will experience it. Making an edit is instant in Appeggio and there is no waiting between edit and preview/run that you see in other tools. Don’t worry, your edits will only be visible to your customers when you publish them.
The mouse is the main method of navigating to a part on the screen you want to edit. There are also keyboard shortcuts you can use.
As you move the mouse around the screen the part under the mouse cursor will be highlighted.
Also, when you move the mouse over a tool or button you will see a ‘tooltip’ that describes what the tool or button will do. Most tooltips will contain a letter or meta-key and a letter indicating what keyboard shortcut you can use to invoke the tool. For example ‘Click to Add a Part (A)’ indicates that the A key can be used as a keyboard shortcut.
In the image below there are two parts, the one on the left with the orange line around it is highlighted, and the one on the right is not. A left-click on the highlighted part will select it.
When the part you want to edit is highlighted you left-click the part to select it. Selecting a part will show a part toolbar with tools to modify the part. Here’s what a selected part and part toolbar looks like:
Clicking on the navigation can help you locate the parts you want to edit.
In the example below, I want to edit the text “Who I am.” By moving the mouse to the “Who I am part”, I can now see where it is within the navigation, shown in the diagram below:
As you can see in the above diagram, there is a path that shows you exactly the part you’ve highlighted.
This is where you can add a new screen to your app if you choose to. Choose the screen icon, then select add.
A new screen will be added, copying over your existing color palette.
Your new screen will appear under your home screen, as illustrated below:
To select the screen you’re editing, just move the mouse to the screen in the navigation, and select.
Assets are files that you can upload. Examples of assets include images and videos. Assets that you have already uploaded will appear when you click assets. You can also add an asset by clicking ‘add’ which will open your browser. Just search for your file in your browser, then select upload.
This is where you can make a connection and then choose how and where your data flows. Your data may be from a database, or it may be from API.
When we refer to a connection we are usually referring to an API. An example of a connection might be that you need to send contact information to Salesforce. In that instance you would choose a Salesforce connector.
When we refer to a collection we are referring to a database that may be held locally. An example of a collection could be a list of menu items in a database that you want to display.
There’s more information on data connections here.
This is where you see the list of text items and can translate those texts.
The styles section is where you’ll get to set the primary color, the secondary color, accent color, default background color, default text color and default font.
This is where you can be really creative about your colour schemes and ensure that your app is in line with your branding, and supports the right ‘look and feel’ that you’re after.
Templates will already come with their own style, and it's up to you if or how you change the style. The template below has a preset default font, and default primary, accent, secondary and background colors:
You will also see that you have the option to use the dark theme or switch it to the light theme.
There’s more information on styles and colors here.
Settings is where you provide details about your iOS and Android apps, a description and keywords for your web application, and some general information about your app.
Within Appeggio there are several keyboard shortcuts to help you design and edit your app quicker. Find them here.