tips – Unanimous: Elevating Success Through Expert IT Solutions https://unanimoustech.com Elevate your online presence with UnanimousTech's IT & Tech base solutions, all in one expert package Mon, 30 Oct 2023 06:28:24 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.1 https://unanimoustech.com/wp-content/uploads/2021/12/cropped-Unanimous_logo1-32x32.png tips – Unanimous: Elevating Success Through Expert IT Solutions https://unanimoustech.com 32 32 210035509 Deploying frontend of an application using Google Cloud Run and Cloud Build from remote repository https://unanimoustech.com/2023/10/30/deploying-frontend-of-an-application-using-google-cloud-run-and-cloud-build-from-remote-repository/ https://unanimoustech.com/2023/10/30/deploying-frontend-of-an-application-using-google-cloud-run-and-cloud-build-from-remote-repository/#respond Mon, 30 Oct 2023 06:28:20 +0000 https://unanimoustech.com/?p=89586 Introduction

In this documentation, we’ll be deploying our application frontend code which is in our GitHub repository using two services of GCP (Google Cloud Platform), first is Google Cloud Run and then further we will be configuring a trigger using Google Cloud Build service so that whenever a code is pushed in the repository in the branch defined with trigger it will automatically update the application running on the internet.

Google Cloud Run 

Google Cloud Run is a serverless computing platform powered by Google Cloud Platform (GCP) that allows developers to easily deploy and manage containerized applications without the need to manage servers or infrastructure. With Cloud Run, developers can package applications in Docker containers, deploy quickly, and automatically measure as they’re delivered. Key features of Google Cloud Run include auto-scaling, pay-as-you-go pricing, and support for popular programming languages and frameworks. Designed for microservices-based architectures, this software allows developers to easily build and run applications by focusing on writing code rather than managing processes. Google Cloud Run simplifies the deployment and scaling of containerized applications, making it simple and efficient for a variety of applications.

Google Cloud Build

Google Cloud Build is a continuous integration/continuous deployment (CI/CD) service provided by Google Cloud Platform (GCP). It automates and simplifies the software development process by allowing developers to create, test, and distribute their code consistently. Cloud Build; It is designed to work seamlessly with popular version control systems such as Git, GitHub, and Bitbucket, and supports multiple programming languages ​​and development tools. Key features include build pipelines, autoscaling for faster execution, and integration with other GCP services such as Kubernetes Engine and App Engine. Cloud Build’s development team improves performance, improves code quality, and accelerates the delivery of software applications, making a valuable contribution to everyday software development.

Steps to implement:

  1. Create a GitHub repository:

Create a Git repository and push your code for the frontend of your application there.

  1. Now go to GCP console by visiting https://cloud.google.com and log in into your account and select the project where you need to deploy the application.
  1. Now type Cloud Run in the search box of your GCP console and click on it. It will open the cloud run service window.
  1. The Cloud Run console will look like this:
  1. Now click on CREATE SERVICE. This will open the service configuration window for Cloud Run.
  1. Now click on TEST WITH A SAMPLE CONTAINER option for the first time so that it will automatically select the hello image which is default provided by the cloud run to test the service. After that Give a suitable Service Name for your deployment and select the region in which you want to deploy your Cloud Run deployment.
  1. Select the CPU is only allocated during request processing in the CPU allocation and pricing section.
  1. Under the free tier of GCP First 180,000 vCPU-seconds/month, First 360,000 GiB-seconds/month and 2 million requests/month won’t be chargeable to the user.
  1. In the AUTOSCALING section keep the keep the minimum number of instances to 0 and maximum number of instances to 100.
  1. In the Ingress control section select the ALL option so that your service is accessible over internet.
  1. Now in the Authentication section select the Allow unauthenticated invocations and select this option only if you wish to make your API public or a public website
  1. Now click on the Container, Networking, Security section and here you can select the Container Port, Capacity of the container, max timeout and concurrent request per second. By default they are set as max timeout 300 seconds and 80 concurrent request per second.
  1. Now in the Execution Environment section select the default option.
  1. Once the service is created using the default hello container image you will see a dashboard for this cloud run service.
  1. Now here we can see a auto-generated url from this clous run service if we click on this URL it will redirect to the hello container and display its successful deployment message on our browser.
  1. Now for using the Cloud Build  service click on the SETUP THE CONTINOUS DEPLOYMENT option.
  1. The SETUP with CLOUD BUILD dialog box will open where you can authenticate your GitHub account and then select your repository and the branch from which you want your deployment to be picked whenever a push is made to the code from this branch. And once created a trigger will be attached to this Cloud Run service.
  1. Now type Cloud Build in the search option of your GCP console and click on it.
  1. Once the CLOUD BUILD is open go to TRIGGERS and click on them.
  1. Select the trigger associated to your CLOUD RUN services and click on EDIT option.

It will open the Edit Trigger dialog box you will be able to se the short description of your trigger and from which repository it is linked.

  1. Now create a cloudbuild.yaml which will instruct the cloudbuild while reading your repository that what instructions should be followed in order to build this code ands deploy it to cloud run.

steps:

  # Build the Docker image

  – name: ‘gcr.io/cloud-builders/docker’

    args: [

      ‘build’, 

      ‘-t’, ‘gcr.io/$PROJECT_ID/<yourcloudrunservicename>$SHORT_SHA’, 

      ‘–build-arg’, ‘GENERATE_SOURCE_MAP=${_GENERATE_SOURCE_MAP}’,

      ‘–build-arg’, ‘REACT_APP_MODULE_NAME=${_REACT_APP_MODULE_NAME}’,

      ‘–build-arg’, ‘REACT_APP_API_URL=${_REACT_APP_API_URL}’,

      ‘–build-arg’, ‘SKIP_PREFLIGHT_CHECK=${_SKIP_PREFLIGHT_CHECK}’,

      ‘.’

    ]

  # Push the Docker image to Google Container Registry

  – name: ‘gcr.io/cloud-builders/docker’

    args: [‘push’, ‘gcr.io/$PROJECT_ID/<yourcloudrunservicename>:$SHORT_SHA’]

  # Deploy to Cloud Run

  – name: ‘gcr.io/cloud-builders/gcloud’

    args: [‘run’, ‘deploy’, ‘<yourcloudrunservicename>’, ‘–image’, ‘gcr.io/$PROJECT_ID/<yourcloudrunservicename>:$SHORT_SHA’, ‘–platform’, ‘managed’, ‘–region’, ‘<your-region>’, ‘–allow-unauthenticated’, ‘–port’, ‘8080’, ‘–timeout’ , ‘900’]

And save this file as cloudbuild.yaml and push this file to your remote repository and comeback to your edit trigger option and scroll down to the Configuration option and select type as cloudbuild configuration file and Location as Repository

  1. Now scroll down to the Environment variables section and add the variables that are required for your application and click on save.
  2. Now you have successfully configured the continuous deployment setup and whenever a code will be pushed it will automatically fetch the changes the from your source repository build it and deploy it to your cloud run.
  1.  Once the build is completed you can visit your cloud run autogenerated url and now when you click on it you will be able to see your application’s frontend is deployed and accessible through your Cloud Run service URL.

So, in this documentation we deployed our application’s frontend using the Cloud Run and Cloud Build services of GCP (Google Cloud Platform).

]]>
https://unanimoustech.com/2023/10/30/deploying-frontend-of-an-application-using-google-cloud-run-and-cloud-build-from-remote-repository/feed/ 0 89586
Deploy Angular App from GitHub to AWS with CodeBuild & CloudFront https://unanimoustech.com/2023/10/27/deploy-angular-app-from-github-to-aws-with-codebuild-cloudfront/ https://unanimoustech.com/2023/10/27/deploy-angular-app-from-github-to-aws-with-codebuild-cloudfront/#respond Fri, 27 Oct 2023 07:07:19 +0000 https://unanimoustech.com/?p=89573 Introduction

This blog will go into the art of AWS-smooth Angular application deployment. We’ll demonstrate the potential of automation by using AWS CodeBuild to build the app and AWS S3 to host it. Not only that but we’ll up your deployment game by distributing your software over AWS CloudFront. With this configuration, developers may concentrate entirely on code while the infrastructure handles deployment seamlessly. Let’s get started on this quest to make Angular app deployment on AWS easier.

