WaveMaker Docs

WaveMaker Docs

  • Get started
  • Widgets
  • How-to
  • Enterprise
  • Releases
  • Blog
  • Sign-in

›Mobile development

Getting started

  • Introduction
  • Walkthrough

Pages

  • Pages Overview
  • Creating a Page
  • Layout and Styles

    • Page Layout
    • Templates
    • Themes
    • Accessibility

    Page Configure

    • Page Artefacts
    • Page Cache
    • Partial Page
    • Page Parameters
    • Examples

    Page Actions

    • Navigation
    • Events

    Custom Development

    • Theme Editor
    • Manual Theme
    • Create Template

SSPA

  • Micro Frontend App

Databases

  • Database Services Overview
  • Database Tools
  • Database Designing

    • Working with Databases
    • Data Modelling
    • DataBase Schema Modes
    • Working with DB Schema
    • Database Views
    • Temporal Support

    Accessing Database

    • Accessing Database

    Queries and Procedures

    • Working with Queries
    • Working with Stored Procedures
    • Version Queries & Procedures
    • Blob Queries and Procedures
    • Queries & Procedures - Java Services

    Database Variables & API

    • Database CRUD
    • CRUD Event Listeners
    • Database APIs
    • Database Service APIs

REST & SOAP

  • Web Services Overview
  • Restful

    • REST Services
    • Secure Server-side Properties
    • REST Request Timeouts
    • REST Services using OAuth 2.0

    SOAP

    • Working with SOAP Services
    • Imported SOAP APIs

    Websocket

    • Working with WebSockets

    APIs

    • API Designer
    • Mocking APIs
    • Swagger Import

    Variables

    • CRUD Variable
    • Service Variable
    • WebSocket Variable

Java Services

  • Java Service
  • Java Services

    • Java Integration Services
    • DB Service Integration
    • Variables for Invocation
    • Generated REST APIs (API Designer)

    Java Services Variables & API

    • Variable for Java Service
    • Java Service APIs

    Source Files

    • Resources and Third-party Libraries
    • Using 3rd party JavaScript files
    • Using 3rd party jar files

Variables & Actions

    Variables

    • Variables Overview
    • Model Variable
    • Device Variables

    Binding

    • Variable Binding
    • Custom Formatter

    Actions

    • Actions
    • Navigation Action
    • Login Action
    • Logout Action
    • Timer Action
    • Notification Action

    Events

    • Events
    • JavaScript Access

Security

    App Security

    • Overview
    • Authentication
    • Authorization
    • Access Levels & Permissions
    • Login Configuration
    • Session Persistence
    • SSL Encryption
    • XSS antisamy policy configuration
    • OWASP
    • XSS Prevention
    • Central Authentication System
    • Token Based Authentication
    • SAML Integration
    • Secure Connection for Deployed Apps
    • Concurrent Sessions
    • HostHeader Injection

    Security Variable and API

    • Security Variables
    • Remember Me
    • Variable for Security Service
    • Security Service APIs

Developer options

  • Test and Run (Preview) Apps
  • Chrome Extension: Devtool
  • Debugging
  • Inspection Framework
  • Build Options
  • WaveMaker Mobile Apps Automation
  • Developer Integration

    • Project User Management
    • Developer Collaboration
    • Extending the Application using IDEs
    • Import, Export & Update Apps
    • Project Shells

    Add-ons

    • Localization
    • Artifacts Repository

