├── .gitignore ├── README.md ├── index.html ├── main.css └── script.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Cordova 2 | 3 | ## What? 4 | Cordova (or PhoneGap) is a framework/set of APIs that allows you to create mobile apps using just HTML, CSS, and Javascript. This is a guide to getting Cordova set up and creating an app from a pre-existing HTML/CSS/JS project. 5 | 6 | ## Why? 7 | Phone/tablet apps are as popular as ever, and many people prefer using them to a web app in a mobile browser. Cordova allows you to create apps for these users/clients without learning Java or Swift/Objective-C. 8 | 9 | ## How? 10 | ### Step 1. Installing Cordova 11 | If you don't have node installed, install that first: https://nodejs.org/ 12 | 13 | Next install cordova: 14 | ``` bash 15 | npm install -g cordova 16 | ``` 17 | 18 | ### Step 2. Installing the SDK (Software Development Kit) 19 | #### Android 20 | Go to http://developer.android.com/sdk/installing/index.html 21 | 22 | From here you can download Android Studio, which is a full IDE for Android development, or you can download the individual SDK tools, and develop using your favourite editor and the command line (which is what we'll be doing in the rest of this guide). 23 | 24 | When you've downloaded the sdk tools, move them to an appropriate location. Then, go into the tools folder and run _android_. 25 | 26 | This will open the SDK manager. In here, you will want to make sure you have installed: 27 | * From the tools folder: 28 | * Android SDK Tools 29 | * Android SDK Platform-tools 30 | * Android SDK Build-tools 31 | 32 | * From Android X.X ,where X.X is the latest version (5.1.1 at the time of writing this guide) 33 | * SDK Platform 34 | * At least one System Image (e.g. ARM EABI v7a System Image) 35 | 36 | These are the minimum requirements for developing an Android app with Cordova. There are other tools you can install, such as the Google Play services, for developing with the Google APIs, but that won't be covered in this guide. 37 | 38 | #### iOS 39 | Go to this page: https://developer.apple.com/xcode/downloads/ and download Xcode. With the introduction of Xcode 7, you can test your app on a real iOS device without paying to join the Apple Developer Program. At the time of writing xCode 7 is still in beta, but it's probably in your best interest to use it. 40 | 41 | ### Step 3. Making the SDK tools available in your terminal 42 | #### Android 43 | Open your _~/.bash_profile_ file and add the following line, changing 'path/to/' to the path to your file: 44 | ``` bash 45 | export PATH=${PATH}:/path/to/android-sdk-macosx/tools:/path/to/android-sdk-macosx/platform-tools 46 | ``` 47 | This will allow you to run the build/emulate/run android commands in your terminal. 48 | 49 | If you don't have a bash profile, change to your home folder and create one: 50 | ``` bash 51 | cd Users/Username 52 | touch .bash_profile 53 | open .bash_profile 54 | ``` 55 | 56 | ####iOS 57 | Cordova doesn't have support for building/emulating with Xcode 7 on the command line yet, so you'll have to build within Xcode itself. 58 | 59 | ### Step 4. Creating the App 60 | Run the following command (with modifications) in the directory you want the project to be in: 61 | ``` bash 62 | cordova create hello com.example.hello HelloWorld 63 | ``` 64 | Where the first argument (_hello_) is the name of the directory, the second (_com.example.hello_) is a reverse domain style identifier for your project, and the third (_HelloWorld_) is the application's display text that will appear on your device. These second two can be changed later in the _config.xml_ file. 65 | 66 | After this, you should have a new direcory, containing a www directory, which is where you will put your code. If you've already got the files you need, put the css file into the css folder, the javascript file into the js folder, and the html in the root of the www directory. If you don't already have the files, _get coding!_ 67 | 68 | ### Step 5. Adding Platforms 69 | Run the following commands to add platforms to your project: 70 | ``` bash 71 | cordova platform add android 72 | cordova platform add ios 73 | ``` 74 | 75 | ### Step 6. Build the App 76 | #### Android 77 | ``` bash 78 | cordova build 79 | ``` 80 | Or, for specific platforms only: 81 | ``` bash 82 | cordova build android 83 | ``` 84 | 85 | #### iOS 86 | Start Xcode and open the .xcodeproj version of your app. This will be inside the platforms/ios directory that was created when you added the iOS platform. In Xcode, make sure your project is selected in the left window, and choose _Build_ from the _Product_ menu. 87 | 88 | ### Step 7. Test the app with an emulator 89 | #### Android 90 | Open the SDK manager, like we did in [Step 2](https://github.com/Danwhy/cordova-getting-started/blob/master/README.md#step-2-installing-the-sdk). 91 | 92 | In the Tools menu, open Manage AVDs. 93 | 94 | Then, go to Device Definitions, choose the device you want to emulate and click Create AVD. 95 | 96 | Give the emulator a name, select a CPU/ABI and a skin, and click OK. 97 | 98 | Now, on the command line run: 99 | ``` bash 100 | cordova emulate android --target=nexus5 101 | ``` 102 | Where _nexus5_ is the name you gave to your AVD. If you have only created one AVD, you can omit the target: 103 | ``` bash 104 | cordova emulate android 105 | ``` 106 | 107 | This will open an emulated Android device, on which you can navigate to and start your app. 108 | 109 | ####iOS 110 | Inside Xcode again, in the _Product_ menu, go to _Destination_ and choose your simulation device. Then click the _play_ button in the top left of Xcode. 111 | 112 | This will open an emulated iOS device, with your app running. 113 | 114 | ### Step 8. Put the App on your Device 115 | #### Android 116 | You'll need to have the Developer options enabled on your device. If you're on Android 4.2 or above, these options are hidden by default. To access them: 117 | 1. Go to your device's settings 118 | 2. Go to _About Phone/Device_ 119 | 3. Find _Build Number_ 120 | 4. Tap it seven times 121 | 5. Go back to the previous screen and you should see a Developer options menu 122 | 123 | Once you have access to the developer options, turn on USB Debugging. 124 | 125 | Connect your device to your computer by USB and run the following command in your project directory: 126 | ``` bash 127 | cordova run android 128 | ``` 129 | 130 | And with that, your app will be installed on your device. 131 | 132 | #### iOS 133 | As long as you're using Xcode 7+, this will be quite simple. If not, you need to sign up to Apple's Developer Program. For the purpose of this guide, we'll assume you're using 7. 134 | 135 | Connect your device by USB to your computer. 136 | 137 | In Xcode, go to the _Products_ menu again and change the destination to your connected iOS device. Press the _play_ button and your app will install on your device. 138 | 139 | ##### Sources 140 | * http://www.smashingmagazine.com/blog/2014/02/11/four-ways-to-build-a-mobile-app-part3-phonegap/ 141 | * http://cordova.apache.org/docs/en/3.1.0/guide_platforms_android_index.md.html#Android%20Platform%20Guide 142 | * http://cordova.apache.org/docs/en/3.1.0/guide_cli_index.md.html#The%20Command-line%20Interface 143 | * http://developer.android.com/sdk/installing/index.html 144 | * http://developer.android.com/tools/device.html 145 | * http://cordova.apache.org/docs/en/3.1.0/guide_platforms_ios_index.md.html#iOS%20Platform%20Guide 146 | 147 | ##### Further Reading/Docs 148 | * http://cordova.apache.org/docs/en/3.1.0/index.html 149 | * http://cordova.apache.org/docs/en/5.0.0/guide_platforms_index.md.html#Platform%20Guides 150 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Danwhy/cordova-getting-started/c8e32f5f53e918d290b78acd7f792a1bd8c6c70d/main.css -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Danwhy/cordova-getting-started/c8e32f5f53e918d290b78acd7f792a1bd8c6c70d/script.js --------------------------------------------------------------------------------