Setting up Cordova project on MAC

Recently, I felt that developing native apps for every platform is becoming tiresome. Actually, I knew from the beginning that there are tools like Xamarin, PhoneGap, and etc. that can be really helpful for developing apps for all platform(maybe not all). But I always felt that writing apps with web scripts are not cool. I mean that I didn’t really like the idea of wrapping web apps and deploying it as a native app since I had a bad past with web apps and android. But things have changed, web technology is getting better every year, therefore, I thought that I should abandon my old ways of thinking and give it a try ! With what? This time I will be using a tool called “Cordova”. Cordova is something like a wrapper that converts web app(HTML5 & Javascript) into native apps! I still haven’t tried it so I can’t say if it’s good or bad. Can’t still judge! But let’s set up Cordova!

What you should install

  • Java
  • Ant
  • Android SDK
  • NodeJS
  • Git

Getting started

(1. Download android SDK from the official website and set the path of your SDK in the .bash_profile.

  • sudo nano ~/.bash_profile 
  • export ANDROID_HOME=/Users/myName/Documents/CordovaFolder/SDK

( 2.  Install apache ant and set the path just like you did with the android SDK

  • npm install -g ant (There are other ways to install ant such as “brew install ant”)
  •  ANT_HOME=/usr/local/lib/node_modules/ant/ant

( 3.  Download java JDK and set the path for your java JDK The version doesn’t have to be jdk1.8.0_91.jdk.

  •  JAVA_HOME =/Library/Java/JavaVirtualMachines/jdk1.8.0_91.jdk/Contents/Home

( 4. Install node JS  and Git from the following link. Type “node -v ” in the terminal to check if node js is installed properly. To check the Git version, type “git –version”. The version should show up. If it doesn’t the setting or the path is not set properly.

  • https://nodejs.org/en/
  • https://git-scm.com/

Ok, so I guess that the environment setup is ready! If so let us make the basic Cordova app with a Splash screen! Start typing the following commands in the terminal!

  1. “cd /Users/myName/Documents/CordovaDev/”
  2. “cordova create HelloProjectFolder com.mypackagename HelloMeApp”
  3. “cordova platform add android” ← You can add ios and for other platforms
  4. “cordova plugin add cordova-plugin-splash screen” ← There are many plugins so visit http://ngcordova.com/docs/plugins/ to check out more!  
  5. “cordova build android” 

After step 5, if everything is successful, the following message will show up. (In my case)

BUILD SUCCESSFUL
Total time: 22.093 secs
Built the following apk(s):
/Users/myName/Documents/CordovaDev/HelloHello/platforms/android/build/outputs/apk/android-debug.apk

So what should I do after this? Well, you can open the project you made right now with android studio or do whatever you want. For more information check out the following site!

https://cordova.apache.org/

Leave a Reply

Your email address will not be published. Required fields are marked *