Forem: Aswin Gopinathan

Firebase for your Dart Web API

Aswin Gopinathan — Sat, 01 Jan 2022 06:14:41 +0000

Yes, you read it right. "Firebase for your Dart Web API"

In this article, i will explain how you can connect your Firebase account with your Dart application and use its features like :

Login and Sign-up of new users using Firebase Authentication.
Realtime Database for CRUDing data using Dart-built APIs.

Note: Don't confuse this article on connecting your Firebase account to your Flutter code. When working with Flutter, you have to create separate apps in your Firebase console for Android and iOS. But, when working with Dart application, you dont have to create any new apps!.

Excited ? Of course you are !!

So first things first...Let's create a new Dart-server application.

I will be using IntelliJ as the IDE.

So i will create a New Dart Project (web-server) :

Name the project after your pet doggo, or 'test-server' will also do.

Once the project is created, you will be given the template code, which you don’t have to delete. We will be building on top of that.

But, before we start coding, let's import some packages :

1. shelf_router : https://pub.dev/packages/shelf_router

For routing incoming requests.

2. firebase_dart : https://pub.dev/packages/firebase_dart

The mastermind which is gonna help us play with Firebase using pure Dart.

So, the dependencies goes like this inside pubspec.yaml. The versions may change depending on which century you are reading this article. In 2021-Dec (21st Century), the versions were the ones given below :

shelf_router: ^1.1.2
firebase_dart: ^1.0.3

Now, before we start writing handler code, let's initialize firebase in our Dart application.

Head over to bin/server.dart file and inside main() method, write this line of code :

FirebaseDart.setup();

This initializes the pure dart firebase implementation.

So, that's great. You just added the dependencies and initialized firebase in your server application, now let's create a Configuration file which will contain all the keys required for firebase connectivity.

Create a new file configurations.dart.
Now, head over to your Firebase console and the easiest way to get all the credentials is to create a sample web app. During the step of creating a new web app for your Firebase project, you will be given the credentials as a json string:

Just copy them and cancel the setup, so that no new apps are created.

Go and paste them in the newly created configurations.dart as follows:

class Configurations {
  static const firebaseConfig = {
    'apiKey': '<API_KEY>',
    'authDomain': '<AUTH_DOMAIN>',
    'projectId': '<PROJECT_ID>',
    'storageBucket': '<STORAGE_BUCKET>',
    'messagingSenderId': '<ID>',
    'appId': '<ID>',
    'measurementId': '<ID>'
  };
}

Well thats all for that, now let's create a new file for managing the Authentication requests.

Authentication using Firebase-Auth

Create a new file endpoints/auth.dart and add the following code :

import 'package:shelf_router/shelf_router.dart';
import 'package:shelf/shelf.dart';

class Authentication {
  Handler get handler {
    var router = Router();

    return router;
  }
}

Next, we need to write a method inside the Authentication class which will be initialize the Firebase app in our application.

Future<FirebaseApp> initApp() async{
  late FirebaseApp app;

  try {
    app = Firebase.app();
  } catch(e) {
    app = await Firebase.initializeApp(
        options: FirebaseOptions.fromMap(Configurations.firebaseConfig));
  }

  return app;
}

Let me break down this code for you.

First, we create a new instance for FirebaseApp. Now, let me give you a brief insight on APIs.

So, what happens in Web APIs is that, every time you hit the API endpoint, the entire code is re-run again and no state is maintained between the calls. Due to which, the code wont remember if we had already initialized the firebase app or not. But, Firebase is quite quirky, it does remember whether its app was already initialized or not.
Now, there is a conflict of interest here. The codebase will re-run the same initialize step irrespective of the app already initialized or not which will lead to the exception : "A Firebase App named "[DEFAULT]" already exists". So, what we do is we use a try-catch block to determine if the app is already initialized, if so, go with that initialized app, or else, initialize a new app with the given credentials stored in the Configuration file.

It's that simple.

Once, we get the app, we return it.

Now, let's write a POST handler for registering new users. For that, first write the following code inside the handler method :

router.post('/register',(Request request) async{
  var payloadData = await request.readAsString();
  if(payloadData.isEmpty) {
    return Response.notFound(
        jsonEncode({'success':false,'error': 'No data found'}),
        headers: {'Content-Type': 'application/json'}
    );
  }

  // more code coming your way
});

Here, we wrote a POST handler for the endpoint /register, and we are expecting data to be sent with the request. The data here could be the email and password of the new user being created.
If the data is not passed, then we return a 404 response saying 'No data found'.

Now, lets continue writing code inside this handler.

final payload = json.decode(payloadData);
String? username = payload['username'];
String? password = payload['password'];

Now, we retrieve the username and password from the payload and store it in a variable.

What if, the requester did not send the username and password fields, instead sent some random string ?

if(username == null || password == null) {
    return Response.notFound(
      json.encode({'error': 'Missing username or password'}),
      headers: {'content-type': 'application/json'}
    );
 } else if(username.contains(' ')) {
    return Response.forbidden(
      json.encode({'error': 'Username cannot contain spaces'}),
      headers: {'content-type': 'application/json'}
    );
 }

We validate them and send responses if they are not proper.

Next, lets get the FirebaseApp instance that we are gonna use in our code, and initialize a FirebaseAuth instance using that :

var app = await initApp();
var auth = FirebaseAuth.instanceFor(app: app);

Import the firebase_dart/auth.dart' package to use FirebaseAuth class.

Now, let's write a method which will register a new user for us using Firebase Authentication.

Copy the code below and i will explain how it works :

  Future<List> registerUser({
    String? username,
    String? password,
    FirebaseAuth? auth,
  }) async{
    try {
      var userCredential = await auth!.createUserWithEmailAndPassword(
        email: '$username@company.com'.toLowerCase(),
        password: password!,
      );

      return [1,json.encode({
        'username': username,
        'uid': userCredential.user!.uid,
        'message': 'User created'
      })];

    } on FirebaseAuthException catch(e) {
      print(e.code);
      switch(e.code) {
        case 'weak-password' :
          return [0,json.encode({'error': e.message})];

        case 'internal-error':
          return [0,json.encode({'error': e.message})];

        default:
          return [0,json.encode({'error': e.message})];
      }
    }
  }

First things first. Notice this line :

email: '$username@company.com'.toLowerCase(),

I am using a email-authentication approach to create new users using just username. I have appended @company.com because email authentication requires email as a parameter. toLowerCase() is used so that Aswin and aswin dont get created as separated users.

The try-catch block is necessary to catch exceptions like "User-already-exist", "Weak-password" , etc.

The return type is a list, in which the int in the 0th index signifies success/failure of the registration process, and the second item denotes the json response.

So, this method will register the new users for us. We just have to pass the username, password and the FirebaseAuth instance that we created in the POST handler method.

Now, let's finish the handler code :

var response = await registerUser(
    username: username,
    password: password,
    auth: auth,
);

if(response[0] == 0) {
  return Response.notFound(
      response[1],
      headers: {'content-type': 'application/json'}
  );
} else {
  return Response.ok(
      response[1],
      headers: {'content-type': 'application/json'}
  );
}

