Scribd
Upload
144 views8 pages

QCS Sprint 0

The document provides instructions for configuring SMS, push notification, and map APIs within OutSystems applications. It includes steps for creating accounts with Twilio, Pusher, Leaflet, and Google Maps and consuming the necessary APIs. It also outlines configuring SendGrid for email services. The steps involve installing connectors/libraries from the Forge, adding API keys and credentials, and using widgets and actions to integrate the features within OutSystems applications. Known issues are also documented for some of the map implementations.

Uploaded by

Aeron Joseph Santos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
144 views8 pages

QCS Sprint 0

The document provides instructions for configuring SMS, push notification, and map APIs within OutSystems applications. It includes steps for creating accounts with Twilio, Pusher, Leaflet, and Google Maps and consuming the necessary APIs. It also outlines configuring SendGrid for email services. The steps involve installing connectors/libraries from the Forge, adding API keys and credentials, and using widgets and actions to integrate the features within OutSystems applications. Known issues are also documented for some of the map implementations.

Uploaded by

Aeron Joseph Santos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

Twilio Connector (SMS)

1. Create a Twilio Account here.


2. After creating an account and verifying your email address go to Twilio console to retrieve your
Account SID and Auth Token.

Note: From here, you may also provision for a Twilio phone number and setup for testing purposes.
On the left menu pane, click Develop > Messaging > Get Set Up, then follow the instructions on the
screen.
3. In OutSystems, install the Twilio Connector app from the Forge.
4. After installation, configure the REST web service.
a. Go to Service Center and navigate to Factory > Modules > TwilioConnector
b. Inside the module go to Integrations > Consumed REST APIs > Twilio
c. Change the Basic Authentication configuration. Effective Username must be set to the Account
SID; Effective Password must be set to the Auth Token from the provisioned Twilio account.

5. Return to the module and update the AccountSid Site Property. Note: You may also do the same on
the TwilioConnectorDemo module for testing purposes.
6. Finally, go to your application, click Manage Dependencies, search for Twilio Connector, and select
the Actions you need to use.
Pusher (Push Notification)
1. Create a Pusher account here.
2. After creating an account, go to the Pusher dashboard and create a Channel.
3. Inside your Channel, click on App Keys on the left pane to access your app tokens/credentials.

4. In OutSystems, install the Reactive Pusher Client and Pusher.com APIs apps from the Forge.
5. After installation, go to your application, click Manage Dependencies, search for
PusherReactiveClient_Lib, and select Pusher_Listener widget and other actions you might need.
6. To use this component, simply drag the Pusher_Listener widget on your screen and fill it with the
necessary information.
Channel: Unique text identifier for channel subscription.
Event: Unique text identifier to bind event.
Key: App key from Pusher account.
Cluster: Pusher account cluster.
Pusher_Connected: Event handler triggered upon connection.
Pusher_MessageReceived: Event handler triggered when a message is received.
7. To test the component, use the following:
a. Debug console in Pusher

b. Trigger action in Pusher_Ext.


Leaflet (Map)
1. In OutSystems, install the LeafletJS – Reactive app from the Forge.
2. After installation, go to your application, click Manage Dependencies, search for LeafletJS, select
Leaflet widget and other actions you might need.
3. To use this component, simply drag the Leaflet widget on your screen and fill it with the necessary
information.
Notes:
- You must add an OnReady client action within the screen to setup marker icons using the AddIcon
client action.
- It is important to give a map a name to identify and interact with it.
- It is highly suggested to use MapMarker and MapCircle variables instead of the AddMarker and
AddCircle client actions since the latter are not saved and cannot be bound to events.

Known Issues:
a. For Reactive web apps, there is currently no way of refreshing the map other than refreshing the
entire screen.
b. Dragging a marker from one location to another unbinds pop-ups.
c. Circle radius cannot be updated currently. Hiding the previous circle and creating a new one is
the temporary workaround.
d. Intermittent error occurs when moving from one screen to another. This is likely caused when
the map is not yet rendered, or a previous map is not yet destroyed, and the app tries to
communicate/interact with it.
Google Maps (Map)
1. Create a Google account here.
2. After creating an account, go to Google cloud console and create a project.
a. From the header click on the “Select a project” dropdown and a pop-up should appear.

b. Click the “NEW PROJECT” button on the upper right corner of the pop-up.

c. Fill in the required information then click “CREATE”.

3. Once the project is created, from the Navigation Menu select API & Services > Enabled APIs &
Services. From here, select “+ ENABLE APIS AND SERVICES” below the header.

4. Search and enable the following APIs & Services:


a. Maps JavaScript API
b. Directions API
c. Maps Embed API

Note: During this step, Google might require you to enable billing for your current project, simply
click on the “Enable Billing Account” button that appears on a pop-up and setup your billing account.
If this doesn’t happen simply click the “ACTIVATE” button in the banner above the header to setup
your account.

Important: A billing account is MANDATORY to remove the “For development purposes only”
watermark on the rendered map and to enable Geo-related APIs.

5. After setting up the APIs and billing account, from the Navigation Menu select API & Services >
Credentials. From here, select “+ CREATE CREDENTIALS” > “API key”.

Note: Once the API key has been generated, you can click on its name to rename your key, and
setup application and API restrictions for that key.
6. After setting up your Google account, go to your application, click Manage Dependencies, search for
OutSystemsMaps, select Map, MarkerPopup, Circle and other widgets/actions you might need.
7. To use this component, simply drag the Map widget on your screen and fill it with the necessary
information. To add markers and/or circles, simply drag the corresponding components on the Map
widget.
Note: For sample implementation you may refer to this link or install the OutSystems Maps Sample
app from the Forge.
SendGrid (Email)
1. Create a SendGrid account here.
2. After creating an account and verifying your email address, setup and verify your single sender.
3. Once the single sender email has been verified, create a new API Key.
a. From the Navigation Menu select Settings then API Keys.

b. Click on the “Create API Key” on the upper right corner of the screen.

c. A pop-up should appear. Give your API Key a name and select Full Access.

d. Click “Create & View”.


e. Copy the API Key that appears on the following screen and click Done. Remember to save it as
there is no other way to recover that key once you proceed.
Note: From here, you may also opt to create an email template, From the Navigation Menu
select Design Library then click “Create Email Design”. After creating an email design, from the
Navigation Menu, select Email API > Dynamic Templates then click “Create a Dynamic
Template”. Use the template Id generated on the API request.
4. In OutSystems, either install the SendGrid Connector app from the forge or consume the SendGrid
REST APIs on your application.
5. To use this component, add your API Key to the header then fill the rest of the request as needed.

Sample Send Email POST Request (via Postman)


Endpoint:
https://api.sendgrid.com/v3/mail/send

Headers:
Authorization: Bearer SG.FsqrVQlsRDGyCPCWsgrR8Q.2fv-
yLlRdIGJx_xqRBOthgKwy0uJ6GM01l4tKM0AmV0

Body:
{

    "personalizations": [
        {
            "to": [
                {
                    "email": "[email protected]",
                    "name": "Aeron"
                }
            ],
            "subject": "Hello, World!"
        }
    ],
    "content": [
        {
            "type": "text/plain",
            "value": "Heya!"
        }
    ],
    "from": {
        "email": "[email protected]",
        "name": "Aeron"
    },
    "reply_to": {
        "email": "[email protected]",
        "name": "Aeron"
    }
}

You might also like