Blog

Building RSS APP in Appery.io tutorial from Green Machine.

We’ll be at the Appery.io at HackDenver/AT&T Mobile App Hackathon this weekend. There is still time to sign up , hope to see you there!

In July’s release we updated our test page and also launched Appery.io Database. Here is what’s coming up in August:

• Integration with Appery.io Database inside the app builder. When creating a new service, you will be able to point to any existing database collection that you created and auto-generate REST API services such as to display data, create data, or delete data.
• Database: File storage API will allow to store files in the database.
• Export/import of projects – our users have been asking for this for a long time.
• Easier testing and installing: QR code on test page and on Android build page. Having the QR code on Android build page will allow you to install the app on your phone by simple scanning the code.
• Easier project creation: create new app right from Apps page

Lastly, our very big new feature is our new HTML5 app builder we  have been working on for a few months now. I’ll be posting information on it soon.

We got some really cool stuff out this week. Check it out.

Better way to test your app

When you open the app builder you should see a new and very nice phone frame:

The old one was more Android-like. The new one is neither Android, iPhone or Windows Phone. Just a nice phone frame.

There is an upgraded test page:

You can use the new tool bar at the top to change the phone orientation as well as change the size:

That’s not all. We also now have an option to test the app without the mobile frame. In the Test pop-up, uncheck Show in mobile frame:

When you open the app, it won’t use the frame:

The frame looks nice in the browser, but technically speaking testing without the frame is better — as you are testing the actual app (just the app code, no frame). Of course when you run the app on your device, the frame is not there as well.

jQuery Mobile Multi-page Template

jQuery Mobile supports multi-page templates where two or more pages are placed inside the same file. You can now turn on this features in Appery.io app builder (it’s turn off by default). Go to Project > Project Profile:

Queries In Database Console

Appery.io Database comes with Queries support (docs) and now you can try the queries right from the collection console:

Showing products that cost more than $30 (or any other currency):

PhoneGap Upgrade

We upgraded to PhoneGap version 1.8.1. Every new and existing app will now use this new version of PhoneGap.

Android 4.0.x

We also added build support for Android 4.0.x

As always, we want to get your feedback. You can always email us (support@appery.io) or post on our forum.

As you probably know, we launched Appery.io Database a few weeks ago. In addition to docs, we just published a tutorial on how to build an app connected to Appery.io Database. You will learn:

• Creating a new Appery.io database, inserting sample data
• Displaying messages in the app from the database (via REST API)
• Saving new messages
• Deleting a message

If you are at DevCon 5 conference in New York next week (July 23 & 24), check out the session by David Schoenbach on Monday at 3pm:

API Plug-ins and Mobile App Development.

This interactive session will focus on plugins and platform for mobile app development, which enables developers to build hybrid and mobile apps with HTML5, jQuery Mobile, and PhoneGap. We will show how to build an app that consumes REST API resources, and youll be able to test the app as its being built. Well also show the shortcut to API integration using Appery.io Plugin Catalog to access API services premapped to UI components.

If you run/test your app on Android you probably noticed that there is flickering or jumping when navigating between pages (there is no such issue on iOS). Here is a quick way to get rid of flickering.

Add the following JavaScript (Create New/JavaScript):

$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';

Above code will be invoked for all devices, including iOS. To run this code only for Android, use this;

if (navigator.userAgent.indexOf("Android") != -1) {
   $.mobile.defaultPageTransition = 'none';
   $.mobile.defaultDialogTransition = 'none';
}

Give it a try, you will notice that page transitations are now much smoother!

Last weekend we participated in the AT&T Mobile Hacktathon hosted by StackMob. Just before the event we published StackMob API plug-in in Appery.io app builder so that it would be very simple to connect to StackMob. Here is how easy it is to connect to StackMob.

In Appery.io app builder, select Create New > From Plug-in, then select the StackMob plug-in:

When you click to import the plug-in, you will be asked to enter StackMob key that identifies your app:

If you won’t enter the key right away, you can always set it by going to Services/StackMobDatabseSettings file.

The StackMob service looks like this:

You will notice that the URL has [objectName] in it. Simple set it to the object schema name defined in StackMob. My object is called messages so the updated URL would be this:

https://api.mob1.stackmob.com/messages

The service does a GET by default but you can set it to do any other action.

We can now instantly test the service. Open Request Parameters panel and click Test Connection:

We get result back which means our service works (you should create a few sample objects in StackMob before testing). The service input is defined, we now need to define the service output. That can be done automatically by clicking Populate Response Structure button.

Once the service is ready, add it to the page, and bind the service to the UI:

and finally run the app:

In case you missed we just launched Appery.io Database – a cloud database for your mobile app. It’s the first feature as part of our mobile backend services. We are working on really cool stuff such as Push and more!

Database API Plug-in

Creating a new service based on Appery.io Database is very simple as each collection comes with a nice REST API hints:

But there is even easier way to add a service by using Appery.io Database API plug-in. From Project tab, click Create New > From Plug-in and select Appery.io Database API plug-in:

When you import the plug-in, you will be asked to enter the Appery.io Database Id you can get from the REST API hint section (or from Dashboard tab). If you don’t set it during import, you can always set in Services/ApperyDatabaseSettings file.

As you can see the URL is already set. Just set the collection and you will be ready to go. The service defaults to GET but you can change it to any method as shown. You can switch to Request Parameters, enter any request parameters and click Test. From Test, you can automatically define the service’s response structure.

The database key is also set in Request Parameters panel:

The {apperyDatabaseId} is resolved from Services/ApperyDatabaseSettings file.

We got some really awesome integration planned very soon. Right from Appery.io app builder you will be able to browser and create new collections.

Documentation

Looking for docs? View Appery.io Database docs. We are also working on some really nice tutorials. If you have any questions, you can always email us or post on our forum.

In addition to Appery.io Database (which is a pretty big feature), there are a few other features we added back in June.

Simpler app creation

We greatly simplified new app creation wizard. Just enter the app name and select whether you want a phone or tablet app. That’s it.

By default Appery.io creates an app that includes Apache Cordova (PhoneGap). This means you can export the app to Android, iOS, and Windows Phone. You can also use any device API Apache Cordova provides.

We are going to simplify the app creation even more in the next release.

You might be wondering but what about mobile web app hosting? If you use any native device feature, then hosting as a mobile web app doesn’t make sense. But if you didn’t use any native features, then you want to be able to host. If you go to app options, you can now switch the app type from mobile app (hybrid) to mobile web by clicking Change for Change project type:

Select the new type and click Save:

Once you switch the project type to Mobile Web, publish option will be enabled on the same page:

and also in the builder:

Simpler access to app settings

To access app settings you had to go to Project view, then Project > Project Profile. Now you can access project settings from the top level menu:

Project settings editor is divided into four panels:

1. General – for setting app name, description, start page and selecting a theme
2. External resources – for adding 3rd party JavaScript librararies
3. Android binary APK properties
4. iOS binary API properties

Faster

We made changes how Appery.io web site and builder work so things should be running faster.

New List component options

Check out the List component, we added more option that you can configure from properties. If something is still missing, you can always use More Properties feature. Our goal is to make the list as configurable via properties as you can do in source code.