| Subcribe via RSS

App Icon Design Checklist

January 16th, 2014 | No Comments | Posted in UX

One of the most important things for your app visibility in AppStore is it’s icon. I was designing an icon today and compiled a quick list that I should return to every time I’m about to release one.

Icon should represent what the app does
One image tells more than 1000 words. This image is around 120x120px, make the stuff on it clear.

Simplify
Make it simple stupid! (MSS!) This is basically the main rule of all digital design IMHO. You can exaggerate on important iconography and app details. Don’t overdesign. Don’t make things complicated. Make it minimalistic. Small things matter, but don’t make things too small.

Main composition rules apply
Main composition rules apply. It’s a square, but you should still think in 3×3 boxes.

Make it look good big and small
Start designing it small. I start 115x115px. Make it look good in this scale. Then make the big version 1024x1024px. Does it still look good? Best ones look good any size.
Note that you can make small and big icons slightly different and they will pass Apple review.

Logo is not the most important
There are many brands out there that use only their logo on the icon. While it is a good idea for Google, Skype or Twitter, it usually is not such a good idea for smaller apps for less known brands. Try to rather use the first rule here. If nothing else comes to mind. Then use the logo. In ideal case the logo already tells users what the app and the company does.

Test it on the device
Test it on your phone. Computer screen does not really give the best representation of the design. Put it into your phone next to other apps. Touch and feel and compare. Does your icon stand out? Does it blend in? This test really says it all.

Test it against different backgrounds
…on your device. Change the background to solid black, solid white, solid yellow. Now try the live backgrounds. Now a photo etc. Try as many different backgrounds as possible.

Ask the community
Even the best designers check in with the community. Dribble, Forrst or more local design communities. Upload a couple of versions and ask for opinions. The comments might be harsh sometimes, but there are always some good pointers in them.

Never stop tweaking
Tweak your icon forever. Any time you work on your app also review the logo. There is no such thing as perfect icon. Icon can always be better. So test it and tweak it always.

How do you approach icon design? Please leave your comments below. Thanks.

Tags: , , , , , , , , , , , , ,

Tools I’m using for work (UX guy)

October 12th, 2013 | No Comments | Posted in Software

I’m glad to announce I took a steady job nowadays. So, I’m working in a ‘not alone’ environment and doing less freelance work. Not alone, means I have to work together with many other creatives to achieve a common goal. My official title is UX Designer. This means I participate in software development from idea level to ready made product.

But, taking a steady job also means I got a  work computer and had to set it up from scratch. While doing this, I started thinking that each creative professional uses different software. Sometimes even same software differently. Maybe it would be useful if I’d share my humble list here.

I tried to make the list below something that would follow my work pipeline from idea level to completion.

https://www.draw.io/
Free, but part of google apps ecosystem, which is not free, so they’ll probably milk corporations somehow. I’ve used it for free until now anyhow.

A nice online tool for mind mapping and prototyping flows. It’s super useful before you move into real production or wireframes. You can use snapped and linked arrow thingies, plus you get bunch of styles to be more expressive in your mind maps. This web app has a bunch of template sets, but they seem to be rather thoughtful keeping all the design and eyecandy to a bare minimum. So basically you can use it as a pre wireframes tool.

It does wireframes as well, but I haven’t used it for that. I believe wireframes should be a little prettier than draw.io has to offer, but that’s way subjective.
It syncs and saves the diagrams to your google docs (Google Drive nowadays).

screenshot of draw.io

draw.io is a mindmapping/flowchart tool

drive.google.com
Free (and visible to the Sauron’s eye)
I share documents there and I can share the diagrams I made in draw.io. Also good for text documents, spreadsheets and more bureaucracy stuff.

Google Drive

Google Drive

iWork
Paid
The company I’m working for does word docs sometimes. I know Pages is not MS Word and saves weird formats and is a bit of a trouble to use, but at least it looks and behaves like I understand something should. File type stuff excluded. I’m not sure I can default to let it save to MS Office, so every save I’ll have two files and difficult to tell which one I should send to PC guys. iWork now is online too so they’ll be competing with google docs/drive. Probably will lose, but it sure is an interesting fight once again.
Anyways, iWork for more bureaucracy with a small exception – Keynote.

