Follow

Category: Software Development

Automatic Deployment Using GitHub Actions

Posted on January 28, 2022 by in General, Software Development

Software development is a continuous process, with regular code updates from time to time. Whether from adding new features, fixing bugs or just performing general chores like updating project dependencies now and then. One effective approach to easily push and preview these local development changes to a staging or production environment is to create a continuous integration and deployment workflow. In the next few steps, I will teach you how to automatically deploy your project from GitHub to cloud server using GitHub Actions.

Prerequisites:

GitHub Account

In order to use GitHub actions you should have a GitHub account.

Cloud Server

You will also need a cloud server on which we will deploy the React app. For this tutorial we are going to a React app to keep the process of deployment simple.

Let’s go through some fundamentals

What is CICD?


CI and CD stand for continuous integration and continuous delivery/continuous deployment. In very simple terms, CI is a modern software development practice in which incremental code changes are made frequently and reliably. Automated build-and-test steps triggered by CI ensure that code changes being merged into the repository are reliable. The code is then delivered quickly and seamlessly as a part of the CD process. In the software world, the CI/CD pipeline refers to the automation that enables incremental code changes from developers’ desktops to be delivered quickly and reliably to production.

Why CICD?

CI/CD allows organizations to ship software quickly and efficiently. CI/CD facilitates an effective process for getting products to market faster than ever before, continuously delivering code into production, and ensuring an ongoing flow of new features and bug fixes via the most efficient delivery method.

GitHub Actions

GitHub Actions helps you automate tasks within your software development life cycle. GitHub Actions are event-driven, meaning that you can run a series of commands after a specified event has occurred. For  example, every time someone creates a pull request for a repository, you can automatically run a command that executes a software testing script.
What can you do with GitHub Actions? The possibilities are limitless, you could do anything from:

  • Handling CI and CD (Build, test, and deploy applications)
  • Performance monitoring
  • Twilio voice call or SMS alerts

and much more!

Let’s Start

Our target here is to see how automatic deployment of a react project from GitHub to cloud server can be done using GitHub Actions.

Create Project Repo

For this project I used react-app-deployment-GitHub-action as the repo name.

Create React Project

Step 1

Clone the empty repository.

Step 2

Create the basic react app using create-react-app command.

Please checkout more about how to create a new react app here.

Step 3

Run the base app verify that there are no issues.

Step 4

Commit and push the code to GitHub.

Add GitHub Action workflow

Now that we have the react app in the repository, we can go ahead and create the GitHub Action workflow for deployment.

Step 1

Go to Actions tab.

Step 2

Select Node.js workflow.

Step 3

Create the workflow file.

Firstly rename the file as react-app-deployment.yml (you can use any filename).
Edit the new file and paste the following content.

Commit the file to the repo with a commit message.

Let’s break the above yml file and understand what we are trying to do.

This is the name of the workflow.

Here we are telling when this workflow should trigger. In my example I want this workflow to trigger whenever someone pushes code to the master branch.

A job is a set of steps that execute on the same runner. By default, a workflow with multiple jobs will run those jobs in parallel. You can also configure a workflow to run jobs sequentially. For example, a workflow can have two sequential jobs: build and test code, where the test job is dependent on the status of the build job. If the build job fails, the test job will not run.

For our purpose we just want to do deployment so we just have 1 job.

Configures the job to run on a self hosted server. Since we want to deploy the project on our cloud server.

For now we just want to use node version 16 for our react portal. But if you want to use GitHub actions for testing and you have a piece of code written in node and want to test it across different node versions then you can mention that in the node-version array.

For our purpose we just want to deploy on a server so we will go ahead with Node v16.

Groups together all the steps that run in the job. Each item nested under this section is a separate action or shell command.

The uses keyword tells the job to retrieve v2 of the community action named actions/checkout@v2 . This is an action that checks out your repository and downloads it to the runner, allowing you to run actions against your code (such as testing tools). You must use the checkout action any time your workflow will run against the repository’s code or you are using an action defined in the repository.

This step uses the actions/setup-node@v2 action to install the specified version of the node software package on the runner, which gives you access to the npm command.

Finally we would like to install the node dependencies and build the production files. Optionally you can even run the test cases.

Note that as soon as you commit the file the workflow will start. Since the workflow file is being pushed to the master branch.

This workflow will fail since we did not yet tell GitHub which server to use to run the workflow on.

Setup GitHub Runner

We have the workflow in place but we still did not specify which self hosted server to use. For this you need to add a GitHub Runner to the repo.

Step 1

Go to Settings tab.

Step 2

Go to Actions tab, and click on New self-hosted runner.

Step 3

Select the runner type. We are going to use a Linux server.

Step 4

You will see a bunch of commands which will guide you through the installation process.

Run the above download steps on your server.

Step 5

Please run all the commands in the same order in which they are shown to download.

Step 6

When you configure your runner please fill in the details which are asked.

You can give a name to your runner and also give a name for the work folder.

Step 7

Finally run the run script.

This will start your runner and it will start listening for the workflow events.

Step 8

Confirm that the runner is running.
Go to Settings > Actions > Runners

You will find that your runner is available and ready to take on any job.

Trigger workflow

Let’s go back to our project file and make a small change to see how this workflow runs now.

Step 1

Make a dummy update to base react app.

For now I added a h1  tag

Step 2

Commit and push the code. Go to the Actions tab and you will find your workflow running

Step 3

You can click on the latest workflow and check the details of the build job.
You will find all the steps and it will also show you the time it took for each step.

Step 4

Login to your server and you will find the build files inside actions-runner folder.

Here all the build files are there which can be served via apache or nginx.

Nginx Setup

I would like to keep this setup very simple.

Step 1

Install nginx

Step 2

Update the default nginx file

Step 3

Update the root path to your build file.

Here I am telling nginx to load the files from my react project.

Step 4

Restart nginx  service

Step 5

Open your server IP address and you will your react app.

Keep GitHub Runner running

You will find that after you close your server terminal where ./run.sh was running, your GitHub runner stopped.

What you can do instead is run the following command.

  1. Stop the self-hosted runner application if it is currently running.
  2. Install the service with the following command:
  3. Start the service with the following command:

You can find more details about this here.

Conclusion

Overall, I very much enjoy the experience of using GitHub Actions. I think it’ll be the future standard of CI/CD platforms. Every time I use GitHub Actions I’m delighted by how fast I can create workflows to automate a manual task and find new patterns to use GitHub Actions.

References

Posted By: Vishnu Kyatannawar, Osmosee

How To Create The Best User Experience For Your Application?

Posted on February 25, 2019 by in Mobile Technologies, Software Development

Best user Experience For Your Application
“Steve Jobs has correctly called out in of his quotes that “Design is not just what it looks like and feels like. Design is how it works.”

We use the Internet in our own way; would want it to be fast, informative and hassles free. As we all like our internet for entirely different things that suit our interests. No doubt, the Internet dispenses our functional data, news and knowledge for our personal, social and economic building and with that, it is up to us how to make our time on the 24X7 world wide web, worthy and productive.

The time could be made productive, and browsing could be easily possible if only we have software that can help us use this feature(the internet) by giving us the best user experiences. What best than Osmosys that has implied a few tips and ways to give us, the users the best experience of the applications that we use.

An application is made for users that can use it for a purpose. Out of a hundred things of an application’s features, one key element should be that- it should be User-Friendly. Providing users with a quality app will make a mark in the market and also will encourage users to build trust in you.

For building an application, the users are looking for and something that can help them meet their expectations and also go beyond it, we must understand and keenly focus on their needs and expectations. We can do that by looking deep at their patterns and psychological behavior and achieve our goals to satisfy users.

Collecting user data and understanding user pattern is just the initial step of the long Osmosys journey. Today’s mobile users have been demanding a lot more from apps to retain them and to attract them for coming back again and again after the initial download. We at Osmosys understand that the best user interfaces are the ones that go beyond their way to provide the users with easy to learn, simple to browse and effortless right tools.

User experience, which is the value that the user gets while using the app is an essential element in retaining them. Listed below are a few of those highly used tips and tactics by Osmosys that helps one create the best user experience for the apps in its life cycle.

1) Understanding:

Understanding

Design nullifies the problem. To provide better solutions, you have to understand the challenges faced by the user. A proper understanding of the user requirements is the first step
you need to proceed with before designing the product.

To understand the requirements, you can follow industry standard user research methods including group and individual reviews. Along with that you can also include interviews with the client himself and showcasing the existing products you have and getting feedback for that and try implementing the input and come up with better-improved products.

Once you get an understanding of what people think and want, you can build a product that helps them act to your analysis.

