Creating a Jive App (for beginners)

Version 6
Visibility: Open to anyone

    Overview:

     

    This document help for creating a new Jive App for beginners.This document help with the following:

    1. How to setup an Account with Jive in Dev Console.
    2. How to install GIT and Ruby used by Jive environment (different for Windows, Ubuntu Linux, Mac OS X).
    3. How to create the new App.
    4. How can we made modifications and save changes in Git.
    5. Coding for the App.

    Note:

    • Text in the comment-style boxes represents commands you will enter.

     

    Step 1:How to setup an Account with Jive in Dev Console.

    For using the Dev Console, the key step here is to use the updated application template for 6.x versions of Jive. You can find the 6.0 template here: Jive App Template.

    Once you get the new template, simply extract it to a location on your system where the app.xml can be served up and resolved by the Jive instance. Once you have the new url, you can add it to your instance following the instructions in the Developing internal local Jive Apps - using the Dev Console app document.

     

    To create a new account in Jive Developers group follow the link and give your details (remember the details this will be helpful for hosting and registering the App. https://developers.jivesoftware.com/devcenter/#enrollment

     

    After creating the account to open it follow the link https://developers.jivesoftware.com/devcenter/#home .Here you can check the status of your Apps after creating.Once you created your App you must the App in the home page.

     

    Step 2:How to install GIT and Ruby used by Jive environment .

     

    For installing the Git and Ruby environment for different versions for the links based on your operating system:

    Follow the installation instructions for your operating system, then return to this tutorial:

    If you are behind a firewall, you should also read:


    Step 3:How to create the new App.

    • How to Host the app code online at Jive's AppHosting server.
    • Register the app on the Jive Apps Marketplace as an app "in development".
    • Install the app on your default app dashboard in the Jive Apps Sandbox.

     

     

    1. Choose a short-name for your app.

     

    Think of the app short-name like a domain name. You want it to be easily typed and memorable for a user. When a user is using the canvas view of your app, the short-name will appear in the URL in this format:

     

    http[s]://<jive-instance-hostname>/apps/<app-short-name>

     

     

    • NOTE: This is a one-time decision.  The shortname you choose for your app cannot be changed at a later time.

     

    • If your app has a website with a domain name, you probably want to name your app to match (without the TLD, no periods (.) are allowed). So if you're "netflix.com", you would want your app short-name to be "netflix".

     

    • NOTE: App short-names must adhere to the following conventions:
      • 5-127 characters long
      • all lowercase letters
      • starts with a letter
      • may contain numbers, dashes, or underscores
      • Regex: ^[a-z][a-z0-9-_]{4,126}$

    2. Create your app via the command line. For example, if you wanted your app short-name to be "yourapp", you would type:

     

    $ jiveapps create yourapp         # NOTE: Substitute your own app short-name for "yourapp" 

     

    • The first time you run this command, you need to enter your Jive Apps Developer Community credentials.
    • You may also be prompted to accept appshosting.jivesoftware.com as a known host. Type yes and continue.

     

    3. Note your app URLs and OAuth credentials. At the end of the success message, you see the App URL that you'll need to use in Jive to make sure your app shows up:

     

    Congratulations, you have created a new Jive App!
    =================================================
    Git URL:               git@apphosting.jivesoftware.com:yourapp.git
    App URL:               http://apphosting.jivesoftware.com/apps/dev/yourapp/app.xml
    Sandbox Canvas URL:    https://app-sandbox.jivesoftware.com/apps/yourapp

    Sandbox Dashboard URL: https://app-sandbox.jivesoftware.com/apps/dashboards/default-dashboard

    OAuth Consumer Key:    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

    OAuth Consumer Secret: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx


    4. View the app in the browser. Copy the Sandbox Canvas URL and paste it into your browser. (The following example won't work for you: you should use the URL generated by the command line tool.)

     

    https://app-sandbox.jivesoftware.com/apps/yourapp 

     

    • Log in with the same credentials you used for the Jive Apps Developer Community.
    • The app should now be displayed in the browser.

    Step 4: Make some changes to your app

     

    1. Look at all the parts that an app requires. Back in the console where you first generated your app, run the following commands:

     

    $ cd yourapp
    $ ls           # (or "dir" on Windows)

     

    • You should see app.xml, hello.html, canvas.html, and home.html, as well as directories for images, javascripts, and stylesheets. The app.xml file is the starting point for all the code in your app.

     

    2. Open app.xml in a text editor to see its code:

     

    <?xml version="1.0" encoding="UTF-8"?>
    <Module>

      <ModulePrefs title="your_app_name"

                   description="TODO: Replace with real description of your_app_name inside app.xml: Module/ModulePrefs/description"

                   author="Your Name"

                   author_affiliation="Company Name"

                   author_email="your@email.com"

                   height="300">

     

        <!-- Commonly used features -->

        <Require feature="dynamic-height" />

        <Require feature="jive-core-v3" />

        <Require feature="osapi"/>

        <Require feature="settitle"/>

        <Require feature="views" />

     

        <!-- Additional Options ... -->

      </ModulePrefs>


      <!-- To begin development, remove the hello view and uncomment the embedded and canvas views below -->
      <Content view="embedded,canvas" href="hello.html">
      </Content>

     

      <!--
      <Content view="embedded" href="embedded.html" />
      <Content view="canvas" href="canvas.html" />
      -->


    </Module>

     

    • Here's what the different tags mean:
      • <Module> indicates that this XML file contains an app.
      • <ModulePrefs> contains information about the app and its author.
      • <Require> tags indicate "features" that this app needs in order to work. We include the features you are likely to use in your app by default.
      • <Content view="embedded,canvas" href="hello.html"> indicates a "Proxied Content" page, "hello.html" - an introductory place-holder page which should be displayed for both the "embedded" (!app) and "canvas" views.


    3. Edit app.xml and make a simple change. Delete the placeholder "hello" view and uncomment the seperate "embedded" and "canvas" views. Update the ModulePrefs meta data if you like.

     

    <?xml version="1.0" encoding="UTF-8"?>
    <Module>

      <ModulePrefs title="Your App's Human-Readable Title"

                   description="The real description of your app."

                   author="You or your Company Name"

                   author_affiliation="Company Name"

                   author_email="your_app_support@companyname.com"

                   height="300">

     

        <!-- Commonly used features -->

        <Require feature="dynamic-height" />

        <Require feature="jive-core-v3" />

        <Require feature="osapi"/>

        <Require feature="settitle"/>

        <Require feature="views" />

     

        <!-- Additional options... -->

      </ModulePrefs>

     

      <Content view="embedded" href="embedded.html" />
      <Content view="canvas" href="canvas.html" />


     

    </Module>


    Step 3: Commit your changes and see how it looks

     

    1. Add, commit, and push your changes to the sandbox by running the following commands:

     

    $ git add app.xml
    $ git commit -m 'your commit message here'
    $ git push jiveapps master

    • Note: If you created an SSH key with a passphrase in the prerequisite section, you will need to enter the passphrase when you do the push. If you did not add a passphrase to your SSH key, you will not be prompted.

     

    2. Refresh the page containing your app. You should see your changes. To continue development, open up "embedded.html" and "canvas.html" to customize the layout and content of your embedded and full-screen views.

     

    More Tutorials for the Command Line Tools

    There is additional functionality that you may utilize via the command line tools, such as registering 3rd party OAuth services for your app, adding multiple developers as collaborators, and livedev to speed up development workflow.

     


    Step 5:Coding and Developing the App.

    For coding the App you can simply use the html/css/JavaScript pages.But app.xml plays major role in developing the app. You can become familiar with how an application is defined via the app.xml file, how capabilities are added to the app, and where you add the HTML, CSS, and JavaScript that you want rendered in Jive. When you created Your First App in 5 Minutes! you either generated or started with a skeleton that serves as the basis for your application. This document will describe how all the pieces come together and explain the relevant parts of the app's definition.

    app.xml

    A Jive app is standard based Web component that is defined using an XML file. In Jive, our convention is to name this file app.xml. The app.xml file contains everything necessary for Jive to understand how to render your application within the Jive framework, including its HTML, CSS, and JavaScript. The app definition conforms to the OpenSocial standard, and although we call it an application, it is technically correct to also refer to it as an OpenSocial gadget.

     

    The app.xml file is broken into two different sections; module prefs and content. Module prefs control how your app appears in the market and in Jive, e.g. title, screenshots, icon, as well as the capabilities that Jive will provide to your app. These capabilities are know as features, e.g. dynamic-height. The content section is where you define, ultimately, what HTML will be rendered for you app give a specific view. Here's an example app.xml file.

     

     

     

    1. <?xml version="1.0" encoding="UTF-8"?>
    2. <Module specificationVersion="1">
    3.   <ModulePrefs title="SugarCRM Sweetness -- An Example App"
    4.                description="This app shows an exmaple of using What Matters to surface workflow from Sugar CRM"
    5.                author="Mark Weitzel"
    6.                author_affiliation="Jive"
    7.                author_email="mark.weitzel@jivesoftware.com">
    8.     <!-- Commonly used features -->
    9.     <Require feature="dynamic-height" />
    10.     <Require feature="jive-core-v3" />
    11.     <Require feature="osapi"/>
    12.     <Require feature="settitle"/>
    13.     <Require feature="views" />
    14.     <Require feature="opensocial" />
    15.     <Require feature="opensocial-data" />
    16.     <Require feature="setprefs" />
    17.     <Optioanl feature="minimessage" />
    18.     <Optional feature="locked-domain"/>
    19.     <Optional feature="oauthpopup"/>
    20.     <Optional feature="dynamic-width" />
    21.     <Optional feature="embedded-experiences"/>
    22.     <Optional feature="selection"/>
    23.     <Optional feature="open-views"/>
    24.     <Optional feature="firebug-lite"/>
    25.     <Optional feature="actions">
    26.       <Param name="action-contributions">
    27.           <![CDATA[
    28.              <action id="jiveapps.jw12sweetness" path="jive/actions/content/*" label="Sugar is Sweet" view="embedded" icon="http://apphosting.jivesoftware.com/apps/dev/actest/images/icon16.png" />
    29.              ]]>
    30.       </Param>
    31.     </Optional>
    32.     <!-- Preloaded Content: http://wiki.opensocial.org/index.php?title=Remote_Data_Requests_%28v0.9%29#Preloading_data -->
    33.     <Preload href = "http://mgmarum.com:8080/osJumpstart/rest/sugar/entries/raw" views="home,canvas"/>
    34.     <!-- Icons: 3 sizes, 16x16, 48x48, 128x128 -->
    35.     <Link rel="Icon"       href="images/icon16.png" />
    36.     <Link rel="MediumIcon" href="images/icon48.png" />
    37.     <Link rel="LargeIcon"  href="images/sugarTrophy.png" />
    38.   </ModulePrefs>
    39.   <Content type="html" view="home" href="http://apphosting.jivesoftware.com/apps/dev/jw12sweetness/canvas.html" preferred_height="500" />
    40.   <Content type="html" view="canvas" href="canvas.html" />
    41.   <Content type="html" view="embedded" href="embedded.html" />
    42. </Module>

     

    Understanding Features

    One of the first things to notice is the <Require feature="...."/> and <Optional feature="..."/> tags. These are the capabilities that you are requesting Jive add to your application when it's loaded. These give you the JavaScript APIs that you invoke from your application. Essentially, this is telling Jive to inject the proper JavaScript into your app. Features can be required, meaning your app won't work without them, or optional, meaning you have compensating logic in your app if a feature is not available.

     

    Features come from two different places. This first place they come from is OpenSocial. For example, dynamic-heigh, minimessage, osapi, these are all capabilities that have been standardized in the OpenSocial specification. The second place features come from is Jive. In this case, we've defined several capabilities that complement OpenSocial's features. The most common ones that you will use will be jive-core-v3 and jive-connects-v1.

     

    Understanding Views

    It's possible for one application to have multiple visualizations. For example, you might have a view that is customized for an embedded experience that is used for a specific interaction with your app. For example, the wikipedia app has a view for !App Experiences (it's embedded view) that let's you quickly lookup articles and insert them in Jive content. Views are defined in the <Content ... > tag. At it's most basic, a view has a name and points to a file that simply includes HTML. You can also insert a CDATA tag and embed the content directly in the tag if you like. There are several top level views that are defined by the OpenSocial specification, e.g. canvas, embedded. It's also not uncommon to have child views, e.g. embedded.customerLookup.

     

    A view is called at different times in Jive. Canvas is called when your someone clicks on your app's icon in the quick launcher. The embedded view is called after you insert an app artifact into Jive content. You can also call views programmatically depending on the work flow of your application. As you become more comfortable with views, you'll develop ever more powerful and sophisticated app interactions with your users.

     

     

    How your app is rendered

    When you created your first app, you may have noticed several files, for example, the app.xml, canvas.html, and main.js. We've talked at length about the app.xml. Now, let's understand how it all comes together. When you added your app to Jive, you gave it a URL that pointed to your app's definition that is contained in the app.xml file. Jive does several things with this file. Let's talk through the high level steps that happen when an app is rendered:

    1. First, Jive resolves the app.xml file and starts to process it's contents.
    2. Jive will then look at the set of required and optional features and injects the corresponding JavaScript into the HTML that will be returned.
    3. Jive then retrieves the HTML that is defined in the Content section for the view that is being rendered.
    4. All of this is combined, then returned down to the browser.


    Understanding how an app works; app.xml, features, and views:

    https://community.jivesoftware.com/docs/DOC-67949

     

    HTML

    you can create the html pages based on your App view they act as UI of the App.

     

    JavaScript

    your coding is go to this part like adding functions/functionality to the Apps and connect with the html pages.

     

    CSS

    your html styles are added to this part. you may or mayn't use the CSS that doesn't effect the functionality of the App.

     


    Some useful links:


    Git Hub Help:

    https://help.github.com/

     

    Git Hub Training: (Free online class for beginners and followed by Q&A session)

    http://training.github.com/web/free-classes/

     

    Using Git and basic videos:

    http://git-scm.com/documentation

     

    Git Documentation:

    http://git-scm.com/book

     

    Book for Getting Started - Getting Help (GIT):

    http://git-scm.com/book/en/Getting-Started-Getting-Help

     

    Foundations of Jive: (Free Online class)

    https://jive.webex.com/jive/j.php?ED=241463497&UID=500334542&PW=NZGRjNTYyYTU0&RT=MiM0


    ** Starting Point-----Jive Apps Framework FAQ:

    https://community.jivesoftware.com/docs/DOC-68844

     

    ***Jive Apps Developer Documentation - Master Reference:***

    https://community.jivesoftware.com/docs/DOC-67988

     

    Steps to install softwares for Jive apps in Windows:

    https://community.jivesoftware.com/docs/DOC-65618

     

    Creating an account in Jive:

    https://developers.jivesoftware.com/devcenter/#enrollment

     

    Dev center home page:

    https://developers.jivesoftware.com/devcenter/#home

     

    Jive Apps Sandbox Home page:

    https://sandbox.jiveon.com/get-started

     

    Creating a simple “Hello World App”:

    https://community.jivesoftware.com/docs/DOC-65551

     

    Basic information about Jive:

    https://developers.jivesoftware.com/gettingstarted.jsp

     

    Hey, I'm new here, how do I get started? for Jive Software:

    https://community.jivesoftware.com/docs/DOC-65860

     

    Developing Jive Apps for your own community - using the Dev Console app:

    https://community.jivesoftware.com/docs/DOC-65429

     

    Your First jive App in 5 Minutes:

    https://community.jivesoftware.com/docs/DOC-67854

     

    Understanding how an app works; app.xml, features, and views:

    https://community.jivesoftware.com/docs/DOC-67949

     

    Getting Started with Developer Services:

    https://community.jivesoftware.com/docs/DOC-65876

     

    Jive Application Framework Overview:

    https://community.jivesoftware.com/docs/DOC-67523

     

    Welcome to Jive Apps SDK!:

    https://community.jivesoftware.com/docs/DOC-68855

     

    Jive Apps Basics Tutorial for Jive 5.x:

    https://community.jivesoftware.com/docs/DOC-65574

     

    Using the OpenSocial API:

    https://community.jivesoftware.com/docs/DOC-65828

     

    Using the Jive Core API:

    https://community.jivesoftware.com/docs/DOC-65578

     

    Using the Jive Application Gateway API:

    https://community.jivesoftware.com/docs/DOC-65579

     

    Using the Jive Activity API: How to create activities, notifications and actions from your app:

      https://community.jivesoftware.com/docs/DOC-68847