B4J Tutorial [ABMaterial] Using Cloudinary as CDN for your assets (v4.35)

Discussion in 'B4J Tutorials' started by alwaysbusy, Sep 10, 2018.

  1. alwaysbusy

    alwaysbusy Expert Licensed User

    Using a CDN (Content Delivery Network) for your WebApp can be very beneficial:

    The Benefits of using a CDN:
    • Different domains. Browsers limit the number of concurrent connections (file downloads) to a single domain. ...
    • Files may be pre-cached. ...
    • High-capacity infrastructures. ... (1200 world-wide)
    • Distributed data centers. ...
    • Built-in version control. ...
    • Usage analytics. ...
    • Boosts performance and saves money.
    ABM can already use a CDN for its own framework using the ABM.ActivateUseCDN("DONATOR_KEY", "https://cdn.jsdelivr.net/gh/RealAlwaysbusy/ABMaterial@v4.35/"), but from version 4.35 on, ABM will support Cloudinary as a build-in CDN system for your own WebApps.

    Cloudinary has a great free plan which can cover a great deal of the webapps you make without any additional cost:
    • Total images and videos: 300,000
    • Managed storage: 10 GB
    • Monthly net viewing bandwidth: 20 GB
    In ABM, it is (can be) used for two different things:

    1. Automatic upload/update of the generated CSS/JS files (the ones you find next to each index.html).
    2. Your own assets, like images, videos or outer 'RAW' files (xls, doc, ...)

    Creating a free account on Cloudinary is pretty straight forward. You make a login and give your 'cloud' a name. You will then be able to get your API_KEY and API_SECRET from the management console: https://cloudinary.com/console:

    [​IMG]

    1. Automatic upload/update when starting the .jar file.

    Activate it in the ABMApplication class:

    Code:
    ' just some clear consts to explain the parameters
    Dim UPLOAD_GENERATED_JSCSS As Boolean = True
    Dim DO_NOT_UPLOAD_GENERATED_JSCSS As Boolean = False
    Dim SHOW_DEBUG As Boolean = True
    Dim DO_NOT_SHOW_DEBUG As Boolean = False
    Dim CLEAR As Boolean = True
    Dim DO_NOT_CLEAR As Boolean = False
     
    #If RELEASE  
           ABM.ActivateCloudinary("DONATOR_KEY","CLOUD_NAME", "API_KEY", "API_SECRET",UPLOAD_GENERATED_JSCSS, "APPNAME", DO_NOT_SHOW_DEBUG)
    #else
           ABM.ActivateCloudinary("DONATOR_KEY","CLOUD_NAME", "API_KEY", "API_SECRET",DO_NOT_UPLOAD_GENERATED_JSCSS, "APPNAME", SHOW_DEBUG)
    #end if
    ' this is for 2, your own assets
    ABM.CloudinaryLoadImages(PREFIX, CLEAR)
    ABM.CloudinaryLoadAudioVideos(PREFIX, DO_NOT_CLEAR)
    ABM.CloudinaryLoadRawFiles(PREFIX, DO_NOT_CLEAR)
    What will this code do?
    It will create a folder structure in you Cloudinary cloud:
    Code:
    APPNAME/css
    APPNAME/js
    Every time you start your jar, both these folders will be emptied (so do not put anything else in it!) and the most recent generated .js/.css files will be uploaded. Note: depending on the size of your app, this can take quite some time. e.g. for the demo app it takes about 3 minutes.

    There is nothing more you have to do, ABM will have changed all the calls in the HTML from your local drive to the CDN.

    2. Your own Assests:

    As you can see in (1), we pre-load all the urls of the images/videos and other files. That way it is pretty simple to use the e.g. if we want to use an image using the ABM.CloudinaryGet() command:

    Code:
    Dim img4 As ABMImage
    img4.Initialize(
    page"img4", ABM.CloudinaryGet("demo/images/sample-1"), 1)
    page.Cell(6,1).AddComponent(img4)
    As parameter it takes the 'publicId' of the asset. In my case my APPNAME was demo, I created a folder images in it in the Cloudinary console and uploaded a file called sample-1.jpg so the public id becomes:

    demo/images/sample-1

    Note: I've noticed when uploading images via the cloudinary console, the public id cuts of the file extension.

    The result of the ABM.CloudinaryGet command will be something like:

    Code:
    https://res.cloudinary.com/abmaterial/image/upload/v1536580044/demo/images/sample-1.jpg
    It is very easy to upload and organize you assets through the Cloudinary console app:

    [​IMG]

    but sometimes you will want to upload it through B4X code.

    So the following API methods do exist:

    Code:
    ' using these 3 methods will automatically add them the the internal Cloudinary map
    ' so you can use them with the ABM.CloudinaryGet() method without reloading.
    ' The next time you restart your .jar, they will also be loaded.
    ABM.CloudinaryUploadImage("publicId", fullFilePath)
    ABM.CloudinaryUploadVideo(
    "publicId", fullFilePath)
    ABM.CloudinaryUploadRawFile(
    "publicId", fullFilePath)

    ABM.CloudinaryDeleteImage(
    "publicId")
    ABM.CloudinaryDeleteVideo(
    "publicId")
    ABM.CloudinaryDeleteRawFile(
    "publicId")

    ABM.CloudinaryDeleteAllImagesWithPrefix(
    "prefix")
    ABM.CloudinaryDeleteAllVideosWithPrefix(
    "prefix")
    ABM.CloudinaryDeleteAllRawFilesWithPrefix(
    "prefix")
    For the last 3 methods, you use a 'prefix' to delete files in bulk:

    e.g. if I want to delete all images from my images folder, I would do:

    Code:
    ABM.CloudinaryDeleteAllImagesWithPrefix("demo/images/")
    Cloudinary has a wide range of API methods (e.g. for image manipulation etc), and maybe I will expand the B4X API to support it too, but for the moment using it as a CDN only, it suffices.

    Note that this is a Donator only feature. ABM 4.35 will be available in a couple of weeks.

    This concludes the tutorial.

    Alwaysbusy
     
    Last edited: Sep 12, 2018
    Harris, korshkov, Erel and 5 others like this.
  2. Harris

    Harris Well-Known Member Licensed User

    Sweet... Now I only have to update one resource and have many servers point to it...
    Often, I forget this very important point and wonder why - from one server to the next - something did not show / behave correctly...

    CDN - Also the abbreviation for Canada for some things... - little wonder it is so intelligent and useful. It is a good thing the initialism is not "USA" - for obvious reasons in today's climate...
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice