Solved

Creaing a mobile app, what is after API

Posted on 2013-12-08
17
552 Views
Last Modified: 2014-11-12
Hello,

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?
0
Comment
Question by:mSprout
  • 8
  • 7
17 Comments
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 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/
0
 

Author Comment

by:mSprout
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?
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 500 total points
ID: 39704557
If you make an html5 app that runs in a webview, that will be the easiest.

http://developer.android.com/guide/webapps/webview.html

https://developer.apple.com/library/ios/documentation/uikit/reference/UIWebView_Class/Reference/Reference.html

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

Author Comment

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

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 500 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, ....
0
 

Author Comment

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

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 500 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/
$.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

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

<script>
$('#submitname').click(function(){
var name=$('#name').val();
$.ajax({
  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 );
  });
})'
</script>

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.
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

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

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

Author Comment

by:mSprout
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?)
0
 
LVL 52

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:
-html5
-css3
-javascript
-jquery
-php
-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.  

http://www.appmobi.com/
http://www.nimblekit.com/
http://appery.io/
http://www.apps-builder.com/

If you would like to post here the information I asked about your app we can help guild you a little more.
0
 

Author Comment

by:mSprout
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.
0
 
LVL 52

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">
<head>
<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>
<body>
<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>
    <header>
      <h1>geolocation</h1>
    </header>
<meta name="viewport" content="width=620" />

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <article>
      <p>Finding your location: <span id="status">checking...</span></p>
    </article>
<script>
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    
    return;
  }
  
  s.innerHTML = "found you!";
  s.className = 'success';
  
  var mapcanvas = document.createElement('div');
  mapcanvas.id = 'mapcanvas';
  mapcanvas.style.height = '400px';
  mapcanvas.style.width = '560px';
    
  document.querySelector('article').appendChild(mapcanvas);
  
  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">
</a>
    <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> 
</section>
<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>

</body>
</html>

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

Author Comment

by:mSprout
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?
0
 
LVL 52

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

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

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…
A short article about problems I had with the new location API and permissions in Marshmallow
Sending a Secure fax is easy with eFax Corporate (http://www.enterprise.efax.com). First, Just open a new email message.  In the To field, type your recipient's fax number @efaxsend.com. You can even send a secure international fax — just include t…
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

743 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now