Building a cross platform app — Pt1 Desktop (not a tutorial)

Disclaimer: this is not a tutorial, read at your own discretion. This is a build log injected with my ramblings.

Part 2

Technology: Web/Electron

Repo: Cross Platform App

Purpose/goal

This is a personal app I’ve been meaning to make. It’s nothing new, it’s a combination of different things. I want a way to ingest all the random things and remember what I need to do/have interest in *ehem* use Evernote.

For example, one thing I want is an embedded drawing app… I stole a basic HTML5 canvas drawing prototype from Stack Overflow, I modified it so it works with a drawing tablet(touch) as I have a graphics drawing tablet on my desk. This thing is not ideal so it needs work, I’ve seen some deployed drawing apps and they are really good, they don’t have the problem I face with regard to losing the drag/path being drawn if you circle over a previous path.

Anyway this is a pretty ambitious app, I mean I am not a beginner, but I’m working with a lot of new tech for me, React Native and Electron in particular. I’ll probably have to actually bust out a native Android app for this widget notepad I want as well. Here’s a drawing of the desired features/interface.

These are the features I want, this primarily is a learning tool for me, since my scatter brain mind jumps all over the place, like I was unable to sleep so I started learning about NLP how to tokenize/embedd/vectorization/etc… I’m not an expert but I have an idea, I’ll save that nugget of info.

The base functionality of this cross platform note taking app

So the shared API is going to have the various data stored, mostly text and then will probably connect to S3 as I did that already in another project for storing images.

One of the things I’m trying to figure out is how to make modular/sub-apps for the Electron side. I am aware you can use ReactJS with Electron so I will probably do that after I get the basic thing going, because I can use ReactJS but I need to get that Webpack/build thing going to inject it into Electron.

I’m primarily going to get a basic thing working today so I can start storing stuff. I’ve built these things so many times, it’s not new I mean this is one interface I designed/started building a while back, it was in 2016.

Interface that opens a note(bills) and then search(shows results from partial wildcard search). This thing is running of a Raspberry Pi Zero at this time a basic LAMP stack. (Left) Man look at that interface haha, I was just starting to work out how you dynamically render stuff back then. That clash of non-flat, solid color, too-rounded buttons, ha… (Right). I also just remembered how I had these really stupid ideas of things to build… I’m glad I at least learned how to make stuff so other people could tell me what to make.

Nothing I’m doing is really new, it’s just unified. I mean why does it have to be a desktop app, I have so many tabs open right now(32GB ram) and I told myself I can’t close them until I get something built where I can store/group them. Like the Chrome extension which would be useful for saving tabs, I built an extension before(never released) but I want a topic/keep the state of all the tabs I opened(not for visit just dump the links). I have Windows on my desktop(vms inside) and then Ubuntu on my laptop so that’s why I’d have Windows/Linux deployment of the desktop app.

The Electron interface I’m envisioning which I don’t have a complete design in mind yet, just base functionality, it needs the sub-apps I mentioned.

Unfortunately it is the end of the night but I’m going to build this, I have the base knowledge, even if it’s a crappy thing. I can also steal things like schemas/prepared queries in Node, etc… from recent projects. I’ll host this locally so the API won’t be encrypted yet(no SSL).

This is super ugly but shows the rough thing I have in mind of sub apps on the left and it loads on the right. The canvas is saved to objectDataURL or something like that, I checked and it’s possible to store/get the state back(obviously). The alternative search result would be a pretty/nice-to-have thing, where it’s based on the hits of some search term inside each results and it is shown visually proportionally(ehh).

Tasks to get done for this MVP

• (3hrs) basic API for storing note with title, body
• basic interface
• embed the drawing interface/toggleable
• deploy electron app

I’m using a Raspberry Pi(quad core type) this is one of the ones I have that are on 24/7 doing something. It’s just freeloading so I’ll use it for an API.

Stack as mentioned before is:

• HTML, CSS, JS — will get SASS/ReactJS in future
• Node, Express, MySQL — I don’t mind Postgres but had problems with it in the past

Let’s see how long this takes, I’ll add the time completed above. Also shout out to Traversy Media because I like watching his crash courses to pick up stuff fast like ReactJS and Electron.

I actually followed through his tutorial/did some extra steps(the preload script, nodeEnabled set to false) and deployed a runnable Exe app a few weeks back. This will be the same repo I use for this code except on master branch.

API — start 9:53 PM

So I’m using Postman to develop with and VS Code, Node/Express. I had to build a backend for a PWA project and it was pretty straight forward to use Express/Node. Side note: if you see a vulnerability, please let me know.

I am skipping the auth stuff for now, since it has no encryption anyway/working in local network.

Note I’m going to cheat and use PHPMyAdmin to make/export my database, I can lookup straight SQL but faster to just import.

I’m clearly acknowledging right now that this is not initially intended to be multi-user so the tables will not have user columns for example.

Lol “PHP version 5.6” yeah this thing is old, I may have started working on this even earlier and just kept it because it still worked.

I will just point too, it’s possible I run into problems in Electron with regard to the XHR, I don’t know I have not done that yet inside Electron, just a basic interface. Initially I will just use that over axios inside Node, as I don’t have a way to export stuff yet.

10:46 PM, I’m going to not use search, will just use incrementing versions of entries. This could be considered a bad design in a way but I don’t see each entry changing a lot and I can look backwards if needed. But this also means note count for example won’t be unique, additional logic will be needed for that. The note count was mostly a quick “empty check”.

This moment’s focus loop song is by Studio Killers which I will play on loop to stay in the grove until this is done like an insane person. I’ve been putting this project on the side and been busy lately too(my own fault) but I’m going to get it started/start working on it. I actually have a cool/legit SaaS product/idea in mind that I will also develop but that’s later, it’s not as ambitious as this, it’s just a web application but it’s ambitious in that it has things I haven’t really used much before(other than tutorials) eg. websockets(maybe webRTC not sure) but it’s a collaboration tool that I personally want for productivity/workflow.

Okay progress update, 11:14 PM ran into some minor problems with bodyParser(forgot to set to JSON) also note a lot of this base code I wrote in the past for the previously referenced backend. This is also super basic/probably not the best.

Basic insert, theme is Monokai Pro Spectrum

I need the search/return notes and then I’ll start on the basic interface, I’ll then embed that into electron and try to see if the AJAX part works, I’ll have to stand up the server on the Pi, will probably use systemd . Then I will start saving a lot of random stuff/closing windows ha.

11:42 PM running into a problem with a GROUP BY call that also orders… scanning Stack Overflow posts as I am not a SQL master.

12:01 AM damn… I can’t get past that group by order by it’s not working, I tried the primary key and a date. Moving on that has to get fixed but I may just re-arrange my database schema anyway.

12:07 AM okay, basic API is done damn that was bad, got hung up on that decision of not using search/update, return distinct group but ordered… ehh.

I’m probably going to cheat too(time constraint) and not setup the systemd on the Pi, I’ll confirm it’s working by setting up the MySQL database there and the environment variables, but run the server manually by CLI. The git commits should coincide with these times.

Basic left/right front end — start 12:09 AM

BTW I work later in the morning so I am normally up this late. I also just realized that the API has no pagination, this baby won’t scale! 100x!

I’m sold on this left sidebar idea like a dock but it’s customizeable(obviously where have I seen that before?) but specifically the ability to add sub-apps or “modules” the how I haven’t figured out yet.

I’m using Autodesk Sketchbook. I was using Kira but it started going bonkers on me, oh well.

So the search/note taking is the primary thing that’s going to be functional. The drawing will be functional as well but it will not be able to save/tied to API. The interface is very minimal, all based on timed events eg. onKeyUp this will be all done in plain JS/CSS for now until I get ReactJS and a build/export(webpack probably) to produce the compiled/minified JS to inject into Electron. Responsive design will also be an after thought.

I’m going to use Flaticon for my icons. Document icon by monkik and Pencil icon by Those Icons. Plus by Pixel perfect

My class names are using my feeble understanding of BEM. Plain “freestyle” front end development is easier/faster than using a framework but it’s a PITA when you have to expand on it later/manage state. I learned a lot a front end job I had, I was not a “perfect front end dev” though.

Bear in mind the song I mentioned before on loop is 3.5 minutes long and I’ve been listening to it for I’d say at least 5 hrs now, I was listening to it earlier.

CSS reset is to remove the default browser styles like margin/padding/sizes of text/etc…

I am going to mix px and rem and apply a cursor to a button, the horror. Also I am aware of proportional design vs fixed units. My two monitors one is almost 4000px wide and the other one is just 1920 so using fixed icon sizes can be bad.

Normally with SASS I have helpers for flex, mixins I think? I just pull them in. Global variables for colors and what not.

1:09 AM at this time I have the basic interface, left dock, display area on right. It is not interactive yet, now I will start on adding the JS event bindings/renderings.

I may have to skip the drawing functionality for now and just working building the working note interface as I still have to deploy the Electron part too with this code inside it.

Yeah the icons will need some dynamic proportioning, I’m not a huge designer. I did add some transitions when you hover over the icons so they grow/box shadow appears under, I’ll have a gif recorded when it’s more functional.

I will point out, this note interface was built in plain HTML first before it was templated on JS side so it’s easier to work with.

I am hoping the Electron part is easy because I am super burnt. I just want to get to something that’s working/useable that can be improved on from use.

I’m going to start skipping steps, I will just build it non-dynamic and make it work with regard to the API part.

Time’s like these you’re like “What’s the point…” it’s commitment. I’ve been lazy/finally got steam.

Also direct type targetting is bad I’m aware eg. textarea or h2

I’m using plain XHR methods pulled from MDN for the post/get requests.

1:41 AM I’m going to transfer the basic API now to the Raspberry Pi

FileZilla(left) and Putty(right). Actually ran into some error. Old npm issue

I’m starting to really cut down on features haha… POST and GET best I can do.

I’m really hoping I can just work off the Electron app from the tutorial and toss these files in there, I don’t need a secondary window.

I have some issue with the Pi, keeps saying error rolling back … ENOTEMPTY

I will try and use my local API.

2:08 AM okay at this time I have a working POST save from plain postAjax method, ran into a brief issue of dumb brain(using wrong route).

2:15 AM okay skipping straight to Electron now, definitely cut corners

So I pretty much stripped out most of the electron code I had from the demo since this one doesn’t have a secondary window inside/no cross window communication.

Super ugly but it works, here’s a demo of it working. The left shows the Electron code, top-right is Postman, this is checking the note entry count, the bottom-right is the desktop app itself(Electron) and the code when you type/let go, in a second it does a POST request to the API and saves a note which you see the result in the console, and then I verify by checking the note count which increments.

Got it working, explanation above on what’s happening

I have to investigate that security notice, I was looking into what kind of security you need. This app is for me/not really intended to be distributed, people can install it if they want.

Now let’s package this app as it is. I’ll record the launch from a desktop icon and then the CSS hover transitions ha… oh and prove it works by Postman note count query.

And here it is, I gotta find out if you need all this stuff in the release-builds folder… is that normal? I guess those files go somewhere and the user just sees the .exe anyway I made a shortcut, put it to the desktop and then recorded/showed the increment. Btw I took that picture, Sony Nex-5n, look at how beautifully out of focus it is.

2:39 AM I can now sleep with peace of mind