Well, thats Register User API.

Now, let's write a handler method for Login. We create a new handler for the POST method on /login as follows:

router.post('/login', (Request request) async{
  var projectData = await request.readAsString();
  if(projectData.isEmpty) {
    return Response.notFound(
        jsonEncode({'success':false,'error': 'No data found'}),
        headers: {'Content-Type': 'application/json'}
    );
  }
  final payload = json.decode(projectData);
  String? username = payload['username'];
  String? password = payload['password'];

  if(username == null || password == null) {
    return Response.notFound(
        json.encode({'error': 'Missing username or password'}),
        headers: {'content-type': 'application/json'}
    );
  }
  else if(username.contains(' ')) {
    return Response.forbidden(
        json.encode({'error': 'Username cannot contain spaces'}),
        headers: {'content-type': 'application/json'}
    );
  }

  var app = await initApp();
  var auth = FirebaseAuth.instanceFor(app: app);

  // more code coming soon

});

It first checks for the payload data sent via request, and validates it. If no data is send, it returns a 404 Error Response.

If data is sent, we check for the value of username and password and performs validation and for any errors appropriate error responses are returned.

Then if they are correct, we get the FirebaseApp instance and initialize the FirebaseAuth instance using that.

Next, let's write a method to perform the login function.

Future loginUser({
  String? username,
  String? password,
  FirebaseAuth? auth,
}) async{
  try {
    var userCredential = await auth!.signInWithEmailAndPassword(
      email: '$username@doit.com',
      password: password!,
    );

    return [1,json.encode({
      'username': username,
      'uid': userCredential.user!.uid,
      'message': 'User logged in'
    })];
  } on FirebaseAuthException catch(e) {
    print(e.code);
    switch(e.code) {
      case 'wrong-password' :
        return [0,json.encode({'error': e.message})];

      case 'user-not-found' :
        return [0,json.encode({'error': e.message})];

      case 'internal-error':
        return [0,json.encode({'error': e.message})];

      default:
        return [0,json.encode({'error': e.message})];
    }
  }
}

We use the signInWithEmailAndPassword() method to sign-in the user using the credentials passed. If any exceptions are raised, they are returned with the flag 0 indicating an error occured.

Now, coming back to the handler method, we call this method and performs action accordingly.

var response = await loginUser(
  username: username,
  password: password,
  auth: auth
);

if(response[0] == 0) {
  return Response.notFound(
    response[1],
    headers: {'content-type': 'application/json'}
  );
} else {
  return Response.ok(
    response[1],
    headers: {'content-type': 'application/json'}
  );
}

Phew! That's the entire Authentication part of the application.

So, in this section we wrote code for the endpoints /register and /login.

Now, lets jump to the next section.

CRUDing Data in Firebase Realtime DB

So, what are we gonna do in this section ?

We are gonna create APIs for :

Reading data from Realtime DB
Adding new data to the DB
Updating existing data in the DB
Deleting data from the DB

Before we get started, head over to your Firebase Console and create a new Database by choosing the region and rules. Once done, head back to your IDE.

Let's get started...

So, we are gonna use the Realtime DB to store the name and age of characters from the sitcom F.R.I.E.N.D.S

We are gonna be following the given structure for storing the values in the DB :

First, let's create a new file which will contain the class for the APIs. It will be inside the endpoints folder. We will name it friends.dart and add the following code to it :

import 'package:shelf_router/shelf_router.dart';
import 'package:shelf/shelf.dart';
import '../configuration.dart';

class Friends {
  Handler get handler {
    var router = Router();

    return router;
  }
}

Now, head over to your Realtime Database that you created, and copy the DB URL from the top of the DB :

Next, head over to your configurations.dart file , and paste the url :

static const databaseUrl = '<DB_URL>';

Now, head back to friends.dart file. Let's write the code for initializing the Firebase App. We will copy the same code that we had used for Authentication class :

Future<FirebaseApp> initApp() async{
  late FirebaseApp app;

  try {
    app = Firebase.app();
  } catch(e) {
    app = await Firebase.initializeApp(
        options: FirebaseOptions.fromMap(Configurations.firebaseConfig));
  }

  return app;
}

Now, let's write a GET request handler for retrieving all the data stored in the DB :

router.get('/all', (request) async {
  var app = await initApp();

  final db = FirebaseDatabase( app: app, databaseURL: Configurations.databaseUrl);
  final ref = db.reference().child('characters');

  var responseData;

  await ref.once().then((value){
    responseData = value.value;
  });

  return Response.ok(
    json.encode(responseData),
    headers: {'content-type': 'application/json'}
  );
});

Let me break it down for you.

We have defined a handler for the GET request on the endpoint /all, which will return all the data stored in the Realtime DB.

First, we initialize and get the FirebaseApp from the initApp() method. Then we use that instance to create an instance of FirebaseDatabase by passing the app instance along with the Database URL from the Configurations file.

Then, we refer the child characters which according to the DB Structure contains all the data that needs to be displayed.

We then store them in a variable responseData and return it as the response for the API call.

The API response will be something like this :

This is because, i have already pre-filled the DB with some data. If the DB does not contain any data, the variable responseData will contain null in it.
So, dont forget to add some validations as well.

Now, let's see how we can add new data to the DB.

We will be using a POST request on the URL /add and we will be passing the following content as payload :

{
  'name':'Gunther',
  'age' : 34
}

The handler goes like this :

router.post('/add',(Request request) async{
  var projectData = await request.readAsString();
  if(projectData.isEmpty) {
    return Response.notFound(
        jsonEncode({'success':false,'error': 'No data found'}),
        headers: {'Content-Type': 'application/json'}
    );
  }
  final payload = jsonDecode(projectData);
  final name = payload['name'];
  final age = payload['age'];


  if(name==null) {
    return Response.notFound(
        jsonEncode({'success':false,'error': 'Missing name'}),
        headers: {'Content-Type': 'application/json'}
    );
  } else if(age==null) {
    return Response.notFound(
        jsonEncode({'success':false,'error': 'Missing color'}),
        headers: {'Content-Type': 'application/json'}
    );
  }

  final app = await initApp();
  final db = FirebaseDatabase( app: app, databaseURL: Configurations.databaseUrl);
  final ref = db.reference().child('characters');
  await ref.set({
    'name': name,
    'age': age
  });

  return Response.ok(
    jsonEncode({'success':true}),
    headers: {'Content-Type': 'application/json'}
  );
});

We retrieve the data sent over the request and validate it for the correctness of the data. If there is any error with the data, appropriate Responses are returned.

If the data is proper, we define a FirebaseDatabase instance and set the value into the DB. The code that adds new content to the DB is :

final ref = db.reference().child('characters');
await ref.set({
  'name': name,
  'age': age
});

Next, let's create an API to update existing data in the DB.

We will be using a PUT request handler on the endpoint /update to update the age of a particular entry in the DB.

We will pass the following data as the payload and update the age of the person with the new age that is passed :

{
  "name":"Gunther",
  "age" : 31
}

