DEV Community: KhoPhi

Explain Declarative vs Imperative Programming like I'm 5

KhoPhi — Mon, 03 Feb 2020 12:07:56 +0000

And perhaps, throw in why, as a 5-year-old, I will wanna use one over the other (if that makes any difference)

Getting Started with the Aqueduct Framework

KhoPhi — Thu, 25 Apr 2019 13:55:53 +0000

You ain't got time. I ain't got time neither. Let's get over with this pretty quick. Here are some of the facets of the Aqueduct framework you stand to understand in this guide.

Starting an Aqueduct project
Handling Migrations and providing seed data or fixtures for migrations
Routing i.e handling params and query params
Making CRUD requests, handled by a controller
Using PostgreSQL as backend
Basic pagination in Aqueduct
Writing basic tests.

The reason behind the article (as well as many of my others) is the frustration I went through getting the most basic things done, and the unnecessary lengthy process other tutorials/articles go through, winding long and time wasting. For the full rant, see at the end.
TL;DR

Without much ado, let's rock and roll

Setting Up Project

I'm not gonna pamper you. Here's how to setup an Aqueduct project. You don't have time, so just straight to the meat

Setting up Database

Create a postgreSQL database, call it anything you want.

  $ sudo -u postgres psql
  > CREATE USER projectuser WITH PASSWORD 'password';
  > CREATE DATABASE mydatabase;
  > GRANT ALL PRIVILEGES ON DATABASE mydatabase TO projectuser;
  > \q

Then create a database.yaml file in the root project (same location as the pubspec.yaml), and put in these:

username: 'projectuser'
password: 'password'
host: 'localhost'
port: 5432
databaseName: 'mydatabase'

The above database.yaml is for the aqueduct dbcommands to make connections to the DB. However, for our application to speak to the database, we need update the config.yaml with our database info.

database:
  host: 'localhost'
  port: 5432
  username: 'projectuser'
  password: 'password'
  databaseName: 'mydatabase'

Migration

If you're coming from somewhere like Django or Laravel, migration is likely a piece of cake for you.

Otherwise, think of migrations as a way to communicate your schema changes to the database, for real. If you didn't get that, please google for more details on migrations
TL;DR

Last but not least, run the migration, to convey what database scheme we have and want to the database for real. You can check the migrations/00000001_initial.migration.dart file to see what is gonna happen.

Also, seed/fixture data is added for free. Duh!

Run aqueduct db upgrade to commit the migration to database.

Run Application

In the project root folder, run aqueduct serve

Since this project is API endpoints only, you'll have to consume using a REST Client, such as Postman.

If using Postman, check out this API request collection to help you get started with consuming your endpoints. You might wanna read on how to use the collection in Postman.

We've spent 2 seconds already. That's too much time. Let's actually get into the real deals

Application Channel, Entry Point & Routing

In the lib/channel.dart is where we find, more or less, the bootstrapping of our application, and the few get-outta-ways we'll want done, such as, keeping in touch with the database by loading the config file, and also create one or two routes.

Nothing extraordinary happening. Just the same principles you know from your Ruby, DJango or Laravel. Heck, even Angular!

Update your lib/channel.dart file with these contents

import 'controller/icd_controller.dart';
import 'dart:io';
import 'mpharma.dart';

class MpharmaChannel extends ApplicationChannel {
  ManagedContext context;

  @override
  Future prepare() async {
    logger.onRecord.listen(
        (rec) => print("$rec ${rec.error ?? ""} ${rec.stackTrace ?? ""}"));

                   // this Class is at the bottom
    final config = DatabaseConfig(options.configurationFilePath);

    final dataModel = ManagedDataModel.fromCurrentMirrorSystem();

    final persistentStore = PostgreSQLPersistentStore.fromConnectionInfo(
      config.database.username,
      config.database.password,
      config.database.host,
      config.database.port,
      config.database.databaseName,
    );

    context = ManagedContext(dataModel, persistentStore);
  }

  @override
  Controller get entryPoint {
    final router = Router();

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

    router.route('/icd/[:id]').link(() => ICDController(context));

    return router;
  }
}

class DatabaseConfig extends Configuration {
  DatabaseConfig(String path) : super.fromFile(File(path));

  DatabaseConfiguration database;

