You can extend the functionality of any Appery.io component by adding custom JavaScript. Today, we’ll see how the Google Map component in Appery.io can be used to display driving directions both visually and as text.
With the help of the Google Directions service, we’ll create a mobile page similar to the directions example listed on the examples page for the Google Maps API. Read the rest of this entry »
We just published a new tutorial that shows how to build a mobile app with AT&T SMS API. The app allows you to send an SMS message and look like this:
Try this new tutorial or any other tutorial form our docs.
We got some cool stuff planned in our April release. Check it out:
You can always check the roadmap here: http://docs.appery.io/roadmap
In case you missed it, here is what we released in March.
We just published a new tutorial that shows you how to build an HTML5 mobile app connected to OpenShift REST API. It’s based on this example.
The app has two pages, and two services. One service gets the current list of users. The second services creates a new user. Give it a try and let us know if you have any questions!
Do you know how to take advantage of custom JavaScript when working with Appery.io visual components? You can easily access any Appery.io component in JavaScript via the Appery.io JavaScript API and manipulate it with the jQuery Mobile API. Here is an example of how to dynamically add items to a list using JavaScript. Read the rest of this entry »
Read more.
Last week we had our March release. Here is what’s new and cool.
We just added a bunch of new and awesome jQuery Mobile themes and swatches. Here is how the new Appery.io dark-gray theme looks:
Check out the rest here
Plugins make it possible to package services, screens, images as a “plugin” and then add the plugin to any other project. You can even create custom project templates from plugins. A plugin is created by selecting Export > Appery plugin:
To learn more, read plugins documentation.
The Appery.io visual editor is pretty cool but we know very well that being able to insert any custom code is a must have feature. In this release we added a new Panel component which can be.
Staying on the topic of customazing your app, in addition to being able to add any JavaScript you can now also create a custom CSS file:
A number of improvements were were do the visual data mapper. Once a connection is mapped, a grey dotted line appears to indicate to which variable the connection is made. 
We spent the last couple of days updating Appery.io documentation with all the new features. We’d love to hear your feedback. One thing we are definitely going to add is more tutorials!
In addition to standard jQuery Mobile themes, we just added a bunch of new and awesome themes and swatches to Appery.io Mobile App Builder.
You can set the swatch name from screen properties:
or click More themes link to change the theme:
Appery.io Mobile App Builder stands out in how easy it is to incorporate REST services with public APIs into mobile apps. Appery.io now makes it even easier by prepackaging the steps you would go through to connect an app to a service as plug-ins. Along with this new plug-in feature for easy code re-use, get a peek at our new Service Catalog we’ll be growing with pre-packaged versions of popular and useful APIs. Also, see the re-designed Visual Data Mapper.
Join our interactive webinar to learn all about these exciting features. We’ll be building an app in minutes, and attendees will be able to try the app on their devices as it’s being built.
Appery.io Plug-ins: The Pre-packaged Approach to Consuming APIs
Wednesday, March 28, 2012
11am US Pacific Time
Register: https://www1.gotomeeting.com/register/949571032
See our last webinar on YouTube!
Appery.io, the cloud-based HTML5, jQuery Mobile and PhoneGap mobile app builder come with a very powerful and easy way to define and consume REST services in a mobile app. Inside the builder, you get what amounts to a very easy to use REST services console where any service can be defined, tested, and have its response parameters automatically defined.
Being able to run and test the service from inside the builder is very important as it demonstrates that the service works and data is returned. The next step is usually to make the service available on the page, define UI-service data binding, and then set the service to be invoked on some event. But, when testing the app in a browser, the services sometimes doesn’t work or no data is returned. This creates confusion as the service worked when testing it inside the builder but doesn’t work when invoking from a browser page. The reason this happens is because of the cross-domain security built into browsers.
All browsers have this built into them. Basically, to invoke a service via JavaScript (AJAX) from a domain like mydomain.com, the page from which the service is invoked has to be hosted on that same domain, mydomain.com. When testing an app built in Appery.io, the page is running on appery.io but the service being invoked is on a different domain like, for instance, search.twitter.com. The browser won’t allow this. This is by design to ensure that no bad or malicious JavaScript code can be used to invoke the service.
What can we do? There are a number of options to make this work.
The most obvious option is to host the page and the service on the same domain. The solution is simple but not very practical today. With the new shift to a client-cloud architecture, many services used in mobile apps today are cloud-based, and are hosted via different API providers and thus are on different domains. Hosting the page and the service on the same domain might work well if services were deployed completely within the same organization.
JSONP is the unofficial way many provides solve the cross-domain problem. Instead of making a regular AJAX request which is subject to cross-domain security, the request is made via loading a JavaScript file with a special callback function defined. As loading a JavaScript file is not an AJAX call, it doesn’t fall under the cross-domain security problem. The callback function is then invoked to process the data returned (which is JSON). The URL looks like this:
http://someurl?callback=getthedata
getthedata would be invoked to process the response.
With JSONP, a service can be invoked from a page hosted on different domain. For example, Twitter’s API supports JSONP and thus can be invoked from appery.io hosted pages. However, it’s up to the service to support JSONP and not all services support this feature.
While JSONP could be considered a hack or a workaround, CORS is an attempt to create a standard way to solve the cross-domain issue. When a service request is made, the server will include a header parameter in the response indicating that the domain from which the call was made – is allowed to invoke this service. However, it’s up to the service providers to add such support. For example, the Parse mobile back-end service supports this feature and makes it very easy to use their services.
If none of the above options are available, Appery.io Mobile App Builder provides a proxy service that works for testing and apps that are hosted on appery.io. When using the proxy, the request is first sent to the proxy server and then, from the server, the request is made to the service. Because the request is sent from the server and not from the page, cross-domain security is not triggered.
Finally, one more option exists, but it’s only useful in development or testing. You can start Google Chrome with security disabled in which case the cross-domain issue is no longer a problem. To start Chrome with security disabled start it with this command line:
chrome –disable-web-security
Everything I just described applies to mobile Web apps – pure Web apps running in the browser. When you develop a PhoneGap app (hybrid app) cross-domain security is not an issue, even though the app is actually running in a browser (albeit a chromeless one).
Next time you are trying a REST service, this should help you understand that’s really happening.
Originally published on Maxa blog.