Lets See how to Develop IOS App Using Phonegap/Cordova

Lets see Angular 5 Features and Benefits
February 27, 2018

Lets See how to Develop IOS App Using Phonegap/Cordova

Those, who work in JavaScript propelled system, for instance Ionic and so forth, ought to have the capacity to work in and construct the iOS variant of the structures as well. We deal with various such iOS ventures utilizing Phone Gap. How to chip away at Phone Gap isn’t an obscure part to us however would you say you are one of those like me who confront challenges while including symbols and sprinkle screens and so on? On the off chance that you are prepared to take in a few certainties that will enable you to beat these challenges at that point how about we continue.

Lets see the below steps to design ios app

  1. Create builds or minify your project:

Distinctive systems bolster diverse methods for making venture manufactures. Manufacture minifies your undertaking that lone incorporates the classes that your application really employments. On the off chance that you are not utilizing any structure then you can simply minify your documents utilizing any of the accessible instruments: yui, and so on. This aides in lessening the stacking time of the application as it diminishes the aggregate record estimate.

  1. Download latest version of PhoneGap /Cordova

You can install Cordova and make a Cordova project of the build (which you have just minified).

  1. Create a new Cordova project:

After installing Cordova, go to terminal and create a Cordova project.

$ cordova create ~/Desktop/ExampleApp com.innofied.exampleapp ExampleApp

  1. Add desired plugins:

To add desired plugins of Cordova PhoneGap you need to go to the project folder first.

$ cd ~/Desktop/ExampleApp

Then you need to add plugins one by one to your PhoneGap project.

$ cordova plugin add org.apache.cordova.device
$ cordova plugin add org.apache.cordova.vibration
$ cordova plugin add org.apache.cordova.media
$ cordova plugin add org.apache.cordova.mediacapture
$ cordova plugin add org.apache.cordova.file
$ cordova plugin add org.apache.cordova.filetransfer
$ cordova plugin add https://github.com/aliokan/cordovapluginadmob
  1. Add all folders and files to “www” folder:

Open finder and go to the folder where you have stored all the files and folder of the project build generated after step 1. Copy all of them and move to the Cordova project folder and open it. You will find a “www” folder where you need to paste them and replace all existing files and folder.

 

  1. Time to add iOS Platform:

Now it is the time for adding iOS platform to Cordova project using terminal. Control should be within the Cordova project directory in terminal.

 $ cordova platform add ios

After the execution of the command an iOS project will be created which you can find within ExampleApp/Platform/ios/ path. But iOS project is still not ready to run.

  1. Add Splash screen and icons:

Let’s add icons and splash screens to your project and name all files according to the convention. I have listed down all the required resolution, name of icons and name of splash screens.

After naming all PNG files you need to put into the icons and splash folder which you can find in /ExampleApp/Platform/ios/ExampleApp/Resources folder.

  1. Make the iOS Build:

After everything is done it is the time to build Cordova project’s iOS platform. This is not similar to Xcode build. In Xcode build .h and .m files are compiled and checked; but in this build the JavaScript code will be compiled to Xcode classes. So if you make any changes to your .js files or .html files, you must build the Cordova project to see the changes while running it on iOS device. Control should be within the Cordova project directory in terminal.

$ cordova build ios

  1. Run the App on device:

Everything is ready now! Your Xcode project is ready to run on simulator and you know how to run it on your device (by code signing). Open finder and go to /ExampleApp/Platform/ios/ and open .xcodeproj file and run it.

source-innofied

If you find more new issues or have more suggestions & querries click on www.4blocksinc.com

Leave a Reply

Please wait...

Find out how we can help you grow

Ready to take a step further?