The dart code goes like this:

router.put('/update',(Request request) async{
  var projectData = await request.readAsString();
  if(projectData.isEmpty) {
    return Response.notFound(
        jsonEncode({'success':false,'error': 'No data found'}),
        headers: {'Content-Type': 'application/json'}
    );
  }
  final payload = jsonDecode(projectData);
  final name = payload['name'];
  final age = payload['age'];


  if(name==null) {
    return Response.notFound(
        jsonEncode({'success':false,'error': 'Missing name'}),
        headers: {'Content-Type': 'application/json'}
    );
  } else if(age==null) {
    return Response.notFound(
        jsonEncode({'success':false,'error': 'Missing color'}),
        headers: {'Content-Type': 'application/json'}
    );
  }

  final app = await initApp();
  final db = FirebaseDatabase( app: app, databaseURL: Configurations.databaseUrl);
  final ref = db.reference().child('characters');
  await ref.update({
    name : age,
  });

  return Response.ok(
    jsonEncode({'success':true}),
    headers: {'Content-Type': 'application/json'}
  );
});

We have used the code :

await ref.update({
  name : age,
});

to update the age value of the key name.

Finally, let's see how we can Delete an existing key from the DB

We will be using a DELETE request handler on the endpoint /delete to delete a particular entry from the DB.

The payload will be the name to be deleted :

{
  "name":"Gunther"
}

The Dart code will be :

router.delete('/delete',(Request request) async{
  var projectData = await request.readAsString();
  if(projectData.isEmpty) {
    return Response.notFound(
        jsonEncode({'success':false,'error': 'No data found'}),
        headers: {'Content-Type': 'application/json'}
    );
  }
  final payload = jsonDecode(projectData);
  final name = payload['name'];

  if(name==null) {
    return Response.notFound(
        jsonEncode({'success':false,'error': 'Missing name'}),
        headers: {'Content-Type': 'application/json'}
    );
  }

  final app = await initApp();
  final db = FirebaseDatabase( app: app, databaseURL: Configurations.databaseUrl);
  final ref = db.reference().child('characters');
  await ref.child(name).remove();

  return Response.ok(
    jsonEncode({'success':true}),
    headers: {'Content-Type': 'application/json'}
  );

});

It deletes the child with the given name.

Well, thats all for the CRUDing of Data in Firebase.

But, before we end this article, there is one important thing that we left out.

How are we gonna access these API endpoints ? In the server.dart, we can only provide one handler at a time. What to do in order to access other API endpoints ?

We create a starter-handler ! Pardon the name, i am not good at naming stuffs.

So what does this starter-handler do ?

It creates an entrypoint for your requests, and then based on the endpoint we mount the request to its appropriate classes.

Let me explain with the actual code :

Create a new file endpoints/starter.dart and add the following code :

import 'package:shelf_router/shelf_router.dart';
import 'package:shelf/shelf.dart';

import 'auth.dart';
import 'friends.dart';

class Starter {
  Handler get handler {
    var router = Router();

    router.mount('/auth', Authentication().handler);
    router.mount('/friends', Friends().handler);

    return router;
  }
}

So what is happening here ?

We create a Request handler, which will redirect us to its appropriate class based on the endpoint you have mentioned in the URL.

For example :

Earlier while working with Realtime database, we used the endpoint /all for retrieving all the data from the DB. But, now we have to use /friends/all to retrieve all the data.

/friends is telling the server code that we need to head towards the Friends class and call the endpoint /all from there.

Similarly, to register new user we need to use the endpoint /auth/register instead of /register.

Why do we have to do all this ??

Since we have used separate classes for each of the feature (authentication, db access), we need a router that will redirect us to the appropriate classes. Or else, if we had written all the handlers of Authentication and Friends class in a single class, then it wouldnt be an issue. But, Software Engineering is all about Separation of Concern (DeCoupling) right ?

Well, i guess that's it for this article. Feel free to connect with me on Twitter if you have any queries.

Twitter : @GopinathanAswin

You can access the code for this article from the GitHub Repository : https://github.com/infiniteoverflow/Friends_API

See you all in my next article !!

A Comprehensive Guide to Mockito in Flutter

Aswin Gopinathan — Thu, 16 Dec 2021 05:40:04 +0000

No one likes testing! Everyone thinks testing is a boring job. But trust me, testing a software is as important as developing a software.

Imagine, if you spend days and months building your app and finally when it went live, the app started crashing. What if you had tested all the functionalities before making it live?

So, testing is a very important phase of Software Development Life Cycle. Even if you hate it, you have to do it.

But, in this article i will make sure you will end up liking the process of testing.

So, what are you gonna learn in this article?

Just one thing - How to Unit test your code using Mockito!

Before i begin, if you wanna read about Unit Testing, check out my latest tweet which talks about a basic introduction to Unit Testing in Flutter:

https://twitter.com/gopinathanaswin/status/1470617070559711234?s=21

Now, lets get to the fun part.

What is Mockito?

Mockito is a package in Flutter that helps you create Mock Dependencies of classes while testing your code.

Let me give you an example:
Imagine a feature that you are testing requires data to be fetched from an external DB such as Firebase/Supabase.
When you are testing your code offline you cant possibly gather data from the DB right? Or even if you are online, you dont wanna wait for the actual data to return in order to test the app right?

So, what will you do then?

We use Mockito to create a fake class which will use dummy data as input for your tests !!

Before we get started with the code, lets add dependencies for two packages in pubspec.yaml :

dev_dependencies:
  mockito: ^5.0.10
  build_runner: ^2.1.2

Note: I have added the packages in the dev_dependencies section. This is because, we are not gonna use these packages in the actual application code.

Also, the package versions may vary when you are reading this article. Do checkout pub.dev to get the latest versions.

Let's create a new file cat.dart in the test folder:

class Cat {
  String sound() => "Meow";
  bool eatFood(String food, {bool? hungry}) => true;
  Future<void> chew() async => print("Chewing...");
  int walk(List<String> places) => 7;
  void sleep() {}
  void hunt(String place, String prey) {}
  int lives = 9;
}

I have used the example which is given in the official docs of mockito in pub.dev

Next, create a file cat_test.dart file which will contain all the codes to test the class.
Add the following contents to the file:

import 'package:mockito/annotations.dart';
import 'cat.dart';

@GenerateMocks([Cat])
void main() {

}

@GenerateMocks([Cat]) is used to create a Mock Class for our Cat class.

Now, head over to the terminal and type the following command:

dart run build_runner build

This will generate the mock file for us with the name cat_test_mocks.dart which contains the MockCat class which we are gonna use for our testing.

Import this new file into our cat_test.dart file:

import 'cat_test.mocks.dart';

Now, head over to the main function and initialise an object for class MockCat.

var cat = MockCat();

Now, let's verify some methods. But, what is verify in testing ?

Verify: It means we are verifying a method if it was invoked in that particular scope or not.

I will explain this better with an example. Append the following code inside the main() function:

test('verify sound',() {
  when(cat.sound()).thenReturn('meow');

  cat.sound();

  verify(cat.sound());
});

