Loading...
Empty cart

No products in the cart.

How to create an app with seattleclouds?

We are going to show you how seattleclouds works and go through the entire process of creating an application.

First, you have to log in your platform.

Screen Shot 2017 12 27 at 4.07.25 PM

Enter your Email, your Password and click on . You can now create your first application:

Screen Shot 2017 12 27 at 4.14.19 PM

Enter an Application Name (here, we will use My Awesome App) and click on . You reach this page:

Screenshot 2020 10 09 at 15.05.58

That’s what we call, the Editor. At the left, you have five menus, you can find more information about them here. At the right, you have a phone simulator, called Overview. It’s not a real phone, so some features are disabled, but you will be able to see and test your changes.

Then, on the middle, you have five tabs:

Screen Shot 2017 12 27 at 4.20.19 PM

Let’s see them one by one in details.

Design

First, you have the “Your Design” section:

Screenshot 2020 10 09 at 15.06.38

Here you can change your template:

Screenshot 2020 10 09 at 15.07.14

I will choose the Red&Co template. It will change the background of the app, some colors, the homepage images and fill the app with some features.

You can also change the layout:

Screenshot 2020 10 09 at 15.07.57

The layout is the way the menu will behave. For example, if you want your features displayed in a “grid” with round icons, then choose the Layout 4. For this tutorial, we will use the Layout 6.

Finally, you have “Homepage Options” and “Layout Options“:

Screenshot 2020 10 09 at 15.09.32

It’s customisation options for the layout, so it will be different depending on the layout you choose. That’s it for the “Your design” section.

Below, you will have the “Unified Homepage” section. If you want to have a custom homepage image, then you will have to upload your image here.

Screenshot 2020 10 09 at 14.59.45

Then, you have three options:

Screenshot 2020 10 09 at 15.09.57
  • Use the homepage image as background in all features“: Self-explanatory
  • Hide iOS status bar“: Check this if you want to hide the status bar at the top of the device when using the app
  • Hide Android Status bar“: Check this if you want to hide the status bar at the top of the device when using the app

You will have to choose your currency and default locale:

Screenshot 2020 10 09 at 15.10.31

And a default Font Family for your App.

You can select your Font from a readily available Google Fonts set, or if you don’t find one that suits your needs, you can use any Google Font available just with its name.

Screenshot 2020 10 09 at 15.11.48

Colors

The Colors section is where you will customize every colors in your app. There is also a custom SCSS fields to modify the CSS in your app.

Screenshot 2020 10 09 at 15.20.56

This menu is pretty straight forward, you click on the color, you change it, as well as its opacity. Best school here is to play with it, you can see your changes live in the overview.

You can also use the “Demo” mode. This mode will display every items that can be customized in the app according to the section. Here is an example with the “Card” section:

Screenshot 2020 10 09 at 15.40.50

Features

Here is the biggest part of the Editor, that’s where you will add/remove features on your app:

Screenshot 2020 10 09 at 15.43.19

You have two sections, “Your pages” and “Add pages“:

  • Your pages” is where you will manage your features. You can modify the order, you can delete the features, or you can edit them.
  • Add pages” is where you will add features to your app by simply clicking on the feature you want.

That’s all there is to know on this section. 

Application

Here you have four sections: “General information“, “Dashboard icon / Back Button icon“, “Android Push” and “Unified Splashscreen“:

Screenshot 2020 10 09 at 15.52.51

In General information, you can find the Url of your webapp, the Application ID and you can change the name of your app.

In Dashboard Icon / Back Button Icon, you can change the app icon, the icon displayed on the home of your device. You can also choose the appearance of the back button.

Android Push:

Screenshot 2020 10 09 at 16.03.26

Here I wanted a custom push icon. I found a gift icon here, I uploaded it on both size (128 and 512), and I change the background color to red. On the right you have a live preview of your new push icon.

Unified Splashscreen” is where you will upload a custom startup image. You will be able to see it when you click on the app icon in the home of your device. It’s a loading screen.

Screenshot 2020 10 09 at 15.02.19

Publication

Finally, you have the Publication section, where everything related to publication is displayed. The screen content will differ depending on the edition (SAE, MAE or PE) and your permissions. Here is the Publication section when the user has access to the source codes:

Screenshot 2020 11 03 at 18.01.22
Screenshot 2020 11 03 at 18.01.38
Screenshot 2020 11 03 at 18.02.04

You can use Admob by checking the box “Monetize my app using AdMob?“. To generate the sources, click on “Generate source“. Now you can publish iOS and Android apps.

Here is the publication section when the user has not access to the sources:

Screenshot 2020 11 03 at 18.13.44
Screenshot 2020 11 03 at 18.13.53
Screenshot 2020 11 03 at 18.14.03

In the “General information” tab, you have to fill five fields:

  • Application name“: It’s filled automatically, it’s the app name.
  • Description“: Give a description of your app, the clearer the better.
  • Keywords“: Think of it like hashtags, if your app is a jewelry shop, type “shop, jewelry”.
  • Main category“: Select the main category of your app.
  • Secondary category“: It’s optionnal, you can select a secondary category.

Stores information sections are self-explanatory, it will depend on your way to handle users publication.

Leave a Reply

Your email address will not be published. Required fields are marked *

Top