All the code in this book is compatible with the new Appcelerator Platform 4.0

Build native cross-platform apps with Appcelerator

A beginner's guide for web developers

About this book

This book is the first Appcelerator book written for Alloy and designed with beginners and web developers in mind. If you want to learn how to build your own mobile apps, but you find Objective-C and Java too difficult to learn, or if your app needs to be cross-platform from the get go, read on.

This book will take you by the hand and guide you through the process of using Appcelerator Alloy to build cross-platform apps that follow the native platform's usability guidelines. There's a strong focus on UI and UX, and although you'll use web technologies, these are not web apps. From a single code-base, you'll be able to build apps that look, behave and perform just as if you had written them using the native languages. Read on and learn more about the apps you'll be able to build.

From the back cover

Have you ever wanted to build your own native mobile apps? Do you have JavaScript experience but are ready to move away from the restrictions of web apps? Did you know that with Appcelerator you can use your existing web experience to build 100% native apps that follow the native platform user interface guidelines, and all from a single code base?

In this book you'll learn how to take your existing web knowledge, and adjust your thinking to make the shift from the browser to native mobile app.

What's inside

  • How to properly think "cross-platform", paying special attention to the best possible UI/UX for each target platform
  • How to build beautiful iOS 8 user interfaces
  • How to use Appcelerator's Alloy MVC framework, create Widgets and Themes
  • How to leverage the Open Source user community to expand the native features of the Appcelerator cross-platform SDK
  • How to deal with images for all possible Android screen sizes and densities
  • Consume data from your own Web Services, as well as Twitter and YouTube
  • How to take pictures, modify them and share them with social networks

The apps you'll build are not web apps nor hybrid apps - we're talking 100% Native apps!

Get the book!

The book is available on

It's also available for Kindle at

If you'd like a signed copy, you can purchase directly from me, buying via

Book + Shipping & Handling

Book contents

The book has 2 sections: The Basics and Advanced Functionality, and contains 8 chapters and 3 appendices. Throughout the book you'll build 3 full-blown apps: an MP3 Player, a Conference App and a MEME Generator app, and this last one you can download today for iOS and Android.

Scroll down to learn more about the contents of each chapter.

Chapter 1

The Appcelerator cross-platform SDK

In this chapter you'll learn the difference between web apps and native apps. Using a simple example, you'll learn about the Appcelerator cross-platform API and how it provides you access to native user interface elements.

You'll also see how the Appcelerator SDK offers you two different styles: Classic and Alloy. Classic is a pure JavaScript way of building apps, while Alloy is an MVC framework that not only improves code organization, but also makes it more suitable for web developers, as it uses a markup language for building the user interface, stylesheets for adjusting visual properties and JavaScript to implement functionality.

Chapter 2

The basics of Alloy

In this chapter you'll dive deeper into the specifics of Alloy, and how the XML, TSS and JavaScript files relate to one another, promoting code decoupling and overall best practices.

You'll then go through the process of building an MP3 player using Alloy. After this, you'll learn how to use Alloy themes to pull the styling out of your app and keep it inside independent containers, which you can switch on and off at will. This Alloy feature is ideal when you're building apps that require frequent changes to the UI.

Chapter 3

Alloy Widgets

Creating Widgets is one of Alloy's most powerful features. You'll learn how by creating widgets you can normalize platform-specific code, create native module wrappers and even extend the Appcelerator API.

In the process, you'll modify the MP3 Player, will pull out all the Media Player functionality, and will convert them into a widget that you'll be able to insert into any other app.

Chapter 4

Tabs and Advanced Android Customizations

Here you'll start building a Conference App. You'll be working with this app in chapters 4, 5 and 6.

In this chapter you'll learn how to setup cross-platform native tabs and you'll understand the rendering differences between iOS and Android. You'll also learn about the proper sizes for tab icons and how to make sure they look right in all different Android screen sizes and densities.

Finally, you'll work with Android native ActionBar Styles to make your Android App look professional and consistent with it's iOS counterpart.

Chapter 5

TableView, third-party modules and working with local data

In this chpater you'll implement the Schedule tab for the Conference app. Here you'll learn how to make platform-specific UI decisions. The Schedule tab will be implemented using the Segmented Control on iOS, and a ViewPager on Android, all from a single codebase.

Next you'll learn how to create a vertical scrolling list called TableView and fill it out dinamically using three methods: Local JSON Files, Local SQLite Database and Alloy Backbone models. Finally, you'll learn how to react to table clicks and open a secondary window.

Chapter 6

ListView, Web Services and Twitter integration

In this last chapter of the Conference App, you'll learn how to use the Appcelerator ListView. The ListView is similar to the TableView, but it's optimized for complex data sets on each row. You'll then dive into the specifics of loading dynamic data from Twitter and YouTube.

Chapter 7

Working with the camera and native sharing with social networks

In this chapter you'll learn how to use Appcelerator's cross-platform camera controls. Then you'll learn how to use custom fonts, overlay text onto the photo taken with the camera and create a new image out of it.

To complete the app, you'll learn how to implement native cross-platform sharing functionality, allowing your app to share images with social networks.

Chapter 8

Top 10 Tips for successful cross-platform mobile development

This last chapter is a collection of 10 tips that will help you in your journey towards becoming a successful cross-platform app developer.

The chapter includes a URL to download a high-resolution version of the infographic, which you can print out and always keep it handy. You can download this lo-res version here.

Appendices

A. Working with JavaScript : This appendix is a JavaScript Refresher. If you've never worked with JavaScript, or you've work with it very lightly, you should start here.

B. Installing and configuring : A guided walk-thru of the process of installing Studio and the necessary dependencies. Also deals with the CLI and troubleshooting your installation.

C. Submitting apps to the App Store and Google Play : A complete step-by-step guide of how to submit your apps to the App Store and Google Play, using the PhotoMEME app as an example.

Share

Join the mailing list

Want to be kept in the loop? Sign up to the Mailing List and stay up to date on release dates, offers and special events.

* indicates required

About the author

With over 20 years in the software development industry, Ricardo has built products, managed software development teams, taught programming courses and mentored software developers and entrepreneurs.  As a technology evangelist, Ricardo has participated in radio, TV, and countless speaking engagements in the United States, the Caribbean, South America, Europe and Asia.  Ricardo has been building Appcelerator apps and training developers since 2010 and currently works as Director of Developer Relations and Training at Appcelerator. You can follow him on Twitter as @ricardoalcocer or visit his website at http://ricardoalcocer.com.