We have defined a test block that performs verify operation on the sound() method.

The first line:

when(cat.sound()).thenReturn('meow');

is known as Stubbing.
Oh come on! What is Stubbing now? I will explain this a bit later, but for now just imagine we have a method sound(), that returns 'meow'.

Now, the second line:

cat.sound();

we invoke the sound() method.

Finally, the last line:

verify(cat.sound());

we are verifying if the mentioned method with the given parameter list was invoked in this scope or not.

So, this test will pass since it was invoked in line 2. But what if we write verify like this:

verify(cat.sound('Bow'));

This will fail, because the sound() method was not invoked in this scope with a String parameter 'Bow'.

So, this is how verify works in mockito.

Where is this helpful ?
This is helpful to know whether a method was invoked during the flow of a unit.
For example: Verify if the validatePassword() method was called while creating a user.

But, there are some more interesting variants of verify known as verifyInOrder(), verifyNever(), and verifyZeroInteractions().

verifyInOrder() takes in a list of methods, to verify if they were invoked in that particular order.
verifyNever() takes in a method, to verify if it was never invoked.
verifyZeroInteractions() takes in a mock object (not a method), to verify if that object was never called in the scope of the test.

Now, lets jump into Stubbing.

Stubbing is the process of overriding the behaviour of a method belonging to the mock class instance.

Example:

Consider a method that returns 'Dart':

String getLang() => 'Dart';

We stub the method to return 'Flutter' instead.

when(obj.getLang()).thenReturn('Flutter');

Now, no matter how many times you call the method getLang(), it will always return 'Flutter' as opposed to its declaration in its class.

This is helpful when you wanna test your methods for different return data.

Let's consider our MockCat class and test a stubbing:

test('stubbing',() {
  when(cat.sound()).thenReturn('Flutter');
  expect(cat.sound(), 'Flutter');
});

In the normal flow cat.sound() should return 'Meow', but after stubbing it will always return 'Flutter'.

If a method invocation matches multiple stubs, the one which was declared last will be used. It is worth noting that stubbing and verifying only works on methods of a mocked class; in this case, an instance of MockCat must be used, not an instance of Cat.

Best Practices while working with Mockito

Whenever you make changes to the class that you are mocking, always re-generate the mock class using the build command that i mentioned above.
Always Stub your method before verifying it in a test block. Otherwise, it will return an error like the following:

Testing with real objects is preferred over testing with mocks - if you can construct a real instance for your tests, you should!

If you liked this article, dont forget to hit the like button and share it with your friends and colleagues.

Follow me on Twitter @GopinathanAswin where i regularly share my learnings in Dart and Flutter 💙

Build APIs using Dart to CRUD Data in Supabase

Aswin Gopinathan — Wed, 17 Nov 2021 09:40:04 +0000

Most of the production-level APIs out there perform some common operations like:

Creating a new resource
Reading and displaying available resources
Updating an existing resource
Delete an existing resource

In this article, you are gonna learn how you can build your own API that does the above operations on your table in Supabase.

Note: Most of the operations above will require a server-side authentication and authorization, which we will not be covering in this article. This article will focus more on the operations than the underlying AuthN and AuthZ.
But, dont worry i will make sure i will write an article specifically on that topic in the near-future.

So, before we start with the coding part, go ahead and create a new table in your Supabase console.
Check out the Official documentation to know how you can create your own table in Supabase.

We will be using the following table for this article:

We will be using the shelf and the shelf_router package for building our API.
If you are new to these packages, i recommend reading my previous articles which will walk you through these in depth :

1. Create an API with Dart + Heroku

2. Build APIs for various HTTP Methods in Dart

After you create the template dart-server app, your server.dart file should look like this:

import 'dart:io';

import 'package:args/args.dart';
import 'package:shelf/shelf.dart' as shelf;
import 'package:shelf/shelf_io.dart' as io;

// For Google Cloud Run, set _hostname to '0.0.0.0'.
const _hostname = 'localhost';

void main(List<String> args) async {
  var parser = ArgParser()..addOption('port', abbr: 'p');
  var result = parser.parse(args);

  // For Google Cloud Run, we respect the PORT environment variable
  var portStr = result['port'] ?? Platform.environment['PORT'] ?? '8080';
  var port = int.tryParse(portStr);

  if (port == null) {
    stdout.writeln('Could not parse port value "$portStr" into a number.');
    // 64: command line usage error
    exitCode = 64;
    return;
  }

  var handler = const shelf.Pipeline()
      .addMiddleware(shelf.logRequests())
      .addHandler(_echoRequest);

  var server = await io.serve(handler, _hostname, port);
  print('Serving at http://${server.address.host}:${server.port}');
}

shelf.Response _echoRequest(shelf.Request request) =>
    shelf.Response.ok('Request for "${request.url}"');

We have to add dependencies for two packages in pubspec.yaml:

shelf_router: ^1.1.2
supabase: ^0.2.9

Change the version number according to the latest one at the time of reading this article.

Next, we create a new file user.dart and create an API class as follows:

import 'package:shelf/shelf.dart';
import 'package:shelf_router/shelf_router.dart';
import 'package:supabase/supabase.dart';

class Users {
  final client = SupabaseClient('<Supabase-URL>', '<Supabase-Key>');

  Handler get handler {
    final router = Router(
      notFoundHandler: (Request request) => 
        Response.notFound(
          'We dont have an API for this request'
        )
    );

    /// Create new user

    /// Read all users

    /// Read user data with id

    /// Update user using Id

    /// Delete a user using ID



    return router;
  }
}

This class will act as our routing class for the handlers based on request methods and URLs.

We create an object to the SupabaseClient using the supabase-url and supabase-key which we can get from our Supabase account.

handler is a getter which will return the Response object which will be displayed as output to the requester.

final router = Router(
    notFoundHandler: (Request request) => 
        Response.notFound(
          'We dont have an API for this request'
        )
    );

Here, we create a Router object which will be used to connect various route requests based on Request Methods (GET, POST, DELETE) or URLs, to its appropriate handler methods.
The notFoundHandler: attribute specifies the Response to be shown in case a Request is made to an endpoint which we haven't defined a handler for.

Now, go back to server.dart file and update the code in serve() method to use this new handler getter method of Users class as the handler for our dart server.

var server = await io.serve(Users().handler, _hostname, port);

Now, we are ready to write our handlers!

1. Create a new entry

Add the following code under the comment /// Create new user

router.post('/users/create', (Request request) async {
    final payload = jsonDecode(await request.readAsString());

    // If the payload is passed properly
    if(payload.containsKey('name') && payload.containsKey('age')) {

    // Create operation
    final res = await client
      .from('users')
      .insert([
        {'name': payload['name'], 'age': payload['age']}
      ]).execute();

      // If Create operation fails
      if(res.error!=null) {
        return Response.notFound(
          jsonEncode(
            {'success':false, 'data': res.error!.message,}
          ),
          headers: {'Content-type':'application/json'}
        );
      }

      // Return the newly added data
      return Response.ok(
        jsonEncode({
          'success':true,
          'data':res.data
        }),
        headers: {'Content-type':'application/json'},
      );
    }

    // If data sent as payload is not as per the rules
    return Response.notFound(
      jsonEncode(
        {'success':false, 'data':'Invalid data sent to API',}
        ),
      headers: {'Content-type':'application/json'}
    );

 });