2) Research:

Research

One of the best things a product have in it is a combination of best features. This is possible only when you do research. The design team should do their research work to explore how the world is accepting such products and what else would they like to add.

  • When you do keen research, you’ll also get to know what your competitors are up to and get inspiration from their work
  • While researching, always have in mind: Analysis of competitors approaches
  • Research on similar features across the world
  • Study of the latest User experience design principles and trends
  • But keeping it all parallel to your own user experience guidelines

3) Sketch And Design:

Sketch And Design
After noting the user wants and preferences, you have to make sure the design is ready for a quick scanning as user behaviors very much on mobile devices. It also needs to be glacable; where glanceability refers to how quick and easy the visual design could convey the information.
Maintaining visual consistency with the major facts, such as- the colors used, a set palette needs to be used, alongside the typography, and all other design elements. All these together will create a seamless visual flow that will usher users from the initial component of the design to other factors that shall help them complete their work and meet their goals with ease.

Key points while Sketching and Designing:

    • Create ideas and work on basic sketches/ designs
    • Some sessions with stakeholders to get their reviews from a technical perspective
    • Re-doing sketches and conducting re-test them with stakeholders
    • Design UI images
    • Finalize theme, guidelines required and specs for the implementation
    • Design icons to display on screens

4) Personalize:

Personalize

Personalization comes into picture when the past behavior visits are recorded accurately by
an app and is being stored for retargeting purposes. If a user has been detected with specific buying patterns, you can provide them with suggestions and deals to assist them when they’re about to make a purchase. Personalization helps provide a unique, admissible experience to the user. The better the aligned experience is with a user’s needs and preferences, the more likely they are to build trust in you and willing to continue to use the application.

5) Reducing Search Effort::

When you help your users find what they need swiftly to satisfy their needs and drive conversion rates. There are a lot of strategies one can use and implement into your app such as searching by keywords and barcode scanning. Providing users with customizable search option and filters to guide them directly to exactly what they’re looking for and this would significantly increase conversion rates. As the sole purpose of this method is to help users find what they’re looking for so it’s important that the search engine integration doesn’t filter down to 0 results.

6) Implement:

Implement

Since technical staff engages in the early stages of the process, they can start implementation while the Design phase is still under the process.
The Development team builds back end functionality first and thereby connects it with UI
when the design artifacts are in their possession.
It is always advised that the Design team involves in this step to enhance the development phase.

7. Assure Security and Trustworthiness:

Assure Security and Trustworthiness:

At the end, everything between a manufacturer and the user comes down to ‘Trust.’ A relation that is built on trust lasts longer and we need to put this to practice. A Mcafee online study confirms that they’ve found privacy-invading apps more common these days. With most of them containing virus malware.

8. Evaluate:

Evaluate

Once you’re done with the understanding the users’ requirements and have designed the product as per their need and have created a trust with the user as the product features are implemented, the end product is evaluated based on the following factors:
Whether the product made or the system created is usable? Is it swift and feasible to use for the end user?
Is it easily searchable app?
Does it provide the expected solution to user’s concerns and queries?

The credibility of the product is also a critical factor in helping the user make the decision for using it because of the experience it provides

Closure:

By following above amazing tips and tactics listed by Osmosys, a greater user experience can be provided. All the major stakeholders of your company help you in the process by performing their tasks assigned and the duties designated to them. This would be the best way to retain your existing clients and also attracting new users in the market.

For more such tips and help regarding your software, you can contact us, at Osmosys.

How to Solve Common Problems In Custom Software Development?

Posted on February 12, 2019 by in Software Development

Custom Software Development

A clever person would want to solve the problem. A wise person better AVOIDS it. – Osmosys

What is Software?

Software

The software is a collection of data or a set of instructions that tells the computer how to work and it enables the computer to perform a specific task. The software handles an abundance of our daily utility and specialized tasks a user would want to perform, such as accounting, communicating, data processing and word processing, etc.,

How does Software help today?

Software

With the introduction of technology in the modern world, challenges faced by business communities are solved by revamping the existing infrastructure with advanced custom software.

There are various processes involved in developing software, it is simple to outsource that segment, but the team which works on drafting the whole software program has to understand and design it in such a manner that it meets the requirement of its end users that is you. The primary goal of a software institution is to build a product that not only fetches more profit but also realizes user confidence in them.

