Tuesday, November 10, 2015

Phonegap: your first easy mobile app.....

Here we see how to make a first simple mobile app starting to the real funny "Pokemon Fusion" web page realized by Alex Onsager and you find by clicking here....(http://pokemon.alexonsager.net/)

We will do a simple import(by an html iframe) of the page of Pokemon Fusion.
We will write only a single code row.
We will do a simple test to try how PhoneGap works.....

At the and we have an .apk file to install on our android phone

Prerequisites: PhoneGap development kit correctly installed on your pc... an android phone correcty connected and recognized by your pc(and phonegap).

Step 1: open a prompt and create a working directory(mkdir pokemonfusion_test)
Step 2: move under your working dir: cd pokemonfusion_test
Step 3: create a simple PhoneGap test project: phonegap create test
Step 4: move under www directory and open index.html for editing it....
Step 5: remove from the body tag element all its content and paste this
        <iframe src="http://pokemon.alexonsager.net/" style="width:100%; height:100%;">
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
the last two rows are already existent in the file.......
So those three rows will be the only content of the body tag.....
Save and close the file.
Step 6: deploy all on your android phone(or your local emulator....): phonegap run android

After few minutes Pokemon Fusion will be displayed on your android system......
Your application will installed with "Hello World
" name. And its icon will be the default icon for test application.

All it's done, you can download by here:




Or checkout via SVN under this: svn+ssh://svn.code.sf.net/p/pokemonfusion/code
Access by anonymous user with no password.
If you have a svn client type this:
svn checkout svn://svn.code.sf.net/p/pokemonfusion/code/ pokemonfusion-code 

You can find here the project of the phonegap application as you see in this post.

Bye.....

No comments:

Post a Comment