DEV Community: Loki Le DEV

How I published my first android app

Loki Le DEV — Mon, 20 Apr 2020 22:05:19 +0000

After learning android development from scratch, I'm proud to announce that I launched my first application.

TL;DR
You can download it here
I also made a website for it: leboncalcul.fr
Checkout my other projects

But why?

As you might not know, I'm an embedded software engineer (working on c++ code , low level libraries for an exoskeleton).
So yes it's pretty far from mobile apps, so why make one?

Well it actually started at work. We decided to make an android tablet application to allow users to configure the exoskeleton easily and wirelessly over bluetooth.

Since no one in the company (a startup of ~70 people) knew how to make apps we decided to contract an agency to do it.

I won't explain in details but that went very poorly, and I lost a looot of time trying to remote manage a bad developer into finishing the first version of the app without me being able to read the code..

I lost so much time that I started thinking that I would probably have been able to learn how to make apps in the same time.

I remember reading an article on this site about project ideas and I saw one that seemed manageable: creating an expense manager. It's like the hello world of apps (with the TODO app).

Learning new android with no priors

After reading some articles I discovered that Kotlin was actually the modern and proposed language for making android apps. That shattered my prejudiced view, I was thinking it was still java (and I'm not a huge fan of java).

Kotlin has really interesting features from someone coming from c++ and python.
The nullability checks and the extension functions for example are convenient. It also mixes functional programming with object oriented nicely. And allows to perform the same stuff with less code than in java.
I was surprised to discover that it runs in the jvm and is compatible with java.

I started by following this awesome tutorial from udacity, I really recommend it.

Android modern practices

I think I arrived at the right moment, it looks like recent releases of android frameworks are awesome, there are a lot of cool features and architectural patterns.
Since I never made android apps before, I was kind of lucky because I didn't had to learn all the legacy way.
They released the architecture components libraries which allows really clean and modular designs.

Let's see together some android specific terms and patterns which I learned about and tried to use in my app. I won't explain too much here since it's explained in the tutorial I linked. I can make specific articles to go deeper if requested.

Application vs Activity vs Fragments

Android has a lot of specific concepts. Apparently older apps where composed of many activities. But now the recommended way is to have a single activity composed of many reusable fragments. It works for a simple app but you can still have many activities for more complex applications.

Android application life cycle

Android has it's own way of managing the state of the activities and fragments and it's essential to understand it to make functional and optimized applications.
It's much simpler now thanks to LiveData and ViewModels.

Navigation

You now have a graphical tool and an api for representing how to navigate in your application, between fragments and back and forth in the navigation stack.

MVVM Pattern

The Model-View-ViewModel design pattern allows to separate the data from the view, I had a hard time understanding the difference with the classic MVC.

xml views and constraint layout

I loved this, you can either design your pages by editing an xml file, or there is a graphical tool for drag and dropping views. Then you can
define constraints for organizing the views with each other. I never saw that before and it's really clever.

DataBinding

FindViewById() is useless now. You can work on a generated binding object and access the views (like a text edit) directly as an attribute of the binding object!

Moreover, you can directly store objects from the code inside an xml layout!
A common pattern is to store the ViewModel instance. This combined with extension functions and binding expressions on the view allows to directly link the view to the model with almost no code, it's all generated at build time and when your data changes, the view updates naturally.

LiveData

This feature is based on the Observer pattern, and aims at reducing the callback hell that was android before (apparently).
Basically you can make your database produce livedata of a certain type (a transaction for example), and tell the view to observe this data. Whenever the database changes, the view automatically gets updated. It's pretty powerful, but I needed some time to understand the flow of data.
And it's lifecycle aware.

RecyclerView

The base of almost every application that must display a list of data, it has an interesting garbage collecting feature and you must define adapters between your data and a custom view to use it but it's powerful.

Translations

Android has a system for storing strings in an xml file, and you can produce it in several languages, there is a built-in tool for editing it.
I made English and French versions.

Publishing on the play store

This has been a long learning journey, it really helped to have a goal and a concrete project to work on. Having real problems to solve is essential. I discovered many interesting concepts that I can also reapply in other contexts. I understand better how native android apps are made now.
These new android features (especially in kotlin) are less documented and I often found answers for my problems in java or with older sdks so it slowed me more.

But I'm happy to have made it to the end and released my app.
I would love some feedback on it.
You can download it here It is free and no adds.
I also made a website for it: leboncalcul.fr

You can checkout my portfolio, I updated it with this project and other ones and added videos now :)

Next Steps

Now I would love to see some people using it, I already collected some UI/UX feedback and made some mistakes. I limited the minimum sdk version for no reason, so the app is only available for 10% of devices...
I will make corrections soon.

Thank you for reading this and feel free to ask questions.

I made my first website!

Loki Le DEV — Wed, 04 Mar 2020 22:47:25 +0000

This week-end I was at the in-laws and had some free time, It's been a while since I wanted to create my personal portfolio site, so I decided to give it a try.

TL;DR
I used hugo to create my portfolio: https://lokile.dev/

Step 1: choice of the domain name.

I'm lucky because I can abbreviate my name "Loik Le Devehat" to "Loik Le Dev" which in French means I'm a developer!
Also my nickname is Loki. I wanted to use loki.dev which would have been super convenient but it was already taken recently by some German guy.

Hence I chose lokile.dev which I'm not entirely satisfied of, but that's ok I can change it later.

Step 2: Static site generation

I consider myself an experienced developer (in embedded systems) but I never learned html/css/js or how to make a website. Through reading articles on dev.to I learned about static site generation. I started looking at the list of generators, only to discover that there are thousands of them in many different languages, which started to scare me.
Seeing that the blog at loki.dev used hugo, I looked at the theme gallery and I was amazed at how cool the templates are!

My choice went to the creative theme because it's a beautiful one pager with a cool modal grid for the portfolio which is enough for my first site, you know: Keep It Simple.

Step 3: Wasting time

After reading the getting started guide and testing the theme, I wanted to write the different contents for the projects I wanted to show on the site.

The guide said that you generally write contents in markdown in the contents folder, but the theme only allows editing yaml files in the data folder.

That's not all, the description field is a one line string. And I thought I could edit rich markdown with new lines etc.
And also, really? You have to write markdown text in a yaml file which is parsed into an html template with some js and css to make it pretty, without forgetting that the project config file is config.toml...
That's a crazy number of languages for a simple website!

Please pick one markup language and stick to it, why the need of 3 different syntax ??

So here started the hurdle of trying to do what I wanted. I don't give up easily though.

Markdown in yaml

To avoid writing a big single line in the description field, I discovered the syntax for "Literal Block Scalar".

description: |
   # This is a markdown title
   **and also some bold text**

So yeah problem one solved!

Step 3: Icons and font-awesome

After that I wanted to change the default icons used for the services section. Normally you just replace the icon field in the project config.toml:

[[params.services.list]]
    icon = "fa-mortar-board"

I chose a new icon on font-awesome site, but it didn't show up on the generated site.

After some digging in the code of the theme I realized that it uses fontawesome v4.7 whereas the current version is v5.12. I tried to update the font of the theme by downloading the css, the .ttf files etc and editing head.html:

<link rel="stylesheet" href="{{ "font-awesome/css/font-awesome.min.css" | absURL }}" type="text/css">

but without success.

Finally I just picked icons from the working version.

Step 4: Gifs

Ok the theme is cool, it's responsive, there are modals and all, but it lacked some spice, so I decided to make gifs!
I spent really too much time trying to make the perfect gifs from videos. I needed to find the proper tool for the job.
Did you know you can use blender as a video sequence editor and the Bligify plugin to export them as gifs?

They were too heavy so I tried to make them smaller and changed the theme to display a picture in the popups instead of the gif.
The site is still slow to load, if anyone has suggestions that would be appreciated!

Step 5: Polish and upload

The text on the hero section was too thin and transparent, so I dug in the creative.css file to find the correct section to edit.

Then it was just a matter of hugo -D to generate the public folder and upload it to my hosting service.

Big shout out to hugo makers for creating such a powerful and simple to use tool!

What I learned

The lesson here is that even though I don't know these languages I wasn't afraid of reading the html and css files, try to understand a bit the structure and find where I needed to edit to obtain the desired behavior.

Don't be afraid to break things! I mean it's OK to edit the code and see the result through trial and errors. It was refreshing for me, it's less pressure to have a display bug in html than when you have a computation error in an exoskeleton which might harm the user!

What next?

Now I want to do more to improve the site, add more portfolio articles, try to embed youtube videos.
You probably noticed that the site is only in French for now, it would be nice to have an English translation. Probably add some blog section, the possibilities are endless! But another more complete theme might be required.

What to you think of the result? Are the gifs too much?