dilipchandima

Are you seeking for build your app on cloud.

2020-02-16T00:00:00+05:30

Are you a mobile application developer, And Are you finding for better place to build your app automatically ? Are you searching for a product for implement CI/CD process for React Native mobile apps?

You are in the right place. Follow the guids for implement CI/CD Process for your mobile application development.

Step 1. Sign up with App Center at appcenter.ms

When you go to the Visual Studio App Center you have to signup to the portal using OAuth or using other SSO services and then you are ready to develop your CI/CD Process :)

Step 2. Create a new app

Now you can create your own application development process. For that you need to create a new application in the VSAC,

You can select Select “Add new” button for adding a new application. You can provide a name and description to your app and you can select your application development OS and Platform for integrate the CI/CD process.

Step 3. Configure your repository

Now you are ready to connect your git repository with the VSAC(Visual Studio App Center). For Connect the repo select the Build service from the sidebar, then it will ask for your development repository to select.

Once authenticated, App Center retrieves your source code. Select the app you want to build from the list.

Step 4. Configure your Build & Distribute

Now your repository is already linked with VSAC, and all the existing development branches are listed in the build panel. You can select your branch you want to build and then you can Configure the build process.

You can select Configure Build option to setup your configuration for the CI/CD process.

You can toggle Distribute builds, which will automatically send a download link to you via email once the build is complete. Finally, press Save & Build to kick things off.

Step 5. Install your app

Once the build has run to completion, a successful build will generate an email automatically that is sent to your device with an install link.

Now you can configure your mobile application development process with Visual Studio App Center !!!!

Images - Visual Studio App Center Documentation

Why Complex code with Getters and Setters in JAVA ? It’s time to move with Lombok

2019-01-09T00:00:00+05:30

Encapsulation is one of the four fundamental Object Oriented Concepts (OOP). The other three are inheritance, polymorphism, and abstraction.

Encapsulation in Java is a mechanism of wrapping the data and code acting on the data together as a single unit. In encapsulation, the variables of a class will be hidden from other classes, and can be accessed only through the methods of their current class. And those methods are called as Getters and Setters, following code is some basic example for getters and setters.

public class EncapTest {
   private String name;
   private String id;
   private int age;

   public int getAge() {
      return age;
   }

   public String getName() {
      return name;
   }

   public String getId() {
      return id;
   }

   public void setAge( int newAge) {
      age = newAge;
   }

   public void setName(String newName) {
      name = newName;
   }

   public void setId( String newId) {
      id = newId;
   }
}

So today I’m going to talk you about Project Lombok which is a java library that automatically plugs into your editor and build tools, spicing up your java. Never write another getter or equals method again, with one annotation your class has a fully featured builder, Automate your logging variables, and much more. In the Lombok library there are few annotations. following are some of the annotations and it will easy our way of development and the time.

@getter for generate getters
@setter for generate setters
@EqualsAndHashCode for generate equals and Hash Codes

`@Data` annotation

@Data is a convenient shortcut annotation that bundles the features of @ToString, @EqualsAndHashCode, @Getter,@Setter and @RequiredArgsConstructor together: In other words, @Data generates all the boilerplate that is normally associated with simple POJOs (Plain Old Java Objects) and beans: getters for all fields, setters for all non-final fields, and appropriate toString, equals and hashCode implementations that involve the fields of the class, and a constructor that initializes all final fields, as well as all non-final fields with no initializer that have been marked with @NonNull, in order to ensure the field is never null.

Then you don’t need to write getters, setters, equals by user self those methods will be generated by the Lombok library. Following is a example which they are shown in there documentation for @Data annotation After you see this you will enjoy coding :D

import lombok.AccessLevel;
import lombok.Setter;
import lombok.Data;
import lombok.ToString;

@Data public class DataExample {
  private final String name;
  @Setter(AccessLevel.PACKAGE) private int age;
  private double score;
  private String[] tags;

  @ToString(includeFieldNames=true)
  @Data(staticConstructor="of")
  public static class Exercise<T> {
    private final String name;
    private final T value;
  }
}

Happy Coding with Lombok :) …

Add Addons to React Storybook

2018-12-02T00:00:00+05:30

This is final story on developing Storybook component library for React project and here we are going to discuss about How to add addons to your project, Addons implement extra features for Storybooks to make your stories more useful.

If you are not having Storybook configured project please follow the articles before read this then you will have good knowledge on Storybook. It will be easy to understand Addons.

Basically, there are two types of addons, those are Decorators and Native Addons.

Decorator Addons

Decorators are wrapper components or Storybook decorators that wrap a story. For example, let’s say we want to center a story rendered on the screen. For that, we can use a Decorator Addon. Please refere the documentation for more details and sample.

Native Addons

Native addons use Storybook as a platform and interact with it. Native addons can add extra features beyond wrapping stories.For example, storybook-actionsis such an addon. Please refere the documentation for more details and sample.

Let’s start to add some basic addons to your existing storybook project. First we are going to add npm modules for actions ,notes ,knobs addons for that run the following command from your root project folder.

npm i --save-dev @storybook/addon-actions @storybook/addon-notes @storybook/addon-knobs

lets add addons.js file under your storyconfig folder and add the following code for import the register of each addon.