Configuration steps: –

  1. Setup a GitHub repository for your angular application with all the necessary files
  1. Now create a S3 bucket on which the artifacts of the code will be stored after being built by the AWS Codebuild and then further get distributed via the Cloudfront URL.
  2. Open Your AWS Management Console after logging into your Amazon Web Services account with your IAM user.
  1. Go to the search bar and type S3. If you click on it you’ll be redirected to the S3 dashboard.
  1. Click on Create bucket button. And in the general configuration, give an a unique name to your bucket and select the AWS region for your bucket which in our case will be ap-south-1 (Mumbai).
  1. In the next steps keep the rest options for ACL, Block Public access as default and only enable the Bucket versioning for your bucket.
  1. Keep the encryption of the object same as the bucket encryption. By default the bucket is encrypted with Amazon SSE-S3 encryption. 
  1. Click on the Create bucket icon.
  1. Once the bucket is created we need to enable the static web hosting. For that go to the properties of your bucket , enable the static website hosting and, add the index.html at the start and error pages.
  1. Now create a Codebuild project to setup connection between our GitHub repository and Amazon S3 bucket for storing the artifacts.
  2. Go to the search box of your Amazon console, type Codebuild and click on it.
  1. Once clicked it will redirect you to the Codebuild dashboard. And click on Create build project. 
  1. In the Project Configuration block add a name and description to your project.
  1. In the Source block, select provider and authenticate, and then choose your repository in which your angular application and necessary files are present.
  1. In the Primary source webhook events block, check the Rebuild everytime a code is pushed in to the repository option. Select Build type as Single Build  and Webhook event type as PUSH
  1. In the Environment block, we will be defining the variables and values that our code will require and the image or OS it will use to build the application. A Codebuild service role will be created at this block in order to configure the IAM access for these operations.
  1. Next is the buildspec block. In this block you have to mention a buildspec.yml file that should be created in your root repository.
  1. Here is an example of the buildspec.yml file for an angular application 

version: 0.2

phases:

  install:

    runtime-versions:

      nodejs: 16

    commands:

      – echo Installing source NPM dependencies…

      – npm install -g @angular/cli@15.2.5

      – npm install

  build:

    commands:

      – echo Build started for $BUILD_ENV on `date`

      – npm run build

      – echo Build completed…

  post build:

    commands:

      – echo Pre-Build started on `date`

      – aws s3 sync ./dist s3://$BUCKET_NAME

      – echo Pre-Build completed on `date`

artifacts:

  files:

    – dist/**/*

  discard-paths: yes

  1. Now in the Artifacts block, select the location and bucket where you want to store the artifacts once they are built using the Codebuild.
  1. Click on Create build project.
  1. Once the build project is created click on start build and observe the workings of the build process through logs and phase details.

The above image shows that the build was successful, and now the artifacts are copied to your S3 bucket.

  1. Creating a Cloudfront distribution for my S3 bucket.
  1. Go to the Search box on your AWS management console, type Cloudfront, and click on it it will redirect you to Cloudfront console.
  1. Now click on Create a Cloudfront distribution.
  1. Now in the Origin block, enter the AWS origin, which in our case will be our S3 bucket
  1. Now in the Default cache behavior, select path pattern as default, compress objects as Yes, viewer protocol policy as Redirect Http to Https, allowed head for HTTP as GET HEAD, restrict viewer access as No and Cache policy as CacheOptimized
  1. In the Web application firewall click on do not enable security options for now.
  1. In the Settings block, select the use all edge locations option for price class for best performances, and add CNAME if an alternate domain and SSL certificate are available. HTTP/2 and HTTP/3 can both be used and now click on Create distribution.
  1. It will generate an IAM policy for the bucket which can be copied to the policies.
  1. Now hit the Cloudfront URL and you’ll be able to see your angular application.
]]>
https://unanimoustech.com/2023/10/27/deploy-angular-app-from-github-to-aws-with-codebuild-cloudfront/feed/ 0 89573
Locust Load Test Setup with GKE Google Kubernetes Engine https://unanimoustech.com/2023/10/26/locust-load-test-setup-with-gke-google-kubernetes-engine/ https://unanimoustech.com/2023/10/26/locust-load-test-setup-with-gke-google-kubernetes-engine/#respond Thu, 26 Oct 2023 07:14:33 +0000 https://unanimoustech.com/?p=89557 Introduction

In this documentation, we will configure the locust load test and generate a locust URL by deploying it inside a pod deployed inside a Google Kubernetes Engine autopilot cluster using a simple python script which will be executed inside the pod when created.

Key Points for Setup:

  1. Locust: a brief introduction
  2. Python script for locust
  3. Dockerfile for building the image for locust setup.
  4. Register image in GCR
  5. GKE cluster autopilot setup
  6. Configuration and creation of deployment and service manifest  
  7. Testing and verifying the URL for locust

