Learn to implement Capture API with Phonegap

1
9666

In this tutorial we will learn to implement capture api with phonegap and create an application which will capture an image in your mobile and directly upload it in the remote server.

  • To create an application using capture api follow the steps given below :

  1. First of all download and install FileZilla and Xampp server respectively.
  2. Go to c drive -> xampp -> htdocs and create a new folder in it called as capture .
  3. In this capture folder create a new text file called as index.html .
  4. Open this index.html file in Notepad++ window or any other text editor and write the given code .
  5. Here are the screen shots of the code :
  6. 1
    2
    3
    4

  7. Now open FileZilla and you will have the following home screen :
  8. 5

  9. Now here you have to enter the Host , Username , Password and click on the Quick Connect button as shown in the image below :
  10. 6

  11. Then at the right hand side in the Filename tab select the public_html folder as shown below :
  12. learn to implement capture api with phonegap 7

  13. After that right click on the public_html and click on create directory :
  14. learn to implement capture api with phonegap 8

  15. Thus a dialog box will appear which will ask for the name of the directory so for example name it test as shown below :
  16. learn to implement capture api with phonegap9

  17. Thus your test folder will be created as shown below :
  18. 10

  19. In this test folder create a new directory called as upload as shown below :
  20. learn to implement capture api with phonegap11

  21. Thus a dialog box will pop up asking for the directory name as shown below :
  22. learn to implement capture api with phonegap12

  23. Hence name it as upload .
  24. Now again right click on the test folder and create a new file as shown below :
  25. learn to implement capture api with phonegap13

  26. Again a dialog box will appear which will ask for file name, so name it as upload.php .
  27. 14

  28. Hence both the files will be created as shown below :
  29. learn to implement capture api with phonegap15

  30. Now drag and drop the upload.php file on the desktop and open it with Notepad ++ and write the following code in it as given below :
  31. 16

  32. Hence after writing the code save your document and now sign in into your Github account by visiting github.com :
  33. 0

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

  37. 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 .
  38. 0.2

  39. 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 :
  40. 0.3

  41. So after clicking on the Create repository button you have the following window :
  42. learn to implement capture api with phonegap0.4

  43. Go to xampp -> htdocs .
  44. In htdocs you have your capture folder created .
  45. Now go to your start menu -> GitBash -> right click on it -> Send To -> Desktop (create a shortcut) of GitBash on Desktop as shown below :
  46. 0.7

  47. So now on Desktop you will have a GitBash icon .
  48. 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.
  49. 0.8

  50. Now Click on Apply and OK button .
  51. Now start the GitBash application from the desktop and you will have the following screen :
  52. learn to implement capture api with phonegap0.9

  53. Now insert the following command as shown below in the gitbash command prompt window..
  54. Thus after inserting the commands you will have the following view of your window :
  55. 0.10

  56. After you get this , insert further commands in the same command prompt window as given below :
  57. 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 :
  58. learn to implement capture api with phonegap0.11

  59. After this insert the following commands :
  60. You will have the following window :
  61. learn to implement capture api with phonegap0.12

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

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

  66. Thus now the push operation is complete, so now we are ready to build our application .
  67. Now go to www.build.phonegap.com and click on Sign in tab present at the right.
  68. learn to implement capture api with phonegap1

  69. 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 ..
  70. 2

  71. 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.
  72. 3

  73. 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 :
  74. 4

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

  75. When you select your app the fetching process will start as shown in the figure :
  76. learn to implement capture api with phonegap5

  77. After the fetching is complete you will get the following window :
  78. 6

  79. Now click on the Ready to Build button as shown by the red arrow in the image and you will get the following screen :
  80. learn to implement capture api with phonegap7

  81. Click on the android icon and you will have the following window popping up to save the apk file.
  82. learn to implement capture api with phonegap8

  83. 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
  84. Thus we have learn to implement capture api with phonegap .

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here