PhoneGap Build and iOS key

I have been giving more and more presentations on developing apps using either PhoneGap or PhoneGap Build. My most recent presentation was done at the Adobe Education Leader Summer Institute in San Jose on July 21. In the past, I focused on deploying developed apps on Android devices. However, I also wanted to show how easy it was to deploy developed apps on iOS devices. Therefore, I needed to purchase a developer account with Apple ($99 a year). Yes, I know there is the possibility of obtaining an educator account, but I have asked at my school in the past and been refused. Therefore, I bit the bullet. Now what? I had to do a fair amount of research on the WWW to determine the next steps. I thought it might be helpful for readers to know how I solved this (and I also have a post I can refer to when I forget how to do this myself). I suspect many readers think these posts are for others (FYI – sometimes, they are for my future reference as I do suffer from middle aged memory).

Essentially, one needs to accomplish three things in order to use PhoneGap or PhoneGap Build and deploy on iOS devices. I will focus on PhoneGap Build as it is where I direct most students as a starting point in the CMWEB 280 class. Essentially, you need:

  • a certificate (must be a .p12 version – private key) and a password to access that certificate
  • a provisioning profile (indicating the devices where you plan to test your developed app)

Of course, to accomplish these steps, you can only do it on your Mac or MacBook.

Step 1 – Open your KeyChain access. Use Finder to browse to Applications > Utilities > KeyChain Access (then open it).

Step 2 – From the KeyChain menu, Certificate Assistant > Request Certificate from Certificate Authority

Request a Certificate

Step 3 – Save it locally.

Save the certificate locally

Once saved, you can then open it in the Finder.

Request is saved locally

 

 