Deployment

  • Overview
  • Deployment Profile
  • One-click Deployment
  • WaveMaker CI/CD Pipeline

    • Overview
    • Configuration Profiles
    • Configuration Management
    • Pipelines and Phases

    Pipeline Configuration

    • Default Pipelines in WMO
    • Configure Pipeline in WME

    Deploy to Cloud Providers

    • AWS
    • Azure
    • Google Cloud
    • DigitalOcean

    Pipeline Configuration cont.

    • Phase configurations
    • Webhooks Integration
    • Tests Integration

    Manage Deployed Apps

    • Manage Deployed Apps

    Integrate with your CI/CD Providers

    • Push Code to External repo
    • Custom VCS Integration
    • Export WaveMaker Application
    • Building Project with Maven
    • Build with Docker
    • Jenkins Integration
    • Deploy using Docker Compose
    • Deployment to Heroku

    WaveMaker apps Interation with CDN

    • App Integration with AWS CDN
    • App Integration with Azure CDN

    Deployment to external web servers

    • Application Server Overview
    • Deploy to Tomcat
    • WebSphere
    • JBoss - WildFly
    • WebLogic Server

Mobile development

  • Building Hybrid Mobile Apps
  • Native Device Support
  • First Mobile App
  • Mobile Design

    • Mobile Page Design
    • Gesture Support
    • Mobile Tabbar
    • Mobile Navbar

    Mobile Installer

    • Test Run (Preview)
    • Debugging Mobile Apps
    • Testing Hybrid Mobile Apps using WaveLens
    • Mobile Build - Android
    • Generating iOS and Android Distribution Certificates
    • Export Cordova zip
    • Mobile Build - Manual
    • Mobile Build - AppChef

    Mobile Integrations

    • Mobile Integrations - Amazon Mobile Analytics
    • Mobile Integrations - Amazon SNS
    • Using Push Notifications in Mobile Device
    • Invoking Web App APIs in Mobile Apps

    Offline Features

    • Offline Data Support
    • Implementation
    • Switching between Offline and Online Mode

Connectors

  • Introduction
  • Architecture
  • Import Connectors
  • List of Connectors
  • Build a New Connector

Teams

  • Overview
  • Team Setup
  • Dashboard
  • Manage Users
  • Manage Projects
  • Manage Prefabs
  • Project Branches
  • Manage Roles
  • Code Repository
  • Import VCS Project
  • Team Profile
  • Manage Subscription
  • FAQs
Edit

Build your First Mobile App


Learn how to develop a simple hybrid mobile app in WaveMaker Studio. This app uses device-specific widgets like camera and contacts. In this app, click pictures, view it and save them to the phone gallery, and view your contacts.

Widgets used in this app

WidgetsDescription
Segmented ControlSegments are vertical tabs used for mobile devices.
Grid LayoutTo align the contents of the app.
CameraTo access the mobile camera to take pictures.
PictureTo display the captured images.
ListTo access and display the contacts from the mobile.

Creating a Mobile App

  1. Click the Create button on the Project Listings page of WaveMaker, and select Mobile as a platform.

Project-Type

  1. Enter the name of the application, set an icon to represent your app, and provide a brief description for the app.

Designing Base

  1. Set the screen size to your favorite mobile device, or leave it to default settings.
  2. Drag and drop Segmented Control widget on the canvas.

MobApp-layout1

  1. Name the Titles to Camera and Contact respectively, and delete the extra segments.

    MobApp-layout2

Adding Camera

  1. On the Camera's segment, drag and drop the camera widget.

  2. Select the Save To Gallery property for the camera widget. This enables the app to save pictures to the gallery on your mobile device.

  3. Select the Camera segment and set Horizontal Align property to Align center. This brings the camera to center alignment.

    MobApp-segment1

Displaying Captured Pictures

  1. Drag and drop the Grid Layout widget. Use only one column and remove the remaining columns. Set the column width to 12 and align center. This allows you to align the picture when displaying.

  2. Drag and drop the Picture widget onto the Grid Layout column and set the height and width to 150px.

    MobApp-picprops

  3. Bind the picture source to Camera widget and select the localFilePath property, and click Bind.

    MobApp-picbind

Designing Contacts

To design contacts page, create a device variable and bind that to the repeated sections of the list. Follow the steps described below.

  • Go to the Contact segment by clicking the Contact tab.

