Create your first app in 4 easy steps

This tutorial will show you how easy it is to build, package and deploy a Deskpro App. The app we will create increments a notifications counter in the application's badge when the user clicks a button.

You will need access to a Deskpro instance, either a Cloud or an On-Promise version. If you don't have one available, you can sign-up for a free trial on deskpro.com.

You will also need to have node.js and npm installed on your system. In case you don't, go over to docs.npmjs.com and follow their tutorial before continuing. You also need git (go to the official git docs for installation instructions) to clone the starter application repository.

• Clone the apps-boilerplate repository

We maintain a starter application skeleton which we encourage everybody to use when starting a new app:

    git clone https://github.com/deskpro/apps-boilerplate my-first-deskpro-app
    cd my-first-deskpro-app
    npm install

• Add the button

Open the file src/main/javascript/App.jsx and replace its contents with the following lines:

    import React from 'react';
    import PropTypes from 'prop-types';
    import { Button } from '@deskpro/react-components'

    /**
     * My first application
     */
    export default class App extends React.Component {

      static propTypes = {
        /**
         * Instance of the Deskpro App Sdk Client
         */
        dpapp: PropTypes.object
      };

      incrementNotificationsCounter = () =>
      {
        const {
          /**
           * @type {UIFacade}
           * @see https://deskpro.github.io/apps-sdk-core/reference/UIFacade.html
           */
          ui
        } = this.props.dpapp;

        ui.badgeCount++;
        ui.showBadgeCount();
      };

      render() {
        const containerStyle = {display: "flex", alignItems: "center", justifyContent: "center", margin: "20%"};
        return (
          <div style={containerStyle}>
            <Button onClick={this.incrementNotificationsCounter}>Click me</Button>
          </div>
        );
      }
    }

• Build the application

This step will build a distribution file located at dist/app.zip inside the folder where you originally cloned the starter application. This is a zip file which contains the compiled sources of your application.

    npm run package

• Install the application

Log-in to the Agent interface of your Deskpro installation if you are not logged in already. You can access the Agent interface at http://<your-deskpro-installation>/agent.

Navigate to the Apps section and choose the Upload App option. Choose the dist/app.zip file from inside the folder where you originally cloned the starter application, upload it then click the green Install button:

screenshot

That was it!

Now head over to the Tickets section and open a ticket to see your application. If you followed this tutorial each time you click the button the application badge will increment the notification counter:

screenshot