Locust

Locust is an open-source load testing tool used to measure the performance and scalability of web applications. It simulates virtual users, called locusts, to perform tasks like making requests and processing responses. It allows customization through Python code and supports distributed testing across multiple machines. Locust provides real-time monitoring and reporting of performance metrics, helping identify bottlenecks and optimize system capacity. Overall, it helps ensure applications can handle heavy traffic and perform well under stress.

Python script for locust

from locust import HttpUser, task, between

class MyUser(HttpUser):

    wait_time = between(1, 5)

    @task

    def my_task(self):

        self.client.get(“path/to/the/web”)

Dockerfile for building the image for locust setup

  1. Creating a Dockerfile.

FROM python:3.9

COPY my_locust_script.py /locust/

WORKDIR /locust

RUN pip install locust

CMD locust -f my_locust_script.py

  1. Building a docker image using this Dockerfile by executing following command:

docker build -t <image-name> .

Registering the image to GCR (Google Container Registry)

  1. Configure gcloud for docker 

gcloud auth configure-docker

  1. Tag the image to the GCR repository

docker tag gcr.io/[PROJECT_ID]/<image-name>:latest

  1. Push the image to the GCR repository:

docker push gcr.io/[PROJECT_ID]/locust-image:latest

GKE autopilot cluster setup

In this section we will be creating an autopilot cluster in the Google Kubernetes Engine. Following these steps will setup the autopilot cluster:

  1. Go for the url https://cloud.google.com and search for Kubernetes Engine and hit enter it will redirect you to the Google Kubernetes Engine page.
  2. Click on Create, by default GKE provides you an option to create an autopilot cluster so that most of the things inside a cluster are managed by the Kubernetes engine itself. But if you want to manage all by yourself you can go for the standard method. Here we choose the autopilot method. 
  1. Name your cluster and select your region.
  1. After naming your cluster and selecting the region click on Next for networking configuration and choose the network and mode of cluster whether it is going to be public or private cluster, which in our case will be a public cluster and then click on next for Advanced settings.
  1. Now select the cluster release channel, we choose Regular channel which is the default option. And then we review and create the cluster. 
  1. Now review the configuration for once and then click on Create cluster. It will take some time to create the cluster so we’ll have to wait till the time it gets provisioned.

Configuration and creation of deployment and service manifest files inside the cluster

]]>
https://unanimoustech.com/2023/10/26/locust-load-test-setup-with-gke-google-kubernetes-engine/feed/ 0 89557
How much does it cost to develop a geo-location based Augmented Reality game like Pokémon GO https://unanimoustech.com/2019/01/06/how-much-does-it-cost-to-develop-a-geo-location-based-augmented-reality-game-like-pokemon-go/ https://unanimoustech.com/2019/01/06/how-much-does-it-cost-to-develop-a-geo-location-based-augmented-reality-game-like-pokemon-go/#respond Sun, 06 Jan 2019 21:35:19 +0000 https://blog.unanimoustech.com/?p=26918 Pokémon GO mobile game became insanely popular in no time, in 24 hours after launch it was on the top app list on App Store and Google Play. Here we will reveal about the main features of this game and how much does it cost to make a game this.

What is Pokémon GO

Pokémon GO is an operation bridging in-game objects with the real-world objects in a way that the former is only available in certain physical locations, for e.g. in the park or near the river. Apart from it, newest Pokémon game processes an image grab by the smartphone camera and overlays it with additional elements to create a so-called augmented reality.

On the less capable devices augmented reality mode is not available and users simply see a 3D game universe which is however connected with locations from the real world:

 

1*rRkq8vxBXeeS2n_JB-4r4A.jpeg

 

Pokémon GO rules are elementary as follows:

  1. Firstly, install an app, register and can use it when your device’s screen is on.
  2. The main form of communication is collecting Pokémon by throwing Poke Balls at them (usually can’t catch them on the first try).
  3. Since they aren’t staying in one place and create in various locations, users have to passionately move around the area or even the whole city to catch Pokémon.
  4. Players also require to renew their Poké Ball supplies on Poké Stops and can fight other Pokémon trainers in locations called gyms.
  5. The distance you have walked and the number of Pokémon caught effect your level in the game.

 

Picture1

And now let’s figure out how to make a Pokémon game.

Pokémon GO like app development

