DEV Community: Ashok Gelal

A web app from scratch to finish with Alpas and Kotlin — Authentication Scaffolding

Ashok Gelal — Tue, 28 Jan 2020 16:00:13 +0000

A web app from scratch to finish with Alpas and Kotlin—Auth Scaffolding

In this part, we'll scaffold an entire auth system by running a simple command and writing a very minimal amount of code.

What are we building?

🔥 Fireplace. You can browse the live app to get a feel for what we are building.

Just to be clear, to keep the tutorials relevant and short, we are not going to cover any CSS, HTML, or JS in his series. We will make sure to point out something if we deem it to be mention worthy. For styling, we will use TailwindCSS, and for client-side interactivity, we’ll be using JavaScript and some VueJS.

Preparing the Database

Before we start, make surethat you have a MySQL database server running. Create a database named fireplace and update your .env file with proper database credentials. It should look something like this:


DB_HOST=localhost
DB_USERNAME=root
DB_PASSWORD=secret
DB_DATABASE=fireplace
DB_PORT=3306
DB_CONNECTION=mysql

Open configs/DatabaseConfig.kt and make sure that it is using a connection that matches the type you have set for DB_CONNECTION in your .env file. In our case, this would be mysql. (You should just have to uncomment the call to addConnections in the init function.)

Migrating the Database

Authentication requires two database tables—Users and PasswordResetTokens. Alpas ships with pre-definied versions of these tables/entities. These classes must map to tables in your actual database. To make it easy for you, Alpas already ships with the migration files you need to create these two tables. All you need to do is migrate by running the following Alpas commandfrom your terminal:

alpas migrate

You should now have two tables in your database.

Scaffolding

An authentication system needs a lot of files and wiring. Thankfully, Alpas can create all of this for you with one command. You can further customize the scaffolded auth files as you wish. Let's run the command:

alpas make:auth

Once the files are created, open routes.kt file and call the authRoutes() method from within the addRoutes()method to register all the auth routes. We will later see how we can further customize the routes.

We are now ready to compile and run the app!

When you run the app, the first thing you will notice is that the home page now has 2 links on the top-right corner—Login and Register.

Believe or not, we have a whole auth system now including login, registration, password reset, and email verification!

Let's create an account and see what happens.

You'll notice that you'll be asked to login and once you login you'll be asked to verify your email.

Email Verification

Alpas auth scaffolding comes with support for email verification. It is enabled by default, but you can disable it if you want. Right now though, you might be wondering how can you verify your email address on a local machine.

Alpas supports two mail drivers out of the box—SMTP Driver and Local Driver. It is set to local by default, which is set in your .env file. This makes email debugging easy during development. The local driver dumps all the emails as HTML pages in storage/mails folder.

Navigate to the storge/mails folder and open the latest mail in your browser and click the Confirm email address button.

After you have verified, you will now be taken a dashboard kind of page. Don't worry about customizing this page right now though, we'll be removing it in a later lesson.

Disabling Email Verification

If you want to disable email verification, you can do so easily by following these steps:

Pass requireEmailVerification = false in your authRoutes():
authRoutes(requireEmailVerification = false)
Open entities/User.kt file and set mustVerifyEmail to false.

Just to cleanup, open controllers/HomeController.kt and remove VerifiedEmailOnlyMiddleware. In fact, you can delete the whole
override fun middleware(call: HttpCall) method.

You just saw that it takes no more than 1 command to create everything for a modern authentication system.

You might be slightly disappointed that so far you haven't really get to write some code. I promise to let you write some in the next post where we'll get into the meat of the application—allowing a user to
add a new project and list all their projects.

See you in the next one!

If you want to check out what the project looks like at this point, the source code of Fireplace is available on GitHub and is tagged as v0.3.0.

If you found a bug please open an issue. If you have questions, comments, or feedback, or if you just want to hangout with people who are learning Alpas and with people who built Alpas, we have a dedicated Slack for that. We’d love to have you there. Please join us !

Questions? Ask us in our Slack.

A web app from scratch to finish with Alpas and Kotlin — Up and Running

Ashok Gelal — Wed, 22 Jan 2020 17:41:21 +0000

If you are reading this then maybe I’ve convinced you to try out both Kotlin and Alpas by writing a complete web app. I’m super happy you are here and I’ll try my best to make sure your time is worth it and well spent. Let’s get started!

We will keep this post short and simple. We are just going to create a new project from a template, talk about few things that you need to know right off the bat, and build and run it.

Get started by first making sure your system is ready for writing a Kotlin web app using Alpas.

Now, visit Alpas starter template repo and create a new repo based on this template (click that green Use this template button).

Name your repo fireplace and clone it on your local machine.
At the root of the project there is a script named alpas. Make it executable: chmod +x ./alpas
Initialize your new project using the full package name: ./alpas init com.example.fireplace
Once done, to serve your app, do: ./alpas serve
Just to make sure that your frontend dependencies are not outdated, run yarn install && yarn dev (make sure that you have NodeJS and npm installed).
Download the excellent IntelliJ IDEA and open the project.

There isn’t much to do for this part. But once you open the project, browse the app to try to get an idea of the structure of an Alpas web app. This will help you to navigate faster when we start adding more features in future.

To help you get oriented, here are are some of the files you can skim over:

start.kt

The is the file where it all starts. You probably never have to touch this file except for actually running the app. IntelliJ should have a “green play button” right next to the main function that you can click to run your app.

.env

This contains all your environment related configuration values. You can override so many of the core configuration values in this file.

