Download the App Cloud Studio SDK

1. Browse to http://www.brightcove.com, and in the top-right corner, select
   Customer Sign In > App Cloud.
2. Log in to your account, or create an account.
3. In the App Cloud Studio Dashboard, locate the Downloads section. Click the Download button for the SDK and save it to your computer at a location of your choice.
   
4. Unzip the SDK file.

   In the SDK directory, you will see several folders containing documentation, sample apps, source code for standard views, themes and other tools you may need to create an app using App Cloud Studio.

   

Install Brightcove Workshop

5. Back in the App Cloud Studio Dashboard, again in the Downloads section, notice the links to the Workshop app for the iOS and Android devices.
6. Click the corresponding link for your device and install the Workshop app.
7. For the Workshop app to function, connect your device to the same wireless network as the computer on which you are doing development.

Install Node.js for scaffold script execution and App Cloud test server

Note: Node.js is installed simply as a utility to assist in app development. For instance, it will run the scaffold script and show a listing of the apps you have created. It is NOT part of the finished app.

1. Open your file manager application, Finder for Mac or Explorer for Windows.
2. Navigate to the /tools/node_installer directory and launch the appropriate Node.js installer for your operating system—node-v0.6.16.pkg for Mac or node-v0.6.16.msi for Windows and install Node.js.

Run the scaffold script

3. In the SDK directory, navigate to the /tools directory and locate the scaffold.js file.
4. Open a command line application, Terminal for Mac or the Command Prompt for Windows.
5. At the command line, change to the directory containing your /tools directory in your file system.
6. Next, enter the following to create an app called demoapp with two views.

   node scaffold.js -name demoapp -views demoview1 demoview2 

   Notice that the demoapp contains two views. Views will have corresponding navigation buttons in your app. The views will be named demoview1 and demoview2 and contain default data drill-down code.

7. Note that your app was created in the brightcove-app-cloud-1.10/appcloud-server/public directory.
   
8. Next, enter the following command to start the test server.

   node ../appcloud-server/app.js 

9. You will see a notification telling you that the test server is listening on port 3773.
10. In your file manager application, navigate to the brightcove-app-cloud-1.10/appcloud-server/public/demoapp directory and review the app structure.

    You should see that the script has created several directories, including html, images, javascripts, stylesheets and txt. Notice that the directory also includes a manifest.json file.

    

    The following table describes the contents in the folders/files created from the script:

Note: Boilerplate code is generated in a number of the files that you can alter or remove. The only requirement is the manifest.json file is in the root of the directory.

Use the App Cloud test server

1. Open a web browser and navigate to localhost:3773.

   You will see that the page displays the app you just created with the scaffold script.

   

   Note: On Macs localhost will be replaced automatically with your computer's IP address. Windows users MUST manually replace localhost with the IP address of your computer for the Workshop app to function correctly.

2. Select demoapp.

   You will be served a page where you can scan a QR code to view your app on a device using Workshop.

   

Preview the app on a mobile device using Brightcove Workshop

3. On your Android or iOS device, open Brightcove Workshop.
4. Select the camera button in Workshop and position the QR code in the middle of your device's screen.

   Brightcove Workshop will scan the QR code and will load your app on to your device, with demoview1 displayed.

   Note: This view contains default functionality that you can alter or remove as part of the development process.

5. Tap a list item to go to a details page for the item details, and then tap the Back button in the header of the details page to return to the list view.

   

6. Test the second view to confirm the same behavior. (Android users tap the Menu button to see the second view's navigation button.)

Note: You can also use your desktop web browser to use the application by clicking on one of the view buttons.

Edit the JavaScript for demoview

1. Locate the /appcloud-server/public/demoapp/javascripts/views folder.
2. From this folder, open the file demoview1.js in your favorite text editor.

   Note: The scaffold script generates a JavaScript file for every view that is created.

3. In this file, locate the registerEventListeners() function.

   function registerEventListeners() {
     $( "#first-page-content" ).on( "tap", "li", transitionToSecondPage );
     $( "#pagetwo" ).on( "tap", ".back-button", bc.ui.backPage );
   }

4. Change the code so a function named popUpAlert is called instead of the default, as shown here.

   function registerEventListeners() {
     $( "#first-page-content" ).on( "tap", "li", popUpAlert );
     $( "#pagetwo" ).on( "tap", ".back-button", bc.ui.backPage );
   }

5. Just below the function you just edited, add the skeleton of a function named popUpAlert.
   

   function popUpAlert() {
   
   }

6. Add a line of code to the function that uses the App Cloud API to make a device pop up an alert, bc.device.alert();. Add any text in quotes as the argument.
   

   function popUpAlert() {
     bc.device.alert("View Edited!");
   }

7. Be sure the two functions, one altered and one added, appear as shown here.
   

   function registerEventListeners() {
     $( "#first-page-content" ).on( "tap", "li", popUpAlert );
     $( "#pagetwo" ).on( "tap", ".back-button", bc.ui.backPage );
   }
   
   function popUpAlert(){
     bc.device.alert("View Edited!");
   }

8. Save the file.

Test the app in the Workshop

9. Either scan the QR code again, or on your device select Refresh from the Workshop's menu.
10. Now tap one of the list items, and you will see an alert pop up on your device.

You're done! Thanks for working through the App Cloud Quick Start. Continue to grow your App Cloud development skills by checking out the following:

Using the Scaffold Script to Create Your Template Structure