The essentials we need to create a Pokémon game are:

  • Game design,
  • Game engine,
  • App prototype,
  • Map service and geolocation tools,
  • Concept for assorting objects on the map and game balance,
  • Means to merge with device sensors,
  • Server for executing interaction between users and storing their game data,
  • Event alerts,
  • In-game purchases,
  • Game graphics and sounds

 

You should also consider the following factors that strengthen to Pokémon GO success:

  • Eminent Pokémon brand that already had a number of fans with Pokémon apps being only one origin of its popularity.
  • Encounter with augmented reality games development (Ingress). To make a game like Pokémon require a lot of resources since data gathered by Ingress belongs to Niantic.
  • Precise timing for launch — summer in Northern Hemisphere when most people spend a fair amount of time outside.
  • The game needs a lot of united attention which makes it a habit-forming product. You need to take it into consideration if you want to create Pokémon GO like app.
  • A great ability for viral growth: if you see a Pokémon, you’ve got to grab it right there and since people see others playing, they want to try it themselves.

 

And now let’s examine what require to build Android or iPhone games like Pokémon GO

1. Game design

Prior start working on Pokémon like apps for Android or iOS, we need a concept and a design document (specifications). Game designer is generally the one who prepares them and further promote all development stages and gives the right tasks to developers, designers, illustrators, sound people, etc. Impressive game design is essential for your project, so it costs accordingly.

2. Game engine

Game engine is a major software for bringing together all the assets used in the game (code, graphics, sounds) and executing them. Only very simple games do not require game engine but games similar to Pokémon GO don’t belong to this category. Infact game engine makes game creation for Android and iOS or any other mobile platforms much smooth. For Pokémon GO developers used Unity game engine.

Unity_Technologies_logo.svg.png

3. App prototype

App prototype of the Pokémon GO alternative shows how app will look like and includes all of the screens used in it. Yet it’s not an app, it only shows about operation, menus and other elements that will be available to users when the app similar to Pokémon GO is completed. InVision, Proto.io, Pixate or Flinto are the special tools that helps in prototyping.

apprprotp

4. Map service and geolocation tools

Since before becoming an independent company Niantic was an inner Google startup, it is possibly using Google Maps and location data under some exclusive terms and conditions which are not feasible to anyone else. That’s why designing a Pokémon clone is not a smooth task. In general, to create apps like Pokémon GO we will need to do the following:

  1. Attach Google API to the project, pay for a license (price depends on the data volume and number of requests per day). We can also consider Open Street Maps which are free but they do not provide location photos.
  2. Note down functions for working with GPS on devices (geolocation). We require them for recognizing device location and displaying the right objects to users.

appservice

5. Logic for allocating objects on the map and game balance

We have to aim for a natural feel to create popular app like Pokémon GO. And to accomplish it we need the objects to be distributed on the map in an organic and naturally looking way. We have to identify:

  • How frequent new Pokémon will appear on the map.
  • Locations which are more pleasant for a certain Pokémon type and how their number switch in various hours of the day.
  • how the fame of a certain location affects the type and number of Pokémon one can expect to meet there.

Game balance is vital for a successful Pokémon GO alternative. If the game is well-balanced, beginner don’t feel it too complicated to play while professional players get enough challenges for it to stay fun and playable. After game balance is executed, it is tested and adjusted accordingly.

 

AR

6. Means to interact with device sensors

In order to resolve device position in space and the speed at which the person is moving (to know whether person is using a car or going on foot while using Pokémon like app) we require data from the sensors built into the smartphone:

  • Gyroscope figure out device orientation in space.
  • Accelerometer analyze acceleration speed of a smartphone.
  • GPS determine user’s position according to the global positioning network.

we have firmly worked with data captured by these sensors and can use our experience in Pokémon like apps development.

7. Server for enabling interaction between users and storing their game data

Since players refer to same game world, are using the alike map and have to follow the alike basic rules, this world needs to be generated somewhere, constantly progress and interact with them. All this occur on the server which all the copies of the app identical to Pokémon GO installed on players’ devices use to interface with each other.

The server is also necessary for users to be able to transfer their game data to a new device in case they have purchased a new one. Without a server for storing game data we won’t be able to create a strong and stable game backend for iOS and Android game like Pokémon, so it’s a vital part of the overall game development.

We should also consider that servers and databases should be ready for high loads so that players won’t be forced to wait:

 

 

8. Event notifications