Since creating a new resource is a POST request, we use router.post() method and listen to the url /users/create. We have to pass a body to the endpoint which is then stored in the payload variable as a json data.

The syntax of the body should be:

{
    "name":"Aswin",
    "age":22
}

Here, name and age corresponds to the respective column names in the users table in Supabase DB.

final res = await client
   .from('users')
   .insert([
   {'name': payload['name'], 'age': payload['age']}
]).execute();

This snippet of code performs the Write operation to the DB. It inserts a new column with the given name and age, and returns some value to the variable res.

If the insert operation is successful, res.error will be null and res.data will contain the newly inserted row.
If the insert operation is unsuccessful, res.data will be null and res.error!.message will contain the error that caused the failure.

So, based on the above condition, appropriate Response objects are returned and displayed to the requester.

API Url :
/users/create
Method :
POST
Body :
{ "name":"Aswin", "age":22 }

2. Read all entries

Add the following code under the comment /// Read all users

router.get('/users', (Request request) async {
    final res = await client
      .from('users')
      .select()
      .execute();

    // If the select operation fails
    if(res.error!=null) {
      return Response.notFound(
        jsonEncode({
          'success':false,
          'data':res.error!.message
        }),
        headers: {'Content-type':'application/json'}
      );
    }

    final result = {
      'success':true,
      'data': res.data,
    };

    return Response.ok(
      jsonEncode(result),
      headers: {'Content-type':'application/json'}
    );
  });

Since reading entries is a GET request, we have used router.get() method and it listens to the URL /users. It dosen't require a body.

The following code performs the read operation and returns the data :

final res = await client
  .from('users')
  .select()
  .execute();

API Url:
/users
Method :
GET
Body:
NA

3. Read entry based on Id

Add the following code under the comment /// Read user data with id

router.get('/users/<id>', (Request request,String id) async {
      final res = await client
        .from('users')
        .select()
        .match({'id':id})
        .execute() ;

      // res.data is null if we pass a string as ID eg: 11a
      if(res.data == null) {
        return Response.notFound(
            jsonEncode({
              'success':false,
              'data':'Invalid ID'
            }),
            headers: {'Content-type':'application/json'}
        );
      }

      // res.data.length is 0 if an entry with given ID is not present
      if(res.data.length!=0) {
        final result = {
          'success':true,
          'data':res.data
        };

        return Response.ok(
          jsonEncode(result),
          headers: {'Content-type':'application/json'}
        );
      }
      else {
        return Response.notFound(
          jsonEncode({
            'success':false,
            'data':'No data available for selected ID'
          }),
          headers: {'Content-type':'application/json'}
        );
      }
    });

We have set the url as /users/<id> where the user id to fetch will be passed in the API call, and based on the id, if found will return the user details, else, an error will be returned.

API Url:
/users/1
Method :
GET
Body:
NA

4. Update entry in DB

Add the following code below /// Update user using Id

router.put('/users/update/<id>', (Request request,String id) async {
    final payload = jsonDecode(await request.readAsString());

    final res = await client
      .from('users')
      .update(payload)
      .match({ 'id': id })
      .execute();

    // if update operation was successful
    if(res.data!=null) {
      final result = {
        'success':true,
        'data':res.data
      };

      return Response.ok(
        jsonEncode(result),
        headers: {'Content-type':'application/json'}
      );
    }

    // if update operation failed
    else if(res.error!=null) {

      // if the Id passed does not exist in the DB
      if(res.error!.message.toString() == '[]') {
        return Response.notFound(
            jsonEncode({
              'success':false,
              'data':'Id does not exist',
            }),
            headers: {'Content-type':'application/json'}
        );
      }

      // If any internal issue or the data passed is invalid
      return Response.notFound(
        jsonEncode({
          'success':false,
          'data':res.error!.message,
        }),
        headers: {'Content-type':'application/json'}
      );
    }
  });

Since update calls are always PUT, we have used route.put() method and listens to the url /users/update/<id> where we pass the id of the user whose data we have to update.
So, since it requires new data, we have to pass the body as well while hitting the API.

The syntax of body can be:

{
    "name":"Aswin",
    "age":22
}

You don't have to mention the entire fields (name and age) while updating, you just have to give only those fields whose value is being updated.

The following is the code that updates the data based on the id passed:

final res = await client
  .from('users')
  .update(payload)
  .match({ 'id': id })
  .execute();

.match() searches for the entry with given id and updates only those fields which were send via the API call.

API Url:
/users/update/1
Method :
PUT
Body:
{"name":"Ross"}

5. Delete entry in DB

Add the following code below /// Delete a user using ID

router.delete('/users/delete/<id>', (Request request,String id) async {
  final res = await client
      .from('users')
      .delete()
      .match({'id':id})
      .execute();

  // if delete operation was successful
  if(res.data!=null) {
    if(res.data.toString() == '[]') {
      return Response.notFound(
        jsonEncode({
          'success':false,
          'data':'Id not found'
        }),
        headers: {'Content-type':'application/json'}
      );
    }
    final result = {
      'success':true,
      'data':res.data
    };

    return Response.ok(
        jsonEncode(result),
        headers: {'Content-type':'application/json'}
    );
  }

  // if delete operation failed
  else if(res.error!=null) {

    // if the Id passed does not exist in the DB
    if(res.error!.message.toString() == '[]') {
      return Response.notFound(
          jsonEncode({
            'success':false,
            'data':'Id does not exist',
          }),
          headers: {'Content-type':'application/json'}
      );
    }

    // If any internal issue or the data passed is invalid
    return Response.notFound(
        jsonEncode({
          'success':false,
          'data':res.error!.message,
        }),
        headers: {'Content-type':'application/json'}
    );
  }

});

Since deleting a request is a DELETE request, we have used route.delete() method with the URL /users/delete/<id>.

The following code performs the delete operation in the Supabase DB:

final res = await client
    .from('users')
    .delete()
    .match({'id':id})
    .execute();

It searches the user with the given id and performs the delete operation and returns the deleted data or the error, and accordingly response is sent back to the requester.

API Url:
/users/delete/1
Method :
DELETE
Body:
NA

Where can you go from here ?

I haven't provided any server-side AuthN and AuthZ, which could be an improvisation to this work. You can generate session ids for each call and use them to verify if the delete/update operation is authorized or not!

This article was just intended to strengthen your knowledge of connecting to a Realtime DB and perform CRUD using APIs built using our very own DART! 💙

We will meet in my next article 😎🙌🏻

Build APIs for various HTTP Methods in Dart

Aswin Gopinathan — Mon, 15 Nov 2021 17:59:21 +0000

Hello everyone!

