Flutter 2.0 meets Nimbella

I'm a developer and a Flutter fun and, some weeks ago, I was waiting for March 3rd 2021 Flutter Engage.

Once known that Fultter 2.0 is "web stable" I began to think: "how can I test Flutter capabilities and its learning curve for the WEB?"

The idea

In that days I was studying a very nice serverless platform as Nimbella, looking at some Youtube videos. "Ok!" I said, "it's time to begin with both ones for a side PoC project"; thus I decided to implement a simple Todo List web application using Flutter for frontend and Nimbella serverless actions for backend. Studying Nimbella I discovered that it is possible to use it even as frontend server, where deploy something as html/js stuff but ... I decided to don't use this feature and use that PoC even to evaluate the GitHub pages.

Plan and Result

Ok, the plan is clear:

plan=Plan()
plan.phase[0]="Get a Nimbella free subscription"
plan.phase[1]="Develop and test a set of Python serverless actions"\
"(simple REST/CRUD services) for backend (Using Redis "\
"Nimbella connector as NoSql DB)"
plan.phase[2]=" Upgrade my Futter 1.22 platform to 2.0 and switch to web"\ 
" channel"
plan.phase[3]="Implement an MVP todo list web app with Flutter,"\
"using some widget and know-how got in another side project"\
" and connect to Nimbella services with Dio dart library"
plan.phase[4]="Deploy flutter build files to GitHub pages "
plan.run()

Simple right?
After 10 hours, spread over a whole week end, this is the result:

As you can see nothing exceptional :-) there could be a lot of improvements (adding a loading wheel, improve backend data api, improve error handling etc etc) but it works and It was useful to learn and experiment new frameworks and services. This web app has an entry page where you choose the username of the owner of the todo list; once entered there is a UI where with simple CRUD operations you can manage all todo items. It's worth noting that this webapp can be easily transformed to a PWA just adding it to Home screen from Chrome menu (on Android).

Phase 0 (Get a Nimbella free subscription)

It was very easy, at this link you can choose to start with a Nimbella free "Starter tier" service subscription that lets you create up to 25 functions; it's enough for basic projects and for leraning purpose.

Phase 1 (Python actions on Nimbella)

Here I've "monetized" previous studies on Nimbella looking at Youtube courses (1,2,3,4,5) but even reading https://docs.nimbella.com/ or Nimbella training. There you can find even how to install the nimbella cli that lets you execute all commands required to work with Nimbella platform.
If you want to take a complete look at the backend actions here you can find the github repo. Otherwise, you can see here one of the five Python actions used for the backend API.

import nimbella
import json
import random

def main(args):
    appkey='tdlst'
    db = nimbella.redis()
    item=args.get("content","")
    if item=='':
      return {"body":{"response":{"result":"error","description":"item not valid"}}}
    usercode=args.get("user-code","")
    if usercode=='':
      return {"body":{"response":{"result":"error","description":"user not valid"}}}
    n = random.randint(0,10000000)
    code="code-"+str(n)
    key = appkey+":item:"+usercode+":"+code

    value = json.dumps({
    "item": item,
    "user-code": usercode,
    "code": code})
    rsuccess=db.set(key, value)
    return {"body":{"response":{"result":"ok","code":code}}}

You are right! It's a simple Python main, where the args parameter wraps the json info passed through a simple HTTP request like this one:

curl -X POST "$URL_ITEM_ADD" -d '{"user-code": "code-6355808", "content": "buy a coffe"} ' -H 'Content-type: application/json'

The rest of the code is too easy to be commented, that's why Nimbella Python module allows to use redis in a very intuitive way. If you aren't a Python developer you can use other languages such as JavaScript, TypeScript, PHP, Java, Go, or Swif.
However there is a powerfull architecture behind the scenes that it's totally transparent for the developer

Very impressive! There are a set of architectural ingredients that enable a scalable serverless ecosystem.
Once you have written previous Python code, you need to execute this command to publish the serverless action on the cloud

nim action create api/item-save item-save.py --web true

nim is a powerfull commnd line interface (cli) provided by the platform that you can use in order to create new Nimbella projects, actions and even to directly test the actions.

Phase 2 (Upgrade to Flutter 2.0 for web development)

This is the phase where I was more afraid due to some issues I had in the past during Flutter upgrade (to be honest it happned during early Flutter realeases).

 $> flutter upgrade
 $> flutter config --enable-web

Instead it was quiet easy, I had just to upgrade to last version and then switch to web configuration (it's the mode that let you develop a web application)

Phase 3 (implement Flutter web app)

Here there is the project repository; it is how documentation states: developing a web application with Flutter 2.0 is very easy if you already know Flutter platform. I think the code is 99.99% the same you should write for an Android/iPhone app. Something different are the command for the build

$>flutter build web

and the command for local test.

$>flutter run -d chrom

Here I want just to underline how to invoke the Nimbella Python action we've seen at Phase 1 using the Dio dart library within a Flutter class.

. . .
  Future<String> save(String usercode, String item) async {
    var dio = Dio();
    dio.options.headers['content-Type'] = 'application/json';
    Response<String> response = await dio.post(
        NIM_SECRET_URL + '/api/item-save',
        data: {"user-code": usercode, "content": item});
    Map<String, dynamic> res = jsonDecode(response.data);
    res = res["response"];
    return res["result"] == "ok" ? "RES_OK" : "RES_NO_OK";
  }
 . . .

It's easy to both send POST HTTP requests and parse its json response.

Phase 4 (deploy Flutter web app on github pages)

All you need to deploy a web app to Github pages is reported here

https://pages.github.com/

In few words you need a Github account and you have to create a repositrory following a name convention like this:
"<your_account>.github.io"
and all html/js stuff you will push on it will reacheable at this link https://<your_account>.github.io/
really easy!

Conclusions

That's all! I hope that this post can help everyone wants to follow the same path I did to learn (very very basic level) both Flutter and Nimbella. To be honest, I already had a basic knowledge of Flutter before starting this journey; however now I'm sure that:

1. Flutter is a fantastic framework that let you write Mobile App, Web Apps and Desktop as well (even if not yet with a stable release) with only one language (Dart) end with a unique platform.
2. Nimbella is really a great FaaS alternative to question the hegemony of the great cloud serverless players as AWS, Azure and Google Cloud because is very effective and its learning curve is very smooth; I've not yet understood how much it is easy to integrate it with other Cloud solutions (It's something I need to study :-) :-) :-) ). I hope there will be available, as soon as possbile, a lot of connectors in order to be able to interact with other cloud PaaS.