Building Nigma, a simple puzzle App Game using AppWrite
Tags: appwritehack, android, jetpackcompose, kotlin
Published: 2022-05-03 02:13:06

### (͠≖ ͜ʖ͠≖)👌 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.

![Figma project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9722cejuj8sf4xlxua1k.png)

* Then I opened my **Android Studio** ...

![Opening Android Studio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zfs75msxnmljtmbojoko.png)

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

![Android Studio screenshots](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4hcpt0y4xsesr4ktn0ob.png)

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

![Waiting!](https://media.giphy.com/media/brHaCdJqCXijm/giphy.gif)

#### 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.

```kotlin
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.

```kotlin
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.

![Android](https://media.giphy.com/media/fjgccj3kdQXKl8Ekil/giphy.gif)


### ( ≖.≖) Link to Code

Here is the link to the _enigmatic code_:

{% embed https://github.com/calo001/Nigma %}


### (◐.̃◐) 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.

![Nigma signin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7515d04c1ewtat88uxn1.png)

![Puzzle creator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4ruy9jb5if728mtbrdf.png)

![Real time and profile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dtanal1ngs517dmjcmzu.png)

{% youtube 57lLLiQwAY0 %}

### ( ͡❛ ● ͡❛) 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 🦦