DEV Community

Cover image for Building Nigma, a simple puzzle App Game using AppWrite
Carlos Lopez
Carlos Lopez

Posted on

Building Nigma, a simple puzzle App Game using AppWrite

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

  • Then I opened my Android Studio ...

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

Android Studio screenshots

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

Waiting!

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)
    }
}
Enter fullscreen mode Exit fullscreen mode

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()))
    }
}
Enter fullscreen mode Exit fullscreen mode

(¬‿¬) Submission Category: Mobile Moguls

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

Android

( ≖.≖) Link to Code

Here is the link to the enigmatic code:

The Nigma App

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…

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

Puzzle creator

Real time and profile

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

Top comments (6)

Collapse
 
gewenyu99 profile image
Vincent Ge

As a former Android dev, I can relate to the burning computer XD

My old 2015 Mac held up to most everything, but not Android studio. It's one of the few cases where I can justify going for 32gigs on newer machines I purchase.

Collapse
 
calo001 profile image
Carlos Lopez

It's funny because it's true hahaha

I'm living with a Macbook Pro 2015 and 8GB of RAM, but I use an external keyboard, otherwise, it feels like putting your hands on fire! :p

Collapse
 
thevinitgupta profile image
Vinit Gupta

Great documentation!
I absolutely loved the Promo and mockup part.

Collapse
 
calo001 profile image
Carlos Lopez

Thanks! It was a fun time creating all the design work :) !

Collapse
 
philips_salt_2e560e0fbb64 profile image
philips salt • Edited

Hey there!
Very nice and helpful blog about puzzle game. Can anyone use jumble answers for today word because Jumbled words are mixed-up letters that require you to crack the original word. people who solve jumble words or sentences have to reconstruct the letters or words and fit them in their original place to make sense of the words or sentences.

Collapse
 
juliahenry2304 profile image
JuliaHenry2304

I am also using Macbook Pro 2015 and 8GB RAM. I feel good

play solitaire spider