11 Replies Latest reply on Jul 26, 2016 11:23 AM by kerrishotts

    Where are some great starter tutorials for coding PhoneGap

    john@sosensible

      I like PhoneGap desktop for "Hello World" but I cannot even find docs on how to change pages. This is a sad state of affairs. While it may be right there many others may be having the same issues.

        • 1. Re: Where are some great starter tutorials for coding PhoneGap
          VectorP Level 4

          Since Phonegap is not a programming or scripting language, you don't "code Phonegap". That may be the reason why you don't find any tutorials.

           

          Phonegap is merely a building tool. You feed it HTML5 (with javascript, images, etc.) and out comes an app for various operating systems, which acts as an engine displaying your content in a webview component.

           

          Since you will be coding your application with HTML5 client-side and your favorite scripting language (PHP, asp, java, etc) server side, you want to be working with tutorials and books in these areas. Be aware that many javascript frameworks are available (jQM, Bootstrap, Angular, ...), so if you want to use any of these, you're in for some more reading.

           

          You want to change the Hello World app? Then change the html, css and images included in the default package.

          • 2. Re: Where are some great starter tutorials for coding PhoneGap
            john@sosensible Level 1

            Yeah, the CSS was the issue. Both the index page and the other page had the same background image. I changed some of the html and it looked like it was only updating a piece of the page. We have built Web Apps before, that were browser based and worked online/offline with sync. So most of those types of things are familiar to us. We just have not packaged things up in PhoneGap yet. In fact we used KendoUI for that project.

             

            jQM, that has not been updated in LONG time, and it is questionable if it will be updated in the future. I like bootstrap sort of, but for a dedicated app having a locked footer menu (icon) bar doesn't seem to be possible. It may be but I did not find that.

             

            We are looking at Onsen UI, Ratchet, Ionic 2, and would consider others in regards to mobile JavaScript frameworks. I have thee books on the market, two on ColdFusion, and another book on KnockoutJS. When it comes to PhoneGap, it seems the books did not think in the same direction as the Desktop Phonegap app working with the on device dev app. That is the path that I am attempting.

             

            I am curious how to add plugins and configure things using the Desktop app. Any suggestions there would be helpful as the documentation here is really thin.

            • 3. Re: Where are some great starter tutorials for coding PhoneGap
              VectorP Level 4

              If you're using Phonegap Build, the Desktop app will most likely not be your first choice for a tool to work with. It is targeted at local Phonegap, and will - as far as I know - only support core plugins, not third party plugins.

              You'd be better off editing your code in your favorite code editor and testing it on real devices. You may want to use emulators, Phonegap debugging facility and/or a local console, but that's not strictly necessary. Before publishing your app, it is almost required to test on various real devices, though.

               

              The Phonegap Build docs and the docs for each plugin will guide you on how to configure and use each of them.

              • 4. Re: Where are some great starter tutorials for coding PhoneGap
                john@sosensible Level 1

                How does it support core plugins? I don't see the docs on using those. It looks more like prototyping and mock'n out the UI as far as where it will help.

                 

                Oh, VectorP, there is no editor in the Desktop. Yes, I know the docs tell us how to use them in code. I am wanting to learn how to get to that stage in the dev workflow.

                • 5. Re: Where are some great starter tutorials for coding PhoneGap
                  VectorP Level 4

                  "Your favorite code editor" would be a third party editor, or perhaps even Windows Notepad. Developers usually have their own favorite editor, chosen from hundreds available. They are also called "html editors" and there are also full fledged IDE's.

                  What do you use to create a website?

                   

                  The Desktop App is indeed a basic thing to get a feel of what Phonegap is like. Play around a bit, test a couple of basic things, but that's about it. Some developers use it for a quick first test of the UI. (I don't)

                  It's not something you will want to use for serious development.

                  • 6. Re: Where are some great starter tutorials for coding PhoneGap
                    john@sosensible Level 1

                    I am working on a Win 10 system, that has PhoneGap installed and tried to update to the current version of CLI. This was my results, and I have no idea how to update those pieces.

                    pg_fail.png

                    I am considering creating a community of testers that walk through tutorials on popular tech recording screens to show the difference between what they experience and what the creators think is happening. This is not to be spiteful but rather it would be a great thing to bring clarity and to eliminate the thinking end users just don't follow instructions. It would also be great for enhancing the instructions for regular stumbling points.

                     

                    P.S.
                    I have used Visual Studio, Notepad, ColdFusion Studio, DreamWeaver, Sublime, Brackets, PHP Studio, and many other IDEs over the nearly 40 years I have been writing software. My development began on a Commodore Pet with 4K of system memory. Then to PHP 11/45 systems as a flight simulator technician in the US Navy. The list goes on... just thought it might help you to know tech is not a stranger to me.

                    • 7. Re: Where are some great starter tutorials for coding PhoneGap
                      VectorP Level 4

                      As a seasoned developer, you will most likely immediately have googled those warning messages.

                      For instance, you will have found this:

                      Update minimatch version · Issue #2952 · jshint/jshint · GitHub

                      • 8. Re: Where are some great starter tutorials for coding PhoneGap
                        john@sosensible Level 1

                        P.S.
                        This speaks to me using PhoneGap CLI ATM on my system.

                         

                         

                         

                        cli_fail.png

                        • 9. Re: Where are some great starter tutorials for coding PhoneGap
                          john@sosensible Level 1

                          Yes, I am familiar with searching for answers. That is why I am here, the answers I am finding are not working answers. Notice the image capture here.

                          pg_install.png

                          You see the version for mismatch is 3.10.6 and still the install upgrade is giving warnings for a different version. That kinda kills development productivity.

                          • 10. Re: Where are some great starter tutorials for coding PhoneGap
                            VectorP Level 4

                            I am not familiar with that software. But I notice you display the version for 'mismatch', not for 'minimatch'.

                            • 11. Re: Where are some great starter tutorials for coding PhoneGap
                              kerrishotts Adobe Community Professional

                              Some thoughts:

                              • The WARN errors you get when installing PhoneGap, though not ideal, are not going to cause issues with running the CLI. They should be updated, yes, but that's typically not something that will break the install.
                              • The error indicating that "inflight" can't be found feels to me like a borked/incomplete install. It's hard to give any advice other than "Uninstall PhoneGap and try again" since we don't have the complete output. Some threads that might be of use: react starter kit - npm module error on 'inflight' when attempting to build semantic UI - Stack Overflow ,Modular error when running gulp serve-dev · Issue #77 · johnpapa/ng-demos · GitHub
                              • Please, please, please paste error messages as text, not images. I can zoom in on text and still read it, copy & paste for Google and other forum searches, quote it, etc.
                              • "npm -v mismatch" will not tell you anything about the version of a particular package. npm is just ignoring the "mismatch" parameter and returning the version of npm. If you want the latest available version for a package, you want this: "npm info mismatch version". And this would also point out a problem: there is no package named "mismatch". As @VectorP mentioned, you've got mismatch and minimatch mixed up. "npm info minimatch version" gives 3.0.2.
                              • PhoneGap Desktop is extremely limited in scope -- it currently aids only in the creation of projects and in serving those projects to either the browser or the PhoneGap Developer app. It has no mechanism currently for adding platforms or plugins, although I imagine it will gain that functionality at some point.
                              • PhoneGap Desktop / Developer App combination only really makes sense for playing around with an idea and rapid iteration (that is, trying to avoid time consuming build phases). It is not intended as a replacement for the CLI yet (and perhaps never? I don't know the long-term goals there).
                              • PhoneGap doesn't care what tools you use to edit your web code. Use whatever tool you are most comfortable with. Personally, I am quite enjoying Visual Studio Code at the moment, but if you're comfortable with emacs, you can do that too.