  @optionalConfiguration
  int identifier;
}

In English:

We're importing a few. dart:io allows us to read files (we're reading the config.yaml file. Think of it as magic!
We also load a controller file. If coming from Angular, think of it as the Component.ts file
Then we create some routes. This part, lemme explain a bit

router.route('/icd/[:id]').link(() => ICDController(context));

A lot is packed into the above single line of code. So much, I can write a book on this line alone. But well...

The above route matches anything like this

example.com/icd GET
example.com/icd POST
example.com/icd/1 GET
example.com/icd/1 PUT
example.com/icd/1 DELETE

example.com/icd?limit=x&offset=x

The [:id] is the params. The [ ] around it makes that param optional. Thus, without an ID param, it'll do just fine. So if example.com/icd comes in, the application will do just fine.

You'll see how each of these HTTP verbs are handled in the controller when we switch over to it next. However, know that we're using the HTTP verbs, as many as possible, at least to distinguish the requests

The ICDController() was imported from the controller, which handles the routes coming through this endpoint.

To pass query params, just pass it in the URL, like it's done in other frameworks. You only deal with the query params, if any, when in the controller.

So you see, just a single line, all the punch it throws? Excited yet? If not, the Controller might whet you up!

Mr. Controller

Our ~~Component~~ Controller is where we handle the logic and communicates through the ORM that comes with Aqueduct to the Database. Above, we setup to use PostgreSQL, which depending on who you ask, is the best Relational Database platform in the world.

'Abeg', let's end the DB wars here!

Like other platforms, having a model for our database means we can more or less regulate what data structures flows through our application, and into the database.

In Aqueduct, we do so, by creating a model/icd_model.dart

import 'package:mpharma/mpharma.dart';

class ICD extends ManagedObject<_ICD> implements _ICD {

  @override
  void willInsert() {
    createdAt = DateTime.now().toUtc();
  }
}

class _ICD {
  @primaryKey
  int id;

  @Column()
  String categoryCode;

  @Column()
  String diagnosisCode;

  @Column()
  String fullCode;

  @Column()
  String abbrDesc;

  @Column()
  String fullDesc;

  @Column()
  String categoryTitle;

  @Column()
  DateTime createdAt;

}

The only part I'll comment on is

  @override
  void willInsert() {
    createdAt = DateTime.now().toUtc();
  }

In Mongoose (ExpressJS, NodeJS, MongoDB), there's the { timestamp: true } option, which when specified, any data passing through the schema into the database, gets a createdAt and updatedAt timestamps. It happens for free, seamlessly

In Aqueduct, a similar result can be achieved via the model signals. In the case above, whenever there's an insert about to happen - willInsert(), cook up a createdAt field, slap in there the current Datetime in UTC format, then add as a field to whatever data structure is about to be saved.

The rest of the code is, well, code!

I keep dangling the controller in your face, but not showing you the code? Here we go

import 'package:aqueduct/aqueduct.dart';
import 'package:mpharma/mpharma.dart';
import 'package:mpharma/model/icd_model.dart';

class ICDController extends ResourceController {
  ICDController(this.context);

  final ManagedContext context;

  @Operation.get()
  Future<Response> getAll({@Bind.query('limit') int limit, @Bind.query('offset') int pageby}) async {

    limit ??= 100;
    pageby ??= 0;

    if (pageby != null) { pageby = pageby * 10; }
    
    final icdQuery = Query<ICD>(context);

    icdQuery
      ..pageBy((p) => p.createdAt, QuerySortOrder.descending)
      ..fetchLimit = limit
      ..offset = pageby;
      
    final icds = await icdQuery.fetch();

    return Response.ok(icds);
  }

  @Operation.get('id')
  Future<Response> getById(@Bind.path('id') int id) async {
    final query = Query<ICD>(context)..where((icd) => icd.id).equalTo(id);

    final icd = await query.fetchOne();

    if (icd == null) {
      return Response.notFound(body: 'Not found');
    }

    return Response.ok(icd);
  }

  @Operation.post()
  Future<Response> createICD(@Bind.body() ICD body) async {
    final query = Query<ICD>(context)..values = body;
    final insertICD = await query.insert();

    return Response.ok(insertICD);
  }

  @Operation.put('id')
  Future<Response> updateById(
      @Bind.path('id') int id, @Bind.body() ICD body) async {
    final query = Query<ICD>(context)
      ..where((icd) => icd.id).equalTo(id)
      ..values = body;

    final icd = await query.updateOne();

    if (icd == null) {
      return Response.notFound(body: 'Not found');
    }

    return Response.ok(icd);
  }

  @Operation.delete('id')
  Future<Response> deleteById(@Bind.path('id') int id) async {
    final query = Query<ICD>(context)..where((icd) => icd.id).equalTo(id);

    final icd = await query.delete();
    return Response.ok({'state': true, 'msg': 'Delete successfull'});
  }
}

A lot to unpack here? Nope. Just a few

  @Operation.get()
  Future<Response> getAll({@Bind.query('limit') int limit, @Bind.query('offset') int pageby}) async {
    print(limit);
    limit ??= 100;
    pageby ??= 0;

@Operation.get(), @Operation.post() etc, is more like the router.get('/url', req, res) in Express

Future<Response> getAll({@Bind.query('limit') int limit, @Bind.query('offset') int pageby}) async { .. }

Take note of this part first,
getAll({@Bind.query('limit') int limit, @Bind.query('offset') int pageby})

When you do getAll(@Bind.query...) it means totally different from getAll({@Bind.query ...})

Do you notice the difference? The second one is in curly braces. The first is not.

Within curly braces mean it's optional parameters, thus, in the above within the braces, if the URL doesn't supply any query params, we'll do just fine.

    limit ??= 100;
    pageby ??= 0;

    // should this next line even be there? I wrote it
    // Can't tell for sure if it should be there. ¯\_(ツ)_/¯
    if (pageby != null) { pageby = pageby * 10; }
    
    final icdQuery = Query<ICD>(context);

    icdQuery
      ..pageBy((p) => p.createdAt, QuerySortOrder.descending)
      ..fetchLimit = limit
      ..offset = pageby;

limit ??= 100; is basically saying if the limit query param is empty, just assign 100 to that var. Same for the pageby

The rest, is just straight code written in English. If any part of the controller code isn't clear, kindly leave a comment. Otherwise I take it as y'all readers (more like my classroom students) said "Yes sir, we understand" to me.

Conclusion

And so we're done. Source code to above project here:

Aqueduct CRUD API

Leave any comments you might have in the comment section below.

If you're into tests, check the sample Test I wrote for this project.

Do you tidy up your workspace when done coding?

KhoPhi — Thu, 28 Mar 2019 00:30:29 +0000

At the end of each coding session, I close all open files and collapse all sidebar menus.

When I open up my code editor for the next coding session, I easily get confused and distracted with all those open files etc.

'Cleansing' the workspace at the end of each coding session allows me to 'ramp' up to where I left off the previous time in style.

However, in the middle of implementing a feature/fixing a bug, I only put computer in sleep mode.

When done, with feature, pushes, CI builds, reflects on live, then the cleansing begins.

Anyway, do you clean your workspace after each coding session, or you just slam the laptop lid shut and you're done?

Explain 3G, 4G and 5G like I'm 5

KhoPhi — Tue, 19 Mar 2019 17:36:21 +0000

The fastest PWA blog experience I’ve always dreamed of

KhoPhi — Sat, 23 Jun 2018 14:01:54 +0000

Progressive Web Apps (PWA) is the 'distin' now. I had fun consuming my WordPress blog via API with a new UI, built as a PWA using Angular

There's a bonus feature on Khophi.Blog. Scroll down to try it.

Earlier this year, I wanted a playground to have fun. My blog powered by WordPress has a boring UI (kinda), although it gets the job done.

Aside the UI, the load time also was an issue for me. I stopped showing ads on the blog, with hopes it'll improve the load speeds.

Well, that move did help, except not much.

I could throw more firepower to my servers, and or do even more caching and other optimizations to get things going faster.

Or, I could consume the WordPress via it's API. I went with this option, and Khophi.Blog was born.

PWAs - I might be obsessed. Help me!

All I can think of for close to a year now is how best I can leverage the ever improving web technologies to build better, mobile-ready, and richer applications.

So a PWA is basically, as defined by Ionic,

"are a new way to offer incredible mobile app experiences that are highly optimized, reliable, and accessible completely on the web."

It's a website, a web application, but mobile users can at the same time experience the application as a mobile app on their phones.

Angular is my go-to for building my PWAs.

So Khophi.Blog

I built Khophi.Blog to be as minimalistic as possible, with the utmost focus on speed. Thus, everything about the site is fast, lean, streamlined, and depending on who you ask, boring! And no ads.

To achieve the above, Angular Framework was the choice of front-end framework for the UI plumbing. The grooming and fashion part is handled by UI Kit.

The backend is blog.khophi.co (a WordPress CMS), which exposes API endpoints of which the frontend consumes.

As you peruse the code, you should come across features making use of functionalities like

It's PWA, installable on mobile and desktop
Angular Animations
The use of @Input and @Ouput for component interactions
Handling offline mode
Code reusability (via Components)
HTTP Service
Infinite scrolling
Web Share API
Caching content for offline viewing

Development

I'm constantly looking for ways to even make the application faster, and thinking of what I might need to remove to achieve that.

"It seems that perfection is attained not when there is nothing more to add, but when there is nothing more to remove" - Antoine de Saint Exupéry

The project is available on Bitbucket, and PR and or Issues are welcome.

Bonus

You can now try your WordPress blog via Khophi.Blog.

Steps are

Visit khophi.blog
Tap/Click on the Hamburger menu
Select "Try"
Enter your WordPress site URL in there. Don't begin with https:// and don't end with anything after the domain. E.g theafricandream.net
The blog will change to loading content from your WordPress blog. Depending on how complex you've rigged your WordPress site, some things might break. Happy to hear all the errors, if any.

Simply raise an issue and I'll take a look. If PR too, the better.

See the GIF below to learn how.

Enter your WordPress URL and start exploring your blog via KhoPhi Blog. I hope you enjoy the speed and ease PWAs bring.

Someday, I might fully replace blog.khophi.co with khophi.blog for good!

This article was shared from Blog.Khophi.co

Google Duplex - The Conversation about Ethics?

KhoPhi — Thu, 10 May 2018 10:10:30 +0000

In case no idea what Duplex is:

I for one, don't care, talking to a robot, whether I know or not, as long as it gets the job done, can convey the thoughts in a manner that is complete.

Heck, we "talk" to Siri, Google Assistant and Alexa everyday.

Google's Duplex is more like the other way round, where the Assistant rather initiates the conversation, and does it so well, it's human-like.

Is it ethically wrong? What are the moral implications?

// Detect dark theme var iframe = document.getElementById('tweet-994028523563241472-521'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=994028523563241472&theme=dark" }

Should such robot's 'disclaim' themselves at the very beginning of such calls?

Are you likely to pick a call by a bot if you know it's a bot, and the bot tells you, it's a bot?

And just a fun scenario:

// Detect dark theme var iframe = document.getElementById('tweet-994077948029362176-643'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=994077948029362176&theme=dark" }

Storing Image File (binary) vs Image Base64 in Database

KhoPhi — Mon, 30 Apr 2018 12:55:02 +0000

Using frameworks like Django, the file is saved onto the harddrive, and a link pointing to the file is rather stored in the Database, which is fine.

In my current API approach for uploading content, I submit the form, the part where there are images using the standard form data posting (the usual multipart/form-data).

So I simply cook up a payload that mimics the usual form-data submit using Angular, then push to an endpoint that accepts the form data submission.

Recently, I'm thinking of going full base64 images.

As in,

User selects image to upload
Behind the scenes (on the browser), I encode the image to base64 string
User submits form, then the usual JSON payload is sent with the image field as base64

So something like:

{ data: 'string'
  image: 'base64 string'
}

I've done the base64 image approach some time ago, and it was great (at least to me).

Are there any performance issues with going with base64 image strings for storage in Database? Any caveats to look out for?

Web Dev attempting Photography - Any Advice?

KhoPhi — Tue, 27 Feb 2018 01:03:05 +0000

I have always had an interest in photography. Now, I have the means to get a few beginner gadgets to start. I'm currently full time employed as a frontend web developer. However, I wish to take on photography as part time.

Any tips on what I should keep in mind?

Perhaps, someday, the photography endeavor might become my full time job, however until then, what steps can I take?