Freshworks MarketPlace apps using JavaScript Frameworks

On this submit, we’re going to check out how we will construct Freshworks Marketplace apps utilizing well-liked JavaScript frameworks like React and Vue.

The official CLI software supplied by the App Improvement Platform of Freshworks has built-in scaffolding capabilities for constructing Market apps utilizing frameworks like React and Vue. At current solely these two well-liked frameworks are being supported, I hope extra frameworks will likely be supported by the CLI within the close to future.



Freshworks CLI

The Freshworks CLI is a command-line software which may be put in utilizing the Node package deal supervisor npm. After all, you’ll want to have Node.js put in in your machine earlier than putting in the Freshworks CLI. Yow will discover extra details about the pre-requisites for putting in the CLI here

npm set up https://dl.freshdev.io/cli/fdk.tgz -g
Enter fullscreen mode

Exit fullscreen mode

You may confirm the CLI set up by working following command:

fdk model
Enter fullscreen mode

Exit fullscreen mode

You need to get one thing just like the put in model of your fdk cli and in addition about any new variations which were launched with the intention to improve.

The library exposes an executable referred to as fdk utilizing which you’ll bootstrap Market apps. fdk additionally comes with pre-built templates for numerous frameworks and libraries for constructing the apps with out having to arrange the challenge boilerplates from scratch.



Templates

The fdk can take inputs on which kind of boilerplate the Market app goes to make use of. That is supplied by the --template possibility which may be handed to the fdk create command.

If the --template possibility is just not supplied with the create command, you might be prompted to pick a template. The most typical and beneficial template for first-time customers will likely be the your_first_app template.

Image description

At current there are about 7-8 templates obtainable to select from, in case you are constructing the app for the Freshdesk product. Each product helps numerous sorts of templates greatest fitted to the standard use instances supported by the respective merchandise. Strive selecting a special product within the first immediate (the product immediate) and you can be offered with a special set of templates.

Let’s have a short details about a number of the most generally used templates.



your_first_app

That is the fundamental template which simply shows the contact data in your app within the Ticket Particulars web page sidebar. In case you are simply beginning with the fdk or do not know what kind of template to make use of, that is the beneficial template for rookies, to get a grip on the elements of a Market app.



your_first_serverless_app

If you wish to construct Serverless apps for the Market, that is the starter template you ought to be utilizing. With this template, you possibly can construct apps which cater to numerous use instances like customized automations, information synchronization, alerts and notifications.



sample_crm_app

This template will present you how one can construct apps that use the Buyer information from the CRM product of Freshworks referred to as Freshsales. This pattern app will showcase the varied API and interfaces you need to use to interface with the CRM product. In case you are not acquainted with these API or in case you are simply beginning to construct an app utilizing the CRM capabilities, that is the starter template you ought to be utilizing.



advanced_iparams_app

That is one other pattern app template which has some placeholder configuration for the Installation Parameters utilized in a Market app.

Set up Parameters also called iparams within the Market parlance are used to configure the app set up. These parameters enable you to to fine-tune the set up course of by dynamically configuring the appliance parameters earlier than putting in the app contained in the respective merchandise.



your_first_react_app

That is the pattern template for bootstrapping the apps utilizing React.js as the first software for constructing the front-end of the app. I’ll present you how one can use this template within the sections beneath.



your_first_vue_app

That is the pattern template for bootstrapping the apps utilizing the two.x variations of Vue.js as the first software for constructing the front-end of the app.



your_first_vue3_app

That is the pattern template for bootstrapping the apps utilizing the newest model of Vue.js as the first software for constructing the front-end of the app.



React

For creating React apps with fdk it’s a must to use the template your_first_react_app like beneath:

fdk create --app-dir my-react-mkp-app --products freshdesk --template your_first_react_app
Enter fullscreen mode

Exit fullscreen mode

That is how the generated folder construction will seem like:

Image description

Let’s have a look contained in the App.js part for what is occurring contained in the React app. First the app is attempting to inject the Recent Shopper script into the top of the doc by the useEffect hook of React within the part. Then after the script is efficiently injected then it’s rendering the HelloUser part by passing the consumer occasion returned by the app.initialized promise. Since each Market app is rendered inside an IFrame, all of the communication between the app and mum or dad web page happens by this consumer object.

import React, { useState, useEffect } from 'react';
import './App.css';
import HelloUser from './elements/HelloUser'

const App = () => {

  const [loaded, setLoaded] = useState(false);
  const [child, setChild] = useState(<h3>App is loading</h3>)

  useEffect(() => {
    const script = doc.createElement('script');
    script.src = 'https://static.freshdev.io/fdk/2.0/property/fresh_client.js';
    script.addEventListener('load', () => setLoaded(true));
    script.defer = true;
    doc.head.appendChild(script);
  }, []);

  useEffect(() => {
    if (!loaded) return
    app.initialized().then((consumer) => {
      setChild((<HelloUser consumer={consumer} />))
    })
  }, [loaded])

  return (
    <div>
      {little one}
    </div>
  )
}

export default App;
Enter fullscreen mode

Exit fullscreen mode

And contained in the HelloUser part, we use this consumer occasion to fetch the contact particulars of the present help agent and show the agent’s identify within the part UI.

const HelloUser = (props) => {
  const [name, setName] = useState('')

  props.consumer.information.get('contact').then((information) => {
    setName(information.contact.identify)
  })


  return (
    <div>
      <img src={icon} className="App-logo" alt="emblem" />
      <img src={reactLogo} className="App-logo" alt="emblem" />
      <h3>Hello {identify},</h3>
      <p>Welcome to your first react app in Freshdesk</p>
    </div>
  )
}
Enter fullscreen mode

Exit fullscreen mode



Vue

You may construct Marektplace apps utilizing Vue.js through the use of the templates your_first_vue_app and your_first_vue3_app for the two.x and three.x variations of Vue.js respectively.

For Vue 2.x

fdk create --app-dir my-vue-mkp-app --products freshdesk --template your_first_vue_app
Enter fullscreen mode

Exit fullscreen mode

For Vue 3

fdk create --app-dir my-vue3-mkp-app --products freshdesk --template your_first_vue3_app
Enter fullscreen mode

Exit fullscreen mode

That is how the Vue app is structured from the pattern app template.

Image description

And within the App part, it’s the similar like our React app, we fetch the contact data contained in the mounted() lifecycle hook of Vue.js elements by calling the initialize technique which is definitely utilizing the consumer information strategies.

<template >
  <Sidebar :agentName="identify" />
</template>

<script>
import Sidebar from "./elements/Sidebar.vue";

export default {
  mounted() {
    this.initialize();
  },
  identify: "App",
  elements: {
    Sidebar,
  },
  information() {
    return {
      identify: "",
    };
  },
  strategies: {
    initialize() {
      app.initialized().then((consumer) => {
        consumer.information.get("contact").then(
          (information) => {
            this.identify = information.contact.identify;
          },
          (error) => {
            console.error("error", error);
          }
        );
      });
    },
  },
};
</script>

<model scoped>
</model>
Enter fullscreen mode

Exit fullscreen mode



Pattern apps

Yow will discover the Github repository hyperlinks of varied pattern apps constructed with numerous frameworks within the Sample Apps part of the Freshdesk Builders documentation portal.



References

Hope you loved the submit, and had some fundamental understanding on how one can use the fdk CLI to create Market apps utilizing React and Vue. Please be at liberty to succeed in out to the community for any queries and assist.

Add a Comment

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