How to include Cordova.js in HTML5 - javascript

I would like to convert my HTML5 game to iOS/Android app, I can do it using Phonegap or Cocoon, all tutorials show that we must include cordova.js file into index.html page.
If I include cordova.js as suggested:
<html>
<head>
<script src="cordova.js"></script>
<script src="js/phaser.min.js"></script>
<script src="js/game.js"></script>
</head>
</html>
I can see this message:
_Uncaught ReferenceError: require is not defined at cordova.js:28_
Also, I have uploaded a project to web server and I get same results. Downloaded cordova from here
https://github.com/apache/cordova-js/blob/master/src/cordova.js

It appears that you just copied the cordova.js file straight from GitHub and included it in your project manually.
If you want to use Cordova you should instead be using Node.js to create your project and define your platforms. This in turn will include the full cordova.js file, which includes the require() function.
Create your first Cordova app on the official site includes a basic tutorial on getting started, and GameDev Academy has a tutorial on Creating Mobile Games with Phaser 3 and Cordova.
Essentially, once you have Cordova tools and requirements installed:
cordova create projectName to create the new project.
cd projectName to move into the new project directory.
cordova platform add android and/or whatever platforms you want your game to run on.
Update the www directory as you normally would for a Phaser game. You can follow the GameDev Academy tutorial and use Node.js to install Phaser, or just copy/paste the JS file, whichever you're more comfortable with.
cordova build to make sure everything builds.
cordova emulate android to test it in Android, for example, but change as needed for your particular environments.

Related

Setting up PhoneGap on Eclipse

I've been following tutorials to set up a PhoneGap project (Android) on Eclipse, I'm fairly new to JS frameworks so I'm setting it up to start learning how to use them. In the tutorial (and any other I watch), they use an older version of PhoneGap that includes a .jar file and that isn't present with the latest version. I'm guessing it will still be easy to do but I'm just missing something obvious.
Is there another way to set it up now? Or do I simply not need this file? Thank you for any help.
The Documentation specifically shows how to open up the project in Eclipse.
Use the cordova utility to set up a new project, as described in The Cordova The Command-Line Interface. For example, in a source-code directory:
$ cordova create hello com.example.hello "HelloWorld"
$ cd hello
$ cordova platform add android
$ cordova build
Launch the Eclipse Application.
Select New Project menu item.
Choose Android Project from Existing Code from the resulting dialog box, and press Next:
Navigate to hello, or whichever directory you created for the project, then to the platforms/android subdirectory.
Make sure both hello and hello-CordovaLib projects are selected to be imported. The hello-CordovaLib project is needed as of Cordova 3.3.0 because Cordova is now used as an Android Library instead of a .jar file
Press Finish.
This is all in the documentation.

Adding files to a PhoneGap App created in CLI

If I create an application through node.js, how can I add html and js files to it? Specifically, I created an App in Dreamweaver, but I cannot find the config.xml file. So I want to create a PhoneGap App and add the appropriate files externally and edit the config.xml from there. Any help would be much appreciated!
Have a look at the phonegap documentation.
Phonegap documentation
Install phonegap, create the app at your project location and build the app. Your config.xml file will be generated by the build. Then you can edit it the way you want.

Phonegap version 3 phonegap.js not found

I have created a project in phonegap using version 3:
phonegap create -n SexDiaries -i co.uk.couplesdiaries
But when opening the index.html I get a network error that phonegap.js cannot be found, 404.
Why would they request a file that doesn't exist from the default build?
Where can I find this file?
The phonegap.js is not in the root for example:
projectname/www/phonegap.js
As you would expect, instead you need to first create a platform for the app to be build on, for example build the android platform with:
phonegap build android
Then, go inside the folder created:
platforms/android/assets/www
and then you'll see phonegap.js and all other things. It's very poorly documented :)
I'm adding a new answer because this SO post keeps coming up everytime I searched for "phonegap.js missing":
If you follow several guides out there you might see a reference to cordova build [platform]. With PhoneGap do not do this. Instead this is correct:
phonegap build [platform]
Then visit your platforms/[platform] directory.
I am developing a mobile app using html+css+jQuery mobile and i am building it using the phonegap web build service. The version of phonegap i am working on is 3.1.0.
I was trying to find how to use the Phonegap API on my mobile application and how to call the cordova methods (ex notification.alert). The solution to this is to just add the
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
inside the head of your index.html document. The Phonegap builder will find and include the correct cordova.js file for each build (Android, Win phone, iOS). If you will use the application on web then this script tag will always throw a 404 HTTP code.
Finally, the ondeviceready event is essential to any application. See the Full Example.

Can I access Device-Hardware when compiling Apps using PhoneGap-Build

I´m building my first App(HTML, CSS & JS) for iOS and Android and I´d like to use PhoneGapBuild for compiling my App so I don´t need to install Android and iOS SDK and PhoneGap on my Machine.
Can I use the Phone-Hardware? Do I have to include some cordova.js to get those objects n functions?
thx
You can access accelerometer, camera, compass and other features of the device.
Currently, PhoneGap 2.7.0 is supported by PG Build. API documentation can be found here:
http://docs.phonegap.com/en/2.7.0/index.html
For PhoneGap Buld, you don't need to include cordova.js, it will be injected by the build service, automatically. You can include the following code as a placeholder, but don't include the actual file in your source.
<script src="phonegap.js"></script>

phonegap 2.0 project setup without native SDK

I'm attempting to build my first phonegap application using the phonegap build cloud compiler. In the instructions there it says to remove phonegap.js before uploading... Where is this mystery file? I downloaded the latest phonegap and nothing in the /Libs/ looks right. There seems to be no documentation on how to setup your root HTML page properly to be compiled with phonegap.
"Once you've included the necessary assets, remove the phonegap.js (cordova.js) as Build will automatically inject it during compile time." - https://build.phonegap.com/docs/preparing-your-app#what_do_i_upload
I'm under the impression that I just need to use the JS API for code completion and then let the cloud compiler do its work, but all the documentation revolves around installing an SDK for each platform. I don't want to use xCode or eclipse-- I just want to write javascript.
What is the bare minimum resources I need to include on my root HTML file?
What is the bare minimum resources I need to include on my root HTML
file?
You need just 2 files: index.html (may be the name "index.html" is configurable in the config.xml, I am not sure) and config.xml.
Here is a starter app: https://github.com/phonegap/phonegap-start, take a look in the www folder.

Categories