ImageCDNMobile

Stable Version 1.0.7 (OutSystems 11)
Published on 19 Nov (7 days ago) by 
Created on 5 Aug
Documentation

Welcome to the ImageCDN documentation

In this documentation you'll find all the information needed to start using this component in your applications.

Introduction

While developing OutSystems applications we sometimes face the challenge of having to show images that are not inside the application, such as dynamic images that are stored in a database. There are other options to store images and one of them is to store them in a CDN. A CDN stands for Content Delivery Network and it’s not only a file storage system, but it’s also a geographically distributed network of proxy servers and their data centers with the goal to provide high availability and performance by distributing the service spatially relative to end-users. In this document, we will talk about the component that the OutSystems Experts team created to handle CDN images, it’s advantages, and how to use it.

Vision

Offer a component that allows using a CDN service, manages cache, is thought for offline, and supports multiple settings per image.

Choosing the CDN service

There are multiple CDN services available, a quick google search demonstrates that. We chose Sirv for because it has some unique and useful features, such as: 

  • It has a free plan that allows to store up to 500mb

  • It has an API to upload images and get the file information, among others

  • Allows requesting an image with multiple settings, such as a specific size, rotation, file format, quality, effects, and many other features.

Features

The component makes available a block with some input parameters. The features are:

  • Automatic cache mechanism. It will only request a new image to Sirv if not yet in the cache. 

  • Offline ready. It’ll show the cached image if no internet connection and can be configured to get images only when using a Wifi connection

  • Configurable timeout for slow connections. If the time finishes the request will be canceled and the old image will be shown.

  • Image settings to be used when requesting the image to Sirv, such as rotation, size, crop, etc.

Advantages

Using this component has many advantages when compared with a traditional approach. 

  1. Because it uses a CDN service the content is distributed globally and served spatially relative to end-users, meaning that it’ll increase availability and speed.

  2. The block developed does all the logic needed to show the right image to the end-user, depending on the network conditions for example.

  3. For applications with offline support, there’s no need to worry about the images, making the offline synchronization process lighter and simpler. 

  4. Because we use Sirv we have the ability to have multiple images, for multiple devices, with just one original image. That means that from one image stored in Sirv we can request as many images as we want, for different resolutions or with different effects. Check the .. section to know more

Image settings

Using Sirv as the CDN service allows us to get multiple images with different mutations, such as: 

  • Size (Width/Height, Crop)

  • Canvas opacity

  • Canvas color

  • Canvas border

  • Rotation

  • Quality

  • Format (GIF, PNG, JPG, WebP, Optimal or Original)

  • Light (Brightness/Contrast/Exposure/Shadows/Hightlights)

  • Color (Hue/Saturation/Lightness)

Using the Block

Using this component it’s easy. Just follow the following steps:

  1. Download the component from the OutSystems Forge. 

  2. Add the SirvImage block to your application and screen

  3. Fill all input properties of the block: 

    1. Url - Sirv image URL - example: https://itratenc.sirv.com/Images/Apple%20Watch%20white.jpg

    2. ServerId - Used to make the caching mechanism work. If the image Url comes from the database, set the Id as the Id of that record. If it doesn’t, set as any Id. 

    3. Category - Used to make the caching mechanism work. If the image Url comes from the database, set the Category as the Database Entity name. If it doesn’t, set as any name.

    4. Timeout -  Timeout before the request is ended. Defaults to 5000ms but can be changed to any value. 

    5. WifiOnly - Sets if only wifi should be used to download images.

    6. ImageSettings - The settings that will be used when retrieving the image. Check the Image Settings topic to know more.

Using the API

The API component allows sending images from an OutSystems application to Sirv. To use it, follow these steps:

  1. Download the ImageCDNAPI from forge

  2. Go to the Settings in your Sirv account and under the tab API and S3/FTP create a new API Client (https://my.sirv.com/#/account/settings/api)

  3. Set the ClientId and ClientSecret site properties in the SirvAPI module using the information from the Sirv Settings page.

  4. Use the Sirv_Upload server action to upload the file, passing the file name and the binary as input parameters.


Any questions please use the forum. 

As always, if you like it, rate it! :D


Support Options
This component is not supported by OutSystems. You may use the discussion forums to leave suggestions or obtain best-effort support from the community, including from Experts who created this component.
Dependencies
See all 2 dependencies