10 Replies Latest reply on Apr 29, 2016 2:31 AM by threeodev

    PhoneGap Desktop and core plugins?

    threeodev Level 1

      Hi!

       

      I have done an app in PhoneGap and jquery a couple of years ago. And it was such a fun work. No hazzle or anything. Stayed away from CLI and used PhoneGap Builder. Haven´t done any Phonegap work since then. I am back....and boyyyyy am i confused!

       

      Now i need to write and app using the media capture device on the phone and i haved googled around and found some guides and tutorials...but outdated. Searched around on phonegap and i am really confused.

       

      I tried installing PhoneGap Desktop i thought it would be really cool that i can run my app without compiling it. But i can´t find a way to use the caturing decive. Seems i have to install it this time? Is there a way to do that to PhoneGap Desktop or is PhoneGap Desktop just a "fancy" webserver?

       

      Do i have to dwelwe into CLI in order to use the core functions?

       

      Need some guidence. Thanx in advance.

        • 1. Re: PhoneGap Desktop and core plugins?
          kerrishotts Adobe Community Professional

          Up-to-date media-capture docs: cordova-plugin-media-capture

           

          If you intend on releasing the app, you're going to need to delve into the CLI or PG Build at some point. Just keep that in mind. The CLI is really quite easy, and personally, is the easiest for me to understand (less "magic" and more control).

           

          The PhoneGap Desktop App is partly a fancy web server, yes, but it works in tandem with the PhoneGap Developer App can communicate with this server in order to run your code without creating a separate build. However, the PGDevApp is limited to core plugins and has various edge cases where it differs from a real build of your app. Furthermore, the PGDevApp doesn't always have up-to-date plugins. In your case, PGDevApp uses version 1.0.1 of the media-capture plugin (while the current version is 1.3.0). So the documentation you'd actually want would be in this version of the repo: GitHub - apache/cordova-plugin-media-capture at 2eb87babad75b695632210f4c1c548b4e750525e

           

          If you have more specific error messages and code that you're trying that is failing, please post that. Code and error messages go along way in diagnosing a problem.

          • 2. Re: PhoneGap Desktop and core plugins?
            threeodev Level 1

            Thank you for your answering.

             

            Well, i figuered it out. But i really do need to use a plugin i found in the repo....so now i have to install node.js, then corova, then the plugin. Whatever happened to copying files to the correct directory? That was the days.

             

            It will probobly take me weekes to figuere everything out :-( And here i was thinking...."oh that will be an easy app"....NOPE!

            • 3. Re: PhoneGap Desktop and core plugins?
              kerrishotts Adobe Community Professional

              For complex plugins and cross-platform projects, the CLI method is a whole lot easier (in my opinion). Plugins can specify what frameworks need to be included, other files that need including, etc., all of which gets a little glitchy when doing it all by hand -- at least in my experience.

               

              Once you've installed Node, the CLI, and an SDK, things shouldn't be hard to get going (assuming *nix here):

               

              $ cordova create ...

              $ cordova platform add ios android

              $ cordova plugin add your-desired-plugin

              # write your code

              $ cordova run ios (or android, etc.; use emulate if targeting the Android emulator or iOS Simulator)

               

              Personally, it's getting the Android SDK and path variables configured that's a bit more twitchy. If you run into problems, though, you can always post here and someone will help you through it.

               

              That said, you could also build yourself a local PGDevApp. Clone the repository, update the config.xml a bit, add the plugin(s) you need to the config.xml and run a build. This requires having the CLI in place, though, so it may or may not be worth your time to go down this route.

               

              Or, you could continue to use PhoneGap Build. PGBuild can use plugins from the npm repository, so you wouldn't have to set up a local development environment.

              • 4. Re: PhoneGap Desktop and core plugins?
                threeodev Level 1

                Thx for the info.

                 

                Now i have some big problems. So i installed everything. All looks fine and dandy. So i am trying to play around a little so i used the PhoneGap Desktop to create a project. I am using windows 7 and my project in C:\tester looks like this:

                .cordova

                hooks

                platforms

                plugins

                www

                config.xml

                 

                I can run it with the desktop app and output the file the phonegap developer app....everything looks good. Now i am trying to add a plugin so i found this:
                GitHub - sdesalas/cordova-plugin-magnetometer: A magnetic field detector plugin. It displays the raw x, y, and z magnet…

                 

                So i go to my dir in command prompt (cmd.exe), so i am standing in my test directory (c:\tester)

                and i run the command "cordova plugin add https://github.com/sdesalas/cordova-plugin-magnetometer"

                I get an error (no command found...etc)....so i try:
                phonegap plugin add "https://github.com/sdesalas/cordova-plugin-magnetometer"

                 

                And now it fetches the repo and unpack it.

                 

                In my plugin folder i can now find a new folder: "cordova-plugin-magnetometer".

                 

                In that folder i find a "www" folder. In the "www" folder i find  "magnetometer.js". So i copy that file to my c:\test\www

                Then run this code in the index.html:

                 

                [Code]

                <!DOCTYPE html>

                <html>

                    <head>

                        <title>Demo</title>

                        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>

                        <meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no'/>

                        <link rel='stylesheet' href='jquery/jquery.mobile-1.4.5.min.css'/>

                        <script src="cordova.js"></script>

                        <script src="magnetometer.js"></script>

                        <script src='jquery/jquery-1.12.3.min.js'></script>

                        <script src='jquery/jquery.mobile-1.4.5.min.js'></script>

                        <script>

                          document.addEventListener("deviceready", onDeviceReady, false);

                               function onDeviceReady() {

                                    alert('ready');

                                    var watchID = cordova.plugins.magnetometer.watchReadings(

                                    function success(reading){

                                      alert('WORKS!');

                                },

                                function error(message){

                                       alert('CRAP!');

                                });

                                alert(watchID);

                            }

                     </script>

                ......some html code

                [/Code]

                 

                The results is i get the html file to load on my tablet (Nexus 10), I get the "ready" alert. But no alert after that. So something is messed up or i am doing it wrong.

                 

                Questions:
                Why did "cordova plugin add" failed and "phonegap plugin add" was successful?

                 

                Should i include the magnetometer.js in my html file?

                 

                And last question....why isn´t this working? :-)

                • 5. Re: PhoneGap Desktop and core plugins?
                  kerrishotts Adobe Community Professional

                  1. You installed the PhoneGap CLI, so you'll use "phonegap ..." to interact with it. I typically use the Cordova CLI, so I use "cordova ...". Apologies on not using the "phonegap" commands earlier; my habit of typing "cordova" is hard to break!

                   

                  As to the differences, the "phonegap ..." command has some extra features, including interacting with PGBuild and the PGDevApp (via "phonegap serve").

                   

                  2. As long as you include "cordova.js" in your index.html, plugins will be automatically imported into the environment. That means you should not do any copying of files in the plugins/plugin-id/www folder. You should not include any plugin "*.js" files in your index.html (unless otherwise instructed in the plugin's install instructions, but that would be pretty rare). "cordova.js" will handle all the plugins for you.

                   

                  3. Since it's been a while since you've used PhoneGap, I just also want to make sure you aren't providing a "cordova.js" file in your project's root www folder. It will look a little funny since no "cordova.js" file will exist, but this is normal. The CLI will generate a platform-specific "cordova.js" file and place it in the platforms/.../www folder for you (when you build/emulate/run your app). You probably don't have to worry about this, but I've seen some devs have issues where they mistakenly supply the wrong "cordova.js" file and things start breaking. Let the CLI do its stuff, and you'll be OK.

                   

                  4. Check your JavaScript console and device console for any errors. In this case, I'm expecting your JavaScript console to indicate "cordova.plugins.magnetometer.watchReadings is not a function" or something similar. But if after taking out the reference to the plugin's js file you still have issues, be sure to watch the JS and device console for other errors, since these will help track things down.

                   

                  If you aren't familiar with remote debugging, see the following:

                   

                  To see your Android device's console, you can use "adb logcat" -- you'll probably want to use "more" or something similar: it's going to generate a LOT of information.

                   

                  5. It's also possible this particular plugin is bugged. I have no experience with this plugin, but if all else fails, you can file an issue with the plugin devs. Right now you have things to try instead, but should you run out of options, filing an issue on a plugin is a good idea.

                  • 6. Re: PhoneGap Desktop and core plugins?
                    Chris W. Griffith Adobe Community Professional

                    The one other thing to add is, does your device you are testing on have that sensor? Once used an Android tablet that did not have a gyroscope.

                    • 7. Re: PhoneGap Desktop and core plugins?
                      threeodev Level 1

                      @kerrishotts

                      Thank you so mush for taking time to explain this for me!

                       

                      I am trying out this plugin right now in a new test area:
                      https://www.npmjs.com/package/cordova-plugin-x-toast

                       

                      And i can´t get any plugins to work....it´s not happening with the PhoneGap Desktop/PhoneGap developer app. Im on Wifi and it has created an ip with the port 3000.

                       

                      Chromes console say:
                      Error: exec proxy not found for :: Toast :: show

                       

                       

                      In my www directory there is only this index.html with this code:

                       

                      <!DOCTYPE html>

                      <html>

                      <head>

                          <meta charset="utf-8" />

                          <meta name="format-detection" content="telephone=no" />

                          <meta name="msapplication-tap-highlight" content="no" />

                          <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />

                          <link rel="stylesheet" type="text/css" href="css/index.css" />

                          <script src="cordova.js"></script>

                          <title>Hello World</title>

                      </head>

                      <body>

                          <button onclick="window.plugins.toast.showShortTop('Hello there!', function(a){console.log('toast success: ' + a)}, function(b){alert('toast error: ' + b)})">Toast showShortTop</button>

                          <button onclick="window.plugins.toast.showLongBottom('Hello there!', function(a){console.log('toast success: ' + a)}, function(b){alert('toast error: ' + b)})">Toast showLongBottom</button>

                          <button onclick="window.plugins.toast.show('Hello there!', 'long', 'center', function(a){console.log('toast success: ' + a)}, function(b){alert('toast error: ' + b)})">Toast show long center</button>

                      </body>

                      </html>

                       

                      The code is taken from the x-toast link above.

                       

                      When i try it though the phone....it´s not working at all (empty) page.

                       

                      Guess i have to connect the phone trough the USB and see what is up. Maybe it´s the PhoneGap Desktop not doing it´s work?

                      • 8. Re: PhoneGap Desktop and core plugins?
                        threeodev Level 1

                        @Chris. W Griffith

                         

                        No, my tablet should support gyroscope. Anyways....trying out the x-toast right now (see answer above)...can´t get any plugins to work.

                        • 9. Re: PhoneGap Desktop and core plugins?
                          kerrishotts Adobe Community Professional

                          @threeodev:

                           

                          The PhoneGap Desktop/Developer app support only the core plugins (file, device, camera, etc). The plugins you are trying to use aren't core plugins -- they are third-party plugins. As such the PG Developer app won't work with those. You will have to either:

                           

                          a) Build with PhoneGap CLI, or

                          b) Build with PhoneGap Build

                          c) Build your own personalized copy of the PG Developer app that includes the plugins you want to use

                           

                          in order to use third-party-plugins.

                          • 10. Re: PhoneGap Desktop and core plugins?
                            threeodev Level 1

                            kerrishotts

                             

                            Yes, i figuered it out VERY late last night. PG Dekstop is pretty much a useless software for me. I already run an apache server. I can test out jquery through the browser in my phone or through Chrome on my desktop PC.

                             

                            PG Developer is only useful to me to test core plugins....but i have the Android AVD manager for that (i´m guessing) it works running code though that. Haven´t tried it out yet.

                             

                            I used the PhoneGap bild tool and everything works great!

                             

                            I won´t be using PG Developer again...thought it was a nice idea....but it really isn´t...just cost me ALOT of time :-)

                             

                            Thank you kerrishot for costing me less time helping a newbee out. I feel like a newbee even if i already have an app made with phonegap/Jquery up on Goolge Play and Itunes. But it was a couple of years ago....and things have certainly changed :-)