How to Start Building jQuery Mobile Apps in Appery.io App Builder

This is the second webinar in our 2016 webinar series and introduces you to the App Builder and how to build apps with jQuery Mobile.

In this video you will learn:

  • How to create a new jQuery Mobile app.
  • Learn about various views inside the App Builder.
  • How to use Cordova Geolocation API to get current device location.
  • How to invoke Uber Product API from Server Code.
  • Integrate Uber API into the app.
  • How to test and share the app.

Check out this video now:

To learn more how to build apps fast, go to our YouTube channel.

Adding Properties to UI Components in Appery.io App Builder

When you drag and drop a UI component, the Properties panel will show you properties you can set. For instance, here is an example when list item is selected:

Screen Shot 2014-04-25 at 4.49.50 PM

 

Sometimes not all properties might be exposed in the app builder, but it doesn’t mean you can’t set them. Using More Properties feature, you can set any properties supported by the component HTML or jQuery Mobile component.

For example, you want to change the list item icon to something list (no icon option is available but coming soon). With the list item selected, click More Options and add add the following property:

Screen Shot 2014-04-25 at 4.55.14 PM

 

The icon will not update in design time, but when you run the app, the first icon will change to bullets:

Screen Shot 2014-04-25 at 4.55.46 PM

 

To make this work, you need to know the property name and possible values. This is easy to find in jQuery Mobile docs or HTML docs.

Build And Publish a jQuery Mobile App In 5 Minutes

I’m going to show you how to build and publish a jQuery Mobile app in under 5 minutes.

Building the app

  1. Sign up for Appery.io Starter plan
  2. Create new app by entering its name and clicking Create:
    Selection_217
  3. Build the mobile UI by dragging components form the palette into the page:
    Selection_219
    Note the highlighted changes.
  4. Select the button and open Events tab
  5. Add Run JavaScript action (don’t forget to click Add event button):
    Selection_220
  6. Click Test button to launch the app in the browser:
    Selection_222
  7. Save.

Hosting the app

  1. To exit, click Back to project list button
  2. Open Hosting tab:
    Selection_224
  3. Click Change project type to mobile web button to switch the app type to Mobile Web.
  4. Enter app name and click Publish:
    Selection_225
  5. Now go to http://helloworld.app.appery.io using mobile or desktop browser

Tiggzi And The Backend as a Service Ecosystem Map by Kinvey

Our friends at Kinvey posted an update to their really nice Backed as a Service Ecosystem map. Some call it the subway map, the Pacman map, or you can also look at it as “Where we fly map”.

Thank you to Kinvey for including Tiggzi, we really appreciate it.

Tiggzi is right there:

A lot has changed in Tiggzi in the past couple of months so I would like to offer an update. Hopefully the map can be updated.

I don’t believe Mobile SDK is the best fit for Tiggzi (and other players such Sencha and Appcelerator). Tiggzi is much more than a mobile SDK, in fact, it’s a mobile app platform (more about it below). One suggestion is to add a new line that would include Tiggzi and others such as Appcelerator.

Tiggzi is a mobile app platform, and one of its biggest components is the mobile app builder.


Drag and drop app builder

It’s a cloud-based, drag and drop builder (IDE) for creating HTML5, jQuery Mobile and PhoneGap apps. As Tiggzi app builder uses jQuery Mobile and PhoneGap to create apps — it’s probably best to list it on a separate line with lines going to jQuery Mobile and PhoneGap (already exists). Again, this is just my opinion.

In early July we launched Backend Services under io.tiggzi.com. The first feature in the backend services is a cloud database.


Database features


Database web console

We are also working on Push, File storage, Server-side code, and Analytics features. I think there should be a line going from Tiggzi to BaaS line (io.tiggzi.com) – similar to Sencha’s connection to Sencha.io.

To summarize, this is Tiggzi mobile platform:

  • Visual UI builder (HTML5, JavaScript, CSS, libraries such as jQuery Mobile, PhoneGap, etc)
  • 3rd party REST API services
    • Plug-ins (pre-packaged API services and pages)
  • Backend services
    • Database
    • Push (available soon)
    • File storage (soon)
    • Server-side code (soon)
    • Analytics (soon)
  • HTML5 app hosting
  • Binary build

Creating jQuery Mobile Apps With MongoLab

Check out this really nice blog/tutorial on how to use Tiggzi to build a mobile app connected to cloud-based MongoDB, written by Ben Wen from MongoLab.

Building jQuery Mobile Apps With FullContact API

I attended GlueCon Hackathon in May and met Robbie Jack, Developer Evengalist from FullContact. FullContact was one of the hackathon sponsors. Once the vendor presentations were done and attendees presented their app ideas, we started chatting and Robbie told me about FullContact API. On a very high level, you give FullContact an email address (or another piece of information) and it gives you back a lot of rich social information about this user such as name, gender, location, social media profiles, photos and much much more. As we were chatting, I said, let me build an app in Tiggzi app builder that uses FullContact API. Well, Robbie was quite impressed. I built this app in front of him in about 20 minutes.

