Share My Creation [Project Template] [Web] API Server

aeric · Aug 26, 2021

Version: 1.16
Description: Create Web API Server with CRUD functionalities

Updates:
Web API Server 2.0 is available. Check https://www.b4x.com/android/forum/threads/project-template-web-api-server-2.143310/

Template:

Web API Server (1.16).b4xtemplate

Depends on following libraries:

ByteConverter
JavaObject
jServer
Json
jSQL

Features:

CRUD based - RESTful Web API (GET, POST, PUT, DELETE)
Front-end (HTML, CSS, JS, Bootstrap)
Support MySQL and SQLite database (Can be modified for MS SQL or SQL Express)
Separate SQL queries file (queries-mysql.ini and queries-sqlite.ini)
Sample database auto-generated for first run (Category and Product tables with dummy data)
Versioning (using ROOT_PATH in config.ini, set as "/" if you don't want versioning)
Auto generated documentation with API test.

How to use:

Copy the "Web API Server (1.16).b4xtemplate" file into B4J Additional Libraries folder.
Open B4J and create a new project with "Web API Server" template.
Give your project any name you like, for e.g. WebAPI

Run the project in Debug mode.
You will see something like this in the Logs:

B4X:

Web API Server (version = 1.16) is running on port 19800
Open the following URL from your web browser
http://127.0.0.1:19800/v1/

Copy the URL showed in Logs and open it using your web browser.
To connect to MySQL server, go to Objects folder and open "config.ini".
Comment the SQLite section and uncomment the MySQL section.
Edit the root password at line #45 (second last line). Save the file.
In B4J project, comment the line
'#AdditionalJar: sqlite-jdbc-3.39.3.0
and uncomment the line
#AdditionalJar: mysql-connector-java-8.0.30.
Make sure you are using the correct version of connector.
B4X:
```
#Region AdditionalJar
' MySQL connector
#AdditionalJar: mysql-connector-java-8.0.30
' SQLite connector
'#AdditionalJar: sqlite-jdbc-3.39.3.0
#End Region
```
Follow step #3 above.

Client Template:

Web API Client (1.05).b4xtemplate

. . . .

How to use:

Copy the "Web API Client (1.05).b4xtemplate" file into B4X Additional Libraries folder.
Open B4A (B4J or B4i) and create a new project with "Web API Client (1.05)" template.

Edit the URL with your Web API Server host or IP

B4X:

Private URL As String = "http://192.168.50.42:17178/v1/" ' Change to your Web API Server URL

Run in debug.

Video:

Comments: I try to make this template as compact as possible (remove user table and email function) but it is still big. If you don't like some features, just remove them.

12/04/2023
- Web API Server - v1.16
- Similar to Web API Template 2.0, it is now less confusing by using #Desc and #Path for documentation
- Web API Client - v1.0.5 (compatible with Web API Server v1.16)

03/10/2022
- Web API Server - v1.15
- JS: Fixed bug point to wrong id for Category dropdown in Edit dialog
- JS: Remove comma in thousand for price textbox in Edit dialog
- Add a Home button in Category page

01/10/2022
- Web API Server - v1.14
- Manage Category in new page
- Dynamic populate Category dropdown in add/edit product dialog
- Improve JS scripts
- SQLite version point to sqlite-jdbc-3.39.3.0

27/08/2022
- Web API Client - v1.0.4 (compatible with Web API Server v1.13)

25/08/2022
- Web API Server - v1.13
- Home page with Add, Edit and Delete Product (using Bootstrap modal and jQuery Validate)
- Help or API documentation page improvements
- Many variables and SQL commands are renamed!
- SQLite version point to sqlite-jdbc-3.39.2.0
- Separate Category and Product handlers
- FindHandler added for more search endpoints
- Endpoints structure changed!
- Warning: This version is not compatible with Web API Client v1.0.3 and below

28/05/2022
- Web API - v1.12 (fixed a bug in HelpHandler.bas when reading commented line)
- Updated to use jServer v4.0
- Web API Client - v1.0.3 (Converted to B4XTemplate)

26/01/2022
- Create Publish.zip using #CustomBuildAction
- Create Publish.zip using Comment Link

19/10/2021 - v1.11
- Better use of Connection Pool for MySQL (do not close pool)
- Change DataUtils module to DataConnector class
- Clean up some redundant codes

08/10/2021
- WebAPI Client - v1.02
- - Some bugs fix and UI improvements

24/9/2021 - v1.10
- Auto generated documentation/help file based on handler classes (Click on the Question mark icon on top right corner to access the help file)

06/09/2021
- WebAPI Client - v1.01
- - Some bugs fix and UI improvements

04/09/2021 - v1.09
- Fixed PutProductByCategoryAndId to update Product as different Category.
- WebAPI Client (B4X) - v1.00

02/09/2021 - v1.08
- Added ConfigureCORS for ajax request.

01/09/2021 - v1.07
- Changes in Utility module (ReturnSuccess and ReturnSuccess2) require Status Code.
- Changes in ProductHandler (PostCategory and PostProductByCategory) return new record as result with Status Code 201.

27/08/2021 - v1.06
- Support for SQLite database

About auto generated help file (version 1.10+)
https://www.b4x.com/android/forum/threads/web-api-template.133764/post-851114

swamisantosh · Aug 28, 2021

aeric said:
I am not sure how deleting the sqlite file would solve the issue. The error was handled by try-catch and you can find the exact problem (LastException) by reading the logs while debugging. As I stated above, I have done a test to send POST request using the payload with invalid comma sign which caused the RequestData read invalid data. Maybe I should have validated the Map initialized from the RequestData. In you case, I am not sure how you produce the error. Since you already able to resolved the issue then it is good and I assume everything is good to go.

Until we found a new bug, I hope the current version is a good template to start your own project. I encourage anyone to modify this template and come out an improved version. For myself, I would add back the user token, API key and SMTP features for my own use. I am not sharing it because a template should be minimalist and serve as a starting point for own customization.

Thanks everyone for the likes and testing this template.

Don’t worry, I will keep answering your questions if you have one about this template.

We would be thankful , if you can keep share future development Web API Template . just for purpose of learning only

aeric · Aug 29, 2021

swamisantosh said:
We would be thankful , if you can keep share future development Web API Template . just for purpose of learning only

Sure, I am learning too.

peacemaker · Aug 30, 2021

Mobile operators are often blocking many ports. And only 80 or 443 (HTTPS) are for sure available.
So, is it OK for such applications ?

aeric · Aug 30, 2021

peacemaker said:
Mobile operators are often blocking many ports. And only 80 or 443 (HTTPS) are for sure available.
So, is it OK for such applications ?

I don't have problem with my (VPS) hosting. My apps are able to connect to it.
If any hosting provider block your ports then you may need to contact them to open the ports for you.
Not sure about Mobile operators. My mobile ISP doesn't block.

peacemaker · Aug 30, 2021

aeric said:
hosting

Not hosting. Mobile operators of users who try to use the server from their mobile phones (clients), but the port like 59000 is locked. And cannot be unlocked for sure.

aeric · Aug 30, 2021

peacemaker said:
Not hosting. Mobile operators of users who try to use the server from their mobile phones (clients), but the port like 59000 is locked. And cannot be unlocked for sure.

Not sure about the ISP in your country. As long as the port number doesn't exceed 65,535 I think it should be fine. If we use smaller port number, it is likely would conflict with some reserved ports. If I am hosting multiple apps on the same server, then it is not ideal to only host the apps on the same ports (80 and 443). If this is the case then I think you have no choice but to use different domain or create subdomain. I am not expert on this topic and this is what I understand.

peacemaker · Aug 30, 2021

aeric said:
to use different domain or create subdomain

Ah, clear, so, for 80 port we have to host the app on separate subdomain to solve the trouble with mobile operator ports.
Clear, thanks.

aeric · Aug 30, 2021

peacemaker said:
Ah, clear, so, for 80 port we have to host the app on separate subdomain to solve the trouble with mobile operator ports.
Clear, thanks.

I think so. If you are hosting B4J server apps, I guess you have full control on the port numbers of the firewall. In my case, my VPS is running on Ubuntu Linux and I can open all ports. This is similar on Windows server where you can control which ports to allowed or which IP addresses to whitelist. Unless this settings are blocked by the hosting provider by default. On the Mobile operator side, you may need to find out. If ports 80 and 443 are the only allowed port numbers, then I guess using different subdomain may solve the issue for hosting multiple apps.

Roberto P. · Sep 1, 2021

HI Aeric,
thank for your work.

awesome template and starting point for API development with B4J.

I believe this needs to be natively enhanced and integrated into B4J. We have now entered the era of APIs and the Native Cloud.

Why use Node.js or Spring Boot when we have B4J available which is simpler, lighter and has a lot of libraries?

Regards

aeric · Sep 1, 2021

v1.07
- Changes in Utility module (ReturnSuccess and ReturnSuccess2) require Status Code.
- Changes in ProductHandler (PostCategory and PostProductByCategory) return new record as result with Status Code 201.

aeric · Sep 1, 2021

v1.08
- Added ConfigureCORS for ajax request

aeric · Sep 2, 2021

Live demo: https://api.puterise.com:19900

Edit: This demo is using SQLite as backend database.

aeric · Sep 2, 2021

LucaMs said:
I didn't understand

I suppose I have provided sufficient information about this project (or am I posting too much that anyone would not interested to read further) in the first post.
The history or background of how this project was born is from the following post:
[Wish] B4J as a Powerful Web API Development Tool

Actually, I never thought to create it myself.

ilan said:
btw, where can i download your API template above?

I have no idea. I am not sure I will create it.

But then I created it.

Erel said:
Note that anyone can create new project templates.

I consider this project as a "proof of concept". However, if I continue to update it, one day it might become a tool for building app aiming for production. I have seen something like Django and Yii framework to quickly scaffold a project.

Now, my question is:
Do you think I should create a client app (using B4A, B4i or B4J and even html+ajax or other languages such as PHP, ASP.NET, VB.NET) to consume the API of this template? (to further explain what this template could be use for)

icakinser · Sep 2, 2021

A simple example of consuming the API would be AWESOME! GREAT JOB ON THIS TEMPLATE!!

aeric · Sep 2, 2021

icakinser said:
A simple example of consuming the API would be AWESOME! GREAT JOB ON THIS TEMPLATE!!

I just uploaded a sample html page (ajax-test.zip) in the first post. By the way, if you have created a project with this template, the search function at the bottom also demonstrate how to consume the API using AJAX. I will create some B4X client apps if I am free later.

aeric · Sep 2, 2021

aeric said:
I just uploaded a sample html page (ajax-test.zip) in the first post.

I created this html test for checking the CORS filter I added in version 1.08.

To test CORS is working or not, restrict the B4J Web API app with the following (line #108):

B4X:

ConfigureCORS(ROOT_PATH & "category/*", "http://127.0.0.1:19800", "", "") ' test.html

Then edit the url in html file:

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>CORS TEST</title>
    <script type="text/javascript" src="jquery.min.js">
    </script>
</head>
<body>
    <div>
        <p class="id">ID: </p>
        <p class="name">Name: </p>
        <div id="data"></div>
    </div>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function()
    {
        $.ajax(
        {
            url: "http://127.0.0.1:19800/v1/category/2/product/"
        }).then(function(data, status, jqxhr)
        {
            $('.id').append(data.r[0].id);
            $('.name').append(data.r[0].product_name);
            $.each(data.r, function()
            {
                $('#data').append('<p>');
                $.each(this, function(key, value)
                {
                    $('#data').append(key +': '+ value+'<br>');
                });
                $('#data').append('</p>');
            });
            console.log(jqxhr);
        });
    });
</script>

Try open the HTML locally (just double-click), put it inside Laragon (or XAMP server) running on different port number or upload to your hosting.
Right-click the browser and Inspect (Ctrl+Shift+I). Click Console tab, you will see:

Access to XMLHttpRequest at 'http://127.0.0.1:19800/v1/category/2/product/' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Failed to load resource: net::ERR_FAILED

p/s: I am not expert on this topic. I guess I am doing it correctly.

yaqoob · Sep 3, 2021

Hi aeric,

Thank you for share your creation. I am getting the error ("Utility - 31: Unknown type: json<br />Are you missing a library reference?" see file error1. Even though the library Json is selected and B4J is the latest version (9.10) see file error2. I noticed you are using JSON 1.2, but what is available as the internal library is 1.10. I did what you suggested in post 4 to update the JSON library, but still, I am getting the same error.

Any suggestions?

aeric · Sep 3, 2021

yaqoob said:
Hi aeric,

Thank you for share your creation. I am getting the error ("Utility - 31: Unknown type: json<br />Are you missing a library reference?" see file error1. Even though the library Json is selected and B4J is the latest version (9.10) see file error2. I noticed you are using JSON 1.2, but what is available as the internal library is 1.10.

Any suggestions?

You need the latest version of JSON library (version 1.20)

Convert collections to json and vice versa

The JSON libraries, which are internal libraries, were updated. The new version is 1.20. There is a new JSON type which is used to convert maps or lists to json strings and vice versa, using the new As keyword. The idea is that you have a collection or string, you direct the compiler to treat...

www.b4x.com

yaqoob · Sep 3, 2021

Thank you for your feedback. It is working now. The mistake I have done copied the JSON library file to the additional library. Once I moved them to B4J internal library it worked

luke2012 · Sep 3, 2021

WOW. Outstanding work
This is a REST API Server implementation ?
This web api could be called by Angular apps using REST API Client ?

Share My Creation [Project Template] [Web] API Server

Attachments

Member

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Well-Known Member

Expert

Expert

Expert

Expert

Member

Expert

Expert

Active Member

Attachments

Expert

Active Member

Well-Known Member

Similar Threads

Privacy & Transparency

Privacy & Transparency