Realtime occurrence allow users to be instantly notified about what is happening within the game. Since Pokémon GO is played with a screen turned on, players see message and tips like these at once:

 

limit

Realtime act are implemented with Socket connection that allows to interchange data with the player directly and in a duplex mode when he or she is online. When the user is offline, server can send push-messages via third-party services which players get with a small delay.

9. In-game purchases

There’re certain monetization models for mobile startups out there and Pokémon GO is using a model with in-app purchases. Users can buy objects like Poké Balls, Lure Modules, Egg Incubators, etc. Both cheaper (20 Poké Balls for 100 coins) and more expensive listings (6 lures for 680 coins) are there. It is an eminent aspect since it helps newcomers to easily make their first in-app purchase and inspire experienced players to purchase items in amount to save coins.

It is better to execute purchases for each platform via its native service since those services look more reliable to users. For eg., if we are developing an Android app, the obvious choice would be Google Play In-app invoice. By using this service, you will be able to freely fill the app with purchasable items from the developer console without updating the app too often.

inapppurchases

10. Game graphics and sounds

Players want latest games to look seamlessly in terms of graphics. Since Pokémon GO uses 3D design of Pokémon, a compelling part of game’s cost will be spent on their creation. It would also be better if 3D modelling is done by the side of the Pokémon GO progress process so that all parts of the app will be import together in a timely manner. Indeed, there’s Unity Asset Store where we can buy pre-made models but they won’t help to create something exclusive like Pokémon GO.

 

If we have budget, we can offer some options as for sounds, Audio Jungle, Music Loops or The Music Case.

Pokémon GO like app development costs

Now as you are aware with the game development process, let’s take a look at Pokémon GO like video game pricing:

  • Client application and game design — $15-25K
  • UI/UX — $2-3K
  • Back End — $5K (MERN stack)
  • Server expenses — (VPS,AWS or any cloud service which could be scaled as user base grows)
  • QA and testing — (included in our development service )
  • Game models with animation — $5K (2 base character & upto 10 creatures or 3D game objects)
  • Sounds — (varies based on selection of effects and theme)

So total Pokémon GO like app development cost is about $25-45K. Indeed, it’s an approximate cost and actual mobile app development costs will differ based on the prescribed features.

 

]]>
https://unanimoustech.com/2019/01/06/how-much-does-it-cost-to-develop-a-geo-location-based-augmented-reality-game-like-pokemon-go/feed/ 0 26918
React.js Tutorial : Components https://unanimoustech.com/2018/10/02/react-js-tutorial-components/ https://unanimoustech.com/2018/10/02/react-js-tutorial-components/#respond Tue, 02 Oct 2018 09:31:07 +0000 https://blog.unanimoustech.com/?p=3008 Creating React Components

Components is base and essential part of React application development.
To create your React.js web application you need to install react app generator which is written in node.js and available though node package manager.

npm install -g create-react-app

or

npm i -g create-react-app

Now lets create an quick react app using create-react-app generator via terminal on mac or linux or command Prompt on windows

/>create-react-app hello-world-react

It shall look like this

Now run following commands

cd hello-world-react

  npm start

It will launch the react app on http://localhost:3000/ , as you make changes in source file those are reloaded in web-browser instantly.

Now lets create a HelloWorld.jsx file in source folder and add the following code

import React, { Component } from “react”;

class HelloWord extends Component{

render() {

return <h1>Hello Word Componenet</h1>;

}} export default HelloWord;

In your app.js or index.js you can import your component like

import HelloWorld from “./HelloWorld”;
//and  in render method add it
<HelloWorld />

Please check below codesandbox preview of the HelloWorldCode

Few this worth noticing are

  • It is important to import React in order to write JSX code
  • JSX syntax look similar to HTML
  • The above type of components are called class component and is defined in React.Component.
  • Any html component used in JSX will have same tag e.g <div/> <p/> etc
  • class in html is written as className in JSX rest all html attribute will be written in same format
  • for attributes with – like tab-index font-size etc will be converted to camelCase like tabIndex fontSize etc.

In next tutorial I will write about using style sheets in react.

 

]]>
https://unanimoustech.com/2018/10/02/react-js-tutorial-components/feed/ 0 3008
Eight steps to Successful Game Development https://unanimoustech.com/2018/05/09/eight-steps-to-successful-game-development/ https://unanimoustech.com/2018/05/09/eight-steps-to-successful-game-development/#respond Wed, 09 May 2018 11:48:20 +0000 http://blog.unanimoustech.com/?p=2928 The market for mobile gaming is huge and it offers a great opportunity for earning lucrative revenue. Games like, Candy Crush, Flappy Bird, Angry Birds and Clash of Clans are examples of games that are played by millions on their mobile devices. Their success has inspired a million others to take an initiative towards game development and mobile game development.

