WatchKit – Day One

WatchKit was made avaliable today by Apple.  I have had just a quick read but this is a key to categorizing the different types of interactions.

  • Your Watch app contains your app’s full user interface. The user launches your app from the home screen and uses the app to view or manipulate data.

  • glance is an optional read-only interface that you use to display the most timely and relevant information from your app. Not all apps need a glance, but having one gives the user a convenient way to access your app’s data.

  • Custom notification interfaces let you alter the default interface displayed for recently received local and remote notifications and add custom graphics, content, and formatting. Custom notification interfaces are optional.

We know that Watch Apps require an iPhone to run third party apps.  That is an interesting wrinkle.  What does that mean for fitness apps?  At least non-Apple fitness apps.  I hope to know more in the coming days.  I will put together some kind of proof of concept app to learn a bit more.

Also, we know that based on a recent press release from Apple that third party developers will have to wait until later in 2015 until they can ship full watch apps.  This means our apps are going to fall into the category of either glances or notifications.  It is not exactly what I was hoping for, but interesting none the less.

I will post something more after I get a little more time with WatchKit.

 

refs.

https://developer.apple.com/watchkit/

http://www.apple.com/pr/library/2014/09/09Apple-Unveils-Apple-Watch-Apples-Most-Personal-Device-Ever.html

Note to self: In-App Purchases

Every time I go to add an in-app purchase to one of my apps, I forget the pattern that was set up for my Product Id.  I like to use the reverse domain and the product name tagged on the end like Apple suggests.

 

A product identifier is a string used to uniquely identify every product you wish to sell from your application. The App Store uses it to retrieve information about a product. It is a string identifier that can only contain alphanumeric (A-Z,a-z,0-9), underscore (_), and period (.) characters. You can use any sequence of these characters for your identifier. However, we recommend that you use the reverse domain name style (for example, com.companyname.application.productid) when creating your identifier

 

Hopefully by writing this post it will help me remember that I have this set up this way.  Burned a couple of hours trying to figure it out and it was right there all along.

Here is the link to the Apple Documentation.

Xcode 6 fixed archive functionality

I just noticed that in Xcode 6, you no longer have to disconnect your device to build an archive.  In the past I always forget to disconnect and it would drive me crazy.  I see that now, it does not matter if the device is connected or not.  Very nice.

This week I ran across an interesting problem. I was taking an older version of one of my company’s apps and making some minor feature adjustments and redeploying. I spent about 5 hours updating the code, debugging and testing. I then spent about 16 hours trying to get the changes to deploy on my device.

What was strange is, this had never happened before with this app and I had other apps that I made changes to where there was no problem.

Here are the scenarios:

Created a debug build and deployed to my iPad and iPhone directly from Xcode.

Specs:

Macbook Pro 2011 - OSx Yosemite 10.10
iPhone 5 - iOS 8.1
iPad 3 - iOS 8.0.2

This build worked as expected. Nothing really to report. I was working in this method for the entire development cycle.

Created an enterprise build and deployed via the classic Testflight service.

When I tried this method, a few unusual things happened.

1. The app loaded as expected, but the icon was in a disabled state where you could not launch the app and it was semi-transparent.

2. I also received the error message: “Unable to Download App – ‘Appname’ could not be installed at this time.”

download error

No matter how many times I selected retry I received the same message. I figured that I set up the certificates incorrectly. But after revoking the certificate and recreating everything I was convinced that this was not the problem. I also used iTunes and tried to drag and drop the app right on the device with the same results.

Next up was scouring stack overflow, I found a few helpful tips, but I did not really find anything that solved the problem.

At this point, I started looking at some of the core files that are used to load the app. I started
comparing some of the core app files to the app that I had that was working. I quickly identified that that info.plist was different between the two apps.

I renamed the non-working app plist and copied the working plist over. I did and enterprise build and it worked just as expected. At this point, I took the working plst and added all of the custom settings from the backup and everything still worked as expected.

