[Project A] Devlog #5: UI

Before we begin, you can check out the previous entry in this case by clicking this link.


In the last entry of this series, I ended up creating an endpoint I could use to generate attendance data, did a little bit related to the attendance stuff, and left it at that. I intend to get back to it but for now, I want to integrate the existing APIs into the existing UI.

Today was a UI day (yayyyy). It's been a while since I have worked with flutter on an actual project. I do use flutter in my day-to-day work, but working with a project is a different thing entirely.

The existing UI for the app didn't have authentication, so that is what I tackled today. It was rather straightforward as the architecture that I use for flutter has served me quite well. I use an architecture inspired by the Android Architecture Components (AAC) ViewModel architecture. I take out and add stuff when it is required by the project and in this case, there are a few things I do not need, so I had to plan out how to integrate the auth and the rest of the APIs that I want to expose for this demo.

I was initially testing on MacOS desktop but since the app will be web-based, I decided to test on Chrome as well and I immediately hit CORS (my old frenemy). Setting up cors in phoenix, however, was really easy so it saved me from a ton of hair-pulling.

To future readers who may want to set up cors in a phoenix project, you can do so this way

  • Add the cors_plug library to your deps block in your mix.exs file.

  • Add the following line to your endpoint.ex file, above your Router

    •     plug CORSPlug
      

      You may want to specify the origins and you can do so by adding

    •       plug CORSPlug, origin: "*"
      

That was all it took to setup cors (I had already added the plugin, but I never did the setup). After the setup, I connected my UI to the backend to see if everything worked and it works just fine (albeit there are some code paths I have not closed yet, will do that later).

All in all, today was not very eventful, but at least we made progress. Here's to hoping we can get the demo out by September 3rd. Until next time, I bid you adieu.