Getting FullContact API Key

As with most API’s, the first step is to sign up, register an app and get an API key. FullContact is no different, the sign up process is very simple. I signed up for the Free plan and had my API key in a few minutes.

FullContact plans

Click to sign up.

Next you create an app (mine is called Tiggzi) and you will get an API key:

FullContact app and API key

That’s it and pretty simple.

The API that we are going to use is right here and looks like this:


https://api.fullcontact.com/v2/person.json?email=name@host.com&apiKey=xxxx

For input, we are going to provide person’s email address.

Now let’s go to Tiggzi build the app that uses FullContact API.
Continue reading “Building jQuery Mobile Apps With FullContact API”

The New Paradigm: Cloud Services, Cloud Tools

This article was originally published in Software Developer’s Journal.

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 APIOne 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 workAnalysts 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.

Just looking at popular ProgrammableWeb site that lists close to 5,500 APIs (at the time of writing this) and 6,500 mashups or apps created that consume the various APIs. The city of San Francisco, already a mecca for startups, technology, and innovation, has made a big push into attracting developers by making city data and other date from its data.SFgov.org Web site available via API. For example, the city’s MUNI (city bus service) API is available for developers to build apps with using information about bus stations, schedules, and arrivals. Even the United States government jumped on the API bandwagon by making available data.gov, which provides public access to high-value machine-readable data sets generated by the U.S government.
Continue reading “The New Paradigm: Cloud Services, Cloud Tools”

Tiggzi, Cloud-based HTML5, jQuery Mobile App Builder At SF East Bay jQuery Meetup

I will be showing how to build HTML5, jQuery Mobile apps connected to REST API’s with Tiggzi at the SF East Bay jQuery meetup on Tuesday, May 29, 2012. Anyone who attends the meeting will also get free Pro plan. Definitely stop by.

jQuery Mobile App In Tiggzi Connected to Kinvey Backend

Kinvey is one of those services that makes building mobile backend way too simple. If you combine Kinvey with a cloud-based app builder Tiggzi, you get everything you need to build an awesome mobile app using cloud services. Let me show you what I mean.

To start, sign up for Kinvey, it’s free and then create your first app backend. We re going to create a backend for beers(!).

Next, create a new collection where we are going to store names of beer we like:

Open the collection. When you open it for the first time it will be empty so we need to define at least one column and enter some data. Click on +Col, and add Name column. Then add a few sample entries by clicking +Row. You can simply double click in Name column to enter values (you don’t need to enter anything for _id or _acl).

That’s pretty much all you need to do. Simple, right?

Let’s now go to Tiggzi app builder and create a jQuery Mobile app.

We will first build the UI with jQuery Mobile:

Next, we are going to add two REST services. Once service for getting all the beers (BeerGet), and one service for creating a new beer (BeerPost).

This is BeerGet service URL:

For Kinvey to know who we are, we need to add Authorization header parameter:

Note you can also calculate the Authorization value in run time.

We can test the service to make sure it works:

Right from the Test window, we can automatically define service’s JSON output structure by clicking on Populate Response Structure button:

For BeerPost service, the service URL is the same but instead of GET we now do POST. As we also need to send the new beer name, we have to add Name request parameter:

Adding both services to the page:

Two more things we are left to do. First is to map services to UI, and second invoke the services. Let’s do the mapping.

When the page loads, we want to get the list of all current beers so we are mapping BeerGet first.

There is nothing we need to map on input (Authorization header is already set). Output mapping looks like this:

Before we can test the app, we need to invoke the service on page load.

We can test in the browser or on the actual mobile device:

Here is how it looks:

Let’s now work on adding a new beer.

Mapping BeerPost to the UI. We are getting the new beer name and mapping it to service’s input.

We don’t need to worry about mapping the response (in this example). You do get back JSON that contains the object id that was created.

Next, we need to invoke the service on button click:

The last thing we need to do is show the updated list once a beer was added. To do that, we want to invoke BeerGet service once BeerPost finished successfully. We are going to use BeerGet success event to invoke BeerGet:

Running the app:

After entering new beer:

And that’s it. Sign up for Kinvey, Tiggzi, and build your mobile app.

Tiggzi – the Cloud-based jQuery Mobile App Builder At DC jQuery Users Group, May 10, 2012

I’ll be speaking at DC jQuery Users Group this Thursday, May 10. I’ll be showing Tiggzi – the cloud-based jQuery Mobile and PhoneGap app builder, and how fast and easy it is to build jQuery Mobile apps connected to any REST API.