I can’t say for sure but it looks like there is some difference in the legacy plist that does not agree with the new way of doing things.

Problem solved, I don’t plan on breaking this down any further, but I am going to submit a Radar to Apple, they may want more information, if so, I will update this post.

 

 

edit: added Radar.  Issue ID: 18784520

Configuration Web Services

There are several excellent open source projects out there that allow developers the ability to add excellent utility to their apps.  There are apps to help your app store rating, force users to update their app, provide users with release notes and tons of other cool things.  One of the things we have found really useful with Crushmedia.net apps are controlling all of those great utilities from a webservice config call.

 

We have started working on our own open source project to create an SDK that wraps up all of those utilities and supports them with a web service.  We have a demo of the web application that gives you control over the web services and we are following that with an open source version of the SDK.

We still need to do a little clean up to let the SDK out in the wild, but so far it is working really well for us.  Can’t wait to share.

Apple App Store Release Data

Item Type Description Limitations
SKU Text a unique identifer that you can assign your app.  often it is strictly numeric
Bundle ID Select from List typically this is assigned by the developer early in the development process
Default Language Select from List
Version Numeric Seems easy, but you still need to know
Primary Category Select from List There is a pick list that allows you to decide which category your app will be added under
Secondary Category (optional) Select From List Same as above, not required, but might help users find your app, even when they may not be looking for it
Copyright Text Examplle: 2012 Your Company, Inc
Review Notes Text This is for the tester on the apple end.  If there is a login id or some other special item they should know about when testing the app
Application Name Text The name of the application. None but it will be shortened on the springboard and in various places in the App Store
Application Description Text The content displayed in the App Store listing. Keep the description succinct. Browse the App Store’s top apps to find good examples of application descriptions. 4000 characters max
Keywords Text The words, features, and functions used to describe your application. Apple will use these words to associate your app with user searches in the App Store. 100 characters max; separate by commas
Application Binary The App Store version of your application (iPhone, iPad, or Universal). Must be .zip or .ipa; size should be 2GB or less for customers to download over Wi-Fi or 20MB or less for customers to download over the cellular network
Large 512×512 Icon Image The large version of the app icon that will be used in the App Store when users are browsing through the iTunes App Store. At least 512×512 pixels; at least 72 dpi
iPhone and iPod touch Screenshots Image Only one of the five available screenshot files are required for your app but all are recommended. Make the primary screenshot the best one. Must be a .jpeg, .jpg, .tif, .tiff, or .png file; sizes allowed are 320×480, 480×320, 320×460, or 480×300 pixels for all devices except the iPhone 4; high resolution screenshots of 960×640, 960×600, 640×960, or 640×920 if the app is designed for the iPhone 4’s Retina display
iPad Screenshots Image Only one of the five available screenshot files are required for your app but all are recommended. Make the primary screenshot the best one. Must be a .jpeg, .jpg, .tif, .tiff, or .png file; sizes allowed are 768×1024, 1024×768, 748×1024, or 1004×768 pixels
Rating Select from List You will answer the following questions which will provide your rating
What’s New in this Version Text you will be asked this when submitting an update to an existing app
Support Email Address Text who to contact for support issuse
Support URL Text where to go to get more help for the app
Marketing URL (optional) Text Marketing info on the app.  Can be the main website of the company
End User Liscense Agreement Text you can add your ENLA language here or you can accept apple’s default version

Automated build of Icon/Loading Files

I wrote a post a while back about using Image magick and a bash script to quickly to create the various size app icon images you need for your mobile app.  This is just an updated version of that post.

Automated build of Icon/Loading Files  (originally posted 3/24/2012)

Because of the number of different icons needed for mobile apps I needed a quick method to input a master image and then convert the multiple images for Android and iOS.  Ideally I would like something that runs from the command line so I don’t have to open any software apps that will bog down my system.  As much as I looked, I could not find a quick, cost effective (read that as free), software independent, OS independent, method for resizing icon/loading files.

 

I realize that there are Automaters on my Mac, there are batch scripts in Photoshop and Fireworks, even a really cool Mac app called iConify(iOS only) but none of those methods meet all my requirements.  I decided to use ImageMagick as my image conversion tool.  Let me give you a few reasons for my choice.

  1. ImageMagick is open source
  2. Runs on UNIX, Mac OS X, Windows, iOS
  3. Has command Line processing

After choosing my tool, I set out to make this process as automated as possible.  I am a Mac user, so I wrote a bash script to handle the workload.  The bash script will organize my projects, move them around to my local storage, push to Git Hub, and now to build images for my project.

Here is how it works:

convert -geometry 114×114 -quality 100 appicon.png resources/android/appicon.png

This command executes the ImageMagick command CONVERT which takes a file called appicon.png (I have this sized at 512 x 512), resizes it to 114×114 and outputs it to my android folder with the name appicon.png at 100 percent of the quality of the original image.

I repeat this for each of my file sizes (check out my other post for more of the sizes) needed and we are done.  I just keep adding to this script for other images.

Hope this speeds your image building process.

Here is my full script:

#!/bin/sh
# **********************************************************
#  convertImages.sh
# 
#
#  Created by Greg Mccormick on 3/25/12.
#  Copyright (c) 2012 Crushmedia, LLC. All rights reserved.
# **********************************************************

# Set your workspace below
#
# add 3 files to your project folder - same level as the tiapp.xml
# icon file should be named app icon.png
# default landscape should be named default_L.png
# default portrait should be named default_P.png
# make note of the exact name of your project in your workspace
#
# **********************************************************

clear
#update the path to your project workspace here
# -tiProjectPath = '~/Documents/\ Workspace/'
echo "#######################################################"
echo " Created by Greg Mccormick on 3/25/12."
echo " Copyright (c) 2012 Crushmedia,LLC. All rights reserved."
echo "#######################################################"
#get the exact app name as it is in the tifolder
echo "Enter the App Name "
read -e APPNAME
# go to the project space - change this to your path
cd ~/Documents/\ Workspace/
cd $APPNAME

#remove the current iPhone and android folders and all the files in them
rm -rf ./Resources/iphone
rm -rf ./Resources/android

mkdir ./Resources/iphone
mkdir ./Resources/android
mkdir ./Resources/android/res-long-port-hdpi
mkdir ./Resources/android/res-long-port-ldpi
mkdir ./Resources/android/res-notlong-port-hdpi
mkdir ./Resources/android/res-notlong-port-ldpi
mkdir ./Resources/android/res-notlong-port-mdpi
mkdir ./Resources/android/res-notlong-land-mdpi
mkdir ./Resources/android/res-notlong-land-ldpi
mkdir ./Resources/android/res-notlong-land-hdpi
mkdir ./Resources/android/res-long-land-ldpi
mkdir ./Resources/android/res-long-land-hdpi

