Noted: Let’s make an app: part 1

I’ve gone and got all inspired and decided I’ll make and deploy an application, because that’s something I’ve never done.

The idea:

“A cross platform notes application, a la Mac notes app, but one that works on Mac, Windows, Android and IOS“

The approach:

I’ve always talked a lot of shit at work about how the best way to make products is to quickly deploy something that is ugly and only minimally functional, and then improve it.

The thinking behind this is that you prove very quickly to yourself whether what you’re trying to do is feasible, and flush out any major issues.

Quite often, this has not been feasible in paid employment.

To avoid being one of those annoying neck beard types who always has a better way of doing things, but never seems to have actually built anything, I’m going to try actually doing things the way I think they should be done, and see if I am full of shit or not.

Dear diary (week one):

I’ve been thinking vaguely about what I want this app to do, and how I might do it for a while.

Much though I love Angular and front end development, I’m also really really really really bored of writing the same kind of code over and over again.

I’m curious about the back end, and other UI bits, so one of the constraints for this project was that it should have as little do do with single page applications as possible, and as much to do with the other parts of making an application as I can stomach.

My initial MVP specification for the app was:

• An IOS app which can edit and save notes to a database via an API

My initial shopping list of things I thought I might need were:

• An API (maybe Node.js?)

• Some sort of database

• An IOS app

• Some way of deploying the app

At the end of the week, somewhat impossibly, I have:

• An Express API, deployed to Heroku for getting notes from a database, and pushing notes to a database
• An IOS app which I can install on multiple phones (not in the app store), which syncs across multiple clients

Not bad!!!

Video here

How did I get here?

I was pretty sure that I wanted to start with the API and the database, so that’s what I did. I knew a tiny bit of express, but not much more than that.

I found a few guides, but this was by far the best:

https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs

The MDN docs continue to amaze me with how good they are.

If you take nothing else from this post, remember the following:

*If you want to find out how to use a web technology, start with the MDN docs *

That guide basically chose three of the main components of the app for me, which I was truly fine with.

• Heroku for deployment (cloud)
• Express for the API
• MongoDB Atlas for the database (cloud)

My API has one route ‘/notes/:username’, with GET and PUT methods on it:

router
  .route("/:username")
  .get((req, res) => {
    Notes.findOne({ username: req.params.username })
      .then((notes) => {
        res.json(notes);
      })
      .catch((err) => res.status(400).json("Error: " + err));
  })
  .put((req, res) => {
    Notes.find({ username: req.params.username }).then((notes) => {
      if (notes && notes.length) {
        Notes.update(
          {
            username: req.params.username,
          },
          {
            username: req.params.username,
            content: req.body.content,
          }
        )
          .then((doc) => res.json(doc))
          .catch((err) => res.status(400).json("Error " + err));
      } else {
        Notes.create({
          username: req.params.username,
          content: req.body.content,
        }).catch((err) => res.status(400).json("Error " + err));
      }
    });
  });

I got it working locally first, and convinced myself that I was happy enough that my very basic database schema sort of worked (here it is below in Mongoose, the library I am using to talk to the MongoDB database).

const mongoose = require("mongoose");
const Schema = mongoose.Schema;

const notesSchema = new Schema({
  username: {
    type: String,
    required: true,
    unique: true,
    trim: true,
  },
  content: {
    type: String,
    required: true,
  },
});

const Notes = mongoose.model("Notes", notesSchema);

module.exports = Notes;

Deploying the API to Heroku was a dream, and means I can now make lots of tiny incremental changes to my back end, which is nice!

Once that was done, I cobbled together a native IOS application, and wrote some truly horrible code to make it poll the API for changes.

So far, the approach is working, and it’s very motivating getting something visibly working so quickly.

What’s next?

Next I want to sort out the communication between the server and the client(s) better. Polling is gross, and I want a better solution, which allows the server to push any changes out to all clients. After initial digging, socket.io looks promising.

I did attempt to get server sent events working (see below), but I couldn’t find a way of getting them to work nicely on IOS, as the API for consuming events is currently only natively in browsers. There are solutions that exist, but I wasn’t comfortable dumping somebody else’s massive lump of Objective-C into my project as a dependency, as I honestly don’t understand the IOS side of things anywhere near well enough for that.

https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events

I also want another client up and running, probably a desktop application for Mac. I’m considering using Electron for this.

Further down the line, I’ll need some sort of auth/identity stuff.

So far this project has been great, and I’m looking forward to another week of it.