Gluon for Micro.blog

4 hours in and I'm happy to say I have made good progress. Well, at least I'm happy with what I managed. Although, it's not what I had in mind - but here we are.

First of, I took it closely to rewrite some of the data logic on how posts are grabbed from Micro.blog. As I save them locally to device, for quick launch times, I wanted to make sure I do this in a quick way without having to check through existing posts. The API is pretty good, so I could grab posts after a certain post ID. So that is what I do now. So much better in my eyes.

I found a small bug on the login screen that would just keep trying to log in with an expired key, after opening an email, every time you typed a letter into the input. So basically it kept thinking I was providing that token that was loaded up from the email.

I did want to work on the profile screen and other sections like Discover etc... however, I started fiddling around with the post views. So, here are my very early preliminary results:

I'm yet to implement handling of the links within the post, although I have it set up to print to the console for now - at least I know what is incoming. With that I'm planning to just check what the link is and if I should open Safari (via app) or load a profile if it's an "@" to someone.

Images will also be dealt with. I didn't manage to implement what I wanted just yet for images. Basically I want to render them after the post in little squares, and size those depending on how many there are. Tapping on them will open an image view.

All images are cached and should only be pulled once to the device... this is only temp storage, so if the app decides to kill itself it may loose those cached images at some stage. Better than nothing. Oh and they lazy load too.

Oh, good point actually - I'm using square profile images. That's on purpose as I'm not a fan of circled images. Maybe I look at my keyboard keys too much... I'll probably make it a user option at some stage though, so you can customise that... plus some other stuff that I'll reveal as I go.

Another point of note is that I won't implement an icon/message of "new" posts that are loaded in (like TweetBot did - when I used it). I'd like to avoid the feeling of "OMG I need to read all of these". Rather have you in the moment instead of sitting in a coffee shop with your family/friends and trying to go through the full list, because you feel obliged. Personal preference to be honest...

When you first load the app you only get back 30 - 40 posts on an initial load of 'posts/all/' on Micro.blog, one thing I wanted to solve is, as you reach the bottom of the list, is to load in older posts and add them to the list. Happy to say, this works nicely. I grab 15 posts at a time.

I do need to figure out how to communicate this to the user, that I'm loading posts and that they are ready and that you can scroll down for more. My current plan is to show a loading icon at the bottom of the view, instead of top, and then check if posts were returned or not - if so just say: "More posts loaded below" or something like that.

I'll also need to figure out how to remove a post, if it was deleted... I don't want to think about that just yet though...

That's it for now. Tomorrow evening I'd like to work on the user profile page.

Midnight here, just. Going to attempt to re-write some API calls for Gluon. Now that I slept on it I found a nice solution to some of the problems I had yesterday with setting new posts coming in from Micro.blog.

Today I'm tired, and also feel I haven't managed to knuckle down as much as I wanted. I feel progress was slow today. However, I do feel that the time spent was just me getting used to the Micro.blog API.

So, where are we... Now that I finalised the login screen, here's a screenshot. I've added the bottom section to encourage people to sign up if they don't have an account. And I also added relevant error messages, that might be useful to the user.

That layout also seems to work across different screen sizes, so I'm happy with that.

Once you pass Auth, you get to go to the Home screen which will load "all" posts in your timeline. This is the exact behaviour as per Micro.blog website.

I've got preliminary data coming in, including the user avatar for the profile once login is successful. I haven't styled the posts in any way at all - I only wanted to get some raw data.

Another problem I wanted to solve is to avoid a blank slate when the app was closed or killed and it forgets what it downloaded. So, when we come to the Home screen it will check if we saved anything locally, if so it renders those posts and then it goes ahead and checks the feed for anything new, which in turn saves them locally.

There is an API call to Micro.blog that allows you to check how many new posts were since "X" id... however, it only returns a count and not the actual posts - that would be a nice addition. That means, I'm comparing the old list with the new list of posts that I grab from the server, check if the id is already in, and if so... don't save it.

Anyway, here is the not so glamorous view of the feed:

In the header you can see my avatar, that will link to a profile section and ultimately a settings section. Although... I'll probably tweak that ever so slightly. I'd like to keep the right of the header free, for creating new posts - when the time comes.

Also note the "syncing" icon at the top. That is nothing set in stone but useful for me as I work on it.

Plan for tomorrow is to style the post modules, so that I can re-use them nicely.

Evening 2 for building Gluon starting now. I'll work on the tab navigation, basic profile screen and perhaps basic styling for posts. Let's see.

That should cover different screen sizes... #Gluon

Gluon - here's a quick peek at the user sign in flow. I've added the loading icons. Ignore the screens after login. And sorry, huge GIF... Of course, this also works with App Tokens, so no email involved.

Just concluded my first evening working on Gluon, my Micro.blog iOS and Android app.

Whilst I don't have a design nailed as of yet, I managed to work on the app icon and the login screen. I have an idea where I'd like to take the app in terms of design, however this will fall into place a little later during the week.

I've stuck with base system fonts and super basic styling for today.

Manton was kind enough to reply quickly to my email, to allow log in via the app using an email address registered on Micro.blog. Thanks Manton!

With that, it was super easy to implement the API calls necessary to receive an authorisation token. This is stored securely in the Keychain. At the moment, every time the app opens it will check if it has this set, if so you will go directly to the "Home" screen. If not, you're presented with the "Auth" screen.

I implemented a really basic button to clear my user token from the keychain, which takes me back to the "Auth" screen. Handy when developing!

Here's a screenshot of the Auth screen:

Simple for now. Will require tweaks as I go, but I'm happy with it at the moment.

The app checks if you enter a valid email address or if it's an App Token that you already set up. If either is the case, the login button enables and it does the necessary calls to the Micro.blog API.

Here is a screenshot after you have filled in your email:

Just a bit of feedback for the user of what is going on. I also show a "Try Again" button which basically resets the form so you can... try again.

I'll need to add error handling, in case the email doesn't exist or any error occurs. Another thing I want to implement is a loading state of when there is a call to the API. Just a bit of feedback for the user.

I'll also add a link to Micro.blog so you can register there... now that I uploaded the screenshots and read the intro text 😱🤫

That's it for now.

App Hack: The name for the app will be 'Gluon'. I like it.

From Wikipedia:

A gluon is an elementary particle that acts as the exchange particle for the strong force between quarks.

App Hack - Here's the icon I whipped up. Name to be announced. Some really corny quantum mechanics reference. I like red.

Here we go... working on my Micro.blog app. The API is super nice and easy to work with, I played around with it already. Gonna whip up a quick app icon, then work on the login screen.

I have an itch. I want to scratch it. I fear if I don’t scratch it now, I will never do it.

So beginning this evening, I’m going to be creating an iOS, and most likely Android, app for Micro.blog. Granted, there are many great third-party apps out there… it won’t harm to throw in another one into the mix.

I’ll be spending every evening on it, from today until end of next week. At least a few hours an evening and see how far I get.

For me these are important:

• See posts
• See mentions
• See favourites
• See who you are following
• See the discovery section
• Follow people

I will not attempt to add “posting” to the app just yet - but will get to it. It will be iPhone screen size first and in the future I will also add an iPad style design.

There are other things in my head that I’d also like to try and tackle.

My aim is to blog about progress every day (where I can), with a base TestFlight app out end of next week. Haven’t figured out Android just yet, but we’ll see.

I want to hold myself responsible for doing this, so here we go. More details to follow as I go.

Hope you enjoy this one as much as I will have creating it.