convert -geometry 512x512 -quality 100 appicon.png ./Resources/iphone/appicon@512.png
convert -geometry 114x114 -quality 100 appicon.png ./Resources/iphone/appicon@2x.png
convert -geometry 29x29 -quality 100 appicon.png ./Resources/iphone/appicon-Small.png
convert -geometry 50x50 -quality 100 appicon.png ./Resources/iphone/appicon-Small-50.png
convert -geometry 72x72 -quality 100 appicon.png ./Resources/iphone/appicon-72.png
convert -geometry 57x57 -quality 100 appicon.png ./Resources/iphone/appicon.png
convert -geometry 144x144 -quality 100 appicon.png ./Resources/iphone/appicon-144.png
convert -geometry 128x128 -quality 100 appicon.png ./Resources/android/appicon.png
convert -geometry 1024x748 -quality 100 default_L.png ./Resources/iphone/Default-Landscape.png
convert -geometry 768x1004 -quality 100 default_L.png ./Resources/iphone/Default-Portrait.png
convert -geometry 319x480 -quality 100 default_L.png ./Resources/iphone/Default.png
convert -geometry 639x960 -quality 100 default_L.png ./Resources/iphone/Default@2x.png
convert -geometry 480x800 -quality 100 default_P.png ./Resources/android/res-long-port-hdpi/default.png
convert -geometry 240x400 -quality 100 default_P.png ./Resources/android/res-long-port-ldpi/default.png
convert -geometry 480x800 -quality 100 default_P.png ./Resources/android/res-notlong-port-hdpi/default.png
convert -geometry 240x320 -quality 100 default_P.png ./Resources/android/res-notlong-port-ldpi/default.png
convert -geometry 320x480 -quality 100 default_P.png ./Resources/android/res-notlong-port-mdpi/default.png
convert -geometry 480x320 -quality 100 default_L.png ./Resources/android/res-notlong-land-mdpi/default.pnp
convert -geometry 639x960 -quality 100 default_L.png ./Resources/android/res-notlong-land-ldpi/default.png
convert -geometry 800x480 -quality 100 default_L.png ./Resources/android/res-notlong-land-hdpi/default.png
convert -geometry 400x240 -quality 100 default_L.png ./Resources/android/res-long-land-ldpi/default.png
convert -geometry 800x480 -quality 100 default_L.png ./Resources/android/res-long-land-hdpi/default.png

Greg Mccormick is Founder of CRUSHMEDIA.NET, a full service mobile development company located in Manhattan.

Icon and Default Screens

As a cross-platform developer, one of the things that you have to consider are the various image sizes that are needed for your loading screen and app icon.  If you don’t know by now, Android and iOS have a variety of sizes and file structures to meet the needs of the different screen sizes and pixel depth of the hardware devices that they support.

I have put together a quick reference that shows the various structure and size of the images needed by a developer.  Hopefully, you find it useful.

iOS:

[root zip folder] > [iphone]>ios files

Android

[root zip folder] > [android]>[res-long-land-hdpi]>androoid files

All images can be included in the same zip file and can be extracted right into the project.

iOS Icons Size Android Icons Size
iphone/appicon.png 57×57  iphone android/appicon.png 128×128
iphone/appicon-72.png 72×72  ipad
iphone/appicon-Small-50.png 50×50
iphone/appicon-Small.png 29×29
iphone/appicon@2x.png 114×114  iphone ret
iphone/appicon@512.png 512×512  appstore
 iphone/appicon-144.png  144×144  ipad
iphone/appicon@1024.png 1024×1024 appstore ipad
iOS Splash Screen Android Splash Screen
iphone/Default-Landscape.png 1024×748  ipad android/res-long-port-hdpi/default.png 480×800
iphone/Default-Portrait.png 768×1004  ipad android/res-long-port-ldpi/default.png 240×400
iphone/Default.png 320×480  iphone android/res-notlong-port-hdpi/default.png 480×800
iphone/Default@2x.png 640×960  iphone ret android/res-notlong-port-ldpi/default.png 240×320
 iphone/Default-Landscape@2x.png 1536 x 2008  ipad android/res-notlong-port-mdpi/default.png 320×480
 iphone/Default-Portrait@2x.png 2048 x 1496  ipad
android/res-notlong-land-mdpi/default.png 480×320
android/res-notlong-land-ldpi/default.png 320×240
android/res-notlong-land-hdpi/default.png 800×480
android/res-long-land-ldpi/default.png 400×240
android/res-long-land-hdpi/default.png 800×480

There are additional icons that are needed if the app will be using social networking.  Many social sites allow you to add an icon in the authentication screen to so users are comfortable with the fact that the app is asking for the ability to access social data.

Social Network icons Size Note
facebook.png 16×16 Appears next to your app name throughout Facebook (16×16)
facebook75.png 75×75 Appears in authorization dialogs, search results, and the app directory (75×75)
twitter.png 100×100