Dialing number and sending SMS via JavaScript

Posted: March 27th, 2014 | Author: | Filed under: JavaScript | Tags: | Comments Off

Being able to launch the native dialer app or SMS app from the app you are building might be a very useful feature. For instance, the app you are building might display a list of restaurants in the area with a phone number. You want to be able to click the number and call the restaurant. This functionality can be easily done with calling the “tel:” or “sms:” and passing the needed values. Here is the simple Appery.io app that contains just a two buttons:

buttons

Here is the JavaScript code for the “Send SMS” button:

window.location.href = “sms:+375292771265?body=Hello from Appery.io!”;

Such code will open the SMS typing window with predefined text and phone number as following:

2014-03-12 14.42.34

Second button has the following JavaScript code:

window.location.href = “tel:+375292771265″;

Clicking on that button will open the dialer with pre-populated phone number:

2014-03-12 14.42.15

It is not possible to programmatically call or send SMS without opening the appropriate window due to the security reasons.

iOS has some nuances when dialer or sms window should be opened. Try to use such code for iOS platform:
window.open(‘tel:+375292771265′, ‘_system’);

Or for SMS:
window.open(‘sms:+375292771265?body=Hello from Appery.io!’, ‘_system’);

Please also note that these protocols (tel: and sms:) might work differently depending on OS/browser versions. On Android, you might get different functionally depending what app is selected for sending SMS messages.

Instead of using the native SMS app, a number of services such as AT&T and Twilio provide APIs to send SMS messages. Appery.io has plugins for AT&T and Twilio SMS API.


The New Paradigm: Cloud Services, Cloud Tools [Article]

Posted: June 5th, 2012 | Author: | Filed under: API, Articles, HTML5, iOS, JavaScript, jQuery Mobile, PhoneGap, Windows Phone | Tags: , , , , , , | Comments Off

Cloud Services

In the past year or so, we have witnessed a major shift from client-server to client-cloud. This shift is primarily fueled by two factors: mobile devices exceeding desktop computers and the thousands of different APIs available on the Internet today. What started in early 2000 on eBay and Amazon has become a real revolution in 2012 with thousands of companies, from Twitter and Facebook to AT&T, offering cloud-based services.

REST API
One of the most common ways to access private or public service APIs is via REST requests.

In the client-server approach an organization builds applications that consume its own internal content and resources. However, even large IT organizations such as AT&T, Verizon and Amazon have come to realize that they are no match for the social consumer and social enterprise developers out there. By making APIs publicly available, these organizations hope that developers and “citizen developers” will come and build applications and mobile apps on top of their services.

Citizen developers at work
Analysts at Gartner see a trend toward app creation independent of IT. They predict that by 2014, citizen developers – employees outside of IT and software development – will build 25% of new business applications. In 2007, they built less than 5%.

One of the best-known API success stories comes from Amazon: Its cloud service APIs let outsiders access the company’s massive data centers. Twitter, with its deceptively simple 140-character message model, exploded thanks to its API. In fact, you probably read and write tweets via a Twitter application or mobile app rather than going directly to Twitter’s Web site. Facebook’s Graph API has spawned a whole industry of apps to support its hundreds of millions of users.

Continue reading


Extending the Google Map Component with Custom JavaScript

Posted: April 5th, 2012 | Author: | Filed under: Articles | Tags: , , , | Comments Off

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 »


Manipulating Appery.io Components with jQuery Mobile

Posted: March 28th, 2012 | Author: | Filed under: Articles | Tags: , , | 4 Comments »

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 »


Mapping the Tools in the Mobile Development Ecosystem – And How Appery.io Mobile App Builder Fits In

Posted: February 17th, 2012 | Author: | Filed under: Articles | Tags: , , , , , , | Comments Off

ReadWriteMobile has posted an interesting Infographic created by Kinvey mapping the current mobile ecosystem (click on image to view larger version):