Keynote
Paid (Part of iWork suite/family)
Basically same as Powerpoint. It is an important tool for me. I find this tool to be great at making quick presentations and drawing couple of arrows occasionally. Usually my presentations are full of screenshots and one to three lines of text. Keynote has a nice set of standardised master slides/templates too. Nothing amazing, but not just plain white either. I think it’s good to show your beautiful stuff on a nice standardised canvas.

Keynote app screenshot

Powerpoint alternative from Apple

For other iWork suite stuff I use google drive whenever I can.

Adobe suite
Photoshop & Illustrator. These hand-in-hand. I guess I’m an old timer, but I prefer to design stuff with this combo. I build all graphical elements in Illustrator and then use them in Photoshop as smart objects. They’re still vector and still nicely editable this way. Icons, buttons, illustrations, you name it, comes into my designs editable all the way.
All photographic/raster stuff I fix/do purely in photoshop.
Also I find Layer Blending options tool to be invaluable. The expressive freedom and speed that it gives me above all other apps is significant.
I also save most of the relevant layer blends as styles so I can use them quickly later. For example two I use for different size texts are called 1px bottom stroke (drop shadow) and 2px bottom stroke (drop shadow). I also got many company specific in the Styles palette top right. Oh all palettes like this I switch to text only view. These small style avatars don’t really show anything for me as the differences are mostly very subtle (think 1px or 2px drop shadow etc.).
For text I also use Photoshop. I somehow find that either Ai(Illustrator) nor Id(InDesign) do a good deal for text. Photoshop handles text layers like I expect. I’m not saying Ps is the ultimate tool for text. Quite the opposite really. I’m just handicapped this way.
Flash. All animation with Flash. Sometimes interactive prototypes. I don’t like it for mobile development. Maybe games, but I find Appcelerator better for mobile development.

Adobe App Icons

Adobe Apps

Silkscreen
Paid (free app for iphone and paid app for desktop)
This is really valuable tool for me. It just shows screenshot .psd files fullscreen on my iPhone. It refreshes when you save psd. So it’s like a screen extension. I’m pretty much testing my screen and my phone side by side.
Simple, yet something I need as iOS is sometimes the target platform. I must look for something like this for Android too.

Screenshot of Silkscreen app on mac

Silkscreen quickly displays a psd for me on my iPhone/iPad

Coda
Paid
Really nice gui for css and html scripting. I’ve done javascript on it a little too, but haven’t got harder core yet. Some tell it’s also good for Ruby and php. Will have to look into it. It syncs my server and local folders in a really convenient way. And I can do server quick edits if I need to. Formats code nicely enough and well chosen fonts and designed UI focused for productivity, make it a really nice app.

Coda App screenshot

Coda is good for scripting web related stuff

TextMate
Paid
Quick to check text/html/xml and all other thinkable files that contain text/script. Really handy and fast to launch. And clean. Trying Sublime Text too right now, but not too sure which one is the king. Still leaning towards TextMate.

TextEdit app screenshot with xml file open

TextMate does quick edits to my script & markup files

Titanium Studio
Free
Eclipse based Appcelerator official GUI for creating cross platform mobile apps. I use it to code mobile apps. I don’t like Eclipse at all, but as it’s free and it’s officially supported GUI.

Titanium Studio screenshot

Titanium Studio, build on Eclipse

FDT
Free (has premium too, but I’ve got free)
This is a flash Actionscript coding tool. Again Eclipse based so it is not beautiful or anything, but I can say it’s Actinscript 3 coding on steroids. It just makes me so much faster. I’ve tried to code AS code in Flash itself and I’ve tried with Adobes Flash Builder but ended up with this tool. It does code completion really well. Referencing functions and jumping between key elements of the code is awesome too.

FDT screenshot

FDT is an Actionscript development tool

