Creaing a mobile app, what is after API


We are trying to make a mobile application and I was curious... what do you do after you create the APIs for the back end? What program should I use to generate the front end? Are there any step by step tutorials whhich include this transition step?
Who is Participating?
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Are you making a native app or an html5 app that will go into a webview?  If html5, then you simply make html5 webpages responsive.  Then in ios or android or windows you create a webview app and place the url of your site in the webview.

If you are making a native app, you will use java for android or objective-c for ios.  Start here for android and for ios you will need x-code and the ios dev kit

You can also use or or cloud services like
mSproutAuthor Commented:
If I were to make the app using HTML5 would it still be downloadable? Or more intended for use with the web? Is there a way to make an app, and have the final code work for Android or iOS. I think XDK does this? If I were to use that, where in the code do I place these .json urls?
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
If you make an html5 app that runs in a webview, that will be the easiest.

These links may not make sense right away.  Essentially a webview is like an iframe.  You create a native app with one page that contains a link to your site.  It will look native but really run on your site.  It is the easiest way to go for a developer, but does not give the best experience to users who may complain of some lag especially in pressing buttons.
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

mSproutAuthor Commented:
Hmm. Is there a step by step for dummies for native? What would I search for?
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Both links I gave you are the place to start.  Creating a pure native app is not the place to go for dummies.    If you must, android is based on java and ios is objective c

A good place to start for the app for android is building your first app and for ios

I think you will see building a native app, especially a data driven app, is going to be a lot harder then a data driven website.   For your first one, you are probably better off using an html5 app/webview or phonegap.  Get that going, then build on version 2 to be native.  

You are in the right direction of building a webservice/api for your data calls.   Next is to understand security/oAuth2, java/objectiv-c, android skd, ios sdk, ....
mSproutAuthor Commented:
ok, I am going with the html5. I have the form built, and the apis. I can't find sample code though?
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Sample code for which part?

If you have a form and use ajax, you can use pure js or jquery to submit your form