Now you have to add addons to your stories for that first import addons to your index.js file in storybook folder.

Now import addons successfully and we are going to use the addons in the existing stories. Then add the decorators to all stories in your project.

Finally Our stories/index.js file looks like this,

Final Storybook application

Now you can enjoy Storybook from developing your customized web application components.

Getting started with Storybook

2018-12-02T00:00:00+05:30

Storybook is a UI development environment and playground for UI components. This tool enables users to create components independently and showcase components interactively in an isolated development environment.

Storybook runs outside of your main app so developers can develop UI components in isolation without worrying about app specific dependencies and requirements.

Storybook supports many different frontend view layers with more coming!

React, Angular, Vue, Mithril, Marko, HTML, Svelte, Meteor, and Ember are currently supported.

Cool Now Let’s move to get started with Storybook. Following instructions are for install Storybook on your project automatically but one thing this automatic tool adds a set of boilerplate files for Storybook in your project.

cd project-directory 
npx -p @storybook/cli sb init

Let’s start Storybook with following command then Storybook should be available in the browser with a link provided in the console.

npm run storybook

Now you can enjoy Storybook from developing your customized web application components.

Manual Configuration Storybook with React

2018-12-02T00:00:00+05:30

Hey guys, I’m going to discuss with you how to configure Storybook manually on your React component project. As we discussed the automatic configuration of the Storybook generates a set of boilerplate files on your component project You can do manual configuration for React.

I assumed that you already have a React project for your customized components and here we are going to add Storybook and create components independently to your main project So Let’s start the journey :)

Let’s add all the basic dependency to the project for setup Storybook. For that run the following command from your project folder to add the Storybook module.

npm i --save-dev @storybook/react

Now you have Storybook module in your project and Lets add other dependencies, Run following command on you terminal those will add react-dom as main dependency and bable-core , bable-loader as development dependancies.

npm i --save react react-dom
npm i --save-dev babel-core
npm i --save-dev babel-loader

Now you are ready code for you component Storybook Let’s begin with the configuration file. First Create a folder in your project root named storyconfig and add a new file config.js then you project structure is like following image.

folder structure

Now you have to add the configuration to config.js file. You have add the storybook stories file location to the configuration.

Now you have to add the run script to the package.json file for run the Storybook server. Add the following script to your file.

{
"scripts":
{
"storybook": "start-storybook -p 9001 -c .storybook"
}
}

Congratulations, Now you finish all the configurations. Let’s Start the coding for your components :) for that create a folder in src called storybook and create index.js file for your stories. Then you folder structure looks like this,

Let’s add some sample stories to your project. Add the following code to your index.js file in the storybook folder.

After adding some stories you can run the Storybook by following command, and you will see the Storybook on your browser. Now you can change components and write stories whenever you need to. You’ll see the changes in Storybook immediately since it uses Webpack’s hot module reloading.

npm run storybook

Now you can enjoy Storybook from developing your customized web application components.

Why micro-services from scratch, JHipster is the solution for generate, develop and deploy

2018-01-10T00:00:00+05:30

Yes, I know most of you reading my article is software developers who are using Spring Boot, micro-services architecture for your day to day development. But this is the time to change from developing from the scratch. Java Hipster (JHipster) helps you to generate, develop and deploy your Spring Boot + Angular web applications and micro-services with few simple commands. Using JHipster will reduce your development hours and not only the generating micro-services but with using JDL Studio you can define data models and generate the CRUD operations for defined Data Models.

You can install JHipster and use it within few minutes. They provide 5 ways of working with JHipste,

JHipster Online is a simple way to generate an application without installing JHipster in the first place.
“Local installation with Yarn” is the classical way of working with JHipster. Everything is installed on your machine, which can be a little complex to set up, but that’s how most people usually work. In case of doubt, choose this installation.
“Local installation with NPM” is the same as classical “local installation with Yarn”, but using NPM instead of Yarn
The Vagrant-based “development box”, with all tools already set up in a Ubuntu-based virtual machine.
The “Docker” container, which brings you a lightweight container with JHipster installed.

I’m discussing with you, installing JHipster with NPM. follow the instructions to install, as pre-requested technologies you should have Java, Node JS and NPM on your machine.

Install Java 8 from the Oracle website.
Install Node.js from the Node.js website (prefer an LTS version)
Install NPM: npm install -g npm

Now you can Install JHipster with using NPM as well as for using JHipster commands you want to install yeoman and follow two of following instructions,

To install Yeoman, type:

$ npm install -g yo

To install JHipster, type:

$ npm install -g generator-jhipster

Now you can enjoy JHipster from developing your web applications and micro-services APIs

dilipchandima

Are you seeking for build your app on cloud.

Step 1. Sign up with App Center at appcenter.ms

Step 2. Create a new app

Step 3. Configure your repository

Step 4. Configure your Build & Distribute

Step 5. Install your app

Why Complex code with Getters and Setters in JAVA ? It’s time to move with Lombok

@Data annotation

Happy Coding with Lombok :) …

Add Addons to React Storybook

Decorator Addons

Native Addons

Getting started with Storybook

Manual Configuration Storybook with React

Why micro-services from scratch, JHipster is the solution for generate, develop and deploy

`@Data` annotation