XCode
Free (for Apple developers)
I think the best looking and UX wise the best coding tool. Unfortunately it handles C based languages well only. Code completion is amazing. Javascript/Actionscript etc, it does not that good.
The GUI is so logical and beautiful I’m sad I don’t do C.  So I use it to test my build and change some relevant settings or sometimes add some libraries to my Appcelerator compiled projects. Also using XCode is the only way I know to submit apps to Appstore.

xCode app screenshot

xCode is a full tool for creating iOS apps.

Transmit
Paid
Ftp client. Can’t live without it. Can also do quick edits to most of documents so it’s a bit like online coding (though it just is syncing). Anyways. For mac this is the synonym of ftp.

Screenshots of Transmit app

Transmit is an FTP app

Teamviewer
Freemium(-ish)
Not so pretty but free and does the remote desktop magic. Taking over computer desktop with this app. Shows you picture of their desktop (no matter if mac or pc) and you can do anything you want. Tech support magic, but also for situations when I have to quickly do something in my home computer and I’m at work.

Evernote
Freemium
Note taking and syncing app. Really handy and has an app for each smart device that I use.

For email I use mac default mail client. Nothing special but groups email threads nicely enough.
Skype. Telephony, screen sharing.

Chrome mostly for browsing the web. Sometimes I launch Safari, my second browser. While Chrome is signed in everywhere, Safari is not. So I can see both perspectives if needed.
iTunes for music. Calendar for meetings and that’s pretty much it.

That’s it. There is probably more stuff, but this list represents apps I installed during the first week with new work computer so I might return to this subject end of next week.

Please make a quick list and share your tools below in comments. Thanks.

Tags: , , , , , , , , , , , , , , , , , , , , , ,

OddSpotter 1.0.4

February 17th, 2013 | No Comments | Posted in apps, iPad, iPhone, Marketing, OddSpotter, Titanium

It’s a huge update. It’s totally recoded from ground up. It’s new UI. An universal build. With three new artists. This version will make the previous versions obsolete. Strange I named the version only as a 0.0.1 upgrade, when it would deserve a +1. Well that’s how we learn. Next time I’ll try to keep an eye on version numbers. It just happened.
Anyways. I planned to do this for long time now. I knew the initial version was a mess. Also I know that having a good product is like having a great movie script or a novel – it needs to be rewritten constantly. So it was a bout time. 10 months after initial release it’s done now and I’m working on marketing. Bought a domain. Reading a lot of app marketing books. Shooting an app promotional video. Getting ready for the launch.
During this 10 month period I actually tried to get support from local business support authority. This institution shares EU money to startups. I failed miserably. These people don’t want to gamble like this. They are conservative people, even if they’re playing with someone elses’ money. This effort actually took a lot of time. Much more than it should have taken. All the paperwork and project description and the business plan. Painful things when I really should have just done it. There is nobody out there handing you easy money.
But for the game itself…
This time I have a really good feeling about this. This version turned out quite well. Code is clean and logical. The data structure and relational data should be a bit better systemized, but it’s not too bad.
There are a lot of improvements/features to build, but all in all it’s a great game now. Let’s see how it’ll go against the true market. I’ll try to keep you posted.
Right now I’m tweaking home site.

Tags: , , , , , , , , ,

New levels for OddSpotter

November 6th, 2012 | No Comments | Posted in Apple, apps, iPad, OddSpotter, Titanium

I see some of the people are searching for new levels for OddSpotter. This post is to let you know that I’m working on it. The first version also has a lot of bugs so I’m planning to get a better working version up too. The current version does not work too well on iPad 3.
I know it has been long but I have not forgot about all of you who are enjoying art as much as I do.

For more up to date information like OddSpotter on Facebook.

OddSpotter is a mobile art appreciation game available for free via AppStore.

 

Appcelerator cloud service certificate

June 6th, 2012 | No Comments | Posted in Uncategorized

I see that a lot of people end up to my blog by troubleshooting Appcelerator cloud service. I have written about this in this post: Push Notification tutorial with Appcelerator Cloud

But to say it shortly again. You cannot upload .cer file but you will have to make .p12 certificate. You can do this using Keychain Access on your mac.

You will have to right click on the certificate and choose export… from the menu.

Tags: , , , , , , , , , ,

OddSpotter development

May 20th, 2012 | No Comments | Posted in Apple, apps, iPad, iPhone, Titanium

In this post I would like to share details with you how my first mobile game OddSpotter came about. OddSpotter for iPad is live on AppStore now and you can download it for free here.

I’ve been developing commercial apps for iOS mostly for a while now. Mostly for large companies and some for startups. Most of the apps are to support the existing business models of a company and couple (like Alcometer and Airtumble) are a technical innovations themselves.

But, lately I’ve felt a bit dry developing for commecial clients and I need a personal project of my own.

I’ve always been fascinated by games and I play quite a lot myself. So on a weekend on March 2012 I started  to develop my first mobile game OddSpotter.

It’s ‘spot the difference’ type of game, where player will see two images side by side and they will have to spot the differences between those two.

There are three reasons why I chose this game to be my first birdie.
1. The concept itself comes from my friend Strange (strange name right) who I had a pleasure to study together with in Odense Denmark. Strange visited Shanghai, china and said people loved a game called ‘find the difference’. He said people were paying money in China to play this game.
2. I’m a hobby photographer so I have no problems with content for such a game.
3. This kind of game is relatively easy to build (especially coming from commercial apps background). So I take it as a study into in-app-purchases and game center etc. Before I move on to my next game idea.

I started with a little market research. There was some apps like this in AppStore, so I could evaluate the overall quality that is needed. I found out that to succeed I needed to have two important features: pinch&zoom for gameplay and free app with in-app-purchases as a pricing model. First would make my game to stand out among others, and other would give me a chance spread the game and to maybe earn something.

This is the first view after the splash screen

Convinced that it is worth it, the next thing in the list was to start developing. I started from the core functionality as a proof of concept. Took a photo and built the hotspots, and worked on pinch&zoom functionality. There were bugs in the gameplay, but as soon as I saw I can do it well and it is playable, I continued with everything around the game.

I was surprised that the game core is actually not the part of the game that takes the most amount of work. It’s rather everything around it. The worlds, the leveling system and their UI’s, score keeping, timing etc. Once I nailed the UI for the levels and made it functional I started to build content. That meant a lot of photo editing. I took all the photos from my showcase http://sandbox.teemusk.com/nightshots2 and used clone stamp tool in Photoshop to make them different.

Then I built a custom Adobe Air app where I could mark out the difference spots on each of these photos, and which would turn the spots to data readable by OddSpotter. Once I had my database files filled with data about the photos and their Odd Spots I included them into the app.

Note that at this point I had no clear idea how would the selling be done. Should I sell a pro version of the app? Maybe sell levels or worlds as in-app-purchases.

Anyways, although the UI was not polished I decided to show the game to a friend during lunch break. He liked it, but found it too difficult (I guess the stamp tool radius was too small making odd spots rather small too). So he was asking for hints all of the time from me. “Around where is the next spot?”, was something that I heard a lot. I ended up zooming the view to a place where an odd spot was and he was trying to find it. This worked. So he gave me a superb idea. I will sell hints via in-app-purchases. Game will come with 5 hints and when you spend them all you can buy more for real money. All levels will be free. Genial. Perfect.

Next thing I built the hints functionality and started testing in-app-purchases. The latter was a nightmare. I pulled my hair out for two days wondering what am I doing wrong, only to find out Apple’s sandbox server for in-app-purchases was down. I can honestly say that was the most difficult and stressful part of the whole development.

I waited for another two days until apple IAP sandbox came up again and was all set.

At this point I had a ready built app with my own photos as content. I was ready for more testing on real people. I took my iPad with me everywhere and let people play the game telling them the story behind it and asking questions about the gameplay. Most of the people were my friends and ofcourse they said they like the game, but also gave me a lot of insights what should be done better. As the first friend it was obvious that the levels should be easier than they were.

Also, though nobody really told me, I realized that people don’t really want to look at photography that much. The photos were all night shots and looked too much the same. Then my girlfriend came up with an awesome idea to use paintings as content and not photos. Everybody loves art. After googling around for legal stuff and good data sources I found out that I can use Public Domain art as content for free. That was settled then. I dumped all the photos as a content (lots of time wasted there) and started again with paintings.

Lots of photoshopping followed, but after couple of days I managed to make the app fully functional again with paintings as content. And I must say this really worked. It’s so much more fun and educational to look for art from famous painters and find odd spots on the artwork.

But. My struggles did not end there. I had one major problem, app ksize. The app with all the levels/paintings inside would weigh more than 40 mb. That’s way too much. A good app won’t have more than 20mb as initial download. If an app is more than 20 mb then AppStore won’t let users download the app on a 3G connection, but wifi has to be used. That means many potential clients would be turned away after “INSTALL” click.

So I had a plan. I added first 20 levels into initial app download and developed a whole new system so I can dynamically add more levels over time. The system goes shortly as follows. App will check for updates after being 10seconds active, if an update is found it will download new levels as a zip package. After download it will unpack the zip and add them to level selection notifying the user about new levels.

That was also quite a lot of work, but I pulled it off over a long weekend.

Promo screenshot which shows tutorial and gameplay basics

After giving the game final touches (like tutorials for first level of the first world), I was ready for submission.

Conclusion.
I learned quite a lot from developing the game, but the main points I should remember are as follows:

  • It is much more work than you think it’ll be.
  • It’ll take longer than you think it’ll take.
  • The game engine is a little percentage of the overall work. A lot of work is around the engine itself.
  • Test the game on real people as early as possible and modify it if necessary.
  • Try to get to acceptable build asap and submit it. You can make updates later
  • Try to think about marketing as early in the game as possible.
  • You can figure out/modify the monetizing ideas later.

OddSpotter for iPad was released 1st of May 2012.

I might write about initial sales and marketing efforts soon if there’s enough interest.

 

 

 

 

 

 

 

Tags: , , , , , , ,

Building Server Push Notifications with Appcelerator Titanium Cloud

May 5th, 2012 | 52 Comments | Posted in Apple, apps, Titanium

Appcelerator has blessed us developers with cloud services since release of Titanium 2. Even free registered users get 1 million server push messages a month free. Server push notification means that you can send users push notifications even when the app is not running on the device.
Cloud also gives lots of nice stuff for developers which eases the pain and the need of a custom back-end for your mobile app.

Although Appcelerator allows server push, many developers find it difficult to set it up. One of them being myself a couple of days ago, therefore I thought I’d give back to the community and wrote a little tutorial showing hot to make Server Push Notifications work for your app. I will concentrate mostly on certificate management, which is the most painful part of setting up Push Notifications on Apple devices.

 

1. Start a new Titanium project in Titanium studio. For this example we’ll call it PushTest and give an app ID com.teemusk.pushtest

Project setup in Titanium Studio

Project Setup. Make sure Cloud-enable this application is checked. Alternatively you can enable Cloud services on tiapp.xml editor.

Add a simple code to your app.js to open a window and run your app on simulator once so it’ll get registered and enabled on Titanium. The code for app.js looks like this right now:

var win = Titanium.UI.createWindow({
title:'TestPush iOS App',
backgroundColor:'#fff'
});
win.open();

1.3. Run your app on simulator once to see if it is ok. There should be nothing on the screen. Just white background.

2. Set up the cloud services and Certificates

2.1. Go to https://my.appcelerator.com/apps and find PushTest app from the list (you must be logged in to see that).
Your newly created app on Appcelerator

As you can see you have Cloud services already enabled for this app. That’s great.
2.2. Click Manage and check the settings for this app
2.3. Click Settings on top tabs. As you can see Apple iOS push certificates is empty. You will have to obtain a certificate from Apple iOS Provisioning Portal (you have to be an Apple developer to do this).
2.4. go to iOS Provisioning Portal through developer.apple.com and to Provisioning portal after logging in on Member area.
2.5. Create new App ID by choosing App IDs from left and then clicking ‘New App’ on top right corner.
2.6. Add PushTest as an app name and com.<yourdomain>.pushtest as an app id. Then click Done.
2.7. Now as you can see from the list your app is not quite set up for push notifications. You will have to configure it.
Push notifications not configured on Provisioning Portal

2.8. click Configure next to your app and Enable Apple Push Notifications on the following screen.

2.9. Next part is a bit tricky as you’ll have to work through some different things to do this, but basically you will have to get a certificate for your app to get Push Notifications working. Click Configure button next to ‘Development Push SSL Certificate’. The page that opens up is self explanatory. But in case you don’t want to read all this stuff then shortly it’ll go as follows:
2.10. Open up Keychain Access software on your mac. Choose ‘Keychain Access > Certificate Assistant > Request a Certificate From a Certificate Authority…’ from top menu.
Obtain a Certificate

This will open up a dialog where just click ‘Save to Disk’ and ‘OK’ and then save the incoming certificate to your Desktop. Click ‘Save’ and ‘Done’.
2.11. You have a certificate on your desktop. It’s filename is ‘CertificateSigningRequest.certSigningRequest’.
2.12 Go back to Provisioning Portal and upload this file back to Apple. click ‘continue’, ‘choose file’, choose the certificate you just saved on desktop and click ‘Generate’. This will take a couple of seconds, but after it’s done click next and download the certification with your name called ‘aps_development.cer’.

2.13. Double click on the downloaded .cer file and it’ll be added to Keychain Access.
2.14. Select the certificate in Keychain Access with the name com.<yourdomain>.pushtest and right click (or command click) on it to open popup menu. Choose Export “Apple Development iOS Push Services” from this menu and save this file with extension .p12 on your disk. You will be asked for a password. Remember what you put in there. This is the final certificate you will have to upload to Appcelerator my apps.

2.15. Now, go back to Appcelerator my app settings for PushTest app and browse and upload the newly created .p12 certificate. Also add the password you chose in 1.16. in the box next to it.

Great, you’re done with the painful part of the tutorial. Now it’s good old titanium scripting again.

3. Code the app
I consider this tutorial not to be a scripting tutorial. Therefore I will just paste my app.js code below. I tried to comment my code so you can see what each function does. This code works on your phone. To run it on your phone you will have get a provisioning profile from Apple Provisioning Portal. I also uploaded an app.js for you to download and investigate.
The results of this code will add 4 buttons on the stage. When running the app on your phone the first time start pressing the buttons from top and after each tap wait for success alert dialog. Once you reached the end you’re all set.
var Cloud = require('ti.cloud');var trace = Ti.API.info;
var user_device_token = Ti.App.Properties.getString("device_token",null)var win = Titanium.UI.createWindow({
title:'TestPush iOS App',
backgroundColor:'#fff'
});
win.open();function init(){
buildUI();
}
setTimeout(init,500);function buildUI(){
var register_local_push = Ti.UI.createButton({
width:200,
height:30,
top:30,
title:"REGISTER LOCAL PUSH"
});
win.add(register_local_push);
register_local_push.addEventListener('click',getDeviceToken);var register_user_btn = Ti.UI.createButton({
width:200,
height:30,
top:70,
title:"REGISTER USER"
});
win.add(register_user_btn);
register_user_btn.addEventListener('click',registerUser);var login_btn = Ti.UI.createButton({
width:200,
height:30,
top:110,
title:"LOGIN"
});
win.add(login_btn);
login_btn.addEventListener('click',login);var register_server_push_btn = Ti.UI.createButton({
width:200,
height:30,
top:150,
title:"REGISTER SERVER PUSH"
});
win.add(register_server_push_btn);
register_server_push_btn.addEventListener('click',subscribeToServerPush);
}//REGISTER USER ON CLOUD
function registerUser(){
trace("REGISTER");
Cloud.Users.create({
username: "new_username",
password: "new_password",
password_confirmation: "new_password",
first_name: "Firstname",
last_name: "Lastname"
}, function (e) {
if (e.success) {
alert("USER CREATED SUCCESSFULLY.");
// user created successfully
} else {
// oops, something went wrong
alert("USER not created. something went wrong "+e);
}
});
}//LOGIN TO CLOUD AS A USER THAT WE CREATED BEFORE
function login(){
Cloud.Users.login({
login: 'new_username',
password: 'new_password'
}, function (e) {
if (e.success) {
var user = e.users[0];
alert('Success:\\n' +
'id: ' + user.id + '\\n' +
'first name: ' + user.first_name + '\\n' +
'last name: ' + user.last_name);
} else {
alert('Error:\\n' +
((e.error && e.message) || JSON.stringify(e)));
}
});
}//REGISTER LOCAL PUSH NOTIFICATION HERE
function getDeviceToken(){
trace("REGISTERING LOCAL PUSH");
Titanium.Network.registerForPushNotifications({
types: [
Titanium.Network.NOTIFICATION_TYPE_BADGE,
Titanium.Network.NOTIFICATION_TYPE_ALERT,
Titanium.Network.NOTIFICATION_TYPE_SOUND
],
success:function(e)
{
user_device_token = e.deviceToken;
Ti.App.Properties.setString("device_token",user_device_token);
alert("Device token received "+user_device_token);
},
error:function(e)
{
alert("Error during registration: "+e.error);
},
callback:function(e)
{
// called when a push notification is received.
alert("Received a push notification\n\nPayload:\n\n"+JSON.stringify(e.data));
}});

}
//REGISTER SERVER PUSH
function subscribeToServerPush(){
Cloud.PushNotifications.subscribe({
channel: 'friend_request',
type:'ios',
device_token: user_device_token
}, function (e) {
if (e.success) {
alert('Success'+((e.error && e.message) || JSON.stringify(e)));
} else {
alert('Error:\\n' + ((e.error && e.message) || JSON.stringify(e)));
}
});
}

 The code above is also uploaded as a file. You can download it here

4. Send your first Server Push notification
After running the app.js code on your iPhone start to tap the buttons from top to bottom. After each tap wait for the alert message with success message.
The app looks like this:

When you’re done with this sequence you’ll ready to send your first push.
Go to Appcelerator my apps section. Choose ‘notifications’ from the tab on top and check that you have a device registered with server push. My window looks like this:

Close the app on your phone (close it totally from bottom). Fill in the fields and push send notification. Now wait a bit to receive the push on your phone.

 

That’s it. I hope you get it working and find that it’s actually quite simple once you get it to work the first time. Also I hope this tutorial saves your time a bit.

Thanks for reading.

Tanel Teemusk
teemusk.com 

 

 

 

EDIT:

An extra checklist for debugging.
1. You cannot use wildcard development certificate for trying this. be sure to use com.yourdomain.yourapp or similar and not com.yourdomain.* or anything that involves asterisk. Otherwise push won’t work. (Thanks to TaMaX for pointing this out)
2. After your app goes live to AppStore be sure to upload another p12 certificate to Appcelerator using iOS Production Push certificate from Keychain Assistant. Development Push certificate won’t work after going live. (Thanks for DevMan for pointing this out)

Tags: , , , , , , , ,

MovieClip Exploder class

January 18th, 2012 | 2 Comments | Posted in Adobe Air, adobe flash, flash

I built a logo particle explosion class for a client. Unfortunately they decided not to take this route. It came out rather cool so I thought I’d share this with all of you. You can download the source code and use it anywhere you like. It would be cool if you would tell me where you used it tho.

Download MovieClipExploder source code

Usage:

1. Download the zip file
2. Copy the ‘com’ folder in there to your project directory
3. Make a ‘particle’ sprite/MovieCilp in your .fla file and  choose ‘Export for Actionscript’ when you make it as a MovieClip. Type: ‘particle’ in the ‘Class’ field. (you can use custom shapes if you want to).

Settings for Particle movie clip in flash

3. Particle creation Settings

4. Make the shape inside the particle movie clip as another movie clip and call it “gr”. No actionscript export necessary here. But you can now add effects to this asset. I added a little blur in the example.
5. Make sure your logo has an instance name and it’s on the stage. Then add the code:

import com.teemusk.ExplodeMovieClip;
var logoexploder:ExplodeMovieClip = new ExplodeMovieClip(logo);
addChild(logoexploder);
logoexploder.startEmitter();