Your basic usage would be like below from
  type: "POST",
  url: "/myendpoint/data/"
  .done(function( data_back_from_endpoint ) {
    alert( data_back_from_endpoint );

Open in new window

In your program it may look like

<input id="name">
<button id="submitname">Submit</button>

var name=$('#name').val();
  type: "POST",
  url: ""+name
 // or  url: ""+name
  .done(function( data_back_from_endpoint ) {
    alert( data_back_from_endpoint );

Open in new window

Taking it another step would be to add some type of authorization.  One option would be to hash some info including the data you are posting and in your end point, test the hash.
mSproutAuthor Commented:
How does this translate to json? How do you send it there? That is the url you use? xxxxxxxx.json?
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Your end point url can be anything the server will accept.  You can use .php, .txt, .asp, .aspx, .js.  Or you can send it to

Have you created the api's?  What is the end point or url where they are located?  That is where you post your data.  Is your end point looking for json format? or a post?

If your end point is just an asp or php page you would use $_POST["name"] or whatever you need for your severside language to accept posted data.
mSproutAuthor Commented:
http://localhost:3000/api/registrations.json POST with user[email] , user[password] Does that help? Apparently I also need to figure out how to save into a phone? (What have I gotten into?)
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
>Apparently I also need to figure out how to save into a phone?

All of this needs to be figured out before you start.

I think we need to start over.  
What are the main functions of your app?
What is your experience level with:
-asp.NET (c#, vb)
-asp classic
-native android dev
-native ios dev
-native windows phone dev

If you are feeling like, "what have I got myself into" this may not be the route for you as far as doing it yourself from scratch.  Take a look at the links below and see if those types of services may fit your needs.  Make sure to look at pricing.  Don't be put off though, custom native mobile app building will start in the low 5 figures.

If you would like to post here the information I asked about your app we can help guild you a little more.
mSproutAuthor Commented:
It sends a text message with your location.

HTML5 - Modifying code - 5/10
CSS3 - pretty good - 7/10
Javascript - Some modifications - 2/10
jquery - i used once - 1/10
php -  i get it when reading, can't do it - 3/10 - i used to make small modifications a lot - 3/10

I have been trying to use appmobi (XDK) it crashes  or has issues a lot. I used it to build the forms.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Ok, where do you need to save information locally?  

<!DOCTYPE html>
<html lang="en">
<meta charset=utf-8>
<meta name="viewport" content="width=620">
<title>HTML5 Demo: geolocation</title>
<link rel="stylesheet" href="css/html5demos.css">
<script src="js/h5utils.js"></script></head>
<section id="wrapper">
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = ""; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
<meta name="viewport" content="width=620" />

<script type="text/javascript" src=""></script>
      <p>Finding your location: <span id="status">checking...</span></p>
function success(position) {
  var s = document.querySelector('#status');
  if (s.className == 'success') {
    // not sure why we're hitting this twice in FF, I think it's to do with a cached result coming back    
  s.innerHTML = "found you!";
  s.className = 'success';
  var mapcanvas = document.createElement('div'); = 'mapcanvas'; = '400px'; = '560px';
  var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var myOptions = {
    zoom: 15,
    center: latlng,
    mapTypeControl: false,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    mapTypeId: google.maps.MapTypeId.ROADMAP
  var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
  var marker = new google.maps.Marker({
      position: latlng, 
      map: map, 
      title:"You are here! (at least within a "+position.coords.accuracy+" meter radius)"

function error(msg) {
  var s = document.querySelector('#status');
  s.innerHTML = typeof msg == 'string' ? msg : "failed";
  s.className = 'fail';
  // console.log(arguments);

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success, error);
} else {
  error('not supported');

</script><a id="html5badge" href="">
<img src="" width="325" height="64" alt="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage" title="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage">
    <footer><a href="/">HTML5 demos</a>/<a id="built" href="">@rem built this</a>/<a href="#view-source">view source</a></footer> 
<a href=""><img style="position: absolute; top: 0; left: 0; border: 0;" src="" alt="Fork me on GitHub" /></a>
<script src="js/prettify.packed.js"></script>


Open in new window

Send sms messages using a gateway like or

You would need at minimum one page with a form to send somebody a text and a button to click.  When the page loads, you can display the location.  Then they enter in a contact and use twillio to send your sms.

Of course this is over simplified.   You probably want to make it easy to grab contacts.  I don't believe an html5 web app can grab contacts from a phone.  Instead you would need to use social sharing.    You could also use to do this for you.  Creating a pure native app will give the best user experience, but they are much harder to code.  You would want to learn java (android) and objective-c (ios).

The next option you probably want is some type of log in so just anybody is not sending sms messages on your dime.  How far did you get with appmobi?  did you look at other choices.
mSproutAuthor Commented:
I was thinking I would save the information in localStorage.

We are using twilio I believe, cause the back end guy mentioned he was stuck on something. What do you mean by social sharing?  Would phonegap be not that difficult?

I made the login screen in appmobi and I have a registration api. If i click the ec2 link I see a form. Thats all I got. I also tried viziapps which is promising... It is also native I believe supposedly... But even there, there is a bit to igure out. Maybe I should just fiddle more with it?
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Native apps are not as easy as html5 apps.  I have only fiddled with some of the links I provided you as well but have not made anything big.

The best route will depend on your budget, patience and willingness to learn.    If you feel you have an app that can make a lot of money and need to get it out quickly.  I would honestly make a business plan and find some money to hire to have it done right.    

I think you will find many people start out with something like phonegap as their first app and then progress on to making the next version native.

Some of these make it easy apps seem promising but as you find out, there is still some frustration level.

You can grab contacts from google, facebook, etc via their api's.  Depending on what you are doing, it may be easier to get them from the phone's contacts but that requires a native app I believe.

As far as using Twillio, you need to use some 3rd party gateway to send sms messages. Amazon and google app engine can do this as well.  Part of your decision has to be what platform to use as well.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.