Android TutorialsHow to create note making application in phonegap

How to create note making application in phonegap

In this tutorial we will learn how to create note making application in phonegap.Here we can store and add tasks that we want in a list format and can also delete them as and when required .

  • To learn how to create note making application in phonegap follow the steps given below:

  1. First of all download and install xampp server in your machine .
  2. Now go to your Xampp -> htdocs folder .
  3. In this htdocs folder create a new folder say LocalStorage .
  4. In this LocalStorage folder create a new file called as index.html and write the following code in it :
  5. <!DOCTYPE html>
    <html>
        <head>
            <meta name="viewport" content="user-scalable=no,initial-scale=1, maximum-scale=1,minimum-scale=1, width=device-width" />
            <title>PhoneGap Application</title>
            <link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" />
    
            <script src="js/jquery-1.10.2.min.js"></script>
            <script src="js/jquery.mobile-1.3.2.min.js"></script>
            <script type="text/javascript">
                //Add event listener to run when the device is ready
                document.addEventListener("deviceready", onDeviceReady, false);
    
                //Device is ready
                function onDeviceReady() {
                   
                }     
                
                $(document).ready(function(){
                    $('button#add').bind("click",function(e){
                        e.preventDefault();
                        var task = $('#taskInput').val();
                        console.log('Got Task');
                        //var tasks =  $('#tasks');
                        addTask(task);
                    });
                });
      
    function addTask(task)
    {
                    console.log('Adding Task...');
                    var values = new Array();
                    var newDate = new Date();
                    var taskId = newDate.getTime();
                    values.push(task);
                    try
     {
                        localStorage.setItem(taskId, task);
                    } 
    catch (e)
     {
                        if (e == QUOTA_EXCEEDED_ERR) 
         {
                            alert('Quota exceeded!');
                         }
                    }
                    getTasks();
                }
                
    
    
    function getTasks(){
                    var output = "";
                    for (var i = 0; i < localStorage.length; i++)
    {
                        output += '<li>'+localStorage.getItem(localStorage.key(i))+'</li>';
                    }
                    $('#tasks').html(output);
    	$('#tasks').listview("refresh");
                }
                
                function clearAll(){
                    localStorage.clear();
                    $('#tasks').html("");
                    return false;
                }
                
            </script>
        </head>
    
    <body onLoad="getTasks();">
            <div data-role="page">
                <div data-role="header">
                    <h1>Add Item</h1>
                </div><!-- /header -->
    
                <div data-role="content">	
                    <input id="taskInput" type="text" name="task" value="" placeholder="Add Task..." />
                    <button id="add">Add Task</button>
                    <br />
                     <button onclick="clearAll();">Clear Tasks</button>
                    <br />
                    <ul data-role="listview" id="tasks"></ul>
                </div><!-- /content -->
        	<div id="footer" data-role="footer">
                    <h4><span>Copyright &copy; 2013</span></h4>
                </div><!-- /footer -->
            </div><!-- /page -->
        </body>
    </html>
    

  6. Here are the screen shot’s for the code :
  7. how to create note making application in phonegap
    Phonegap
    programming in phonegap
    phonegap application

  8. Now let’s download the javascript that we have used in the program,so go to jquerymobile.com you will be navigated to the following window :
  9. jquerymobile

  10. Select the required minified version of javascript and you will get the code as shown below :
  11. phonegap development

  12. Now press ctrl + u and you will get the view-source code of it .
  13. note making app in phonegap

  14. Now select all the view-source code copy and paste it in a text file say jquery.mobile-1.3.2.min.js as the filename used in the code .
  15. Now in your LocalStorage folder create new folder called as js and save this jquery.mobile-1.3.2.min.js file in it.
  16. Similarly create another file say jquery-1.10.2.min.js and download the code for it and paste this file in js folder .
  17. Thus now in js folder you will be having your two files as shown below :
  18. phonegap programming

  19. Similarly create a css folder in your LocalStorage folder and download the css code from jquerymobile.com for the required version and copypaste the code in the file and save it with css extension as shown below :
  20. phonegap

  21. Thus in your LocalStorage folder you will have following contents :
  22. application in phonegap

  23. Now push your application on github and using phonegap build create an apk file and run it on your device .
  24. Hence after writing the code save your document and now sign in into your Github account by visiting github.com :
  25. 0

  26. So now enter a username ,your email id and password in the respective tabs and click on the Sign up for GitHub button .
  27. After you click on the signup button you will get the following window :
  28. 0.1

  29. Now click on the ‘+’ icon on the right hand side as indicated by the red arrow and then click on the “ New repository ” as indicated by the blue arrow .
  30. 0.2

  31. After clicking on the New repository you will be navigated to the next window ,specify a Repository name ,select a public radio button and click on the Create repository button as shown in the image below :
  32. 0.3

  33. So after clicking on the Create repository button you have the following window :
  34. 0.4

  35. Go to xampp -> htdocs .
  36. In htdocs you have your LocalStorage folder created .
  37. Now go to your start menu -> GitBash -> right click on it -> Send To -> Desktop (create a shortcut) of GitBash on Desktop as shown below :
  38. 0.7

  39. So now on Desktop you will have a GitBash icon .
  40. Now Right Click on the GitBash icon on the desktop and go to properties and in the Start in edit box set the path as : c:xampphtdocs as shown in the image.
  41. 0.8

  42. Now Click on Apply and OK button .
  43. Now start the GitBash application from the desktop and you will have the following screen :
  44. 0.9

  45. Now insert the following command as shown below in the gitbash command prompt window..
  46. ls
    cd LocalStorage (that is your folder name in htdocs folder)
    ls
    

  47. Thus after inserting the commands you will have the following view of your window :
  48. 0.10

  49. After you get this , insert further commands in the same command prompt window as given below :
  50. git config --global user.name “username of your github account”
    
    git config --global user.email “email of your github account”
    
    git config --list
    

  51. After inserting this command your gitbash command prompt window will have the following look , check whether your username and email you entered has been generated in the list :
  52. 0.11

  53. After this insert the following commands :
  54. git init
    
    ls –a
    
    git add .
    
    git commit –am ‘initial commit’
    

  55. You will have the following window :
  56. 0.12

  57. Now go to your github account where you had created the LocalStorage repository and copy the add origin command and push command and paste it in the gitbash command prompt respectively.
  58. 0.13

  59. So after adding the commands you will be asked for your github username and password ,so you will have the following window :
  60. 0.14

  61. Thus now the push operation is complete, so now we are ready to build our application .
  62. Now go to www.build.phonegap.com and click on Sign in tab present at the right.
  63. 1

  64. After clicking on the Sign in button you will get the next page where you have to click on the Sign in with GitHub button as shown by the arrow head ..
  65. 2

  66. After that you will be navigated to the next page where you have to click on the new app button as shown by the red arrow head.
  67. 3

  68. After clicking on the new app button ,you will get the following window where you have to select the open-source tab and click on the dropdown pointer and select your app as shown in the image :
  69. 4

    NOTE : Here you will have your own application name that is the name given by you while creating the repository.

  70. When you select your app the fetching process will start as shown in the figure :
  71. 5

  72. After the fetching is complete you will get the following window :
  73. 6

  74. Now click on the Ready to Build button as shown by the red arrow in the image and you will get the following screen :
  75. 7

  76. Click on the android icon and you will have the following window popping up to save the apk file.
  77. 8

  78. Now save your apk file and insert it in your android mobile phone and install it ,you will have the application running on your mobile phone
  79. Thus we have successfully understood how to create note making application in phonegap .

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -