[Progress News] [Progress OpenEdge ABL] Visually Drag-and-Drop Your Way to a Native Mobile App

Status
Not open for further replies.
R

Rob Lauer

Guest
With the right low-code app development platform, you can use your preferred processes while speeding up development with visual tools to avoid tedious tasks and focus on what’s important.

A key component of Kinvey Studio is the (growing) set of pre-defined views that are powered by your data, and save a dramatic amount of time that would normally be spent tediously scaffolding.

For example, let's say I have a backend collection of data that I simply want to expose via a dynamic listview with images. In Kinvey Studio the steps would be:

  1. Create a new view from an existing template
  2. Link that view to an existing set of data
  3. Preview the native app on a real device!

...illustrated in-action here:

Kinvey Studio Mobile View

Building a Custom Mobile UI


When starting new mobile application development projects, using the pre-defined view templates is great... when your business case matches one of those templates! For other unique scenarios we recommend using the Blank view option.

Kinvey Studio Mobile Blank

This is where the power of Kinvey Studio really shines. The blank canvas allows you to completely customize your user interface. You can drag-and-drop UI elements (like labels, text fields, sliders, switches, and so on). This modern mobile app builder also allows you to drag-and-drop layout containers, which are how you arrange your native UI elements on the canvas.

Since Kinvey Studio uses NativeScript behind the scenes, anything you need to learn about layout containers can be found in the NativeScript docs!

Need a view that shows an Image, a Label, and a Button? To do so, I would:

  1. Start with dragging a Stack Layout container on to my canvas
  2. Drag an Image, Label, and Button elements over, one at a time

...leading to the following UI:

Kinvey Studio Blank

Which, keep in mind, took us all of five seconds!

While we are focusing on the visual aspect of Kinvey Studio today, you should also know that the generated code is stored locally. This also means that it is editable by your favorite text editor or IDE! Kinvey Studio supports roundtrip editing of an app, from Studio to IDE, and back again.
Navigation Options


Clearly there are a lot of time-saving capabilities involved with creating the UI of your mobile app. Another common stumbling block is app navigation. Whether you want to use mobile-optimized tab- or drawer-based navigation, Kinvey Studio has you covered:

Mobile Navigation

By simply including, excluding, or re-ordering the array of views provided, you can quickly create a fully-functional navigation system for your app in no time.

Themes


It's one thing to build an app. It's another to make that app actually look good.

Low-code mobile apps developed in Kinvey Studio come with support for the NativeScript core theme out of the box. The advantages of using this theme include:

  • Access to the existing class-based application of different UI styles
  • A variety of color schemes to choose from
  • An easy way to tweak and override the theme defaults with CSS

Within Kinvey Studio, there is a Themes section that allows you to edit both your web and mobile themes. You can quickly experiment with a variety of pre-built color schemes:

Mobile Theme

And remember, since mobile apps built with Kinvey Studio rely on the NativeScript framework, this means that apps are styled with CSS, the same CSS you and your developers have been using for years.
Settings and Configurations


Are you a big fan of hand-editing your info.plist and AndroidManifest.xml files to configure your mobile apps? I didn't think so.

Kinvey Studio provides an intuitive UI on top of these iOS and Android configuration files, making sense out of such arcane code blocks as:

<activity
android:name="com.tns.NativeScriptActivity"
android:label="@string/title_activity_kimera"
android:configChanges="keyboardHidden|orientation|screenSize"
android:theme="@style/LaunchScreenTheme">

<meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" />

<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>

For example, does your app need to access certain device permissions on Android? Instead of editing your AndroidManifest.xml file, you can use the interface provided to point and click your way to success:

Android Permissions

Summary


Today we've only just scratched the surface of what you can accomplish with Kinvey Studio. We focused on the visual nature of the tool (abstracting away the complexity and boilerplate that normally comes with native mobile app development). In the coming days and weeks you'll hear a lot more about the power of building a cross-platform app with Kinvey Studio on the Kinvey platform.

For example, did you know you can quickly add a chatbot to your app with Kinvey Chat? Tap into secure server-side business logic with the Kinvey serverless backend? Add engaging mobile-only features like augmented reality? The options are endless when you choose Progress Kinvey.

Continue reading...
 
Status
Not open for further replies.
Top