Hey @leo, a short update here after I did backend hiatus to work on other things, anyways. I finally configured the fault as to why the API URL I provided did not work. So I will share my findings for enthusiasts in the future that might utilize these two wonderful platforms & how I managed to finally utilize FlutterFlow x RoboFlow model deployment. You can mark this as Solved now, so here it is.
After re-reading the documentation for deployment in various language (not the sample deployment code on the deployment page of your model) for some reason that API URL did not work. Anyways, I found out that on the Kotlin, there was a
modelEndPoint variable in the sample so I simply created a new
modelEndPoint variable in the API call so that the POST call recognizes all the variables, same as before I still have my
api_key although in the image below it is simply hidden, then of course we have our
image variable which will have to be in
String (more on this later) for us to put our link of the media to be inferred & voila.
You will get a response 500 error. This is because the link that I used is from firebase which most of my media is stored which is not URL Encoded. So, this is good meaning that the API finally connects the request but the image variable is not recognized.
To combat this error we simply create a short custom function that will take the
uploadedImageURL in FlutterFlow & URL Encode it, return it as a
String so that the POST request recognizes the image. You can follow my configuration in image below.
Here is the Function. To save yourself some time just put it inside the boilerplate code otherwise Flutterflow will just reconfigure it back again.
On the action tab in your UI will have to look somewhat similar to the one below. (Note that you can upload image locally & send the bytes as the image for the API Call but as of the making of this short tutorial, FlutterFlow has a bug that does not allow that).
You can work around it & upload directly to Firebase or Supabase, then URL encode the
ImagePath & return it as a string that is readable by the POST request.
- Create an API Call & set additional variables like so.
Add the custom function for the
UploadedFileURL as the value for the custom function in the
If done correctly the API call should look something like this. Crisp clean & no errors
To test it out you can put it your app’s UI like I did here.
You can also configure your API call to select the specific JSON Path from the body that you want so that you can call it in your UI later. Simply select the variable of the text, then select Action Outputs select the action output of your API call, then from there JSON Body, select JSON Path, & the Path name of the JSON Response that you want.
OK, that wraps everything up as to how I used both the Platforms to work together for my project. Thanks again @leo you guys have such a User-Friendly platform keep up the good work, and may this short Tutorial serve as a guide to any enthusiast that may stumble upon this tutorial & the same dilemma that I had. Have great day!