Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


Creaing a mobile app, what is after API

Posted on 2013-12-08
Medium Priority
Last Modified: 2014-11-12

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?
Question by:mSprout
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 7
LVL 54

Accepted Solution

Scott Fell,  EE MVE earned 2000 total points
ID: 39704494
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 http://developer.android.com/index.html and for ios you will need x-code and the ios dev kit https://developer.apple.com/devcenter/ios/index.action

You can also use http://phonegap.com/ or http://www.sencha.com/ or cloud services like http://www.appmobi.com/

Author Comment

ID: 39704502
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?
LVL 54

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 2000 total points
ID: 39704557
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.
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.


Author Comment

ID: 39707836
Hmm. Is there a step by step for dummies for native? What would I search for?
LVL 54

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 2000 total points
ID: 39708671
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 http://www.dummies.com/how-to/computers-software/programming/java.html and ios is objective c http://www.dummies.com/store/product/Objective-C-For-Dummies.productCd-0470522755.html.

A good place to start for the app for android is building your first app http://developer.android.com/training/basics/firstapp/index.html and for ios https://developer.apple.com/library/IOS/referencelibrary/GettingStarted/RoadMapiOS/index.html

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, ....

Author Comment

ID: 39718193
ok, I am going with the html5. I have the form built, and the apis. I can't find sample code though?
LVL 54

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 2000 total points
ID: 39718211
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 http://api.jquery.com/jQuery.ajax/
  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: "http://mysite.com/myendpoint/data/"+name
 // or  url: "http://mysite.com/myendpoint.php?name="+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.

Author Comment

ID: 39718213
How does this translate to json? How do you send it there? That is the url you use? xxxxxxxx.json?
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39718219
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 mysite.com/folder/

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"] http://www.php.net/manual/en/reserved.variables.post.php or whatever you need for your severside language to accept posted data.

Author Comment

ID: 39718221
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?)
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39718255
>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.

Author Comment

ID: 39718268
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
asp.net - 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.
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39718281
Ok, where do you need to save information locally?  

Geolocation http://html5demos.com/geo
<!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 = "http://engine.carbonads.com/z/14060/azcarbon_2_1_0_VERT"; 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="http://maps.google.com/maps/api/js?sensor=false"></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.id = 'mapcanvas';
  mapcanvas.style.height = '400px';
  mapcanvas.style.width = '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="http://www.w3.org/html/logo/">
<img src="http://www.w3.org/html/logo/badge/html5-badge-h-connectivity-device-graphics-multimedia-performance-semantics-storage.png" 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="http://twitter.com/rem">@rem built this</a>/<a href="#view-source">view source</a></footer> 
<a href="http://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
<script src="js/prettify.packed.js"></script>


Open in new window

Send sms messages using a gateway like https://www.clickatell.com or http://www.twilio.com/

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 http://phonegap.com/ 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.

Author Comment

ID: 39718289
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?
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39718303
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.

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I'm Dumb-phoned(ed) Last week, I noticed this message when adding events to my Google Calendar: On June 27th (2015), Google is removing SMS as a notification option for Google Calendar events.  Their assumption is that enough people have smart p…
Once again I push the limits of my phone.  An introduction to the Android Google Now Launcher.
In response to a need for security and privacy, and to continue fostering an environment members can turn to for support, solutions, and education, Experts Exchange has created anonymous question capabilities. This new feature is available to our Pr…
Is your data getting by on basic protection measures? In today’s climate of debilitating malware and ransomware—like WannaCry—that may not be enough. You need to establish more than basics, like a recovery plan that protects both data and endpoints.…
Suggested Courses

609 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question