Create a Variable for Data Source

  1. Click Variables from the header. Click New Variable and, select the Device type.

    Create_Variables

  2. For the Service type, select contacts from the dropdown.

  3. Provide a name for the variable; for example, Device_Contacts, and click Done.

    MobApp-mobvar

  4. Next, check the boxes for Update data on input change and Request data on page load, and save and close. This ensures that the variable gets triggered when you run the app.

Adding List Widget

  1. Drag and drop the List widget onto the Contact segment.

    1. For the Retrieve Data From option, select Existing Variable.
    2. For Select a variable, choose Device_Contacts as data source.
    3. For Select data node, click dataSet to select, and click Next.

    MobApp-listbind

  2. Select template as Actions List, and set pagination to Infinite Scroll. This ensures that all the contacts load in a single page.

    MobApp-listbind2

    MobApp-listbind3

  3. Set fields for the list. Select Name and set caption to displayName from the dropdown, and click Done.

    MobApp-listbind3

  4. The list displays as following in the design mode. Remove all non-essential elements from the list, including picture widget and share icon.

    MobApp-segment2

Adding Repeated Sections of List

  1. Drag and drop another List inside the List created in the previous step.

    1. For the Retrieve Data From option, select Existing Variable.
    2. For Select a variable, choose Device_Contacts as data source.
    3. For Select data node, click phoneNumbers to select, and click Next.

    MobApp-segment2

  2. Select template as Actions List, and set pagination to Infinite Scroll. See, step-2 for adding list.

  3. Set fields for the list. Select Name and set caption to value from the dropdown, and click Done. See, step-3 for adding list.

  4. In design mode, the list-inside-another-list should look as shown below. Remove all non-essential elements from the list, including picture widget and share icon.

    MobApp-segment2

Preview App

  1. Run, to preview the app.
note

You cannot use the camera, or see any data in contacts. These are device-specific features that work in mobile-only.

  1. Change the device type to view changes in different screen sizes.

    MobApp-run3

When you are happy with the changes, proceed to build the app.

Build App

For installing the app on mobile device, you need an APK file for android phones, and an IPA file for iOS phones. WaveMaker supports Build for Android to generate APK files, and Send to PhoneGap to generate both IPA and APK files.

For this app, we use Build for Android to generates an APK file. However, for creating release APK and IPA to publish on Playstore, or App Store, use Send to PhoneGap or Manual Build.

Generate APK File for Mobile Installation

  1. Click the build option from the header.

    MobApp-build

  2. Enter the details in the Application Properties tab. Provide the application details, including app name, release version, developer details, and more.

    MobApp-config1

  3. In the Plugins tab, ensure that the Camera and Contacts features for the mobile device are checked, and click Build.

    MobApp-config4

  4. You get a success message; although, the build is not complete.

    MobApp-buildmsg

note

Track the build progress from the Jobs menu.

  1. When the build completes, you can download the APK file from the jobs menu.

MobApp-buildmsg

note

Alternately, check your emails for the Mobile App Build Successful message. Use the link provided in the email to download the APK file.

  1. Install the APK file in your Android mobile and run the app.

What's in the Mobile App

After installing the app in your mobile device, you can do the following.

  1. Go to the Camera tab, and click the camera icon to access mobile's camera feature.
  2. Take a picture. It displays the image on the picture widget.
  3. View the captured-pictures saved to the picture gallery on your phone.
  4. Go to the Contacts tab to see all your contacts list.

With this, you have created, built and installed a simple hybrid mobile app using device widgets and variables.

Last updated on 8/26/2020 by Swetha Kundaram
← Native Device SupportMobile Page Design →
  • Widgets used in this app
  • Creating a Mobile App
  • Designing Base
  • Adding Camera
  • Displaying Captured Pictures
  • Designing Contacts
    • Create a Variable for Data Source
    • Adding List Widget
    • Adding Repeated Sections of List
  • Preview App
  • Build App
    • Generate APK File for Mobile Installation
  • What's in the Mobile App
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2022 WaveMaker, Inc. All rights reserved.