In my previous article i talked about building APIs with Dart using the shelf package, and how you can host it on Heroku.
If you haven't read that, do read it if you are new to building APIs in Dart.

You can access the article from here

In this article, i am gonna talk about how you can implement various http methods (GET, POST, DELETE) using an add-on to the shelf package, which is the shelf-router package.

A small limitation to the shelf package is that it dosen't have support for creating separate handlers for different request methods/ request URLs built into it.
For eg:
The various request methods can be a GET/POST/DELETE/PUT request using different URLs, or these requests can be on the same URL as well. But we have to explicitly write switch or myriad of if conditions to redirect to its appropriate handlers for further request handling.

But the shelf_router package defines a Router object which we can use to define the url and http method that is requesting the service and implicitly transfer control to appropriate handler functions.

Now, it sounds interesting right! So, without any further delay lets dive right in.

Note: I will be using IntelliJ as the IDE throughout this article, but you can replicate the same in VsCode or Android Studio.

You can skip the following section if you know how to create a new dart-server project.

Create a new dart-server project

Click on File->New Project

Name it anything you want!

After these two steps, you should get the template for your dart-server ready!

Now, head over to lib->server.dart. Your file should look like this:

import 'dart:io';

import 'package:args/args.dart';
import 'package:shelf/shelf.dart' as shelf;
import 'package:shelf/shelf_io.dart' as io;

// For Google Cloud Run, set _hostname to '0.0.0.0'.
const _hostname = 'localhost';

void main(List<String> args) async {
  var parser = ArgParser()..addOption('port', abbr: 'p');
  var result = parser.parse(args);

  // For Google Cloud Run, we respect the PORT environment variable
  var portStr = result['port'] ?? Platform.environment['PORT'] ?? '8080';
  var port = int.tryParse(portStr);

  if (port == null) {
    stdout.writeln('Could not parse port value "$portStr" into a number.');
    // 64: command line usage error
    exitCode = 64;
    return;
  }

  var handler = const shelf.Pipeline()
      .addMiddleware(shelf.logRequests())
      .addHandler(_echoRequest);

  var server = await io.serve(handler, _hostname, port);
  print('Serving at http://${server.address.host}:${server.port}');
}

shelf.Response _echoRequest(shelf.Request request) =>
    shelf.Response.ok('Request for "${request.url}"');

This is the approach using the shelf package.

Now, lets add the shelf-router package to our pubspec.yaml file.

shelf_router: ^1.1.2

This is the version of the package at the time of writing this article. Please update it accordingly.

Next, lets create a new dart file and name it api.dart. We will write all the routing logic in this file.

Add imports to the shelf and shelf_router package as follows:

import 'package:shelf/shelf.dart';
import 'package:shelf_router/shelf_router.dart';

Next, create a new class Api and write a getter method handler that returns a Handler object.

class Api {
  Handler get handler {
    final router = Router();

    // Write your logic here

    return router;
  }
}

Now, go back to the server.dart file and update the last-second line of the main function as follows:

var server = await io.serve(Api().handler, _hostname, port);

You may have to import the api.dart file as well.

Now, your server will serve Requests from this new API Class handler rather than from the typical _echoRequest() function.

Now, lets get back to the api.dart file. All the codes thats gonna follow will be written inside the handler method below the comment.

GET Request

First, lets see how a get request for the url /api/<name> will work, where <name> can be any word:

router.get('/api/<name>', (Request request,String name) {
    return Response.ok(
        jsonEncode({
          'success':true,
          'data':name
        }),
        headers: {
          'Content-type':'application/json'
        },
    );
});

Here, we have defined a handler method to process in case a GET request is made to the url /api/<name>, where name could be any word.
The Handler method will return an object of type Response with OK status code. The response will be a JSON String as follows:

Since we have added a placeholder in the url parameter of router.get(), ie <name>, the handler method will take a second parameter that will contain the value passed in the url, which is in-turn returned as Response.

For the remaining part of this article i am going to use a local json file which has pre-filled data.
You can access the file from here.

The file contents should look like this:

{
  "users":[
    {
      "id":1,
      "Name":"Rachel Green",
      "Age": 32
    },
    {
      "id":2,
      "Name":"Ross Geller",
      "Age": 33
    },
    {
      "id":3,
      "Name":"Monica Geller",
      "Age": 32
    },
    {
      "id":4,
      "Name":"Joey Tribbiani",
      "Age": 31
    },
    {
      "id":5,
      "Name":"Chandler Bing",
      "Age": 33
    },
    {
      "id":6,
      "Name":"Pheobe Buffay",
      "Age": 34
    }
  ]
}

Now, inside the Api class we will define a variable data of type List, which will store the list of users from the json file.

List data = jsonDecode(
    File('friends.json').readAsStringSync()
  )['users'];

POST Request

Now, lets see how we can perform a POST Request. Let's perform a add operation, where we will add new information from the POST payload.
POST Payload is the information you pass when hitting the API Endpoint using a POST Request.

router.post('/api/add', (Request request) async{
    final payload = jsonDecode(await request.readAsString());
    data.add(payload);

    return Response.ok(
      jsonEncode({
        'success':true,
        'data':data
      }),
      headers: {
        'Content-type':'application/json'
      },
    );
  }
);

I will be using Postman to perform the POST Operation on the API. You can try any API Testing tools of your choice.

I will be passing the following data as the payload(body) for the POST Request:

{
    "Id": 7,
    "Name":"Aswin",
    "Age":22,
}

This json data will be stored in the variable payload in the handler function above, and the same is added to the data variable which is then displayed as a response to verify it is added correctly.

This is a basic application of how you can use the POST request. Some improvisations can be:

As of now, we are just appending the new data to the variable data and not to the actual json file. That means, when you restart the server, the appended data will be gone as that time you are freshly fetching from the json file.
You can change the code to append the new data permanently to the json file.
We are passing the hardcoded Id in the payload, you can improvise it by just passing the Name and Age and calculating its Id in the function by considering the Id of the last entry in the json data.

DELETE Request

Finally, lets see how the DELETE Request works.

router.delete('/api/delete/<id>', (Request request, String id) {
      final idN = int.parse(id);
      final deletedData = data.firstWhere(
        (element) => element['id']==idN,
        orElse: ()=> null 
      );

      if(deletedData==null) {
        return Response.notFound(
          jsonEncode({
            'success':false,
            'data':'invalid id'
          }),
          headers: {
            'Content-type': 'application/json'
          },
        );
      }

      int pos = deletedData['id'];
      data.removeAt(pos-1);

      return Response.ok(
        jsonEncode({
          'success':true,
          'data':deletedData
        }),
        headers: {
          'Content-type':'application/json'
        }
      );
    });

URL : api/delete/<id>
We first get the id passed in the URL and store it in the variable idN. Next, we use that variable to search if any entry exists in the data variable with the given id.
If it dosen't exist null is returned and we return a Response object of status code 404(Not Found).

If Id exists, we remove the entry from the data variable and the deleted information is returned in the Response with a status code of 200(OK).

Well folks, thats it for now. You can access the above codes on GitHub.

Where can you go from here