As per reports, mobile users download, install and play games within the very first few days of purchasing a mobile device. Needless to say, this market has immense potential and to become a part of this market, you need to study your target audience and come up with a truly engaging gameplay.

If you want to develop a game, but lack the inspiration, keep reading to know the steps that you must ideally take for the development of a money-making game. Try and follow the given steps as closely as possible so that you can stand apart in the mobile gaming industry.

  1. Ideate, Ideate and Ideate Some More

Ideally speaking, a great idea is really all that you need to make your mark in the mobile gaming industry. This is the most complicated and important step to creating a successful game. Unfortunately, there are no surefire ways to generate ideas and they key is to find something that is seriously engaging and unique. Your aim should be to create something that appeals to the mass audience and worthy of keeping them busy.

A very common idea that most game developers follow is to improve upon an existing idea rather than thinking of something completely new. For instance, Diamonds and Candy Crush are fantastic examples of improvisation.

  1. Tell Your Target Audience a Story

In the gaming world, stories can go a really long way. It can make or break the gaming experience for the players. Usually, people who love playing games, play the game because they feel that there is a purpose and they need to finish the game in order to achieve that purpose. It does not matter how simple your story is, but there must be a story.

If you need help creating a story, you can start by answering the following questions:

  • Is there a hero and a villain in the story?
  • Do they have any weaknesses and strengths?
  • What is the reason that they’re fighting with each other?
  • Will the hero achieve victory?

You can build on the storyline as you go answering the questions and you will be able to have a brilliant story for starting game development and mobile game development.

  1. Keep it Simple, but Engaging

If you want to retain game users, you need to create a game, which is addictive. In order to keep game users hooked to your game, you must keep the initial levels fun and easy. As the users progress, gradually increase the difficulty level so that the players do not lose any interest. You can also pique the interest of the game players by introducing short quests or contests in between the levels and also offer them freebies, change the design according to occasions and holidays, and so on.

  1. Choose the Right Platform

The right platform can go a long way in making or breaking your mobile game. It can be confusing to choose because there are so many options – iOS, Android, Windows and Blackberry. Since Windows and Blackberry are generally ignored by game developers, your choice basically boils down to iOS and Android. However, a better option would be to simply avoid the dilemma and opt for a hybrid model, but additional costs will be involved in that. So, the deciding factor is your target audience and of course, your budget.

  1. Come Up with an Innovative Design

Developing a design for a game is not quite the same as creating one for a mobile application. As a matter of fact, game designs are a lot more complicated. Games design takes a lot of factors into consideration, such as characters, the story that directs the game and its final appearance. The way your game looks can make a huge difference to the overall gaming experience. When it comes to designing, there are endless possibilities and you can choose from comic style to flat design to 3D layout and more.

  1. Develop a Money-making Strategy

There are literally millions of games available for mobile users and not all of them are profitable. If you want to make money, you ought to come up with a foolproof monetization strategy even before the development process has started. Some of the ways by which you can monetize your game are ads within the gaming application, in-app purchases and premium versions. These methods are proven to help game developers earn a huge return on their investment.

  1. Determine the Technology

Now that you have the idea for the game, the next plausible step involves game development and mobile game development. There are broadly 3 main types of development processes – HTML5, Native and Hybrid. You need to make your choice carefully because each of them has their own pros and cons. For example, native development is ideal if you are looking for the best performance, HTML5 is perfect if you are looking to build mini-games and hybrid is good if you are willing to spend and want to create a game for the mass audience.

  1. Engage Professional Developers

Even though all of the steps together amount to the development of a successful mobile game, choosing expert developers is the most crucial step. If you don’t get a developer to help bring your ideas together, it’s no use. Since mobile app development is complex, you need the support of a certified and experienced developer who will back your initiatives and turn your dreams into reality.

So, now that you know how you can design and develop a successful mobile game, it is time to get started. Make sure that you do your due diligence and carry out your own research, as well.

[contact-form-7]

]]>
https://unanimoustech.com/2018/05/09/eight-steps-to-successful-game-development/feed/ 0 2928