Original address: medium.com/flutter-com…

Original author: medium.com/@suragch

Published: February 6, 2020 -8 minutes to read

Dart and Aqueduct on the server

If you’re already a back-end developer, you can give up reading. Your current skills are useful for your Flutter application.

If you’re not interested in Flutter, you don’t have to read about it. You might want to learn from a more popular backend server framework, such as Node.js.

If your serverless Firebase setup works fine for you, don’t let me discourage you.

introduce

All right, is everyone else gone now? It’s just you and me, reader. Not long ago, I was just like you. I know about Flutter, but I don’t have any background server experience. Well, let me tell you, you’re going to love the server-side Dart. Being able to code in the same language in both your front-end Flutter application and your back-end server makes the learning curve very, very small. The jump between the two is hardly any different, opening two different files in the same project.

The language we’ll use is Dart to build the server, but if you’re interested in learning more about why I chose the Aqueduct framework, you can read my previous post at the link below.

Dart’s HTTP server framework

Originally I was going to publish this paid course on Udemy. I spent part of the time making all the videos, but it was too long and I needed to move on to other projects. The videos were just sitting around doing nothing, so I decided to upload them to YouTube. I’ll weave them into these written lessons to complement what I’ve written. You are free to skip these written tutorials entirely, but the good thing here is that it will be easier to copy and paste code snippet as you go. It will also be easier for me to update any errors in written content. If you like to listen and read, here’s the first video.

www.youtube.com/watch?v=Wdx…

Content preview

In this series of articles I will guide you on how to set up a secure server as the back end of your Flutter application. If I tell you to do anything unsafe, please leave a message warning others and educating me).

I’m going to divide the course into seven parts.

  1. Introduction (you are here). In this article, you will set up your development environment. This will include installing the Dart and Aqueduct, which you’ll do in a second.
  2. The HTTP request. Learn how to make and process HTTP network requests such as GET, POST, PUT, and DELETE.
  3. Database: Aqueduct uses a database. Aqueduct uses the PostgreSQL database. If this is new to you, don’t worry. If you are familiar with regular databases, there is not much of a learning curve.
  4. Testing: Next comes unit testing. The more I grow as a developer, the more I learn to love unit testing. The biggest benefit of testing in the background is that there is no UI to deal with.
  5. Certification. Learn how to authenticate users with OAuth2 so that only authorized users can access certain parts of the server
  6. Production server. See how you can move everything you do on your local machine to a real server.
  7. Flutter client application. Make a simple Flutter application and communicate with it using the server’s REST API.

Through all of these lessons, we will make a dictionary application. Partly (ok, mostly) because it’s what I really want to do, some of the time. But it also provides a good example of many of the features you’ll want in your own server applications. You can change the details to suit your needs. I’ve even been watching videos of myself recently to relearn these concepts because I’m working on a back-end for another project).

Now you need to install Dart and set up the IDE. If anything is unclear, you can watch how to do it here.

www.youtube.com/watch?v=27H…

Install the Dart

To install the Dart SDK, go to the Dart official website. There you’ll find instructions for installing on Mac, Linux, and Windows.

You might think you could just use the Dart version included with Flutter. This is probably true, but I’ve heard there are slight differences, so I recommend you just install the standalone Dart SDK. That’s what you’re going to be running on the server anyway.

Check to see if you have Dart installed by running the following command from your terminal.

dart --version
Copy the code

As of this writing, my Dart version is 2.7.1.

If your system does not recognize the Dart command, check to see if it is in your PATH. On Mac and Linux systems, for example, you can do this from the command line.

echo $PATH
Copy the code

If DART is not in the path, then you need to add it.

IDE Settings

I’ve been using IntelliJ Idea throughout this series, but VS Code works just fine. If you’re an Android Studio user, IntelliJ is a good fit because Android Studio is based on IntelliJ.

Install IntelliJ from the official website here. Download the free Community version to begin Dart development.

Installing the Dart plug-in

Open IntelliJ, choose Configuration > Plug-ins > Markets in the launch window, and search for Dart. Then install the plug-in. If you already have an IntelliJ project open, you can go to Preferences > Plug-ins to do the same thing. If you’re using VS Code, click on the Extensions button in the sidebar and search for Dart.

We are not going to create a new project in IntelliJ. We will use Aqueduct to accomplish this task in one minute.

