3 Replies Latest reply on Jun 23, 2016 6:22 AM by kerrishotts

    Several PhoneGap Questions/Issues from a beginner

    dogofpavlov

      Hi Everyone,

       

      I'm new to PhoneGap but not HTML/CSS/JS.   I  have some questions/issues I've been unable to find the answers I'm hoping someone here can explain.

       

      When I run PhoneGap Desktop on my Windows PC, and I create a blank new project (or the one phonegap comes with), it creates the following files/folder structure:

      -(folder) .cordova

      -(folder) hooks

      -(folder) platforms

      -(folder) plugins

      -(folder) www

      -(file) config.xml

       

      And inside of the (www) I can see what looks like normal website structure with (index.html, imgfolder, cssfolder, etc).

      Issue 1 - The config.xml file has some conflicting paths included in it that confuse me. I see this line

      <content src="index.html"/>

      and then I also see this line

      <icon src="www/res/icon/android/drawable-ldpi-icon.png" density="ldpi"/>

       

      Now based on the structure I outlined above, there is no "index.html" sitting in the root of the folder. There is 1 inside "www" but not the root. Does  PhoneGap just assume the first file should be in the www?

       

      If that's the case, then why doesn't PhoneGap assume the icons would be in the "www" and list the path like this?

      <icon src="res/icon/android/drawable-ldpi-icon.png" density="ldpi"/>

       

      Issue 2 - I'm confused exactly how I go about uploading this structure to Adobe PhoneGap Build .

      I saw a few people that said to just zip the "www" folder and upload it. This DID in fact work... but I had to change a few things to get it to work. I had to move the "config.xml" listed above into the actual "www" folder. By doing this, I then had to edit the "config.xml" to change all the incorrect paths that would no longer be valid (like  changing <icon src="www/res/icon/android/drawable-ldpi-icon.png" density="ldpi"/> to be <icon src="res/icon/android/drawable-ldpi-icon.png" density="ldpi"/> )

       

      Since I changed around the structure so that I could upload... the structure is no longer compatible with PhoneGap Desktop that I run on my PC, since the config file is moved. So my question is... what exactly is the work flow for this? Do people go back and forth re-editing the structure over and over to test between using PhoneGap Desktop and actually compiling the application?

       

      I seems like I'm missing a huge obvious "DUH" of something I should be doing. Can anyone help me?

        • 1. Re: Several PhoneGap Questions/Issues from a beginner
          kerrishotts Adobe Community Professional

          Right now PhoneGap Build has a different project structure when compared to CLI/Desktop projects, as you've discovered, so you're not missing anything obvious at the moment.

           

          Regarding the paths:

           

          1) The content tag is relative to "www"; it is read when your app first starts so that PG knows what file to initially render. This parameter is read at runtime, so you can sort of justify the difference in path relativity here.

           

          2) The icon/splash asset paths are relative to config.xml. They are used during the build phase in order to find and copy the appropriate assets into their respective locations in the platform-specific bundle. This is a build step in your project (not at runtime), so it makes sense that the paths are relative to the project's root (the parent directory with config.xml).

           

          Regarding workflow:

           

          1) PhoneGap Desktop/Developer app is useful for rapid iteration and testing. It is not a perfect representation of the environment your app receives when built from either Build or the CLI. There are significant edge cases you can run into, so be sure the developer app isn't your only means of testing.

           

          2) I usually avoid mixing a lot of PGB with the CLI (and vice versa). There are times I've had to mix the two, but I try to keep it to a minimum and choose one or the other when I can (usually depends on the client's needs, in my case).

           

          3) None of this is to say this is the way you must use these tools; it's just the way I do. :-)

           

          Hope that helps? Apologies if any of that is muddy; I've a migraine today, and English is currently not my brain's forte.

          1 person found this helpful
          • 2. Re: Several PhoneGap Questions/Issues from a beginner
            dogofpavlov Level 1

            Hi Thanks for your reply, definitely cleared up some things.

             

            I'm a little confused when you said "mixing a lot of PGB with CLI". How would that work? Maybe my terminology is off but I thought the CLI means compiling with the command line tool, and PGB means compiling with the website (PhoneGap Builder). Are you just refering to what I said about having to switch back and forth paths and whatnot when you decide to switch between the 2?

             

            For debugging is it assumed the only way is to use the Developer App?

            • 3. Re: Several PhoneGap Questions/Issues from a beginner
              kerrishotts Adobe Community Professional

              The desktop app also creates a CLI-compatible project structure, so I'd include that in the CLI side of the house. Because of the current issues with having to switch config.xml and project structure between CLI and PGB, I try to minimize the times that I ever have to worry about that. There are times I have to switch (perhaps for a client), but I try to minimize that upfront. At some point, assuming PGB changes to support CLI format, I expect that issue to go away.

               

              As for debugging, you can use CLI / PGB to debug. In fact that's better than the Developer app because you'll be stuck with limited debugging tools on the Developer app (it's signed, and so remote debugging is disabled -- you'll be limited to Weinre or similar tools). With CLI/PGB you can use Chrome to remotely debug Android builds and you can use Safari to remotely debug iOS apps, and in both cases you get a full debugging environment (breakpoints, DOM inspector, profiling, etc.). (Note: that goes away when you sign with a distribution certificate -- we don't want users debugging production apps!)

               

              Hope that helps!

              1 person found this helpful