Lesson 2: Creating and Testing a Project

Now we need to make sure everything is running as it should.  To begin with, we create a new Cordova project.  Note that this generates a folder and a bunch of files and sub-folders and wherever you are located on your PC (within Git Bash) is where they will be generated.  Your standard windows command prompt commands are not welcome here, you need to use some others to find your way around.  I strongly recommend Googling to find out more, but the ones you’ll definitely need here are:

  • “ls” lists the contents of the directory you are in
  • “cd ..” goes up/out one folder, as does “cd /”


Now, you are probably located within your c:\Users\user-name\ folder if you have followed the guide on the previous post.  You just “cd ..” (note the space before the “..”)  out of there a couple of steps and you’ll end up at the root C (or whatever) drive.  You can then “cd folder name” one at a time to get into the folder you will develop from, or you can “cd declare full path to folder” to get there in one command (no matter where you are).   For instance, I made a folder called “mobapps” in c:\xampp\htdocs where I want to work from.  So I execute the command:


cd /c/xampp/htdocs/mobapps…and I’m in.  Remember it doesn’t matter where you were when you entered that command, you’ll end up where you wanted.  Also note that you need to use forward slashes as opposed to backslashes and you need that first “/” before the drive name at the start.


Creating a Project

Righty, now we’re in the right place we need to create that project.  To do this, enter:


ionic start todo blank


This created a new project with the relevant/default file and folder structure called “todo”, in a folder with the same name.  Once this is done, if you check windows explorer you’ll see the folders/files are present. You can of course also use the ls command within the terminal as well.


Note: You will be asked if you want to create an account to send Push Notifications to, I already haveone  so I said No, assuming this can be dealt with later if needs be.


Back at the terminal now, we need to set up  the Android and OSX platforms.  I’m on Windows as mentioned, so I cannot install the OSX platform.  Therefore I’m just running:


ionic platform add android


If i were also doing iOS apps would run the command a second time with ios at the end.  If you run this and get an error regarding “Error reading config file: Error: ENONET: no such file or directory blah blah” then this is likely because you are in the wrong folder, you need to be inside the “todo” folder you created, you are probably still inside your “mobapps” folder so run cd todo and that’ll fix that problem.  Run the command again and let it work its magic, after which point it’ll drop you back at your commend prompt.

Building The Project

Now we should “build” the project, this is done by simply executing the command:


ionic build android


Substitute “android” for “ios” if you are doing that (you probably aren’t).  The first time I ran this it got so far and then errored out with a message saying I “may not have the required environment or OS to build this project”, it was looking for something called “android-22”.  Further investigation revealed this is the Android SDK version number and corresponds to a version of Android.  I.e. 22 is Lolipop, 23 is Marshmallow.  It is not the version of the Android Studio (you downloaded in the first guide), its the SDK version.  So, if you get this error:

  1. Fire up your Android studio
  2. Click on “Configure” and then “SDK Manager”
  3. In the window that pops up it’ll show you what SDKs you have installed, in my case all I had was version 6 which corresponds to “API level” 23 / Marshmallow.  The error said I needed 22 (I suspect that Cordova is not yet primed for Marshmallow at the time of writing) so I ticked the box for 22 and clicked “OK” in the bottom right, the OK’d to confirm I wanted to install the components.
  4. Let that do what it does and when you’re done you move back to the terminal and run the build command again.

All being good that should now build fine, offering a screen full of dots and ultimately a nice juicy confirmation message.  Note: you may get a pop up asking you to allow access to Java for something or another, stick around so you see that and confirm it.

Testing The App

According to the Ionic guide the inbuilt Android emulator is  not so great and they recommend using Genymotion which is free for personal use but offers a very restricted toolset.  They offer a paid (monthly) version starting at around $11 which offers the full service.  I haven’t looked into this yet so cannot suggest what is best to do here but will come back and edit the post when I have more info.  For now I’m sticking with the emulator, so to run that we type:


ionic emulate android


This opened a new window using the “emulator-x86.exe” executable whilst some stuff carried on happening in the bash terminal.  After a minute the familiar looking Android home screen appears in the emulator. If this worked out then you should just get a white screen with “Ionic Blank Starter” as a heading.  Why? Well because we haven’t actually created any code yet.


It’s worth noting at this stage that the emulator, for me, was smooth enough.  Of course this may change but it’s running perfectly fine at the time of writing.