Install the Aqueduct

Now that Dart is installed, we’ll install Aqueduct, a framework written in Dart that greatly simplifies the process of making a backend server.

www.youtube.com/watch?v=LS7…

Go to the official Getting Started with Aqueduct page for guidance and documentation. You’ll want to bookmark this site, because there’s a lot of good documentation to help you when you get stuck.

To install Aqueduct, type the following command on your terminal.

pub global activate aqueduct
Copy the code

You may receive a message telling you to add Aqueduct to your path. Once you have done this and restarted your terminal, you should be able to run the Aqueduct command on the command line.

Enter the following content.

aqueduct --version
Copy the code

In writing this article, I am using Aqueduct version 3.2.1. Similarly, if your shell does not recognize Aqueduct, you need to add it to the path and restart your terminal.

Create a new project

In terminal, CD to wherever you want to create the project.

In the original version of this article, I recommended building server-side and client-side files as outlined below, and using a GitHub repo. You can still use this file structure, but for now I recommend using two different REPOs for the client and server. Git Clone is much easier to use if the server has its own repository when you deploy it.

my_project
  my_project_server
    (Aqueduct files here)
  my_project_client
    (Flutter files here)
Copy the code

In this series, I will refer to the Aqueduct project as DARt_server. Create it like this.

aqueduct create dart_server
Copy the code

In IntelliJ (or VS Code), open the dart_server folder. If you get a message about enabling Dart for your project, do so.

REST APIs and HTTP methods

The server you just created is an HTTP server. You will use it to make a REST API to communicate back and forth with your Flutter application. If you are not familiar with these terms, please read the following articles I wrote to supplement this series.

REST APIs and HTTP methods

Running server

At this point you have created an Aqueduct server. Before completing this unit, you should run a test on the server.

www.youtube.com/watch?v=1fa…

In your IDE, open the pubspec.yaml file at the root of the Dart_server project. The file structure is so similar to Flutter that it already feels familiar, doesn’t it?

Good pubspec.yaml.

Change the description to the following.

description: Aqueduct dictionary application
Copy the code

He changed the author to his own name and email address.

author: Suragch <[email protected]>
Copy the code

In the terminal, start the Aqueduct server by running the following command in the root directory of your project.

aqueduct serve
Copy the code

You should see the following output on the terminal.

-- Aqueduct CLI Version: 3.21.
-- Aqueduct project version: 3.21.
-- Preparing...
-- Starting application 'dart_server/dart_server'Channel: DartServerChannel Config: /Users/... /dart_server/config.yaml Port:8888
[INFO] aqueduct: Server aqueduct/1 started.  
[INFO] aqueduct: Server aqueduct/2 started.
Copy the code

Your server is now running

Note:

  • The port is8888. This is the default port for Aqueduct.
  • aqueduct/1andaqueduct/2Are two different server instances. They run on two different Dart isolators, so they don’t talk to each other. Running both instances at the same time allows you to handle more simultaneous connections and take better advantage of multi-core CPU hardware.

You can stop the server by pressing Ctrl+C, but don’t do that yet. You will test the server by issuing a GET request.

Test server

Open any browser and type the following address in the address bar.

http://localhost:8888/
Copy the code

You use localhost because the server is running on its own machine. As I mentioned above, 8888 is the port Aqueduct uses for communication.

After entering this address, you will get a 404 Not Found error.

http://localhost:8888/ not found.

This is actually a good thing, because it means the server is working. Aqueduct is responsible for this error message. It means that you did not define any route for localhost:8888/.

In your IDE, open lib/channel.dart.

lib/channel.dart

At the bottom of the file, you should find a Router object.

router
  .route("/example")
  .linkFunction((request) async {
    return Response.ok({"key": "value"});
  });
Copy the code

Well, you can see that the route defined is /example. Let’s try it in a browser.

http://localhost:8888/example
Copy the code

http://localhost:8888/example

Success! The server returns a JSON key-value pair for the route /example. When the browser visits an address, they make a GET request behind the scenes. In the next section, you will not only make and process more GET requests, but also POST, PUT, and DELETE requests. I’ll add a link here after I finish that article. Until then, feel free to keep watching the series of videos or follow the documentation at Aqueduct.

Translated through (www.DeepL.com/Translator) (free version)