Moneta

Moneta is a simple currency converter application built in React Native and scaffolded with the create-react-native-app CLI. The objective of this application was a simple demonstration of using simple components and tools that can be easily applied in React for building web applications. This means this app's components and structure can be easily used to build a web app with the very same functionality with little re-write. (PS: Moneta is roughly translated to money in Latin)

App can be found on Expo

Getting Started

You will obviously need to know how React Native and React work in the background in order to use this project. Also, you will need to have Expo app installed on your testing device, if using a testing device or have an emulator setup, either Android or IOS, the react native getting started guide has this explained already.

To get this project source:

$ git clone https://github.com/BrianLusina/moneta.git

Pre-requisites

A couple of things you will need setup on your development environment

• Node and npm or yarn

  Since this is a pure JavaScript application, Node will be needed as a runtime environment for testing the application as well as setting up the react native packager. npm and/or yarn will be used to download and set the dependencies in the project, as well as running the scripts in the package.json in the root directory of the project

• Expo account (Optional)

  Expo will be used to run the application on an emulator or a real device. The expo account is optional, especially on publication of the application on Expo, you will need to login and register the application there. More details are in the link provided

• Emulator, either Android or IOS

  This is optional if you will use a real device for testing the application. Setup for an emulator will be available in the provided links. If your development machine is a Linux/Windows, then you have access to only the Android Emulators, otherwise, if on mac, you have access to both.

Once you have these dependencies set up, installing dependencies is as simple as follows:

$ npm install
# if using yarn
$ yarn install

This will install the dependencies and set them in the node_modules

Running tests

This has followed Test Driven Development(TDD) approach and thus running tests can be done as follows:

$ yarn test
# or if using npm
$ npm run test

Tests are run using jest and other testing tools include:

• Enzyme
• Expect
• React Test Renderer

Coding Style

Linting is done using ESlint styling rules. Any coding standard can be used. To set the coding style you want simply run this command to initialize a new ESlint configuration:

$ npm run lint:init
# or
$ yarn lint:init

Run lint tests with

$ npm run lint
# or
$ yarn lint

Fix linting issues:

$ npm run lint:fix
# or
$ yarn lint:fix

Deployment

Deployment can be done to either Expo, PlayStore or AppStore or all three of them, considering this is a React Native application.

Details on how to deploy this application can be found here and here

Deplyment for Playstore can be done after a build for the apk is done on Expo. To do this, run the script:

yarn build-android # build Android apk
yarn build-ios # build ios ipa

These commands will run the Android and IOS applications.

They can not be run concurrently, so to check the status of builds use:

yarn build-status

Will tell you the status of the current build it any.

You should get an output like this:

$ exp build:status
[exp] Making sure project is set up correctly...
[exp] Your project looks good!
[exp] Checking if current build exists...

[exp] ============
[exp] Build Status
[exp] ============

[exp] Android: Build in progress...
Done in 12.00s.

This is the build status for Android project

The same output will be seen for IOS. After a build is done (which will take around 30 minutes or less).

You can fetch the APK from the build status output:

$ yarn build-status
$ exp build:status
[exp] Making sure project is set up correctly...
[exp] Your project looks good!
[exp] Checking if current build exists...

[exp] ============
[exp] Build Status
[exp] ============

[exp] Android:
[exp] APK: <APK_URL>

Done in 12.96s

The <APK_URL> is the url of the APK that you can download the signed apk

Fetching keystores can be done as below:

$ yarn fetch-keystore
# output
exp fetch:android:keystore
[exp] Retreiving Android keystore for @lusinabrian/moneta
[exp] Writing keystore to <PROJECT_DIR>/<KEYSTORE_NAME>.jks...
[exp] Done writing keystore to disk.
[exp] Save these important values as well:

Keystore password: <KEYSTORE_PASSWORD>
Key alias:         <KEY_ALIAS>
Key password:      <KEY_PASSWORD>

[exp] All done!
Done in 6.96s.

This will write the keystore file to the project root and output the keystore properties to STDOUT

Built With

• React Native
• Expo

Authors

• Brian Lusina - Initial work

License

This project is licensed under the MIT License - see the LICENSE file for details

Acknowledgments

Hat tip to Spencer Carli for the inspiration on creating this application. Icons made by Freepik