In this article you learned how you can read/add/delete from a database(here, a json file).

You can take it to the next level by connecting to a online database like Supabase, Firebase, Mongo, etc and make a production level API.
You can also add a Authentication or Authorization check and allow only the requests that sends a Valid Bearer Token to perform the operations.

If you have any doubts while working with the codes in this article, feel free to reach out to me on my handles:

Twitter : @GopinathanAswin

LinkedIn : Aswin Gopinathan

So, it's a good bye then. I will see you in my next article!

Create an API with Dart + Heroku

Aswin Gopinathan — Thu, 11 Nov 2021 15:33:38 +0000

When you first started learning Flutter, you might have come across videos on Working with APIs in Dart/Flutter right?
But did you ever think about How to build your own API with Dart ?

API be like:

Worry not when i am here!

In this tutorial you are gonna learn just two things :

Create your own API with Dart
Host it and make it public using Heroku

But, we need some data which we can send through the API right? 🤔

Let's use Supabase !

So, i have created a Database table in Supabase with the following content :

Check out the official documentation to know how you can create and add rows to your database.

Now head over to your IDE and create a new Dart project and select Dart->Web Server. This article uses IntelliJ, but you can replicate the same steps in your IDE too!

Enter an appropriate name and create the project.

A bin/server.dart file will be created which contains our server code that will create our API.

Optional Section

This section is for those people who are using Visual Studio, chances are you may not get an option to create a Dart Server App with the above template.

No worries, you can follow the following steps :

1) Create a plain Dart Command-line App :



dart create my_server

2) Rename the file inside bin folder to server.dart. You can use any name, i have used this name so that we are on the same page :P

3) Add the following dependencies in pubspec.yaml file :



dependencies:
  args: ^2.0.0
  shelf: ^1.1.0

4) Add the code given in the section below to your newly created server.dart file.

Your server.dart file should look like this :



import 'dart:io';

import 'package:args/args.dart';
import 'package:shelf/shelf.dart' as shelf;
import 'package:shelf/shelf_io.dart' as io;

// For Google Cloud Run, set _hostname to '0.0.0.0'.
const _hostname = 'localhost';

void main(List<String> args) async {
  var parser = ArgParser()..addOption('port', abbr: 'p');
  var result = parser.parse(args);

  // For Google Cloud Run, we respect the PORT environment variable
  var portStr = result['port'] ?? Platform.environment['PORT'] ?? '8080';
  var port = int.tryParse(portStr);

  if (port == null) {
    stdout.writeln('Could not parse port value "$portStr" into a number.');
    // 64: command line usage error
    exitCode = 64;
    return;
  }

  var handler = const shelf.Pipeline()
      .addMiddleware(shelf.logRequests())
      .addHandler(_echoRequest);

  var server = await io.serve(handler, _hostname, port);
  print('Serving at http://${server.address.host}:${server.port}');
}

shelf.Response _echoRequest(shelf.Request request) =>
    shelf.Response.ok('Request for "${request.url}"');

I know you will be like :

So, Let's break it down and understand each line.

1) Defining the Host Name :



const _hostname = 'localhost';

If you are debugging, then we use localhost for testing the application. But we have to change that once we plan to host it somewhere like Heroku or Cloud Run.

We will be changing that at the end of this article where we will be hosting this API on Heroku.

2) Line 11 and Line 12 is for Argument Parser, if you wish to send the port number to use via Command Line Arguments.
eg:



 dart run bin/server.dart --port 8081

3) Define the port to be used programmatically :



 var portStr = result['port'] ?? Platform.environment['PORT'] ?? '8080';

If we haven't passed the port number through the CLI, we check if we are using any Hosting Service (since they have their own ports) and use the Port defined by its Environment Variable. Still if it returns false (ie, we are in debug mode) we use our custom port of choice (Here, 8080).

4) Handle Invalid Port Numbers :



if (port == null) {
    stdout.writeln('Could not parse port value "$portStr" into a number.');
    // 64: command line usage error
    exitCode = 64;
    return;
  }

5) Now the fun part! We define the Pipeline which the server has to use to receive requests and send responses to the caller.



var handler = const shelf.Pipeline()
      .addMiddleware(shelf.logRequests())
      .addHandler(_echoRequest);

We use a Middleware defined by the shelf package to log the requests incoming to the server, and we define a Handler method to handle the incoming requests.
The Handler takes appropriate action based on the request method and returns some data.

6) Serve the Server :



var server = await io.serve(handler, _hostname, port);

We attach the Pipeline, the Host Name, and the Port Number to the server and make it functional. Now, your Server is ready for action.

But wait! We have just one more thing left before we hit the RUN Button.

We have to define the Handler Method.



shelf.Response _echoRequest(shelf.Request request) =>
    shelf.Response.ok('Request for "${request.url}"');

It returns an object of type Response and takes in an argument of type Request.

Does this architecture ring a bell for you ? 🔔

Yes, its our normal Web Server Architecture where we send Requests from the browser and the server returns a Response.

So, every time you call this program (ie, by using GET/POST/DELETE etc), this particular method is called and further processing happens from here. That's why we have attached this method as a Handler in the Server Pipeline.



shelf.Response.ok('Request for "${request.url}"');

This line says that "We have received your request and its perfect, so we are giving you a 200 Status Code with the data 'Request for ${request.url}'"

See that wasn't so bad right?

Now, lets connect our Supabase DB to our Dart Code.

We need to use the official Supabase Dart package :

https://pub.dev/packages/supabase

Now, open server.dart and import the supabase package :



import 'package:supabase/supabase.dart';

Now, create a new method which will act as the Handler method when we call the url /users :



Future<shelf.Response> _echoUsers(shelf.Request request) async{
  final client = SupabaseClient('<SUPABASE URL>', '<SUPABASE KEY>');

  // Retrieve data from 'users' table
  final response =  await client
      .from('users')
      .select()
      .execute();

  var map = {
    'users' : response.data
  };

  return shelf.Response.ok(jsonEncode(map));
}

The Supabase URL and Supabase Key can be found from your Settings page in Supabase Dashboard.

anon public is the Supabase Key

The table created in Supabase DB is named users and we have used the same table to select all rows in the table and return them into the variable response. The query returns a list of rows which is directly stored into the users key of the map variable, and then returned as response for the API call.

Now, we need to add the routing. Remember, in the last section i had mentioned that _echoRequest() method is called every time we hit the API. So, once we reach there, we need to route to the correct Handler method based on the API URL. ie, If we enter /api we should call the Handler method defined for that request. Similarly, here we are calling /users, we need to route to the method _echoUsers.

So, we change the code inside _echoRequest as follows :



Future<shelf.Response> _echoRequest(shelf.Request request) async{
  switch(request.url.toString()) {
    case 'users': return _echoUsers(request);
    default : return shelf.Response.ok('Invalid url');
  }
}

Now, every time you hit the url /users, it will call the _echoUsers method in which we pass the request object.
If we try to access any other urls, a message "Invalid url" will be returned to the user.

But, i missed something! How does the code request.url.toString() work ?

