Category: Mobile Development


Cookie-Twitter Mobile App

Cookie-Twitter Mobile App

A little while ago I posted that I was experimenting with Appcelerator. I had combined 2 different tutorials that I had found to create a fortune cookie app that opens to randomly reveal 1 of a bunch of tweets. While I don’t claim to be an expert I am posting the source with my comments only because it was requested. Usually I would prefer to have a bit more experience before making a tutorial.

I also regret that I will not show you how to setup Appcelerator to successfully output for iPhone and Android. The process is well documented in other places and to be honest the hoops you have to jump through to do stuff with Apple gives me a headache :P

The code is relatively simple. The toughest part is getting your mind around the way that the JS framework for Appcelerator works. The order that tasks are carried out in etc. While this project could be done out without the constructor functions grouping the code, it is a lot tidier this way and more flexible when you have multiple windows and you want to refresh. The only way to refresh a window in Appcelerator is to run the code again on a “FOCUS” event.

So here it is, I hope it is helpful.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
//Detecting if this is an iPhone as it will change the way we do random numbers
var HAS_BAD_RAND = Ti.Platform.osname.match(/iphone/);
 
//Creating the native Window UI element in which to put our graphics and text
var win = Ti.UI.createWindow({ backgroundColor: '#ffffff' });
 
//Opening a link to Twitter and storing the results in a Network Object called loader
var loader = Titanium.Network.createHTTPClient();
loader.open("GET","http://api.twitter.com/1/statuses/user_timeline.json?screen_name=aziraphael&count=10");
 
//Creating the variables we will be using including all graphic holders and the array
var fortunes = [];
var closed_cookie, opened_cookie, opened_cookie_image, paper, new_cookie_button;
 
//The function that is called once the tweets are loaded
loader.onload = function() 
{
    //Feed the tweets into our array
    var tweets = eval('('+this.responseText+')');
    for (var i = 0; i < tweets.length; i++)
    {
        var tweet = tweets[i].text;
        fortunes.push(tweet);
    }
 
    //Run our constructor functions
    createElements();
    assignBehaviors();
    arrangeElements();
    win.open(); //Opening the window practically opens the app
};
 
//Our constructor functions are arranged for tidyness
function createElements()
{
    //Our closed cookie image view (an apple term for the image container)
    closed_cookie = Ti.UI.createImageView({
        image: 'closed_cookie.png',
        width: 'auto',
        height: 'auto'
    });
 
    //An empty view to store the open image and text
    opened_cookie = Ti.UI.createView({
        width: 300,
        height: 234,
        visible: false
    });
 
    //The actual opened cookie image
    opened_cookie_image = Ti.UI.createImageView({
        image: 'opened_cookie2.png',
        width: 'auto',
        height: 'auto'
    });
 
    //The text box in which the tweets are written
    paper = Ti.UI.createLabel({
        color: '#000000',
        font: {fontSize: 12, fontFamily: 'Courier'},
        width: 150,
        height: 'auto',
        top: 25,
        left: 40,
        opacity: 0,
        textAlign: 'left'
    });
 
    //A native iPhone or Android button
    new_cookie_button = Ti.UI.createButton({
        title: 'New Fortune Cookie',
        width: 200,
        height: 50,
        bottom: 25,
        visible: false
    });
}
 
//Setting up the event listeners
function assignBehaviors()
{
    //If the cookie is clicked on
    closed_cookie.addEventListener('click', openCookie);
 
    //If the "new cookie" button is clicked on
    new_cookie_button.addEventListener('click', newCookie);
 
    //If the phone is shaken (same result as "new cookie")
    Ti.Gesture.addEventListener('shake', toggleCookie);
}
 
//Toggle between open and closing cookie
function toggleCookie( ev )
{
    opened_cookie.visible ? newCookie() : openCookie();
}
 
//Set up a new cookie
function newCookie( ev )
{
    paper.opacity = 0;
    opened_cookie.hide();
    new_cookie_button.hide();
    closed_cookie.show();
}
 
//Opening the cookie
function openCookie( ev )
{
    closed_cookie.hide();
    paper.text = getFortune();
    opened_cookie.show();
    paper.animate({opacity:1, duration:500}); //Fade tween of paper
    new_cookie_button.show();
}
 
function getFortune()
{
    //Get a fortune using custom random function
    var rand = random( 0, fortunes.length - 1 );
    return fortunes[ rand ];
}
 
//Custom random function
function random( min, max )
{
    //Because of a bug in iPhone random numbers, the number
    //is determined using the time as a random seed-
    min = min || 0;
    max = max || 1;
    if (HAS_BAD_RAND){ max += 1; }
 
    var secs = (new Date()).getTime();
    var rand = min + Math.round( Math.random( secs ) * (max - min) );
 
    return HAS_BAD_RAND ? ( secs % max ) : rand;
}
 
//Adding all the visual elements to the window in the right order
function arrangeElements()
{
    opened_cookie.add( opened_cookie_image );
    opened_cookie.add( paper );
 
    win.add( closed_cookie );
    win.add( opened_cookie );
    win.add( new_cookie_button );
}
 
//Initiating the whole process by sending the loader request
loader.send();

Using Appcelerator to code cross platform mobile apps

Cookie-Twitter Mobile App

Cookie-Twitter Mobile App

Appcelerator offers a JavaScript framework to interface with the native Xcode and the Android SDK. It gives access to native UI elements of both devices which allows for much quicker development times and a more familiar experience for users. This sets it apart from other solutions like PhoneGap and Corona (which each have their own strengths and weaknesses).

As I am still learning to use Appcelerator and don’t intend to do a tutorial until I can really understand it a bit better (and can offer something original). I would like to share however, a combination of two tutorials that I made and like well enough. Both tutorials are from MobileTuts+, a great resource for learning to code mobile applications and content. The first tutorial deals with making a fortune cookie app that is completely cross platform compatible between android and iPhone. The second tutorial that I used is all about feeding twitter data into mobile apps. All I did is combine the two to randomly search my twitter feed to collect and store a bunch of tweets. The fortune cookie then randomly selects a tweet to display when you shake the app (breaking the cookie). Like I said, I will make a proper tutorial when I feel more comfortable with the code and can explain it better.

Powered by WordPress. Theme: Motion by 85ideas.