(Image source: http://kinvey.com/images/kinvey_backend-as-a-service_mobileecosystem_2100px.png)

First of all thanks to Kinvey for creating this wonderful map and including Appery.io in it (blue Mobile SDK line). Appery.io could actually span 3 different lines: BaaS, Mobile SDK and Mobile API. Appery.io is a cloud-based HTML5 mobile app builder, so it’s not exactly a mobile SDK. In fact, the technology under the hood is HTML, JavaScript and jQuery Mobile. For hybrid apps, the app can be wrapped in PhoneGap, which also provides access to native device features. So, there is no really “custom” SDK.

Second, from the builder it’s incredibly easy to consume any REST API (yellow Mobile API line). Appery.io comes with a pretty nice REST services console where any service can be tested. From the same console, the REST service response (structure) can be automatically created. Once the service is defined, it is mapped to jQuery Mobile UI using a visual mapper (UI to service input, service output to UI).

Thirdly, as most BaaS services (orange line) are exposed as REST, HTML5 mobile app built in Appery.io, can easily connect and use those services.

Lastly, and maybe the most important point is how incredibly fast you can build apps. It sort of all makes sense.. you got cloud-based mobile backend (exposed as REST) and cloud-based app builder to build the apps. It sounds simple.. but a really elegant picture.

This perfectly describes Appery.io. Appery.io is cloud-based builder for creating HTML5, jQuery Mobile, PhoneGap, and RESTful mobile apps.

Originally posted: http://mkblog.exadel.com/2012/02/mapping-the-tools-in-the-mobile-development-ecosystem-and-how-tiggzi-mobile-app-builder-fits-in/.


Building jQuery Mobile, HTML5 Mobile App with SoundCloud REST API [Webinar recording]

Posted: January 23rd, 2012 | Author: | Filed under: Events, Webinar | Tags: , , , , , , , | Comments Off

Recording of our Learn How to Build Mobile Apps in the Cloud with HTML5, jQuery Mobile, REST, and PhoneGap webinar.


Using 3rd Party JavaScript Library In Your Mobile App

Posted: December 15th, 2011 | Author: | Filed under: Features, JavaScript | Tags: , | 4 Comments »

One of the really great benefits building a mobile Web app is that you can use any custom JavaScript, a 3rd party library or something you wrote yourself. In Appery.io Mobile Apps Builder, you build mobile Web apps (which alter can be exported as native with PhoneGap) and so you can use any custom JavaScript. How do get the custom JavaScript code in the app? There are three ways.

First is using Run Custom JavaScript action attached to any HTML event. For example, let’s say you want to invoke some custom JavaScript on button click:

This approach works well but usually should be limited to just doing “small” tasks.

The second approach allows you to import a full JavaScript file/library into your app. It’s done by creating a new JavaScript file (asset) and you get the following options:

As you can see, you can easily create a file by importing it from a URL or load it from a file.

The last option is to add a JavaScript resource via project profile (Project > Project Profile > External resources):

This option will link to the specified file.

Happy mobile development.


From An Idea to Android Market In 40 Minutes [Webinar]

Posted: November 10th, 2011 | Author: | Filed under: Events | Tags: , , , , , , | 1 Comment »

When: November 16, Wednesday, 11am US Pacific Time
Register: https://​www1​.go​tomeeting​.com/​r​e​g​i​s​t​e​r​/​4​6​6​4​2​5​672

One of the great things about Appery.io Mobile Apps Builder is its support for end-to-end development, going all the way from an idea in one person’s mind to an app running in thousands of phones. In this webinar, we’ll show you exactly how it’s done (and how easy it is) by walking you through a hands-on example. The focus will be on exporting options for apps. In this case, we’ll export an Android binary (.apk) and publish to the Android Market. Of course, we’ll quickly build an app first, so you can learn or refresh your memory about how to build the UI with jQuery Mobile, connect to REST services, and test the app.


Using jQuery Swipe Transition For Navigation In Your Mobile App

Posted: November 3rd, 2011 | Author: | Filed under: Features | Tags: , , , | 15 Comments »

Navigating between pages in Appery.io is very simple. You first add an HTML event to a component, such as click for a button, and then add Navigate To Page action where you select the page to navigate:

This works very well, but it will replace the entire page. An alternative way to navigate or transition between pages is to use jQuery swipe transition which in my opinion looks better. Here is how to do it. You use the same event, such as click for a button. Then, we add Run Custom JavaScript action with the following code:

The first argument is the page name. The second argument indicates that a swipe transition should be done. That’s it. You are probably wondering why not do this via Navigate To Page action? It will be possible soon. We are going to add a check box so you will be able to select what type of transition you would like, a page replace or swipe. For now, this is a very simple work around.

Want to try it?

Just scan this QR code:


Working With HTML Events Just Got Much Easier When Building A Mobile App

Posted: October 28th, 2011 | Author: | Filed under: Features | Tags: , | Comments Off

One of the key features in Appery.io is the ability to add HTML events such as value change, click, blur and others to components on the screen and then invoke any of the actions:

  • Set HTML Attribute
  • Set Property
  • Set Local Storage Variable
  • Navigate to Page
  • Navigate to Link
  • Open as Popup
  • Close Popup
  • Invoke Data Source
  • Run Custom JavaScript

If there is a page that has numerous components with defined HTML events and action, then trying to view or edit a specific event/action requires selecting the component and then switching to Events tab (in Properties). Although it allows to view a particular event/action, it doesn’t give you a full picture, it doesn’t show other components and thier events/actions. Well, we made it much simpler now. A few weeks ago we introduced a new Events tab, which will show you all the HTML events and actions defined for all components on the current screen.

Above you can see two components and their events and actions. mobilesearchbar1 component defines value change event and Set Local Storage Variable action. mobilebutton1 defines click event and Run Custom JavaScript action.

To go back to the phone, simply click the Design tab.

As you can see, it’s much simpler now to view and edit HTML events and actions. And, you can also add new events and actions. Select the component, add event, pick and action and click Add: