Appcelerator Developer Blog

Featured Developer – Roman and Cristian Castillo

Castillo BrothersIn today’s “Featured Developer” post we’ll be talking with brothers Roman and Cristian Castillo, the brains behind the poplar ‘instaDM‘ app and the their latest creation called ‘Like it!‘. Learn more about their inspiring story and how they developed a Titanium app between the two of them that went viral and got over 2M downloads. They also discuss their lastest app and their thoughts on Titanium below.

Interview with Roman and Cristian Castillo

Tell us a little about yourself

My brother and I have been working with online platforms for over 10 years. Web was our first experience as software developers, but over the years we’ve had to make the transition to mobile web and now to the app ecosystem.

Last year we developed our first iOS app, ‘instaDM‘ which allowed Instagramers to send private messages to each other. This application got over 2M downloads and, more importantly, allowed us to drop all the client work to devote our full attention to app development. It’s safe to say that we’re indie app developers now, coming from agency work in the past, and some failed startups in between.

With ‘instaDM’, we basically had a web app before the iOS app. It was alive for a year before we revamped the 4 day hack that originally was launched. When we did a remake, the icon turned out to be cool enough for people to post it on Instagram — then it just went viral! You can see the history here and here.

We started based in Mexico City, but right now Roman is based in Monterrey, while I spend time living here and there: Mexico City, Seattle, Sausalito and soon San Francisco. Most of our spare time is spent with family (in Roman’s case) or girlfriend (in my case). Being independent app developers allow us to tightly integrate work and fun.

So tell us a little bit about your latest app ‘Like it!’

Like It Like it! exists because browsing Instagram on the iPad is a complete nightmare, therefore we’ve set to create a beautiful tablet experience.

With this in mind, we decided that just making an Instagram client would have been stupid because that is Instagram’s job. Instead, we decided to focus on the content, allowing photos to live beyond the timeline.

‘Like it!’ allows you to discover, track and collect the best content on Instagram. You can follow streams of related photos or create your own Instagram album. This is important because great photos are timeless and should be freed from the chronologic feed.

What is a unique feature of your app?

‘Like it!’ is the best way to experience Instagram on the iPad. The challenge is to create a product that will stand the test of time, and that will allow us to keep adding to it, as opposed to a one shot type of app.

Like It screenshot

Why did you choose Titanium for your mobile development?

We did our first app, ‘instaDM,’ with Titanium because we didn’t have any previous iOS experience. After millions of downloads and seeing the framework improve every month, we realised that we didn’t need to go further, at least on the first iterations of our apps. As web developers, Appcelerator has been key for us to get into the app world.

The documentation is amazing — both the tutorial and API. That’s really important while dealing with something you’ve never heard of before and probably the reason we never got to develop with Objective-C

What were some of the highlights of Titanium development for you?

I love the new Alloy framework as it makes it very easy to keep the code in check. The first time I used Appcelerator, the whole app was just one .js file. Then, as I started to understand the framework, I started separating files and even created my own framework to switch views and optimise memory usage. When Alloy launched, I went to a lot of trouble to understand how memory works and how Appcelerator makes use of resources. I realised that the implementation was both optimised and easy to use. Using alloy allowed me to keep adding more and more blocks to the application without worrying too much about performance. This is pretty sweet.

How long did it take to design, implement, and test?

A bit over three months.

What resources did you use to learn and develop with Titanium?

For our first app we went trough the tutorial. We went from nada to App Store in 21 days. It was simply awesome. With this code, we got over 500,000 downloads on our first month.

Do you have plans for updates to ‘Like it!’ or future Titanium apps? Care to share some details?

Yes, but we need to keep them up our sleeve =)

What advice do you have for companies that want to delight their users with mobile?

Build something that you find useful, and delights YOU. If it doesn’t, then keep improving. Don’t settle for less because your customers won’t!

What is it about the mobile development community that makes them powerful agents for change?

I think it’s about the distribution and presence. The fact that you can code something that in over a day could be in the hand of millions of people and stay with them everywhere they go.

Big thanks to Roman and Cristian Castillo for taking the time to give us some insight into their experience and success with Titanium app development. And best of luck with ‘Like it!’.

Do you think that you and your Titanium app should be highlighted on the Appcelerator Developer Blog? Send us an email at community@appcelerator.com and we’ll see if you have what it takes to join the ranks of our other featured developers. We hope to hear from you soon!

Cristian and Roman’s Links


Quick Tip: Increase the storage size of your Android Emulator

Are you tired of getting this error?

This happens when you’re testing your App on your Android Emulator. After a couple runs, the virtual device runs out of space, and you have to start deleting apps…pretty annoying.

Well, it’s easy to fix. It’s just a matter or increasing the storage size of your virtual device. First off, you need to know the name of the virtual device you are using. Assuming you’re running on OSX, Go to your terminal and type:

$ [[path-to-android-sdk]]/tools/android avd

This will show you a window with all the AVDs (Android Virtual Devices) you have configured. Find the one you’re using and write down its name.

Next, go back to your terminal and type

$ open -a TextEdit ~/.android/avd/[[name of your avd]].avd/config.ini

This opens TextEdit with the AVD’s configuration file. Now look for and change or add this line

data.dataPartition.size=512m

And that’s it. You’re set!


Appcelerator Platform Pricing Updates

I am personally committed to openness and transparency regarding our pricing and licensing. When I announced the new Appcelerator Platform last week, I mentioned that I was going to follow-up to provide you with details about the changes that we are making to our Plans & Pricing. As I’ve said before, we care deeply about providing you with outstanding value and high quality products at competitive prices. This has been our commitment from the day Nolan and I started this company. One of our core company values is to “Enable Customer Success,” and we are honored each and every day to empower you to deliver transformative mobile experiences to the world.

For our free “Explore” package, we significantly boosted the monthly allotments of Cloud Services and Analytics recently in order to give the majority of our developers a free “all-you-can-eat” offering for their mobile apps. We created this strategy to better serve the needs of our community, and the feedback we received was extremely positive. Recently, we also posted answers to some of the more common billing and usage questions.

With regards to the Appcelerator Platform, we’re focused on the specific needs of mobile enterprises. As you are well aware, mobile is exploding and disrupting everything. We have seen increasing demands from Mobile First enterprises for specific requirements across the entire mobile application lifecycle as they scale from 10s to 100s of apps (and beyond). The Appcelerator Platform provides a commercial solution for the entire mobile lifecycle, with commercial support, SLAs and technical training. This offering includes Appcelerator Studio, Appcelerator Alloy, Appcelerator Cloud, Appcelerator Test, Appcelerator Analytics, and Appcelerator Performance Management – all under a single, newly branded SaaS offering called the Appcelerator Platform. This solution serves the specific needs of enterprises that require a comprehensive platform for the entire mobile lifecycle – from ideation and design-driven development, to continuous delivery, to experience-driven analytics. We’ll also offer enterprise-class flexibility in the delivery of the solution both as a public cloud and virtual private cloud along with varying levels of guaranteed availability (SLAs).

The Appcelerator Platform is powered by Titanium. In other words, we can’t have the Appcelerator Platform without a strong, successful Titanium product and community behind it. We will continue to invest in it, and there will always be a free / open source version of Titanium. This truth is very important to me, so I would appreciate it if you would take the time to read my blog post from last week where I wrote in detail about our commitment to open source.

Appcelerator Platform Pricing

The pricing model we are using with the Appcelerator Platform is designed to be simple, scalable, and value-driven.

  • We’ve created a new pricing model that includes unlimited mobile applications. In short, our new pricing model is no longer licensed by number of applications.
    • Platform customers can build, deploy and manage as many apps as they like, whether they are transient or long-term; B2B, B2C or B2E apps.
    • The primary attributes are the number of platform users and the number of unique test devices.
      • A user is any named user with a username and password who accesses the platform – including designers, developers, testers, release managers, project managers, DevOps personnel, managers, executives and Line of Business owners.
      • The test device license typically represents the different kinds of mobile devices and OSs being tested.
      • Note that end users of the deployed mobile apps are NOT considered users in this case.
      • The starting price for the platform is $999 per named user/month, and includes:
        • The base foundation of the platform,
        • Up to 10 million push notifications and API calls per month,
        • 100GB of storage per month,
        • 5 test devices, as well as
        • Annual subscription with a minimum of 5 users.
        • The price of the platform scales linearly from there at $250/user/month for each additional user or test device.

What Happens to the Standard, Enhanced and Premium Packages?

With this new platform and pricing model, we’re now also retiring the three packages known as “Standard”, “Enhanced” and “Premium” all of which were licensed by application. If you are one of the commercial customers already on one of these packages, we’ll continue to honor your existing subscription until the end of your term. At that point, our corporate sales team will work with you on an upgrade path to the Appcelerator platform.

To be clear, the free “Explore” package with the above-mentioned usage-level increases and existing licensing terms will remain unchanged to allow the continued use and adoption by our developers who are the engine that fuel the mobile revolution.

As mentioned in the ACS billing and usage questions, we’ll also provide an upgrade path to the Appcelerator Platform should you outgrow the Explore package.

Thank You!

2013 promises to be another landmark year for all of us – our developers, customers, partners and Appcelerator. We’re excited about the opportunity ahead, and are looking forward to doing some really big things together! Thank you again and let us know your feedback in the comments below. For pricing questions, please contact us here.


Titanium SDK/Studio 3.1.0 Beta Now Available

We’re very excited about our newest release of Titanium—version 3.1.0. Today we release a beta of both SDK and Titanium Studio—the newest version of our Titanium platform. This release focuses on performance. Not only are we introducing the successor to TableView in ListView, we’ve made the whole iOS and Android platform faster.

How much faster?

  • Our new component, ListView, is multiple times faster than TableView
  • On iOS, we have an average 20% performance gain from 3.0.0 for the entire platform
  • On Android, we have an average 36% performance gain from 3.0.0 for the entire platform

In short, your apps should run better and faster under 3.1.0. Read on below, and for full information, please see the release notes.

Note: This is a beta release, and as such may contain regressions or other issues. Please do not use it in production, and keep backups of all important projects and data. We will follow with additional releases in the coming weeks. If you find an issue, please report it in JIRA with a reproducible test case.

How to Update

These are links to continuous integration builds. To install them, choose “Help Menu > Install Specific Titanium SDK…” from inside Titanium Studio.

To update Studio, please visit http://preview.appcelerator.com and follow the instructions to update to the RC stream, or to download a new install.

NPM Packages

Note: You may need to use ‘sudo’ before these terminal commands on OSX and Linux
npm install -g alloy@1.1.0-beta
npm install -g titanium-code-processor@1.0.0-beta
npm install -g titanium@3.1.0-beta
To revert back to stable versions:
npm remove -g titanium
npm install -g titanium
npm remove -g alloy
npm install -g alloy
npm remove -g titanium-code-processor
npm install -g titanium-code-processor

New Features in Titanium 3.1.0

The docs are all available at: http://docs.appcelerator.com/titanium/latest/

ListView

This release introduces ListView, a new Titanium proxy to replace the existing TableView. Both list view and table view present data to user as a vertically scrolling list of rows. However, list view uses a data-oriented approach versus table view’s view-oriented approach.

Alloy Updates

New collection binding functionality has been added. You can now also get Alloy content assist and debug Alloy applications inside Titanium Studio.

EventKit UI Framework

The iOS EventKit framework, allowing access to calendar events and reminders, is now available inside Titanium.

iOS6 Core Location AutoPause API

The iOS AutoPause API pauses the location updates when an application goes into the background. We’ve implemented access to this new API in Titanium.

iOS Retina simulator support

The iOS simulator now allows you to choose to launch in Retina mode on demand, rather than needing to switch the simulator manually.

A Slimmer Titanium Studio

We’ve been working on making Titanium Studio as lean as possible. One step we’ve taken is to break the server-side language plugins (PHP, Ruby and Python) into separate optional installs. If you need them, just follow the links at http://preview.appcelerator.com to add them back in.

New Platforms

BlackBerry

Our BlackBerry support will go into beta at the same time as 3.1.0 ships. Studio now supports creating projects as well as running them on simulator and device.

Tizen

Our newest platform, Tizen, is now a full member of the Titanium family. Use Tizen from inside Studio 3.1.0. Create projects and run on emulator and device.

New Modules

Facebook V3 (Android and iOS)

Our Facebook module is now updated to be compatible with the latest V3 version of the Facebook API. Download the updated beta module here: Android and iOS.

Google Maps V2 (Android)

As mentioned previously, we’ve updated our Android maps module to support Google Maps V2. Download the latest beta here.

Newsstand (iOS)

Publish a magazine or periodical! We’ve developed a new module for interfacing with Apple’s Newsstand service. Download the beta module here.

NFC (Android)

You can now read NFC (Near-Field Communication) tags from inside Titanium applications. Download the beta module here.


Configuring Appcelerator Titanium to Use Intel x86 Images

Today’s guest post and cool Android emulator optimization tip comes from Titanium developer Mark Burggraf. Thanks for handy tips, Mark!

If you have used Titanium to develop for Android, you know that the Android Emulator can be slow. The reason for this is that the Android Emulator is actually launching a virutal machine for the ARM architecture to run your app, and this is running on top of your computer which uses an x86 architecture. This post guides you through the process of configuring your Android Emulator to run as x86, resulting in a dramatic increase in performance and a much smoother development cycle.

Configuring Appcelerator Titanium to Use Intel x86 Images

(A.K.A. “How to make working with the Android Emulator bearable.”)

If you follow these instructions, you’ll end up with an Android Emulator optimized for the x86 platform that runs as fast as your iOS Simulator (once it finally boots up.) This x86 version of the emulator boots faster, runs faster, and restores your sanity when working with Android.
NOTE: many (maybe most?) Titanium custom modules will not work with the x86 emulator. If you rely on a lot of third-party custom modules, you may be out of luck. Contact the module developers and ask them if they’ll support the platform with x86 libraries.

IMPORTANT Assumptions:

We assume here that:

  1. You’ve got a true Apple Mac running OSX 10.8.3. (Other versions of OSX may work just fine, but we’ve only tested 10.8.3.)
  2. You have Appcelerator Titanium Studio installed. If not, go to http://www.appcelerator.com and get it — it’s free, and it rocks.
  3. You have the Android SDK installed and working with Titanium Studio. If not, follow the guides on the Appcelerator site to get it working.

This tutorial isn’t about getting Titanium working with the Android emulator. We’ll assume you already have that working. This tutorial is about getting Titanium to work BETTER AND FASTER with the Android emulator. Or, rather, just getting the Android emulator to work BETTER AND FASTER.

STEP 1

Find your Android SDK location. If you already know where your Android SDK is installed, you can skip this step.

  1. Open Titanium Studio
  2. Click in the menu at the top: Titanium Studio / Preferences
  3. In the Preferences screen:
  4. Click Titanium Studio / Titanium
  5. Look under Android / Android SDK Home
  6. Make a note of this path — this is your Android SDK Root Path

In Step 2, wherever you see /path/to/android/sdk you’ll want to replace it with your own Android SDK path

STEP 2

Set your ANDROID_SDK_ROOT variable and create symbolic links.

Open a terminal window. Type the following (using the path from Step 1):

export ANDROID_SDK_ROOT=/path/to/android/sdk >> ~/.bash_profile

IMPORTANT NOTICE: If you have spaces in your path, you’ll need to escape each space with a backslash. Let’s say you put your Android SDK in the path “/Applications/Titanium Studio/Android SDK”. You’ll need to do this:

export ANDROID_SDK_ROOT=/Applications/Titanium\ Studio/Android\
SDK >> ~/.bash_profile

Close the terminal window and open a new terminal window. Your ANDROID_SDK_ROOT variable should now be set!

To make your life easier, we’ll now set up some symbolic links to the import Android command-line utilities. Once again, if you have spaces in your Android SDK path, you need to put a backslash before each space:

$ sudo ln -s /path/to/android/sdk/tools/android /usr/bin/android
$ sudo ln -s /path/to/android/sdk/tools/emulator /usr/bin/emulator
$ sudo ln -s /path/to/android/sdk/platform-tools/adb /usr/bin/adb

STEP 3

Install the Intel Hardware Accelerated Execution Manager for your platform

Launch the Android SDK Manager from the terminal window by typing:

android

Under “Extras”, check the box for “Intel x86 Emulator Accelerator (HAXM)”. Click the “Install package(s)” button and complete the installation. While you’re in the SDK Manager, make sure you have one or more x86 images installed under the Android Platform(s). For example, if you’re using Android 4.0.3 (API 15), look under that folder to make sure “Intel x86 Atom System Image” is installed. You’ll want the x86 image installed for each platform that you want to test.

STEP 4

Install the HAXM hot fix from Intel.

Go to the page: Intel® Hardware Accelerated Execution Manager 1.0.1 (R2)

In the “Mac OS X” section, download and install:

extra_intel_haxm-macosx_r02.zip

then download and install:

release_1.0.4-hotfix

STEP 5

Create a new Android Run Configuration for your Titanium project.

  1. Go into Titanium Studio.
  2. In the Project Explorer window, right-click on your project’s root entry (on the project’s name):
  3. Select Run As / Run Configurations
  4. Click “Titanium Android Emulator” in the tree
  5. Click the “Launch New Configuration” button (at the top left of the tree.)
  6. Under Android API, select an [x86] platform. For our example, we choose: Android 4.0.3 [x86]
  7. For this example, select Screen: HVGA
  8. Under Project, click Browse and select your project.
  9. Name your new configuration at the top. For our example, we name it: MyProject Android 4.0.3 [x86]
  10. Click Apply
  11. Click Run
  12. Wait for the emulator to start up completely and run your project. (Your project may not run if it requires Google API libraries — this is ok — we’ll add them back in later.)
  13. Make a note of the emulator instance name (shown at the top of the emulator window). It will look like this: titanium_16_HVGA_x86
  14. Close the emulator.

STEP 6

Configure your new Android Emulator instance.

Launch the Android Virtual Device Manager. Back in the terminal window, type:

android avd
  1. Click on your emulator instance from Step 5, then click Edit.
  2. Here, we’re going to configure this emulator to look and work like a real Android phone.
  3. Select the “Resolution” radio button and enter a resolution of 320 x 528 (allowing 40 pixels at the bottom for the hardware buttons.)
  4. Under “Hardware” at the bottom:
  5. Click New.., Select GPU emulation, Click OK
  6. Click New.., Select Hardware Back/Home keys, Click OK
  7. Click New.., Select Ideal size of data partition, Click OK
  8. Click New.., Select Keyboard support, Click OK
  9. Click New.., Select SD Card support, Click OK
  10. Now change the following values:
  11. SD Card Support: yes
  12. Hardware Back/Home keys: no (this puts the back/home keys at the bottom of the screen)
  13. Keyboard Support: yes (this allows you to type from your computer keyboard when in the emulator)
  14. Device ram size: 512 (this should be the default, but you can adjust it here)
  15. GPU emulation: no (you can change this to “yes” and see if it works for you later)
  16. Click “Edit AVD”
  17. Close the Android Virtual Device Manager.

STEP 7

Manually edit the emulator configuration file.

This step is necessary due to a bug in the Android Virtual Device Manager app. We want to adjust the “Ideal size of data partition” but we can’t do that in the Android Virtual Device Manager for some reason, so it must be done manually. Why adjust the size of the data partition? Because, in the development cycle, every time you run a new version of your application, the data partition begins to fill up. After a few runs of your app (sometimes after just 2 runs) you get an “out of space” error when you try to run the app. It’s easy to fix — you just go into the emulator, go into settings, go to Apps, find your app, then delete your app, then try running your app again from Titanium Studio. This is time consuming, though, and you lose any data you’ve entered in your app. Increasing the size of the data partition allows you to run your app many, many more times before you have to delete it and start again.

Make a note of your emulator instance name from Step 5, such as “titanium_16_HVGA_x86″.
We’re going to edit a text file now — if you have an editor configured, or you prefer nano or vi or something else, go ahead and use that. We’ll assume here you’re clueless, but that you know how to use Textedit.

In the terminal window, type:

$ open -a TextEdit ~/.android/avd/<>.avd/config.ini

For our example, it would be:

$ open -a TextEdit ~/.android/avd/titanium_16_HVGA_x86.avd/config.ini

Change the line:

disk.dataPartition.size=0 to disk.dataPartition.size=512m

This gives a 512mb data partition. Save the file and exit TextEdit.

STEP 8

Copy the Google APIs to your emulator instance.

In the terminal window, start the Android Virtual Device Manager:

android avd &

(Why is there an & at the end of the line? So that this command runs in the background and we get a terminal prompt back.)

  1. Click New…
  2. Under AVD name, enter something like “Google_API_15_Template”
  3. Under Target, select Google API’s (Google Inc.) — API Level 15 (the API level must match the API level you selected in Step 5. For Android 4.0.3, the API level is 15.
  4. Under Device, choose any device (we’ll use an HVGA device here…)
  5. Click OK, then OK
  6. Select your new device “Google_API_15_Template”, then click Start, then click Launch
  7. Wait for the new emulator instance to completely boot.
  8. Once the new emulator instance is running, go back in the terminal window and type:

    $ cd ~
    $ adb pull /system/etc/permissions/com.google.android.maps.xml
    $ adb pull /system/framework/com.google.android.maps.jar
    

  9. Exit the emulator. Exit the Android Virtual Device Manager.
  10. Now, we copy the Google APIs to the new emulator instance (from Step 5)
  11. In the terminal window, type:
    $ emulator -partition-size 512 @<> &

    For our example, it would be:

    $ emulator -partition-size 512 @titanium_16_HVGA_x86 &
    

    (Note: the above command will fail if your ANDROID_SDK_ROOT variable is not set correctly from Step 2.)

  12. Once the emulator boots (and it should boot much faster than the Google API Template instance), type this in the terminal window:
    $ adb remount
    $ adb push com.google.android.maps.xml /system/etc/permissions
    $ adb push com.google.android.maps.jar /system/framework
    
  13. Don’t close the emulator just yet — we’ll use it again in Step 9.

STEP 9

Build a system image

Download mkfs.yaffs2.x86 from here:
https://code.google.com/p/android-group-korea/downloads/detail?name=mkfs.yaffs2.x86

Copy the mkfs.yaffs2.x86 file to the emulator. In the terminal window, type:

$ adb push [[path]]/mkfs.yaffs2.x86 /data

You probably downloaded mkfs.yaffs2.x86 to your ~/Downloads folder, so it would look like this:

$ adb push ~/Downloads/mkfs.yaffs2.x86 /data

Now create the new system image by typing:

$ adb shell chmod 755 /data/mkfs.yaffs2.x86
$ adb shell /data/mkfs.yaffs2.x86 /system /data/system.img

Pull the newly built image to the current folder (This step takes a VERY LONG TIME):

$ cd ~
$ adb pull /data/system.img

Now copy the new image to your avd folder:

$ cp system.img ~/.android/avd/<>.avd/

For our example, it would be:

$ cp system.img ~/.android/avd/titanium_16_HVGA_x86.avd/

Now close the emulator – you’re done!

Page 4 of 91« First...23456...102030...Last »