Start by changing the value of APP_NAME variable and see what happens when you run your app again. Can you change the port address at which your app is served by changing one of the values here? Which one?

Do a quick read on Configuration documentation to better understand one of the most critical components of Alpas.

configs/DatabaseConfig.kt

This class file is where you’d be adding database connections for running CRUD operations. I highly recommend going over Database Getting Started documentation to prepare for the next part.

routes.kt

All your app routes should be kept in this file. You can read more about Alpas Routing to be better prepared as we’ll be adding bunch of them here very soon.

controllers/WelcomeController.kt

The controller responsible for deciding which page gets rendered when the home page route is matched. Alpas Controllers documentation is a quick read.

resources/templates/welcome.peb

The “landing” page of the app. Feel free to tweak it if you want to but don’t remove anything yet. You can change the title of the page if you want. Being familiar with Alpas Templating engine is going to help you move much faster.

We did not write anything in this post but only created a project and that was intentional. I want you to spend some time reading Alpas docs.

Don’t worry, you don’t need to know everything; just being familiar with where to look for things is more than enough at this time.

If you want to check out what the project looks like at this point, the source code of Fireplace is available on GitHub and is tagged as v0.1.0.

See you in the next one!

Questions? Ask us in our Slack.

Let's build a web app from scratch to finish with Alpas and Kotlin

Ashok Gelal — Tue, 21 Jan 2020 22:14:39 +0000

Alpas is a new web framework for developers who want to have a rapid, yet delightful, web application development experience using Kotlin.

Kotlin is a general-purpose programming language with concise yet readable syntax. Its popularity is exploding making it one of the fastest-growing languages according to GitHub. It's one of the most loved languages according to Stack Overflow, and used by companies big and small.

Kotlin is modern, fun, powerful, and delightful and so is Alpas. Kotlin makes you happy writing code, and Alpas strives to make you happy writing a web app.

Kotlin's strong typing means you get to experience all the greatness of a statically typed language - great IDE support for code navigation, powerful debugging, fearless refactoring, and bugs that get caught at the compile-time and not at the time when your users are doing something critical.

Kotlin's root in JVM and full interoperability with Java means you get to be a part of, arguably, the largest and the richest programming ecosystem of any language.

Don't let the use of a statically typed language and the mention of JVM and Java fool you! I wouldn't blame you if you have tried some other Kotlin/JVM/Java frameworks and are burnt and defeated either by their sheer complexity because they are too big, or the lack of a coherent ecosystem because they are too small.

Professionally and personally, I've experienced both kinds - one where a framework is so complex that getting started takes hours if not days, and the documentation is a maze full of technical jargons with no exit in sight.

The worst is that they assume that you are already familiar with the Java ecosystem - beans, annotations, auto-wirings, thousands of lines of XML, properties, servlets, and factories, etc. They have a framework for a framework and a project generator!

You may now have a fancy new weapon with Kotlin but you are still playing the same old game with too many rules and institutional knowledge. Well, that sucks! Why can't we have a new complete game designed just for the new weapon?

On the other side of the tunnel, things are even worse. In the name of being light and micro, they let you get started but then leave you hanging when it comes to, say, templating, or database integration, or queues, or notifications, or sending emails, etc.

They hand wave and tell you to go figure it out yourselves. Most of them would say "For this component, we don't want to make a choice for you. Here are 10 different libraries for getting this thing done; figure out the one you may want to use yourself."

You are now left with so many choices with no clue on which one to pick and even if you were brave enough to pick one; you don't know whether or not you made a good choice.

Making a decision is not only hard but is mentally taxing. It forces you to make irrational trade-offs. If you are new to the whole web development thing, then good luck with making a good choice when you are just trying to understand the basics.

A motivated soul just wants to get a web project done, but now the poor soul is wandering in the hell of a rabbit hole. No wonder they end up using a subpar language because, well, people need to get shit done.

Alpas avoids both extremes by including sane defaults and picking and packing the good stuff for you so you can get started and get going for the actual thing you are after - crafting a delightful app for your clients.

It takes its inspirations from other delightful web frameworks like Laravel, Vapor, Rails, etc.

In fact, if you have used the Laravel framework before, you will feel right at home with Alpas. The core members of the framework have worked with Laravel for many years and wanted to bring a similar experience to Kotlin/Java world.

I will not lie - Alpas still has some way to go before we have everything, but what it already has is good enough for building a complete web app. We have already used Alpas in writing 4 complete web apps that are in production right now.

I could go on and on about Alpas. But instead of just praising it, let's put it out for a real show for you to see and judge it yourself.
In the next several blog posts we will use Alpas to write a complete web app from scratch to finish, which will demo some of its simplicity, delights, and power.

🔥 Building Fireplace

The app we'll be building is a small but nonetheless a complete web app for managing projects. You can create an account, enforce users to verify their emails, add projects, add some tasks, and invite collaborators.
I wanted to keep it small but also wanted to show some out-of-the-box features of Alpas - auth scaffolding, templating, notifications, migrations, routing, mails, etc.

If you want to play with the app first before you jump in, it's available at https://fireplace.alpas.dev

If you want to read the source code, the complete source code is available on GitHub. We are already working on screencasts of this whole series and should be out soon. Follow Alpas on Twitter to know when it is out.

In the next post, we'll see how easy it is to get started with Alpas and how stupidly easy it is to scaffold an auth system with a single Alpas console command.

I hope you will join me in the journey of this super fun exercise of writing a complete web app. I promise it will be fun and I'm confident that you will love the fun. After all, who doesn't love creating something from scratch for fun? We wouldn't call ourselves programmers if we didn't. Right?

See you in the next one!