Using Appcelerator to create your mobile application - Part 1

June 18, 2021

Today there are many companies who are planning to develop mobile applications, either as a way of showing their information in a more accessible way or to attract new customers. It is a blooming industry for developers and users of this technology, because of the app stores, where any developer can upload an applications and make money with it. This involves creating apps for the different available platforms (Android, IOS Blackberry, Windows Phone), but programming for each platform is more expensive and takes a lot more time than programming using a tool such as Appcelerator and its development environment Titanium.

Appcelerator is a tool that enables developers of all levels, program applications that can be installed on various platforms for smartphones. I will show a basic tutorial to create a simple application using Appcelerator Studio. One advantage of Appcelerator is that we can program our applications following the MVC architecture (Model-View-Controller) where, using XML and CSS we can separate the user interface, the business logic and data.

To create our new application we will select the framework Alloy in File->New->Mobile App Project

mongo replication process

In the next window, we will give a name and an ID to our project. The name of the project will be mylibrary. Additionally we can choose our deployment platform app. Remember that we should have the necessary SDK.

Finally, select the version of Titanium SDK to use and this will finish the wizard setup.

Before continuing let's explain briefly the mylib application.

It is a simple application that uses a list and several labels to display a list of books of interest. Selecting one of them will show information about the book, such as the author's name and the publishing date.

The structure of a project in Alloy Appcelerator it is as shown in the picture

mongo replication process

The app directory contains the models, views, controllers and application assets.

To continue, we create a new model. Right click on the project name and select new->Alloy Model The setup wizard will help us create the model, for it, we will write as the model name "books" and will add the fields. In our case, it will only be "title" for the title of the book, "author" for the name of the author and "date" for the publishing date of the book.

mongo replication process

We click "OK" and our model has been created.

To verify the configuration of the model we can go to app/models/book.js and it will show the code with the model configuration: [prism:javascript] ……….. config: { columns: { "title": "string", "author": "string", "date": "date" }, adapter: { type: "sql", collection_name: "books" } }, ……….. [/prism:javascript]

The next step is to modify the driver app/controllers/index.js The code should look as follows:

[prism:javascript] /**

  • We define the model mybooks */ var mybooks = Alloy.Collections.books;

/**

  • We add a book */ var book = Alloy.createModel('books',{ title : 'Cien años de soledad', author : 'Gabriel García Márquez', date: '05/06/1967' }); mybooks.add(book);

//Guardamos el libro book.save();

$.index.open(); [/prism:javascript]

The previous code creates a new model called mybooks and the information is saved for the first book created

We continue to modify the index view in app/views/index.xml to list our books created in the controller.

[prism:javascript]

[/prism:javascript]

In this code, we create a new Collection "books" and define the view of the table that will display the title and author of the book. Additionally we initialize the onclick event, for when pressing the element it will display the screen with additional information of the book.

We must create the method "detailsHandler" in our index.js controller to define its operation We return to the file app/controllers/index.js and add the following:

[prism:javascript] /*

  • @param {Object} e
  • Origin Object */ function detailsHandler(e){ var selectedBook = e.source; var args = { title : selectedBook.title, author : selectedBook.author, date : selectedBook.date }; var bookview = Alloy.createController('bookdetails',args).getView(); bookview.open(); } [/prism:javascript]

As we can see, we need to create a new controller that will be called "bookdetails". For it, we shall go in the directory "controllers" and add a new "Alloy Controller". This will create bookdetails.js and bookdetails.xml.

Open Bookdetails.xml and create the new view, copy the following code:

[prism:javascript]

[/prism:javascript]

We have created a new screen with three labels about book's information.

We now open the bookdetails.js file and copy the following:

[prism:javascript] var args = arguments[0] || {};

$.titleLabel.text = args.title || 'Default title'; $.authorLabel.text = args.author || 'Default Author'; $.dateLabel.text = args.date || ‘01/01/1900’; [/prism:javascript]

That is all for now. To test our application, we selected a virtual or real device in the device selector and press Run. In my case I will use a virtual device with Android 4.1.1.

mongo replication process

When finished compiling our application, it will look like this:

mongo replication process mongo replication process

We can add more books from a REST or manually, to enrich our library.

In a future blog we will explain how to apply styles to the screens and Labels to make our application look much better.

As we just saw in this example, Appcelerator is a tool that lets you create applications in a very simple and professional manner. Thanks to the Alloy framework our applications has the MVC architecture, which allows us to separate the user interface, business logic and data.

The biggest asset of this tool is that you can create a cross-platform application, by writing the code in a single programming language, saving time and money.