20 Replies Latest reply on Dec 13, 2016 1:34 AM by jeeyi345

    PhoneGap's APK shows no return data of JSON from external API

    jeeyi345

      Hi,

      I've wrote some HTML and JS that connect to external API, that return a simple JSON, then I parsed it and show on the page.

      It runs locally, but when I convert to apk through phoneGap, the JSON data doesn't show.

      Is there some CORS issues maybe? How to let phonegap run like Local HTML page

      Thanks in advance

       

      P.S I couldn't find how to upload apk or html files, woud provide if I know how to .

      Sorry for bad English!

        • 1. Re: PhoneGap's APK shows no return data of JSON from external API
          VectorP Level 4

          There should be no CORS problem.

          Did you read and apply the docs for the whitelist plugin?

          • 2. Re: PhoneGap's APK shows no return data of JSON from external API
            jeeyi345 Level 1

            I found a link as follows:

            PhoneGap API Documentation

            But I have problems make the unziped folder with res/xml/cordova.xml (not in the path so I created myself) zip as apk.

            Do you mean there's a way to whitelist the API URL during the uploading?

            Or the phoneGap page should present data as local HTML version does, without additional modification?

            • 3. Re: PhoneGap's APK shows no return data of JSON from external API
              VectorP Level 4

              You should:

              - include the whitelist plugin in your config

              - include whitelisting rules

              - do so according to the whitelist plugin documentation:

              cordova-plugin-whitelist

              2 people found this helpful
              • 4. Re: PhoneGap's APK shows no return data of JSON from external API
                kerrishotts Adobe Community Professional

                What do you mean, "it runs locally"? Are you running it in a browser, or are you using the PhoneGap CLI locally in addition to PGB? Just trying to understand the environment your code works in.

                • 5. Re: PhoneGap's APK shows no return data of JSON from external API
                  jeeyi345 Level 1

                  Thank you for the reply, just I'm not quite understand the steps:

                  I upload the zipped site to the folllowing link: https://build.phonegap.com/apps

                  and let it generate the apk for me.

                   

                  I think I have XHRs and maybe Intent Whitelist.

                  the article mentioned Cordova CLI, from npm, and add tag to config.xml

                   

                  Do I have to install an environment,  whitelist plugin, and add tag to config.xml (in the environmnet?)?

                  If so, is there a toturial for that? Sorry, I'm new to phongegap with CLI.

                   

                  Will add CSP declarations for my .html pages in the Content Security Policy part and upload to https://build.phonegap.com/apps  do the trick?

                  • 6. Re: PhoneGap's APK shows no return data of JSON from external API
                    jeeyi345 Level 1

                    I mean I run the html files through the browser.

                    I use Axure RP generated website's html files then wrote JS on them. Then tested them through browser.

                    When everything seems works, I upload the zipped webite and upload https://build.phonegap.com/apps  as mentioned, so it can build an apk. But api related founction don't work.

                    I use a JSP page's variable on the URL to control data need to be insert,

                    and 2 other JSP page to get JSON data, also control by their URL variables.

                    • 7. Re: PhoneGap's APK shows no return data of JSON from external API
                      VectorP Level 4

                      You don't need to switch to CLI. Phonegap Build will do fine.

                      You need to:

                      - insert a PLUGIN element for the whitelist plugin in your config.xml

                      - define 'access origin' rules for all web services you are targeting

                      - make sure the config.xml and index.html are both in the root directory of your zip file

                      - make sure you only perform ajax requests after receiving the 'deviceready' event. You can not start any XHR prior to receiving the deviceready event.

                      1 person found this helpful
                      • 8. Re: PhoneGap's APK shows no return data of JSON from external API
                        jeeyi345 Level 1

                        Thank you!

                        Just that how to generate the config.xml of PhoneGap? Can I create one myself?

                        About the 'deviceready' event, is like adding the following scripts in index.html?

                        cordova - DeviceReady not firing on PhoneGap Build (Bd) - Stack Overflow

                         

                        Sorry if I'm being a annoying beginner!

                        • 9. Re: PhoneGap's APK shows no return data of JSON from external API
                          VectorP Level 4

                          Yes, you write your config.xml yourself, or you can use a free tool like ConfiGAP

                          ConfiGAP

                           

                          Using the official documentation helps!

                          - How to configure

                          Configuring | PhoneGap Docs

                           

                          - Deviceready

                          Events - Apache Cordova

                          1 person found this helpful
                          • 10. Re: PhoneGap's APK shows no return data of JSON from external API
                            jeeyi345 Level 1

                            Thanks, I used ConfiGAP to generate a config.xml (gets error if any API Plugin is checked, so I unchecked them all),

                            Just I cannot get the 'deviceready' works, I tried some sample I found and added in the index.html but the alert message of deviceready is ready and JSON data doesn't receive when I start the app.

                            My index doesn't do XHR and AJAX actions, but the pages linked later do. Does that have something to do with it?

                             

                            I've checked the official documentation, but didn't find 'deviceready' related articles.

                            Configuring | PhoneGap Docs

                             

                            P.S: PhoneGap Build shows the following

                            This app isn't using the latest version of PhoneGap. We recommend upgrading to cli-6.3.0.

                             

                            • 11. Re: PhoneGap's APK shows no return data of JSON from external API
                              VectorP Level 4

                              My index doesn't do XHR and AJAX actions, but the pages linked later do. Does that have something to do with it?

                              Perhaps. It depends. Are you using a one page architecture, or do you have completely separated html documents?

                              Are you using any UI javascript framework?

                               

                              If your html documents are stand alone and the HEAD section of each is read and parsed, then you need to incude a reference to cordova.js in each of them (and beware: cordova.js is located in your project root, so you might have to include a relative path to that location), then check for the deviceready event.

                               

                              I've checked the official documentation, but didn't find 'deviceready' related articles.

                              That's why I posted a link to the relevant Cordova documentation. The relationship and differences between Cordova and Phonegap (Build) can be a bit unclear for beginners.

                               

                              P.S: PhoneGap Build shows the following

                              This app isn't using the latest version of PhoneGap. We recommend upgrading to cli-6.3.0.

                              So, did you?

                              • 12. Re: PhoneGap's APK shows no return data of JSON from external API
                                jeeyi345 Level 1

                                I use Axure RP to create html website pages and write JS, JQuery with them, I think it belows to UI javascript framework.

                                Then I zip the folder and upload to PhoneGap Build. I didn't create PhoneGap project before.

                                So cordova.js is only located in a PhoneGap project? Is there a way I can import the folder and code into a PG project?

                                Just installed PhoneGap-x86 and android app.

                                 

                                I'll study more between the 2 links, sorry!

                                 

                                The cli-6.3.0 message didn't show util I include the generated config.xml, so I didn't use cli, only PhoneGap Build link. Is it related to the deviceready issue?

                                 

                                 

                                • 13. Re: PhoneGap's APK shows no return data of JSON from external API
                                  VectorP Level 4

                                  This is going to be a lot of guessing and pingpong, unless I get to see your zip file.

                                  Is it available online somewhere? If so, please post its url.

                                  • 14. Re: PhoneGap's APK shows no return data of JSON from external API
                                    jeeyi345 Level 1

                                    The following is the site I want to build as an app

                                    google drive:

                                    https://drive.google.com/

                                    open?id=0B6ifiCf5eWQwMVVGbFZFbVBrS3M

                                    mega:

                                    https://mega.nz/

                                    #!vp4VxKLI!oqX6SbTRdll2s2RPyUhrgfcvS8v6YctuPZR7CF0dtbE

                                     

                                    Sorry!

                                    I just noticed the message seems being pending, so I changed the link a little bit.

                                    ( At webmaster: I posted the link of my website file for getting help, and was asked by a member. Please don't block my message. Thank you. )

                                     

                                     

                                    It's in Chinese,

                                    index: Click the left button to login (Just interface only)

                                    summary: wait a few second, it'll get parsed data and show.

                                         Upper button links to add_medicine

                                         Upper button links to pvt_test

                                    add_medicine: Select a form and send the choices to database

                                    pvt_test: alerts a info, click top left button to start the test, click top left button again to end it, and send the result to database.

                                    • 15. Re: PhoneGap's APK shows no return data of JSON from external API
                                      VectorP Level 4

                                      Here is some feedback your config.xml:

                                       

                                      1. Attributes versioncode and version canot have an empty value. You must specify a proper value.

                                       

                                      2. Phonegap version 3.6.3 is ancient, and many plugins will not work with that version anymore. You should upgrade to at least version 'cli-6.1.0' or better yet, the latest Phonegap Build version (cli-6.4.0).

                                      No, this doesn't mean that you have to use the cli. PGB staff considered naming the PGB-versions as 'cli-999' a good idea - but in fact, it confuses newer users quite often.#

                                       

                                      3. You can't have <preference name="android-minSdkVersion" value="7" /> anymore. The minimum value is currently 14, I believe.

                                       

                                      4. Remove <feature name="http://api.phonegap.com/1.0/network"/>

                                      It's not valid under Phonegap Build.

                                       

                                      5. You have no splashscreens and no icons specified, although you should have them, especially for iOS, which depends on them for scaling.

                                      Include them. Also include the splashscreen plugin from npm and the statusbar plugin from npm.

                                       

                                      6. You can refrain from using the gap: namespace, now

                                       

                                      7. Your whitelisting won't work und version cli-xxx without the whitelist plugin from npm (cordova-plugin-whitelist). Include that plugin, and read/apply its docs.

                                      1 person found this helpful
                                      • 16. Re: PhoneGap's APK shows no return data of JSON from external API
                                        jeeyi345 Level 1

                                        I applied 1~4 with the xml, 5 6 was intended later, but when I move on to 7 I think that it has to be a project with cordova.

                                        Just that the html (wrote separately, not from phonegap's project) and ConfiGAP generated xml doesn't seems to work with cordova's npm command.

                                        The cordova-plugin-whitelist npm command doesn't work with the folder as my link, but works with the demo project path.

                                        Then I delete/replaced file with demo projects created by phonegap desktop, but it still run the demo pages, not the pages I want (as the zip file).

                                        Is there a way can I include/transfer them directly into cordova ?

                                         

                                        If I do these:

                                        -Create a PhoneGap project

                                        -Write my html,js content (hope it can be add to the project, not write all over again  )

                                        -use npm to install cordova-plugin-whitelist to the project's path

                                        -Make deviceready to index and other page preform XHR

                                        -Upload to PhoneGap Build to pack .apk file

                                        Then I'll got a app parse json just like html on chrome? Is there some step I missed, or I can simplify?

                                         

                                        Thank you

                                        • 17. Re: PhoneGap's APK shows no return data of JSON from external API
                                          VectorP Level 4

                                          I think you're a bit lost, here.

                                          If you are using Phonegap Build, you don't have to:

                                          - install Phonegap, SDK's, etc.

                                          - create a project

                                          - use npm to install plugins.

                                           

                                          Think about it: if you would do all that, then you would subsequently create a zip file by zipping up your /www directory (which was written alll by yourself anyway) and a config.xml, which you already have. You would be throwing away (or at least ignoring) everything that was created by the CLI commands.

                                           

                                          So, no!

                                          Write your html, css, javascript and create your images. Also, create a config.xml according to the PGB documentation.

                                          Then zip up the lot and upload to PGB. Done!

                                           

                                          As said: you must make sure to have the following in order to be able to make XHR's:

                                          - reference of the whitelist plugin in config

                                          - proper access origin rules

                                          - reference of cordova.js in html

                                          - wait for deviceready before making ajax calls.

                                          • 18. Re: PhoneGap's APK shows no return data of JSON from external API
                                            jeeyi345 Level 1

                                            I see, so if I make a proper config.xml, PGB will do for me, right?

                                             

                                            I'm a little confused about the following here:

                                            5. You have no splashscreens and no icons specified, although you should have them, especially for iOS, which depends on them for scaling.

                                            Will the app run without it?

                                            I saw some splashscreen and icon from the PhoneGap demo project's config.xml, just I'm afraid if I copy them to my folder they'll make a mess.

                                            Include them. Also include the splashscreen plugin from npm and the statusbar plugin from npm.

                                            I think I'll make android version first, for iOS would be harder to publish. So I don't have to install the 2 plugins from npm right?

                                            7. Your whitelisting won't work und version cli-xxx without the whitelist plugin from npm (cordova-plugin-whitelist). Include that plugin, and read/apply its docs.

                                            I've set my PGB-versions as 'cli-999' in steps 2, tag <plugin name="cordova-plugin-whitelist" source="pgb" spec="~1"  /> , i<access origin="domain I want to access" subdomains="true"  /> in config.xml, will that work? Does "read/apply its docs." means that I still lack some external file (.JS maybe?)

                                            cordova.js

                                            Where can I get a cordova.js? I can't find it in the PhoneGap project either.

                                            • 19. Re: PhoneGap's APK shows no return data of JSON from external API
                                              VectorP Level 4

                                              If you don't supply your own splashes and icons, PGB will include default splashes and icons with a PGB logo. You certainly don't want to have them in your poublished app, do you? So yes, include your own, and use the splashscreen plugin. See the PGB Docs, Icons and Splashes section, on how to do that.

                                               

                                              You don't need a file called cordova.js. You only need to reference it. PGB will include the proper file during the build process.

                                              This is mentioned in the Getting Started section of the Phonegap Build documentation

                                              Getting Started | PhoneGap Docs

                                               

                                              The '999' in 'cli-999' is a placeholder for the version number you want to use. You can, for instance, use cli-6.1.0, cli-6.3.0 or cli-6.4.0

                                              My remark 'read and apply the plugin's docs' refered to the documentation of npm's cordova-plugin-whitelist. I already posted a link to those docs 4 days ago.

                                               

                                              I can't find it in the PhoneGap project either.

                                              You. Don't. Need. A. Phonegap. Project

                                              • 20. Re: PhoneGap's APK shows no return data of JSON from external API
                                                jeeyi345 Level 1

                                                THANK YOU!!!!

                                                IT WORKS NOW!

                                                I calmed myself down and follow the feedback given, and now XHR, linking url all works.

                                                Only a little issue left, that the pages all turn darker, except the buttons. That makes viewer harder to read.

                                                What might cause the problem?

                                                 

                                                The following is the working file:

                                                https://mega.nz/

                                                #!egASUaBZ!9uwRMjn1iJJY3t1AsbxuQyGAmNQYA1-4ld0rjAD38_Q