After a continuous effort to solve the difficult areas in this aspect of our clients; based on our experience, we, at Osmosys have analyzed the most common issues while developing new software products and also have listed the following points which if you follow, you won’t have a hard time developing software.

Smart Overlook:

Smart check for all the functions and operations where Mathematics and numbers are involved. To make sure there aren’t any incorrect calculations.

Swiftness:

While developing the software; the response time and the transaction throughput rate has to be rapid and swift; which effects the performance of the whole software.

Clarity:

Sometimes it also happens that the data, which is shown to the user through the software, is correct but the user might not be in a position to thoroughly understand the data. It may sound like a problem, but It isn’t as the user will be entirely dependent on the data which the computer (software) provides.

Any confusing or misleading data that a computer system provides can prove to be very costly sometimes.

Adequate Security controls:

Adequate Security controls

Sometimes often, unauthorized access to the system is not adequately controlled and detected. In such incidences, others may also be able to perform transactions due to the lack of authorization levels checks for appropriate job roles. For example, a person who doesn’t have any managerial intervention but due to inadequate privacy access might be able to approve by their own over time. Or, a person who isn’t a part of the payroll department might be able to view the other employee’s payroll files.

Knowledgeable:

In any field you may land, if you do not garner the knowledge it requires, you know sooner or later, you’ll know that you aren’t fit for that particular area of specialists. At Osmosys, we give utmost importance to one’s knowledge in our Software business. We do not encourage folks with a lack of knowledge as it comes with high risks for project development. We believe in regular checks on the work. So if we feel you are not ready to check the project on a daily basis on your own, you need to have an internal person to assist in this.

Our understanding firms that without an experienced and dedicated Project Manager, managing a development team will never be a cakewalk and only become a challenging task. Be assured, for all your projects, we at Osmosys, have a team of dedicated Project Managers who have the best of abilities to meet your requirements that you’ve set clearly and to always help the team to move in the right direction only towards reaching the top.

 Correctly blending and Merging of data –

 Correctly blending and Merging of data

There can be situations where data is obtained from one source and blended or/and merged with data from another source. Examples can include sorting multiple files into a single file or table or matching data from the master file to an ID number entered as a lookup entry. This can create a high impact on an organization.

So, we at Osmosys help you build a system that not only solves the confusion of the files but also help you with the sorting, better alignment, records storage and also create a kind of environment that may help you work freely without having to think about any misses.

 With those keys specified, we always can’t rest assured that software will never go wrong, right? It is widely assumed that software is once developed will work faultless for life.

At Osmosys, we believe in testing things out before we set the product with the end users. Because we understand the importance of running multiple checks in software development before the product launches at your doorstep.

It not only discloses the errors that may occur through the initial development stages but also assures its creators the performance it’s going to deliver and the capability of the application to make it satisfactory to end users, that is you. Which, in turn, helps us gain confidence in the user market since the delivered software is of top quality.

Software testing in a Go –

Software testing in a Go

Osmosys believes in nothing less but quality product. Software testing is a crucial process which comprises of several interlinked processes which basically looks at the three following things –

  • Software completeness concerning functional requirements
  • Identifying the technical bugs and
  • Assuring that the software is a bug-free, evaluating enforcement, security, and installation.

The software can go in small parts, as a whole, or within an active system. Going through each of these certifications decides if the software product is suitable to use or not. The performance in each of these tests would help in determining the perfection and changes that should make the app a better one. Cutting off these lags will help the testing team run successive tests that prove the overall performance of the software. Until the software attains an aspired level of quality, this sequence will keep going on.

Closure:

The primary goal of Osmosys Software entity is to give you an assurance of good faith and build up the trust of the best work any software entity can provide at the best of resources. Software testing is a crucial component of software development and Software Development’s ongoing. Especially when it is done from the initial levels of the development process, it can be of excellent use to enhance the performance of the products with the focus given to each unique user’s interface and experience.

Although it is sometimes difficult to see the importance of testing, it shouldn’t be measured purely at cost and time, preferably in the high value that it brings.

If you’re ready with your Product, in hand. Trust us and give it a try to test it with our Independent Testing Team So once you ensure that the product doesn’t have any unidentified Functional, Performance or Security defects. You will be best at every cost. At Osmosys, we also provide end to end solutions for software product development, application development, Dynamics CRM customization, and cloud services.

What are you waiting for? Contact Osmosys now, your trustable software service provider.