Creating Apps
Now, that you've understood the basic concepts of the Apps Engine and installed the CLI, you can create an extremely basic Rocket.Chat App and test it out to understand things. To get started, just recall the commands inside the Apps Engine CLI.
rc-apps is a command-line interface (CLI) utility that facilitates the app development process by providing commands to rapidly scaffold an Rocket.Chat application. Once you initiate rc-apps in your terminal, you will be presented with a list of commands that you can execute as needed. Here is a list of commands that Rocket.Chat Apps Engine supports: Command | Purpose |
|---|---|
autocomplete | Automatically displays installation instructions |
create | Facilitates a simplified way of creating an app |
deploy | Allows app deployment to the server |
generate | Adds boilerplate code for numerous functions |
help | Display help for rc-apps |
login | Provides the steps for logging into Rocket.Chat Cloud |
logout | Revokes the Rocket.Chat cloud credentials |
package | Packages the app for distribution |
submit | Submits an app to the marketplace for review |
watch | Monitors app changes and redeploys the modified app to the server |
Now let's build our initial application, Hello World!
Now, to create a new app, execute
rc-apps create, and a new folder containing a simple app that will only compile and be packaged in the dist folder will be created in the current working directory. You will be required to provide the following app details:
- App Name
- App Description
- Author’s Name
- Author’s Home Page
- Author’s Support Page
Troubleshooting tip
If you receive the error message 'TypeError: Cannot read properties of undefined [reading 'message']', do not be alarmed. You can disregard this and use the
cd test command to determine if a folder for your application was created in Visual Studio. - 1.Now, launch Visual Studio > select Open Folder from the sidebar on the left. You will be able to locate the application folder you provided in the previous step.
- 2.Select the app folder. Once a folder has been uploaded, its contents will be displayed in the sidebar.
- 3.Choose the file with the .ts extension. This is where all application coding happens.
The app manifest file,
app.json, contains basic details about the app. Let's examine the
app.json file for our HelloWorld application to comprehend its structure.{
"id": "28d63257-94c3-40e8-83eb-9581244598b6",
"version": "0.0.1",
"requiredApiVersion": "^1.4.0",
"iconFile": "icon.png",
"author": {
"name": "Pavithra",
"homepage": "rocketchat.com",
"support": "[email protected]"
},
"name": "Hello World",
"nameSlug": "hello-world",
"classFile": "HelloWorldApp.ts",
"description": "A basic app that prints Hello World!"
}
A Rocket.Chat app is essentially a TypeScript project that contains a main file with a class extending the main
App class from the Apps Engine. The identity of this file can be found in the classFile property of your app.json file. The HelloWorld.ts TypeScript file should be located. Open the file HelloWorld.ts.export class HelloWorldApp extends App {
constructor(info: IAppInfo, logger: ILogger, accessors: IAppAccessors) {
super(info, logger, accessors);
}
The first thing you might observe is that the class name and filename are identical. This is intentional; either use the same name for the class and the file in order for the application to compile successfully, or export the primary app class by default as shown below.
export default class HelloWorldApp extends App {
constructor(info: IAppInfo, logger: ILogger, accessors: IAppAccessors) {
super(info, logger, accessors);
}
For a functioning app, you must define a constructor for access to a large number of parent properties. The constructor accepts three arguments, which are:
- 1.An
IAppInfoobject: This object contains fundamental information about your application, such as its name, version, description, etc. It is private to theAppclass, but its properties are accessible through multiple get methods. - 2.An
ILoggerobject: This object is the interface for logging. ThegetLogger()method allows access to this object from within a child class. - 3.An
IAppAccessorsobject: This object contains all app accessors. This can be accessed via thegetAccessors()method in the child class.
As an illustration, let's have the application record "Hello World" in the Rocket.Chat administration interface.
To log data, you must first have access to the logger, or more precisely, an object of type
ILogger. The parent class logs data to the administration interface using an ILogger object. We only require access to this object. Unfortunately, since the logger object is private to the App class, this cannot be used to access it directly.This can easily be remedied by using the
getLogger method provided by the App class. Simply store the logger as a separate object, and it can be reused whenever necessary.export class HelloWorldApp extends App {
private readonly appLogger: ILogger
constructor(info: IAppInfo, logger: ILogger, accessors: IAppAccessors) {
super(info, logger, accessors)
this.appLogger = this.getLogger()
}
}
We have just stored the accessor for the log file in the
appLogger variable. Now, we can record anything with it. Add the line shown below to the constructor.this.appLogger.debug('Hello, World!')
To deploy the app, run:
rc-apps deploy --url <server_url> -u <user> -p <pwd>
The
<server_url> parameter is the URL of your Rocket.Chat server. Replace the placeholders with the URL, username, and password for the server. After executing this command, your application will begin to be deployed to the server.
Packaging your app
Alternatively, you can execute the
rc-apps package, which will provide you with a compressed zip file of your app that you can upload as a private app to your Rocket.Chat server. To test your app, you need a Rocket.Chat server running locally on your machine and the credentials of an administrator user.
To run Rocket.Chat in develop mode, refer to the document Installing Rocket.Chat for Developing. Enable Apps development mode by navigating to Administration > General > Apps, and clicking the
True radio button next to Enable development mode.The function of the application in this example was to log Hello World to the console. In order to test the app's functionality, we must examine the app logs. Follow the steps below to examine the logs and test the application:
- 1.Login to your Rocket.Chat workspace as an admin.
- 2.Navigate to the Administration Panel > under Apps > select Marketplace > search for HelloWorld app.
- 3.Click on the 3-dot button on the right-hand side of the app > from the menu, click on Logs.
- 4.Scroll down until you see ‘constructor’. Click on it, and you will be able to see the message ‘Hello, World!’ logged in the console.
Congrats, you just created your first app — a simple Hello World app!
Last modified 10d ago