Building Nigma, a simple puzzle App Game using AppWrite

Carlos Lopez — Tue, 03 May 2022 02:13:06 +0000

(͠≖ ͜ʖ͠≖)👌 Overview of Nigma

The Nigma app was born from a simple inspiration: wasting time! Well, not quite. But solving puzzles is a great way to kill time when you're waiting for anything, like compiling software, waiting for the bus, waiting for a flight ...

Also, the UI is widely inspired by the famous and all fashioned material you!. This feature provides you with a simple but entertaining game, that challenges your visual skills.

And of course, the AppWrite Hackathon motivated me to finally create my first Game App!

How I built The Nigma App.

Firstly, I'm a visual person and I wanted to create an MVP app witch covers the main idea and uses various of the AppWrite features. So, my first step was:

I went to Figma and started to design the login screen, register, puzzle creator, puzzle resolver, etc. This way I can figure out what to code and avoid rethinking a lot of things on the go.

Then I opened my Android Studio ...

I configured my dependencies and potentially needed libraries like accompanist, hilt, Lottie <3 and of course the AppWrite SDK; then I started to code.

And finally the most exciting part of the project: the AppWrite Integration. The final result is seen in the screenshots and video below :)

My thoughts about AppWrite are:

The installation is very easy. The docker-compose file provides an easy installation and lets you start using AppWrite really fast, the installation is as simple as a copy-paste in a terminal.
The documentation is a gem. The SDK (at least for Android/Kotlin) is clearly explained and the thing I like more is that examples are using either the SDK or HTTP Request.
The SDK uses kotlin-coroutines! It was a surprise for me that coroutines have first-class support for the developer that use any of the functionalities.

Below you can find how easy is to use the SDK inside a suspendable function.

suspend fun savePuzzle(puzzle: Puzzle): Result<Document> {
    return try {
        Result.success(
            database.createDocument(
                collectionId = "puzzle-collection",
                documentId = "unique()",
                data = mapOf(
                    "name" to puzzle.name,
                    "description" to puzzle.description,
                    "img_file_id" to puzzle.fileId,
                    "puzzles_completed" to listOf<String>()
                )
            )
        )
    } catch (e: AppwriteException) {
        Result.failure(e)
    } catch (e: Exception) {
        Result.failure(e)
    }
}

And then, call this inside a Coroutine Scope (in this case the ViewModelScope) to finally update States that the UI will react to.

fun uploadPuzzle() = viewModelScope.launch(Dispatchers.IO) {
    val resultUpload = uploadPuzzleInteractor.savePuzzle(puzzle.puzzle.copy(fileId = uploadedFile.id))
    when {
        resultUpload.isSuccess -> _puzzleCreator.tryEmit(AddPuzzleStatus.Success)
        resultUpload.isFailure -> _puzzleCreator.tryEmit(AddPuzzleStatus.Error(resultUpload.exceptionOrNull() ?: NullPointerException()))
    }
}

(¬‿¬) Submission Category: Mobile Moguls

Nigma is an Android App. Built with Jetpack Compose, tea ☕ and a lot of curiosity about using AppWrite.

( ≖.≖) Link to Code

Here is the link to the enigmatic code:

calo001 / Nigma

The Nigma App

The Nigma App is a puzzle game created with Jetpack compose and bootsted with AppWrite.

App overview

You can register a new account by typing in a username, email, and password. The user is saved in the User feature of AppWrite.
You can log in with your email and password. AppWrite provides the login mechanism.
The list of puzzles is shown by fetching from the AppWrite database and is watching for changes in real-time.
You can create a new puzzle by writing a name and description and selecting an image from your storage. Then the database is updated and the image is uploaded to the AppWrite storage feature.
When you complete a puzzle the database update the corresponding document by adding the userId. When the userId is set, the Realtime feature sends a callback that a puzzle document changes, and then, the list is updated removing the…

View on GitHub

(◐.̃◐) Additional Resources / Info

Nigma app works as follows:

You can register a new account by typing in a username, email, and password. The user is saved in the User feature of AppWrite.
You can log in with your email and password. AppWrite provides the login mechanism.
The list of puzzles is shown by fetching from the AppWrite database and is watching for changes in real-time.
You can create a new puzzle by writing a name and description and selecting an image from your storage. Then the database is updated and the image is uploaded to the AppWrite storage feature. (All user will see your new puzzle and you will see all new puzzles uploaded by others.)
When you complete a puzzle the database update the corresponding document by adding the userId. When the userId is set, the Realtime feature sends a callback that a puzzle document changes, and then, the list is updated removing the puzzles resolved by the authenticated user.
Puzzles resolved by the user are shown in the profile section.
The profile section allows you to: change the username, change the image profile, and log out.

Now, some screenshots and a promo video.

( ͡❛ ● ͡❛) Final thoughts

I know about AppWrite since a time ago and I always have the curiosity because it looks like a nice alternative to Firebase. This time with the hackathon I don't want to delay the chance of trying it and I did it!

The more enjoyable thing about AppWrite is that the dashboard and SDKs look very well built and documented with examples and public repositories.

Even there are a lot of positive things in my mind, is inevitable to think about some opportunity areas like:

A more flexible way of configuring the SMTP data.
I'd love to have some extra features like an Analitycs Kit and a relational database.
A way to import/export the configuration (documents properties, files, etc).

And finally, I'm excited about their Cloud Services that soon will be available and I hope this project continues growing!

Created with 🧡 by Carlos Lopez Romero 🦦

Forem: Carlos Lopez