Step 4 – Visit the Apple Developer Center in your browser and navigate to the Certificates section. You will need to add a certificate (click on the (+) icon. Decide on the type of certificate, and then click Continue (at the bottom of the page – this would be under the part of the screen I captured below).

Adding a certificate

You will already have completed these instructions (generating a certificate request), but they are listed in the screen capture below in case you did not already complete that step.

Certificate Signing Request Details

After choosing Continue, you will need to select the file you saved locally. This is the .certSigningRequest file. You then click Generate. It may take a few moments for that request to complete.

Selecting the CSR file

Step 5 – Once completed, download your certificate (and remember where you stored it). Once you have downloaded your certificate, you can choose Done.

Download the certificate

Step 6 – you need to specify the devices you wish to test on. You can include up to 99 devices (if you upload a file). You will need to know the UDID of each device. To locate the UDID, connect your device to your Mac via USB (select Trust this computer on your device) and open iTunes. Select the device and you should see information like that shown below. Click on Serial Number (highlighted below) and you should then see the UDID.

Finding the UDID

With the UDID displaying, click and choose Copy to store the value in the clipboard.

UDID displayed

I chose to register multiple devices at once (you can download a sample file to make certain you have the correct format).

Register Multiple Devices

It may take a moment if you have a number of devices in the list. You should see something like the following (and can then proceed with the next step).

Multiple Devices Confirmed

Step 7 – You next create a provisioning profile. I selected iOS App Development.

Creating a provisioning profile

You next choose an AppId (I set mine to a wildcard so I could use for multiple apps).

AppId selected

If you have multiple certificates, you must choose the appropriate one.

Select Certificates for Provisioning Profile

I then specify the devices I want to test.

Select Devices to Test with

I next name the profile and generate it.

Naming and Generating the Profile

You can then download the provision profile. It will have an extension of .mobileprovision.

Step 8 – You next combine the certificate and your key and export them (for use in PhoneGap Build). Return to KeyChain, select File > Import Items from the menu. Point to the location of the .cer file you created in Step 5.

Export Certificate

You will be prompted for a password (make certain you remember it). Make certain you use a strong password.

Password for Certificate

 

Step 9 – Login to PhoneGap Build and add a key when creating a new application for your iOS device(s). You will be prompted for both the .p12 certificate file and provisioning file.

Installing certificates in PhoneGap

You will also need to provide your password before you can successfully build your iOS apps.

Supply password

Whew – that is it. You can now successfully build and deploy apps on your iOS devices. I hope you found this post helpful. I am always interested in your thoughts. I look forward to your comments.

 

 

 

 

Adobe Ink and Slide

I recently purchased the Adobe hardware Ink and Slide. I have been working with it for a couple of weeks and thought others might to see my insights. Personally, I like the pressure sensitivity and ease of use with tools like Adobe Line and Sketch. Unfortunately, the tool is a bit pricey ($200). It only works with iPads (and only the 4th generation version). Hopefully, the price will come down over time and there will also be an Android version at some point. For those who can meet the requirements, I think you will like the tools.

Read more »

2014 National Web Design Contest – part 2

As I mentioned last week, we held our annual national web design contest in Kansas City in late June. We had competitions for both high school students and post-secondary students. This year, we had representatives from 35 states. All had to win first place in their state competition to participate in the national contest. These are some of the comments from our judges which I thought readers might find helpful. Obviously, I have removed references to specific teams.

Our judges provided some very positive overall comments. I thought these two exemplified what many judges thought.

“Every year the competitors keep getting better!”

“Overall, These are some of the best submissions that we’ve seen in a long time.”

In terms of the submitted work, I wanted to focus on two key areas – coding and design.

Read more »

2014 National Web Design Contest

I had the great honor of supervising our WebProfessionals.org national web design contest in Kansas City (June 24-27, 2014). We held separate contests for high schools and post-secondary schools. This year, we had representatives from a total of 35 states. Congratulations to the winners and to all who participated. Everyone had to win first place in their state in order to compete nationally. In both contests, teams of two were asked to complete a series of challenges which resulted in 3 web pages. Emphasis was placed on web standards, accessibility, and professionalism. Teams had to use their knowledge of HTML, CSS, and JavaScript to complete these pages. Each team had roughly 8 hours to review the client work order, analyze what was being asked, develop their wireframes, storyboards, style tiles and initial analysis and then build the pages. It seems like a lot of time, but is not once you start the process. Teams were interviewed (by individuals who actually hire web professionals). Each team was also asked to complete an exam. We held debriefings for each contest at the end of the day of that contest. I wanted to use this forum to share additional observations. I will create a separate post dealing with comments from judges.

To address one question which is always asked – no, we can’t share links to the winning sites. Apparently, there were some problems with earlier contests and we have been asked not to share these sites since our initial demonstration competition in 2004. I understand that some may want to question judge decisions. That being said, I firmly believe our competition is one of the fairest I have even encountered. It is a double blind experience (judges do not know who the participants are and participants never meet the judges). After each competition, I upload all submissions to a central secure server which is accessed by the judges. We have practicing professionals (in a number of different time zones) examine the sites for their area of expertise. In a simple “back of the envelope” calculation, I determined that judges collectively made over 13,000 individual decisions when analyzing the sites. There is little chance for subjectivity. Each judge scores based on an established rubric and multiple judges review the same site and same criteria. We have a judge supervisor who then collects the results and assembles the final scores. So, knowing this, I wanted to share some additional thoughts (again, comments from the judges will be part of a separate post). Read more »

CSS Shack

I recently became aware of the CSS Shack project and thought it might be useful for readers of this blog. As I understand it, CSS Shack is available both as a desktop application (for Windows and Linux) and as a Chrome browser extension. I decided to focus on the latter (since it is a free extension and many readers of this blog are web design students with limited budgets). Why do I mention tools like this? It is mid-2014 and we have a number of browser environments where our pages will be viewed. Of course, all browsers display CSS-3 code in exactly the same manner (sadly, NO). Therefore, we need to employ browser specific instructions for various environments. These subtle differences must be accounted for (consider -webkit, -ms, -moz, -o, and the default that someday all browsers will recognize). If we want to include a simple gradient as a background, we need to employ a number of browser hacks. And it is quite easy to make a typo (or forget one). I may also want to meet with a client to rapidly prototype a page and this is another tool I can use for in browser design/ development.

Read more »

Adobe Captivate 8 First Look

I have been using Adobe Captivate for a number of years (and have come to rely on it more and more in the past couple of releases). I recently obtained a copy of Captivate 8 (the latest version). I thought it would be appropriate to take a few moments and review this tool It seems to have a number of significant improvements from earlier versions. Read more »

Hack.me Site

The CMWEB 270 class I teach covers many of the fundamentals of ethical hacking. Of course, one of the main problems one encounters when teaching ethical hacking is providing links to vulnerable websites. Yes, one can easily create a vulnerable site. However, many hosting providers don’t like you to post the vulnerable sites on their servers (for example, in a reseller account, it is possible to walk across multiple “sites” depending on the vulnerability being exploited). Wouldn’t it be nice if there was the ability to spin up a vulnerable sandbox, cover the exploits, and then remove the  sandbox. This is precisely what the Hack.Me is all about. This service is provided by eLearnSecurity and is free for academic use (you must agree to abide by their terms of service).

I thought it might be helpful to review some of the fundamentals of working with this environment. Obviously, you first need an account. Read more »

Related Posts Plugin for WordPress, Blogger...

Next Page »