B4J Tutorial [Web] Web API Tutorial - Getting Started

Note:
This tutorial is based on Web API Server v2.02 and is deprecated. Refer to Using MinimaList Controller and Code Snippets

Spoiler: Deprecated

Introduction:

This tutorial is based on Web API Template 2.

How to install:

1. Download the template and copy it to B4J Additional Library folder.

2. Open B4J and you will see the template when you select menu File->New.

Getting Started

1. To quick start, just run the project in debug mode.
2. Browse to http://127.0.0.1:8080/web/help to test the API. You can also click on "Open API Documentation" button on home page.
3. Click the first example [GET] /web/api/v2/data under DATA controller to expand the section.
4. Click the green "Submit" buton to execute a call to the API.
5. The Response texbox should display an empty list.
6. You can proceed with other API examples.

Basic Configuration

The API server requires the following configuration in Main module and must be in the following order.

ConfigurePaths
ConfigureElements
ConfigureHandlers
ConfigureControllers

Other configurations are optional and order are not important.

ConfigurePaths
First thing to configure
This setting is determined by the values in Config.ini (inside Objects folder).
For starting, just let the default values.
You can then edit the Config.ini file using any Text Editor.

ConfigureElements
Configure this after ConfigurePaths
This setting depends automatically by ConfigurePaths above.
Nothing is needed to be configured here.

ConfigureHandlers
Configure this after ConfigureElements
By default, ApiHandler is the only required handler.
If WebHandler is enabled (uncommented), then we can use it to route non-API URL to show web front-end such as home page.
If HelpHandler is enabled (by default), API documentation is available for debugging the API without client app or Postman.
If HelpHandler is disabled (commented) then API documentation is not available for debugging. This handler is not required in release mode.

ConfigureControllers
Configure this after ConfigureHandlers
If HelpHandler is used, this configuration includes which controller class to display on the API documentation page.
By default, only DataController is added.
When you have more controllers, you can add them here.
You can hide some APIs using #Hide keyword

Note: Please do not post your question in this thread. Start a new question and tag with [Web API 2] in the title.

 

[aeric]

Example 1
Open PDF file in new tab or download file as attachment using form post.

Public Sub GetPDF
    ' #Desc = Open PDF file
    ' #Plural = Sample
    Dim SU As StringUtils
    File.WriteBytes(File.DirTemp, "temp.pdf", SU.DecodeBase64(FileBase64))   
    If File.Exists(File.DirTemp, "temp.pdf") Then
        Response.ContentType = "application/pdf"
        Response.SetHeader("Content-Disposition", "inline;filename=temp.pdf")
        'Response.SetHeader("Content-Disposition", "attachment;filename=temp.pdf")
        Dim in As InputStream = File.OpenInput(File.DirTemp, "temp.pdf")
        File.Copy2(in, Response.OutputStream)
        Response.OutputStream.Close
    Else
        Utility.ReturnHtmlPageNotFound(Response)
    End If
End Sub

p/s: At the time of writing, Web API Template v2.02 is not yet released. So this example is a pre-released version.

 

[aeric]

Example 2
Vue 3 CRUD (with help from chatGPT and perplexity)

In AppStart,
ServerConfiguration.EnableCORS = True
ServerConfiguration.SimpleResponse.Enable = False

Make sure the following is correct in ConfigureCORS of ServerConfiguration:

Paths.Add(CreateMap("path": ROOT_PATH & API_PATH & "v2/data/*", "origins": "http://localhost, http://127.0.0.1:3000", "methods": "POST,PUT,DELETE", "headers": "*")) ' vue.js prod/dev app

Run as Development:

Run vue project from source:
1. Unzip the webapi2-vue.zip

cd webapi2-vue

2. Install npm modules

npm install

3. Run development server

npm run dev -- --port 3000

Run as Production:
You can also extract the vue.zip to xamp or laragon root and run using a web server.
Take note of the port number (80) or if you have set a different port to match the CORS settings.

vue.zip (compiled release)
webapi2-vue.zip (vue source)
MinimaListApi.zip (B4J server)

 

[aeric]

Example 2 will get error if run with Web API Template v2.03.
Solution is uncomment (enable) ConfigureResponse in Main module (ConfigureServer sub) to set SimpleResponse = True.

 

[aeric]

Update: attach latest MinimaListApi.zip project works with Example 2: Vue 3 CRUD in post #3