Appcelerator Blog

The Leading Resource for All Things Mobile

Arrow ‘Alloy SDK’ Example

19 Flares 19 Flares ×

This blog provides an example of how to implement an Arrow Client Side ‘Alloy’ SDK in your Appcelerator mobile app project.

By the end of the example, you’ll be able to create mobile/client apps that are able to consume data with no coding! I mean, literally: no looping through arrays, lists, or creating loops in loops (for array or arrays) to simply extract data from back-end data results and display them on your mobile (or client) app. Brilliant, right?

This feature of Appcelerator Alloy is based on Backbone.js. You can learn more about it through:

However, you don’t have to. This is the perfect example for you to start building apps that display data from your Arrow applications, in minutes, without going into the nitty-gritty of backbone.js.

This demo is suitable for anyone, who knows how to create Arrow Applications and generate Client SDKs.

Getting Started

OK, let’s create an Alloy app that lists all of the Accounts under our Salesforce demo account.

adk-example-first

Steps:

  1. Assuming you have an Arrow Application created, tested and published (or running locally). My Arrow application is called MySF_Accounts.
  2. All we need to do is to now is to generate the Client Side SDK.
    • run the following command from your Arrow application folder
      
      > appc generate
       
    • Select Arrow SDK from options
      
      ? What type of component would you like to generate?
        Arrow Component
      ❯ Arrow SDK
        CLI Plugin
       
    • Select Alloy (alloy) from options to generate SDK code compatible with our Alloy mobile app
      
        ? Which type of App SDK? (Use arrow keys)
      ❯ Alloy (alloy)
        Android (android)
        jQuery (jquery)
        NodeJS (nodejs)
        Objective-C (objc)
        Titanium (titanium)
       
    • You will be prompted to name your SDK
      
      ? What should the name of the SDK be? (MySFAccounts) MySF_Accounts
       
    • Here, we need to name our SDK. If left blank, by default, it will take your Arrow application’s name. I have named mine MySF_Accounts.

    • Finally, you will be asked which directory the files should be generated in. I have saved mine in sdk.
      
       ? Generate files into which directory? (sdk)
       
  3. Once the SDK generation is successful, you need to copy the Client SDK files to your Alloy mobile app project directory. ‘README.md’ file contains the necessary information on how to start using your client side SDK in your Alloy app.
    • Copy Alloy Client Side SDK files from Arrow into your Alloy Mobile Application Directory as below:   sdk-example-second  
  4. We need to make few adjustments to ensure our Model, View and Controller are all connected. In this example, Model is Sf_Account.js, View is index.xml and Controller is index.js.

index.js


  1. Get Client Side SDK to query the relevant model info from data source – Salesforce in this case. Add the following into your controller (replace SfAccount with your model name):
    
        Alloy.Collections.SfAccount.fetch();
          
  2. Add the following function to convert the model to JSON object.
    
        function transformFunction(model) {
            return model.toJSON();
        }
          
  3. Finally, to prevent memory leaks, we need to call the destroy function as below:
    
        function cleanup() {
            $.destroy();
        }
          
Final look at index.js (Controller) Completed view of index.js

index.xml


  1. Let’s start with the most basic list view. I am using a barebone Alloy ListView from Appcelerator Documents. Add the following code to your View. This is index.js in our example.
    
        <Alloy>
            <Window>
                <ListView>  
                    <ListSection>
                        <ListItem title="" />
                    </ListSection>
                </ListView>
            </Window>
        </Alloy>
        
    
  2. We now need to make our model, SfAccount.js, accessible from View, index.xml. Much like referencing js and css in HTML. Add following just before the tag
    
    <Collection src="SfAccount"></Collection>
    
  3. Add the following properties to ListSection to automatically loop through our collection of Salesforce Accounts and to convert the data to JSON.
    
    dataCollection="SfAccount" dataTransform="transformFunction"
    
  4. Quickly add the event listener to Window tag to call our cleanup function to prevent memory leaks upon user closing the window.
    
    onClose="cleanup"
    
  5. Finally, we need to tell our view which elements to display from the model. In this case, I will display the each account’s Name and State. Just add the following as the title of ListItem
    
    title="{Name}, {BillingState}"
    
    Final look at our index.xml (View) Completed view of index.xml

SfAccount.js


  1. Since Arrow requires authentication (Basic by default), we need to add the authentication key into our model as well as domain and port. Basic configuration and authorization keys are available in the READ.me file generated as part of your SDK. README.md file contains authentication keys Add following line into your model, straight after require line
    
    SDK.Authorization = 'YourArrowAPIKey'; (as per above)
    SDK.port = '8080';
    SDK.domain = 'http://localhost'; (if running locally)
    
    If your Arrow application is published and running online, set your domain accordingly: Arrow Application domain

Final Product

Now we know how to integrate Arrow SDKs into Alloy Mobile Apps to display data with basic copy-and-paste. This is already done for us.

sdk-example-final

Final Words

As you can see, no effort was required to create a basic native mobile app that lists the accounts we have in Salesforce. This could have been your database or any other data source.

You’ll likely want to add some style and additional functionality to make the app nicer looking and more functional.

Look forward to your comments.

19 Flares Twitter 0 Facebook 0 Google+ 1 LinkedIn 18 Email -- 19 Flares ×

3 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Nicolas Massé

    Nice post Ilay ! Thanks for sharing ! :)

  2. Georges

    wow.. I used to do it a much longer way. Thanks!

  3. Ilay

    Glad to know you have found it helpful, Georges.

Sign up for updates!

Become a mobile leader. Take the first step to scale mobile innovation throughout your enterprise.
Get in touch
computer and tablet showing Appcelerator software
Start free, grow from there.
19 Flares Twitter 0 Facebook 0 Google+ 1 LinkedIn 18 Email -- 19 Flares ×