6. Publish your movie and watch those particles fly.

That’s it. Enjoy!

Tags: , , , , , , , , , , , , , , , , ,

Passing variables to a function

January 11th, 2012 | No Comments | Posted in adobe flash, flash, Objective-C

My lingo is so Actionscript, but that is changing slowly. Variables are methods, and we’re actually passing properties in Objective-C. But ok. Yesterday I wrote about declaring and calling functions/methods in Objective-C. Now I’ll try to explain how to declare functions that accept variables and how to pass variables to them. Also I cover briefly how to get ‘trace’ statements in Objective C.

So let’s cut to the chase.

Trace Statements

Actionscript:

var string:String = "I AM STRING";
trace("I am getting traced in the console ");
trace("I am a variable: "+string);

Objective-C

NSString *string = @"I AM STRING";
NSLog(@"I am getting traced in the console");
NSLog(@"I am a variable %@",string);

Now note how variables work in NSLog statements. characters starting with % sign will get substituted by comma separated variables. Also all string defined have to have “@” in front of them.
They’re a bit to get used to. I will pass a cheatsheet of different variables

Actionscript

private function myFunction(foo:String){
trace("I got the variable "+foo);
}

 Passing a variable to a function

Passing a var to a function in Actionscript:

private firstFunction():void{
var str:String = "This is passed data";
anotherFunction(str);
}
private anotherFunction(s:String):void{
trace(s); //Output: This is passed data
}

Passing a variable to a function with Objective-C:


//First add this line to your header (.h) file;
- (void)anotherFunction:(NSString *)s;

//then in Class file (.m) you can call this function like so:
-(void)firstFunction{
NSString *str = @"This is passed data";
[self anotherFunction:str];
}
- (void)anotherFunction:(NSString *)s{
NSLog(@"%@",s); //Output This is passed data
}

Make sure ‘firstFunction’ is called. Try to use AppDelegate’s initWithOptions as your firstFunction.

Objective C NSLog cheatsheet:

%@     Object
%d, %i signed int
%u     unsigned int
%f     float/double
%x, %X hexadecimal int
%o     octal int
%zu    size_t
%p     pointer
%e     float/double (in scientific notation)
%g     float/double (as %f or %e, depending on value)
%s     C string (bytes)
%S     C string (unichar)
%.*s   Pascal string (requires two arguments, pass pstr[0] as the first, pstr+1 as the second)

%c     character
%C     unichar

%lld   long long
%llu   unsigned long long
%Lf    long double

Tags: , , , , ,

Objective-C Here I come

January 10th, 2012 | No Comments | Posted in adobe flash, Apple, flash, Objective-C

Okay. I’ve been learning Objective-C on and off for quite a while now. I’ve been doing it mostly using The Big Nerd Ranch books.

I can tell you it has not been easy. While all tutorials in these books are quite straightforward and work out just great when you follow a book, they still haven’t helped me to get my head around this language. I get the syntax, I get how the structure should work, but some of the concepts are so different coming from ECMA script language background such as Actionscript or Javascript. Painful.

Also I have googled around a lot. While there are some blogs that describe a bit about migrating from ECMA script to C based language, they haven’t helped me out too much.

Therefore I will try to add my 5 cents to the blogosphere about this subject. (And don’t judge me if I’m wrong in my theories presented here. I’m just a n00b.).

Declaring and calling a function

This is probably the first thing you want to do. In Actionscript 3 I would do this:

Defining a function:

private myFunction():void{
//Do something;
}

To call this function from another function I would just:

private anotherFunction():void{
myFunction();
}

In Objective C it’s not as straightforward. Defining a function like this won’t allow to call it from another function.

Defining a function:

First add the function description to an interface (yeah that’s the myClass.h file. Objective C calls them Headers).

- (void)myFunction;

Then in the class itself (myClass.m file) define this function completely:

-(void)myFunction{
//Do something
}

And then you can call it from another function:

-(void)anotherFunction{
[self myFunction];
}

 

I hope you get the idea how it works. I will try to add more examples soon.

Tags: , , , , , , ,
  • Ads