Create a Multi-Device Application with Appmethod and Parse

Written by Sarina D on Posted in CLOUD

At Embarcadero, we know and love developers and are building developer tools that allow you to create apps for multiple devices, faster, without limits. With our release of Appmethod, we are really excited to include integration with Parse for storage, push notifications, user management and more.

Appmethod is a development platform for building natively compiled, multi-device apps for Android, iOS, Windows, Mac OS X and wearables, like Google Glass, with a single codebase but without compromising the performance and user experience of the app. The Appmethod platform provides the tools you need to get amazing apps to market faster,  including a full featured IDE, visual design, natively compiled languages, direct platform API access, a rich component framework and Enterprise Mobility Services for a robust end-to-end solution from client to cloud to backend.

The Appmethod component framework includes a set of components for Parse that make it very easy for you to leverage Parse services in your Appmethod natively compiled, mobile apps. As you know, Parse services allow you focus on creating a great user experience with your application by taking the headache out of having to develop your own backend. With Appmethod and Parse, you have all the tools you need to deliver the best UX and performance on the frontend and a hassle free, robust backend.

In this tutorial, I am going to show you how to build a basic notes application using C++, Appmethod, and Parse, that builds and runs on Android and iOS with the exact same source code. This application queries the Parse storage service for data that was added via the Parse web browser interface. The app also allows you to add data to your data collection on Parse using the mobile application interface.

In Appmethod, we include both visual (i.e. buttons, toolbars, lists etc.) and non-visual components (database, REST, BaaS components etc.) that are accessible via the Tool Palette.


Step 1: Create the User Interface

Inside the Appmethod IDE, select to create a new blank mobile application.



Appmethod IDE with the FireMonkey Application Framework

This application consists of a tab control with three tabs. First, set up a master/detail relationship between the first and second tab, and then add a third tab for creating a new meeting notes record. The user interface includes three tabs, numerous buttons, toolbars and background graphics. Appmethod has built-in support for both native and custom user interface styling for all four supported platforms (iOS, Android, Windows and Mac).


Tab Control with three tabs, Master, Detail and Add with several visual and non-visual components

Tool Palette with drag-and-drop visual and non-visual components


Structure pane displaying the parent-child relationship between the UI components on the current form

Step 2: Setup and Connect to Parse Data Storage

To connect to Parse backend services, drop the following three components onto your form:

  • TParseProvider
  • TBackendStorage
  • TBackendQuery


On the ParseProvider component, I entered my ApplicationID, MasterKey and RestApiKey which you can find inside your Parse.com account.

On the BackEndStorage component, I selected ParseProvider1 as my connected component. This indicates that I want to use Parse for my app storage solution.

To set the BackendClassName on the BackendQuery component, I first defined my class name inside my Parse account.
Next, I clicked on + Create App…. and selected ‘My Meeting Notes’ as the name of my application.




I then clicked on the Data Browser tab and selected + New Class. I named my class ‘MeetingNotes1’.

 

I clicked on +Col and added two columns of datatype string, one called ‘MeetingType’, and another called ‘MeetingDiscussion’.  I also added several rows of meeting related data.



 

After setting up my data class and columns on Parse, I entered ‘MeetingNotes1’ as my BackendClassName on my ParseProvider1 component in the IDE. Next, I selected ‘Storage’ as my BaaS BackendService and ‘ParseProvider1’ as my BaaS provider.


                                            BaaS components

In order to display data, I also added an in-memory data table component and JSON response component to my form. The response component moves data from the JSON response into columns in the data table. 

 

Step 3: Visually Bind Data to User Interface Elements

The LiveBindings Designer in Appmethod makes it really easy to visually connect data sources to user interface elements. I bound the ListView Item.Text and Item.Detail properties into my data table by dragging lines between both end points. I also bound the ListView1 Sync property into the * field in my data table to keep the data synchronized as the user navigates between their master/detail views.

LiveBindings Designer showing UI components connected to Parse data storage


With Appmethod, you can see and scroll through live data at design time by right-clicking on the BackendQuery1 component to execute the query.



Step 4: Write C++ Code for Querying Existing Data and Navigating the UI

Once you have finished building the part of the application responsible for querying Parse’s data collection for existing data and the UI for displaying the data, the C++ code should look like this:

 

Step 5: Write C++ Code for Adding a New Meeting Record

Besides consuming existing data that I entered via Parse’s web interface, I also wanted to be able to add new meeting notes to my Parse data storage using my mobile application. On the Add tab, I added an Edit control for entering the meeting title and a Memo for adding the meeting notes.

Most components (including visual and non-visual components) have a set of events predefined, such on-click, on-change etc.

 
 

For the Save button, I set up the following on-click event:



Step 6: Select Target Platforms and Build

With Appmethod, you can target iOS, Android, Windows and Mac all from the same codebase.

In the Project Manager, you can select your Target platform by double-clicking on it. To build the application for the selected target, you just need to hit Run in the IDE.


Inside the IDE, you can also easily toggle between numerous iOS and Android devices to see what your application is going to look like on a specific form factor.



And there you have it – an app using Parse’s backend storage in just a few short steps! Below are some screenshots of the app in action, running on an iPod Touch with iOS 7, Nexus 4 phone with Android Kit Kat and Windows Desktop.

       
   

Step 7: Try It For Yourself

If you’re ready to build an app with Parse support, drop by www.appmethod.com to download the free edition of Appmethod. With our new free version of Appmethod, you can build Android phone apps for free.

To learn more about Appmethod, visit http://www.appmethod.com or follow us on Twitter @Appmethod.

 

Tags: Mobile UI iOS Android C++ BaaS Parse



About
Gold User, Rank: 5, Points: 558

Check out more tips and tricks in this development video: