Tutorial 6: Sending & Receiving External Data

Follow

Comments

22 comments

  • Avatar
    ben

    Note: When using the code above, please make sure you remember to change the URL 

    http://www.YOURDOMAIN.COM/SEND_DATA.php?callback=?

    ... into the URL of your real server, or when you run the code you'll get an error that says Script Error. (,Line 0)



  • Avatar
    whitelanternsg

    How can i add authentication functions in the mobile app?

  • Avatar
    marcoliocops

    I am looking for a way to allow different users of the application to send messages between each other. lets say if a user scans a QR code, other users currently using the application would be notified.

  • Avatar
    ben

    Hi Marcolio. Interesting idea, but it's actually a pretty complex thing to set up and not something we can help you with directly. You'd need a server that keeps track of the current users and some form of real-time connection between the app and the server.

  • Avatar
    pequotmuseum

    Ben, I'm afraid I am not too technical and lack programming skills. Is there a way to import RSS feeds into my app using these instructions or is that another tutorial?

  • Avatar
    kieron

    Hi pequotmuseum,

    Sorry for the delayed response. One of the more simple ways to get an RSS feed into your app would be to use Feed-2-JS (http://feed2js.org/) - I'ved tested this on iPhones and it works fine (so if you're planning Android, you may need to do some testing), and the instructions should be easy to follow.

    Before we get into it, we should note that this uses CSS and HTML in a RichText widget, which can cause unexpected problems with apps which we can't offer support with - so we recommend keeping things simple and regularly saving versions of your app, to make sure you can go back if anything does go wrong.

    Here's what you'd do:

    1. Get your Feed URL (we'll use the Calvium blog feed in this example: http://calvium.com/blog/feed/ )
    2. Go to http://feed2js.org/index.php?s=build and enter the URL in the first field
    3. Customise the rest of the options (e.g. whether to show dates, how many characters of the post you want to show, etc.)  - the controls here are a little verbose, but you can leave most of them as defaults and play around with the results. For example, 250 characters of "item descriptions" is usually enough to give a decent excerpt
    4. Click "Preview Feed" on the right-hand of the screen to see the output. Note that the appearance will change when you move it into AppFurnace
    5. When happy with the content, click the Generate JavaScript button on the right
    6. On the next screen, copy the first part of the code - between the <script> tags. Like this:

      <script language="JavaScript" src="http://feed2js.org//feed2js.php?src=http%3A%2F%2Fcalvium.com%2Fblog%2Ffeed%2F&num=3&desc=250&date=y&utf=y"  charset="UTF-8" type="text/javascript"></script>

    7. In AppFurnace, open up your app and add a Rich Text widget onto the canvas. Paste your feed code into the widget's text field.
    8. Click Save and then Preview your feed online. You should see a bulleted list of the feed items
    9. Back in the Layout editor, you can introduce some CSS to make the feed look how you want it to - again, take small steps and keep checking the progress here, as CSS can introduce other issues. But here are a few defaults to get started (just paste it into the RichText widget, after the JavaScript):

      <style type="text/css">

      /* Reset list and item padding & margins */
      ul, li { margin: 0; padding: 0; }

      /* Get rid of the bullet points and space the list vertically */
      li {
          list-style-type: none;
          margin: 0 0 40px;
      }

      /* Make post titles stand out */
      a.rss-item {
          font-size: 20px;
          font-weight: bold;
      }

      </style>

    That should give you a simple way to introduce RSS feeds into your apps.

    Of course, the RSS feed won't appear if you don't have an internet connection, so you might want to utilise the Network Connection functions to catch any network errors for your users: http://the.appfurnace.com/docs/cordova_connection_connection.md.html#Connection

    Hope that helps

  • Avatar
    brvishnu92
    To check if the php coding is working I typed http://www.YOURSERVER.com/location/of/file.php?callback=foo&nam...
    I got the following message.

    foo({"success":true,"message":"Thanks ben, blue is a lovely color"}) <br /> <b>Warning</b>: file_get_contents(/Json.json) [<a href='function.file-get-contents'>function.file-get-contents</a>]: failed to open stream: No such file or directory in <b>/home/urmagicb/public_html/bus.php</b> on line <b>38</b><br /> jsonDataReceived()


    How do I solve this issue?
  • Avatar
    brvishnu92

    Problem resovled guys. What is meant by PHP function file and where should I create it? To be honest I dunno anything about php. Help pls.

  • Avatar
    kieron

    Hi brvishnu92,

    To create a PHP file, just save that code snippet in a text editor with a ".php" extension (e.g. "GET_DATA.php" ), and store it on a web server. Then, use the full URL of the PHP file in your app (e.g. "http://www.yourdomain.com/GET_DATA.php..." )

    Hope that helps

  • Avatar
    JoeDorman

    Could this be set up to run from a home computer? If so how?

  • Avatar
    kieron

    Hi JoeDorman,

    In theory you could - you'd have to set up your home computer as a web server, which would need to be running 24/7, and would also be opened up to potential security threats like viruses, malware and other attacks - so we wouldn't recommend it unless you have a good understanding of web security and server management. If you did go down that route though, once you'd set up your server, the tutorial would be the same, just using your new web server's address instead of a domain.

    Googling "set up my computer as a web server" gives a lot of different tutorials with different ways to do it, but again, we'd recommend using a web host, as it'll be more secure and less work in the long-run.

    Hope that helps

  • Avatar
    whiterock

    When I try this example I get two lines returned:

    undefined likes undefined

    undefined likes undefined

    What have I done wrong?

     

     

     

  • Avatar
    kieron

    Hi whiterock,

    Are you storing your data as a JSON file? If so, could you confirm that the data is being saved into the file correctly by logging in via FTP and opening up the file?

  • Avatar
    whiterock

    Yes, the file is there. I checked it with jsonlint. If I remove the the file I get a different error.

  • Avatar
    kieron

    Great - and is the data in there being saved as expected (e.g. like the example JSON data in the tutorial)? This will tell us whether it's a problem with the data going in, or when the data's being read by the app

  • Avatar
    whiterock

    The data is there. I rebuilt the file in Notebook to make sure I had not copied anything unwanted.

  • Avatar
    kieron

    OK - could you paste the JSON data here?

    It's worth adding some logging into your app when debugging too. Try:

    for (var i in dataFull) {
           result = result + dataFull[i].name + " likes " + dataFull[i].color +"";
    log("dataFull[i] = "+ dataFull[i]); }
  • Avatar
    whiterock

    Here is the json:

     

    [
    {"name":"Velma", "color":"red"},
    {"name":"Louis", "color":"gold"},
    {"name":"Alex", "color":"black"}
    ]

    I added the logging code and got two more lines of:

    undefined likes undefined

    undefined likes undefined

     

    That is two lines each time, not three.

     

    John

     

  • Avatar
    whiterock

    Kieron, Do you have any ideas on what is happening? John

  • Avatar
    kieron

    Hi whiterock,

    After the logging, what messages appear in the log area of the Online Preview? You should see one starting with "dataFull[i] = "

    Also, another check with the server, can you access the second PHP file (the one with the reference to the JSON file) using your browser? Does this file read & print the data out from the file as expected?

    (e.g. "jsonDataReceived([ {"name":"Velma", "color":"red"}, {"name":"Louis", "color":"gold"}, {"name":"Alex", "color":"black"} ])")

    If this is working, it could be an issue with your server not allowing access to the file from your app. You may need to add an access control PHP snippet to your PHP file:

    header('Access-Control-Allow-Origin: *');


    Although you may want to check with your web hosts before doing this, as if they have restricted it, there may be a reason.

  • Avatar
    whiterock

    I get:

     

    datafull[i]=red

    dataFull[i]=Velma

    =======================

    USER SCRIPT LOADED

    =======================

    GPS enabled

     

    I can access the php fiel:

    jsonDataReceived([ {"name":"Velma", "color":"red"}, {"name":"Louis", "color":"gold"}, {"name":"Alex", "color":"black"} ])

     

     

  • Avatar
    kieron

    Hi whiterock,

    Ah, right - what's happening is that the dataFull variable is only returning the first object, so it's only looping through the first name & color properties, not the full list. You should be able to fix this by removing the "[0]" when creating the dataFull variable, like so:

    // This'll be run when the call is returned made...
    function jsonDataReceived(data) {
       
       var result = "";

    var dataFull = data; for (var i in dataFull) { result = result + dataFull[i].name + " likes " + dataFull[i].color +"
    "; } // Display Output: ui.results.text(result); }


    Let me know if that fixes it

Please sign in to leave a comment.

Powered by Zendesk