Let me explain it with an example. Imagine you typed the following url in the browser : http://localhost:8080/users, request.url.toString() will return 'users'.
Similarly, if you typed the url : http://localhost:8080/users/aswin/profile, request.url.toString() will return 'users/aswin/profile'.

So, basically that snippet of code will return anything after http://localhost:8080/.

Well, now i see you have become an expert in building and deploying a full-fledged API in your local machine. But, trust me there are lot of Middleware packages available on pub.dev that extends the capability of the shelf package.

I will share more details at the end of this article. But before that, we have one more task left. Right?

Yes! Lets host this and make this API available to everyone!!

Hosting with Heroku

This section will take just 5 mins of your time. And in the next 10 mins your API will be live!

1) Head over to the Heroku Website and login using your credentials.

2) Create a new app from your dashboard.

3) Your app dashboard should look like this :

4) Next, Download and install the Heroku CLI

5) From the CLI, login into your Heroku account if you haven't yet.



$ heroku login

6) Initialize a Git Repository. Type the following Commands while inside the root directory of the project.



$ cd my-project/
$ git init
$ heroku git:remote -a <heroku-app-name>

7) Now, we need to initialize the Build pack which will be used by heroku to launch the dart app.
Check out the build pack we are gonna use on GitHub

Type the following command :



$ heroku buildpacks:set https://github.com/igrigorik/heroku-buildpack-dart.git

8) Next, we need to set the Environment Variables in our Heroku Console. Head to Dashboard->Settings->Config Vars-> Reveal Config Vars and add the following key and value :

key : DART_SDK_URL
value : Link to the Dart SDK zip file for Linux from the Official website

At the time of writing this article, this was the link to the latest stable version of Dart SDK for Linux : https://storage.googleapis.com/dart-archive/channels/stable/release/2.14.4/sdk/dartsdk-linux-x64-release.zip

You can go to the Official Dart SDK site and search for the x64 package for Linux.

9) Next, head over to your root director of your project and create a new file named Procfile without any extensions.
Add the following content to the file :



web: ./dart-sdk/bin/dart bin/server.dart

This will automatically run the server.dart code when you run the public link.

10) Now, its time to push the code to heroku!



$ git push heroku master

You will get the link to the public URL which you can use it to access the API and even share it with the community 💙

Hurray!!

You just created your own API and hosted it on Heroku. Give yourself a pat in the back!!

If you are facing any issues anywhere, feel free to reach out to me on my handles :

Twitter : @GopinathanAswin

LinkedIn : Aswin Gopinathan

Don't go yet!

You might be thinking, where you can go ahead from here right?

Like i mentioned before, shelf is just a Web server Middleware, it requires a lot of other add-ons to make a Full-Fledged API. Some of the few add-ons are :

1) Shelf Router

2) Shelf Router Generator

3) Shelf Static

4) Shelf WebSocket

5) Shelf CORS Headers

6) Shelf Proxy

You can read more about these in Filip's Article : Shelf — Web Server with Dart

I guess its bye-bye time now :😔 , but i will be back soon with more articles as i learn something new!!

Happy coding!

StringBuffer in Dart

Aswin Gopinathan — Tue, 28 Sep 2021 04:27:35 +0000

Imagine you are building the next Billion Dollar app 💵 that has a lot of innovative features which are new to the tech world. But your app crashes a lot! Further investigation proved that the code you wrote for the app is not optimized.
Uff ! Thats a bummer 😐. What would you do?

Well, you call me 📲 !
Nahh, just open this tutorial.✅

Most of the apps out there incorporate String Concatenation in some or the other way. It could be to join the First Name and Last Name of a person, or get the list of cities the user has travelled this year, and the list goes on.

Most of the developers including me, follow one approach for string concatenation, ie, using the '+' operator.
Here is a basic example to illustrate what i meant:

String? firstName = "Aswin";
String? lastName = "Gopinathan";

String? fullName = firstName + " " + lastName;

This is the most typical approach, and it's easier too. But this approach comes with a price.

And the price is memory !!

Let's see another example where we concatenate strings from a List:

List<String> cities = ["Bangalore","Mumbai","Delhi","Chennai"];

String finalCities = "";

for(String city in cities) {
  finalCities += (city+' ');
}

print(finalCities);

The output will be:

Bangalore Mumbai Delhi Chennai

You might have read that Strings in dart are immutable. But, we just updated finalCities multiple times. How is it even possible?

Well, the answer to this magic is that every time we concatenate a new string, the compiler allocates a new memory for the resultant string, and the garbage collector is called to de-allocate the previous memory location.

So literally the garbage collector is called for every item you concatenate, and for each of those iterations a new memory location is assigned !!

Finding it hard to believe? Its okay, i understand.

Let's do one thing. Write this line of code inside the for loop from the previous code snippet:

print(identityHashCode(finalCities));

This line of code prints the hashcode of the memory address of the variable finalCities.

What do you see? The output should be like this:

The values may differ for you.

So, it is pretty clear from this that the variable finalCities uses different memory location in every iteration.

But dont worry, if i bummed you out with this, i will fix it too !!

Enter : StringBuffer 🥁🥁

Me : "Welcome StringBuffer to this article"
StringBuffer : "Ahoy ! Let me introduce myself. My name is StringBuffer. I take care of the mess that my ancestor String creates. You know he is pretty old-school.
Me : "I know but he is still one of the best. So without any further delays, let me tell everyone how you work."

So, as the official dart docs says :
"A class for concatenating strings efficiently. Allows for the incremental building of a string using write() methods. The strings are concatenated to a single string only when toString is called."

Let me break that down for you.

StringBuffer is a class that lets you concatenate string efficiently. Duh! you just read that above.
Well, how it works is you use the inbuilt method write() to concatenate strings instead of the + operator. But what happens with StringBuffer is that, it stores the string in a buffer and not in a memory location. It uses the memory only when the toString() method is called to create a String object.

Tada! Now you don't have to worry about the memory being allocated every time you concatenate.

See, StringBuffer is a superhero 😎

Well, thats all for the theory part 😉
But don't go yet, let's get our hands dirty. Shall we? 😋

So, lets open a new dart file and start off with the main():

void main() {
  // Enter code here
}

Let's create a StringBuffer object first. We will be using the same List as before:

StringBuffer sb = StringBuffer();

List<String> cities = ["Bangalore","Mumbai","Delhi","Chennai"];

Now, rewrite the for loop as follows:

for(String city in cities) {
  sb.write(city+" ");
  // print(identityHashCode(sb));
}

We use the write() to append new strings to the end. You can uncomment the print() statement to confirm no new memory location is created for every concatenation.

Well, now print the result:

String cityList = sb.toString();
print(cityList);

It is at this point a memory location is created to print the concatenated string.

Wow! Thats really great. Now you have reduced one of the many causes of memory leaks in your app 👏👏.
Now, you are one step closer to releasing that Billion-dollar app.

So, with that i am ending this article. But this is not the actual end. I am still exploring Flutter and Dart and as i learn anything new, i will be back with more articles.

So till then, Bye bye !!! 👋