iOS Cordova/Phoengap project setup guide on Mac

-

In this post, I will help you set up PhoneGap Command Line Interface on Mac for iOS. I will try my best to cover all the aspects. If you are facing any issues while setting up, do drop a comment & I can take a look at the issue.


First of all, let me tell you what is Phonegap. So, PhoneGap is an open source framework for quickly building cross-platform mobile apps using HTML5, Javascript and CSS.

Building applications for each device–iPhone, Android, Windows Mobile and more–requires different frameworks and languages. PhoneGap solves this by using standards-based web technologies to bridge web applications and mobile devices. Since PhoneGap apps are standards compliant, they’re future-proofed to work with browsers as they evolve.

The PhoneGap code was contributed to the Apache Software Foundation (ASF) under the name Apache Cordova and graduated to top-level project status in October 2012. Through the ASF, future PhoneGap development will ensure open stewardship of the project. It will always remain free and open source under the Apache License, Version 2.0.

Nitobi was the original creator and is one of the primary contributors to the PhoneGap framework. In October 2011, Adobe acquired Nitobi enabling the team to focus solely on the PhoneGap project and continue its work on efficient development across mobile platforms.


Here are the following steps that you have to follows to install and setup the cordova/phonegap project for iOS in your mac.


Step 1:Install Nodejs. You can find a tutorial here on how to setup Node. We will leverage Node Package Manager to setup Cordova & PhoneGap

Step 2: Install PhoneGap – Run sudo npm install -g phonegap

Step 3: Install Cordova Command Line tools – Run sudo npm install -g cordova

Step 4: Install HomeBrew. We will use HomeBrew to setup Ant on our system. If you don’t have HomeBrew, run ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install )" at your terminal.

Step 5: Install Apache-Ant. Run brew update & then install ant brew install ant

Step 6: For iOS development, Run to the App Store & Download the latest version of XCode. After the installation is completed, launch the application & accept the license, terms.

Step 7: Create a new folder and name myApp.

Step 8: Open terminal here & Run phonegap create myFirstApp. This will setup the required files for a startup project.

Step 9: cd myFirstApp

Step 10: Then lets add a iOS platform instance. Run cordova platform add ios *

Note : * If you are getting error related to your Xcode when you adding iOS platform to your project in Step 10, then first set your xCode path by running the following command.
$ sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer

Now continue from Step 10.

Step 11: Build the iOS project. Run cordova build ios After a stream of messages, you should see something like this

** BUILD SUCCEEDED **

If you see any other message than above, please recheck your setup. If the error still persists drop a comment.

Step 12: Navigate to myFirstApp/platforms/ios. You will see a myFirstApp.xcodeproj. Double click it to launch the project in Xcode.

Step 13: Once the project is loaded, lets Build the project. From the top Menu, Product > Build for > Testing. You should a Build Succeeded message.

Step 14: Click on the Play button on the top left hand of the screen. Wait for a few moments for the iOS simulator to launch & you should see a Device Ready message on iOS Simulator.



Comments

Post a Comment

Popular posts from this blog

Carousel view in Android

-
Image
Hello Guys !!! Hope you all doing well... In this tutorial, you will learn how to implement a carousel in your Android application.   Here is necessary java classes and xml files. 1.  MainActivity.java package com.pack.carousel; import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.support.v4.view.ViewPager; import android.util.DisplayMetrics; public class MainActivity extends FragmentActivity { public final static int LOOPS = 1000; public static int FIRST_PAGE; // = count * LOOPS / 2; public final static float BIG_SCALE = 1.0f; public final static float SMALL_SCALE = 0.7f; public final static float DIFF_SCALE = BIG_SCALE - SMALL_SCALE; public MyPagerAdapter adapter; public ViewPager pager; /*** variables for the View */ public int coverUrl[]; public static int count; public static MainActivity mainActivityCtx; public static int currentPage = 0; @Override public void onCreate(Bundle savedInstanceState)
Read more

Get Phone Contacts and display in Listview in Android

-
Image
Hello Guys !! In this tutorials, you will learn how to get Phone contact and display in listview in your android application. Here is the full example to read the phone contact and display in listview. Here is the java files : 1. GetContactActivity.java package com.pack.getcontact; import java.util.ArrayList; import java.util.HashMap; import android.app.Activity; import android.content.ContentResolver; import android.content.Context; import android.database.Cursor; import android.os.Bundle; import android.provider.ContactsContract; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.ListView; import android.widget.TextView; public class GetContactActivity extends Activity{ ListView contactLV; ArrayList<HashMap<String , String>> ContactList = new ArrayList<HashMap<String,String>>(); @Override protected void onCreate(Bundle savedIn
Read more

Draw Pie Chart using Canvas and Third party Library in Android

-
Image
Graph plays a very important role in showing data in  Graphical view. User generally find comparison  in a graph  very interesting. It gives a clear view of something going up or down or how things related to each other or what is previous record  and what is next coming forecast for that etc. But in android there is no graph  related API. We can draw graph in android by using general android API. The other way is to use third party graph library to draw the graph. So finally we have two option to draw graph in android 1. Draw graph by using canvas in android. 2. Draw graph by using third party API ( Ex. AChartEngine, AndroidPlot, Google Chart , AFreeChart etc) I'll share both example with you. 1. Draw Graph by using Canvas in Android. Simple Pie Chart example without using any external jar in android. Here we are creating chart using Canvas class in android. PieChartActivity,java package com.example.homeappliancesusage;   import android.app.A
Read more