How to add icons to react-native app

In this blog, we are going to learn how to add a launcher icon to react native apps. Launcher icon or app icon is used to represent apps. This icon will appear in your phone’s home screen app list.

There are multiple ways to do it like using android studio or manually adding the images in the src folder. In this blog we will focus on the method that uses android studio.

Prerequisites : -

Here is your step by step guide to add icon to react native app: -

 

Method 1 : (Using Android Studio)

Step 1 :- (You can skip this step if you are working on an existing project)

Create new React Native Project by following the below steps -

  • Open terminal
  • Change the directory/folder where you want to create your project.
  • Run command :

    npx react-native init my_first_rn_app

    command to create new project in react native

After installation, the new React Native project will look like the image shown below.

After installation view of command prompt

Step 2 : - 

(a) Open android studio
(b) Open android folder of newly created project in android studio

project structure in android studio

(c) Wait till completion of Gradle build
(d) Open Image asset : - 

  • Open app folder
  • Right click on res folder
  • Click on new
  • Click on Image Asset
    image asset path in android studio

Image Asset will look like below image

image asset configuration

(e) Configure Image asset
There are multiple options to configure image asset but we are going with the default configuration.

  • Choose your icon image path and click next (After path selection, you can see your icon preview in different shapes)
  • Click finish ( It will generate a drawable folder in src. It contains xml file)
    drawable folder after image asset configuration

Step 3: -
(a) Open project in VS code (or in any editor)
(b) Open terminal
(c) Start project
Command : -

npx react-native run-android

(d) Now you can see Icon in your app

icon output

Method 2 : (Without Android Studio)

Step 1 :-

  • Choose any icon which you want to add.
    For this blog, we are choosing the icon shown in the screenshot below-
    icon, we are going to use
  • Open Below Url and Upload your Icon.
    Launcher Icon generator

    User interface of launcher icon generator
  • Download the zip folder and extract it. You can customize your icon from left toolbar.

    first icon toollbar at left
    second icon toollbar at left

Step 2 :-

  • Copy all mipmap folder from the extracted zip file
    extracted icon folder which we have to copy and paste at res folder
  • Now open scr folder of your react-native project. Follow below path

    Your_project  -> android -> app -> src -> main -> res
  • Paste the copied file in res folder
    res folder after pasting the extracted icon folder

Step 3 :-

Run your Project and you will be able to see the newly added icon on the screen.

output of second method

The aforementioned methods can be used effectively to add an icon to the app using android studio. At first we created a react-native app. We opened the android folder of our project in android studio, and finally configured the image asset for the icon where we are able to see icons in different shapes. In the final step, you may check the icon in the running app.

Creating a Custom Form in Drupal 9

Forms can be used in collecting data through any source, for example, site or application. They are based on the structure of nested arrays. Drupal 9 Form API is used to create and process forms in custom modules. They are similar to the Form APIs of Drupal 7 and Drupal 8. There are two types of forms:-

  1. Config Forms - They can be defined as administrator forms.
  2. Custom Forms - It allows us to create custom fields and methods.

\Drupal\Core\Form\FormInterface” is implemented by form classes. Form API workflow is dependent on four main methods i.e. getFormId, buildForm, validateForm, and submitForm. While requesting any form, we can define it using a nested array “$form” which is easily renderable. We can use different abstract classes to provide a base class to form. Those classes are: FormBase, ConfigFormBase, and ConfirmFormBase.

To learn how to create a custom form in Drupal 9, we would create a custom module exposing a custom form that is used as a student registration form.

Step 1: Creating a custom module in the custom folder.

Follow path “\web\modules\custom”. “student_registration” is the module name here.

Folder structure to be followed while creating a custom module in Drupal 8/9

Step 2: Creating an info.yml file followed by a .module file.

In our case, it will be “student_registration.info.yml” and “student_registration.module”.

After adding info and module file, the folder structure will look like the following snapshot:



Folder structure after adding info.yml and module file to a module in Drupal 8/9

Step 3: Creating a routing.yml file

For learning process, In this blog we would create, “student_registration.routing.yml”.

A route can be defined as a path where we return some content. A routing file contains the path by which our module can be accessed. A route path can also be called a path alias. Using the path alias defined in the routing file we can execute the callback function.

A routing file is divided into four basic parts:-

  1. {name} - It is a path parameter or element which is used as $name in the controller. Here, “student_registration.form”.
  2. {path_name} - It is an alias that is used to access the page. Here, “/student-registration”.
  3. {title} - It can be defined as the title of the page. Here, “Student Registration Form”.
  4. {module_name} - It is the name of a custom module. Here, “student_registration”.

Step 4: Creating Form folder in custom module. Follow the folder structure shown in the snapshot below.

Folder structure to be followed after creating subfolders for custom form in Drupal 8/9

Step 5: Creating Custom Form “RegistrationForm” and adding namespace along with use cases in custom form.

Folder structure to be followed after adding custom form file in Drupal 8/9

A “namespace” is used to organize form classes into virtual folders and make sure that these classes do not conflict with one another.

A “use” is used to bring the dependency of core classes to our custom class.

Step 6: Implementing getFormId() to define a unique id for the form.

Step 7: Implementing buildForm() to build and process the form using a given unique id.

Step 8: Implementing validateForm() to validate the values of the form via the controller.

Step 9: Implementing submitForm() to process the form submission, only if the form has passed all validation checks.

A complete form will look like this:

Step 10: Enabling our custom module in the Drupal 9 site.

Enabling our custom module for implementation of custom form

Step 11: Visit the path we have defined in the routing file to access our form. Here it shall be “/student-registration”.

Custom_form_displaying_student_registration_form

Fill the form and hit “Register”.

Step 12: After submitting the form we can view the result as a message.

Form submission values are displayed as a result of successful form registration

By evolving through Drupal 7, Drupal 8, and now to Drupal 9, we learned how we left some hooks [hook_menu()] behind and got a replacement in the form of controllers, routes/aliases defined in yml or yaml files. We can use Form API to build forms with extended inputs, complex forms, and so on using minimal code.



FORM ASSISTANCE – DRUPAL 9 EXPIRES SOON

 

How to setup React-native in windows using Android Studio and NodeJS

I started working on React Native recently. The very first roadblock I came across was configuring React Native on my machine. Since I had minimal working knowledge of Android studio as well as Node JS it took me a few days to figure this out. I am sharing my learning in this blog post to help you fast track your initial setup.

There are multiple ways to set up a react native environment, such as using Expo CLI or React native CLI. However, this blog gives a glimpse into setting up  React native CLI. The development operating system that we shall be using is Windows; meanwhile the Target Operating System will be Android.



For this we need a Code editor like VS code and dependencies (JDK, Node, React native command line interface and android studio).

Here’s your step-by-step guide to set up React Native in Windows using Android Studio and Node.

Step 1:

(a) Install Java JDK 15

Use the below link to download Windows x64 installer-

https://www.oracle.com/java/technologies/javase/jdk15-archive-downloads.html

Here’s a screenshot of how this may appear.

jdk installer for windows

(b) Install downloaded JDK by following instructions.

(c) Next we are going to set environmental variable. Press windows key and search “Edit environment variables,” and open it.

Edit environmental variable for your account in search bar

(d) In the User variable section, click new, as shown in the screenshot below.

user variables of your system

After clicking New, You will get screen like this-

New user variable creation form

Fill variable name as ‘JAVA_HOME’ (Without single quote).For Variable value, open your C drive -> Program files -> Java -> jdk-15.0.2  and copy that path as shown below.

Variable value : - ‘C:\Program Files\Java\jdk-15.0.2’ (Without Single quote)

Filled form for new user variable for jdk

Once you press OK, you can see your variable in the user variable section (Refer to the image shown below).

final view of jdk variable in user variable section

Step 2 : 

(a) Install NodeJs (if not already installed)

Use the link given below to download the LTS version of Node(Recommended).

https://nodejs.org/en/

Node js installer for windows

(b) Install downloaded NodeJs by following instructions.

 

Step 3:

(a) Install React Native CLI

To do so, follow the below mentioned set of instructions-

  • Open Windows Terminal
  • Run command : - node -v
  • Check whether node is installed correctly or not by running command : - node -v 



    Command to check node version

     
  • Run Command : - npm install -g react-native-cli (To install React native CLI)



    react native installation command

     
  • Close the terminal

 

Step 4:

(a) Install Android studio

Use the link given below to download Android Studio-

https://developer.android.com/studio

Android studio installer

 

(b) Install android studio by following below mentioned set of instructions:

  • Open android studio and click ‘tools’



    android studio tools

     
  • Now click on SDK Manager



    SDK manager tab in android studio

     
  • Install your required android version



    List of android versions in android studio

     
  • Again click on Tools and open AVD  Manager



    Create virtual device
  • Click on ‘Create Virtual Device’
  • Choose Device definition and click next
  • Choose system image and click next
  • Verify configuration and click finish.

Once you’re done with the installation, you will be able to see your device in Android Virtual Device Manager as shown in the image below.

List of virtual devices

In the next step,  we are going to set environmental variable. For that, press windows key and search “Edit environment variables” and open it.

environmental variable for your account in search bar

Follow the below set of instructions to continue further: In the User variable section, click new as shown in the screenshot below.

user variables of your system

After you’ve clicked  New, a screen like the image shown below appears on your screen.

New user variable creation form

  • Fill variable name as ‘ANDROID_HOME’ (Without single quote)
  • For Variable value, open your C drive -> Users -> {Your_pc_name} -> AppData -> Local -> Android -> Sdk  and copy that path.
  • Variable value shall be - ‘C:\Users\HP\AppData\Local\Android\Sdk’ (Without Single quote)



    Filled form for new user variable for android
  • After you click Ok, you shall be able to see your variable in the user variable section.

    final view of android variable in user variable section

 

Step 5:

(a) Create new React Native Project

Follow the steps as mentioned below-

  • Open terminal
  • Change the directory/folder where you want to create your project.
  • Run command : npx react-native init my_first_rn_app

    Note: - my_first_rn_app is the project name. You can give any name.



    command to create new project in react native

After installation, the new React Native project will look like the image shown below.

After installation view of command prompt

The Project structure will look like below image (Open project in VS code)

React native project folder structure

 

Step 6 :

(a) Start Emulator

Following steps must be followed for this process.

  • Open Terminal at location : -

    C:\Users\HP\AppData\Local\Android\Sdk\emulator



    Path of emulators
  • Run Command :   emulator -list-avds

    It will show the list of devices (emulator)



    Command to show all available emulators

     
  • Copy emulator name.
  • Run command: emulator -avd Pixel_3a_API_29 to start Emulator

    Note : - Pixel_3a_API_29 is the emulator name



    Command to start emulator

     
  • Now our running emulator will look like the below image



    Running emulator

 

Step 7:

After we’ve followed all the aforementioned steps, we’re almost ready to run  our first app.

  • Open terminal in vs code (after opening the project in vs code)
  • Run command : npx react-native run-android



    Command to run react native app

     
  • It will start metro and emulator as well.

    Note: - Do not close opened window by run-android command

     
  • Emulator output looks like the below image



    Running app on emulator

 

And we’ve finally completed the process of React Native setup in Windows using Android studio and Node. We have successfully created an  up and running react native environment. We started with downloading jdk and setting environmental variable for it. We Installed Node js, react native CLI, android studio and android SDK; and finally set up the environmental variable for android sdk to create a fresh react native project.



 

 

Did you find our guide on "How to Set Up React Native in Windows using Android Studio and NodeJS" useful? Are you ready to develop your first React Native application? Now that you're all set up, your journey into the world of React Native has only just begun. Keep exploring, keep coding, and remember, we're here to help if you hit any roadblocks along the way. Have any questions or feedback? Let us know in the comments section below! Happy Coding!





 

Creating a custom RESTful Web Service in Drupal 9

The web is progressing and it has become quite intense for interaction between clients and websites or apps, multiple sites, databases and devices. For that the internet was demanding a new technology. One such technology which can handle this type of interaction is REST.

Before creating our own custom REST API in Drupal, we need to know what REST API actually is? It is an application programming interface (API or web API) that allows interaction with RESTful web services. Where, REST is known as REpresentational State Transfer, which was defined by Computer Scientist “Roy Fielding”.

While designing APIs, there is always a need to specify which HTTP method will be used for performing CRUD operations on data. Here, it can be made possible by using several HTTP requests like POST (Create the data), GET (Retrieve/Read the data), DELETE (Delete the data) or PATCH/PUT (Update the data). To learn how to create custom web services, we would create a custom module exposing RESTful API which can display a list of taxonomy terms from our Drupal 9 site.

Step 1: Create a custom module in the “\web\modules\custom” folder.

 

Folder structure to be followed while creating a custom module in Drupal 8/9

Step 2: Create an info.yml file as “sample_rest_resource.info.yml” along with a blank module file as "sample_rest_resource.module"

Now the folder structure will look like this:

Folder structure after adding info.yml and module file to a module in Drupal 8/9

We are now moving forward towards implementation of a rest resource using the GET method. By GET method, we need to fetch the list of taxonomy term “vb”.

Step 3: Create a folder structure in the custom module as “src\Plugin\rest\resource”.

The folder structure will look like this:

Folder_structure_after_adding_subfolder.jpg

Step 4: We will implement our resource file. For that, create a php file as “SampleGetRestResource.php” and place the file in the “resource” folder.

We’re using the “GET” method in the template, in which we define our logic in the form of code to define what output is required. As an example- we require all the existing terms title with their respective IDs for “vb (machine name of Vb Test)” taxonomy for currently logged user.

Step 5: We have created a “Vb Test” taxonomy and added two terms in that.

Taxonomy added in our site which terms we will be listing using our custom resource Taxonomy terms are added to the vocabulary

Step 6: Now let's first enable Drupal REST API which is provided by core itself.

Our module will be dependent upon the Rest and Rest UI module. The Rest UI module can be installed using this command:

“composer require 'drupal/restui:^1.20'”

After installing the RestUI module, enable both the modules and follow the snapshots attached to configure REST API.

Enable RestUI and Restful Web Service module for implementing our custom rest resource

Step 7: Let’s enable our custom module now.

Enabling our custom module for implementation of custom rest resource

Step 8: After enabling the custom module, enable custom rest resource.

For enabling custom rest resource, follow these steps:-



1. Go to “/admin/config/services/rest”.

2. Search for our custom rest resource using the id that we have created in the resource file. Here it is “Custom Get Rest Resource

Enable our custom rest resource in configuration

3. Enable the custom rest resource and do the following configuration. Hit “Save Configuration”.

Follow these changes to get your rest resource start working

Rest Resource is enabled and now ready to fetch data

4. Now go to “/vb-rest?_format=json” and the URL will result in a Taxonomy term list containing Term ID and title.

Output of custom rest resource shows the list of taxonomy terms

So we have seen REST can be used as a type of data transfer which is built, based on the architecture of the HTTP protocols. It helps us to easily send and retrieve data between two or more different services using XML or JSON. RESTful web services are loosely coupled and are lightweight web services. These are particularly used for creating APIs for clients spread across the web.



Future-Proof with Drupal 10: Migrate Today!

 

Valuebound accelerates the growth story of three strongly funded start-ups

While the traditional sectors in India are still reeling under the effects of COVID-19 pandemic, the country is rewriting the tech start-up story. Until the end of June 2021, there were 16 unicorns with funding primarily from US-based investment firms. India is becoming the largest and fastest growing tech start-up ecosystem. As we write, there are as many as 60 unicorn start-ups (start-ups with valuation of more than $1 billion). The tech start-ups seem to be taking a center stage in the Indian unicorn ecosystem, where the growth is visible exponentially.

Valuebound takes pride in having on-board three strongly funded start-ups

Past few months have been extremely fruitful for Valuebound, as we play a significant role in the  growth story with three strongly funded start-ups in the product engineering space.

The Chief Operating Officer of Valuebound, Abhijit Upadhyay in the all-hands meeting on August 21, 2021 said, “We’re going big, and are growing at a steady pace as we re-engineer the DNA of our organization.”

Valuebound is missing no opportunity to hop onto the bandwagon of India's digital economy, which is growing strong on the foundation of digital infrastructure. Rising number of tech start-ups, super apps, affordable data costs and heavy smartphone penetration- are the reasons that are giving impetus to the country's digital consumption.

Tech start-ups growing in mobile-first India ecology

Nasscom, the apex body of the IT industry in India had earlier predicted that by the end of this year, there will be 50 unicorns in India. The country is now standing at 60+. The list is expected to grow further as the focus remains largely on digital access and internet where India zooms in on the mobile-first country model.

Prabhu Ram, the Head-Industry Intelligence Group (IIG), CMR says that this is the golden age for the internet startup ecosystem, and the IPOs have already signaled the arrival of this time.
 

Installing Drupal 8 in AWS EC2 instance with AWS RDS and EFS

High availability and scalability are the two most desired traits of modern enterprise level applications. By implementing the following architecture for running Drupal instances with AWS EFS and RDS, we will be inherently benefited by AWS highly available infrastructure and on-demand scaling of the application resources.

AWS architecture for Drupal installation

Drupal 8 is used to manage the creation and modification of digital content. It is considered as one of the world's favorite open source content management platforms. You can read about popular and well-established use cases by Drupal here - https://www.drupal.com/showcases

The recommended way to install Drupal 8 is using Composer. This blog post will guide you through the steps needed to install Drupal 8 on an AWS EC2 instance, using RDS MySQL database and EFS as the file system.

Prerequisites

  • AWS account is required for the implementation part of this blog.
  • Having basic knowledge working with AWS services would be really helpful.

What you will learn

  • How to configure AWS EC2
  • Install LAMP Stack on EC2
  • Create and Configure AWS RDS MySQL
  • Create and configure EFS
  • Install and configure Drupal 8 using the recommended installation method
  • Configuring each individual service to work together

Drupal 8 Requirements

  • MySQL 5.6.34 or higher
  • Apache 2.x
  • PHP 7.4

For more detailed requirements please visit https://www.drupal.org/docs/8/system-requirements

Let’s take a look into configuration and installation of Drupal on AWS in this step by step guide -

1. Creating The AWS RDS MySQL Database

  • Search for RDS service in amazon console search bar



    Search RDS on AWS Console

     
  • Click on “Create Database” after going to the AWS RDS service page



    Create database under AWS RDS Service page

     
  • Select the “Standard Create” option under the section “Choose a database creation method info.”
  • Pick engine option as “MySQL” & select MySQL 5.6.34 or above for DB Engine version
  • If you want to keep things less expensive, make sure to go with below mentioned options:
    • Templates  →  Free Tier
    • Storage    →   Uncheck Enable storage autoscaling



      RDS database configuration

       
    • Additional configuration   →   Uncheck Enable automated backups



      Additional configuration for RDS database

       
  • Use string “drupalvb” as instance identifier value along with the username and password.
  • Make sure to give “Public accessibility” as “Yes”. This enables our newly created EC2 instance to access the database from the same VPC or also from a different VPC.
  • Rest of the settings remain as default, and you can now finish creating the database.



    Finish creating database after filling up configuration values

2. Creation of EFS

  • Search for EFS in amazon console search bar



    Search for EFS service in AWS console

     
  • Go to EFS service and click “Create file system”



    Create file systems under Amazon Elastic File System page

     
  • After clicking on “Create file system“, a pop-up like below will appear



    Add the Name and select Zone while creating file system

     
  • Fill up the details in the fields referencing the above image; then click “Customize
  • In order to make it less expensive, we can opt for following options while customization:
    • Uncheck “Enable automatic backups” under Automatic backups
    • Set Transition into IA to “None” under Lifecycle management
    • Uncheck “Enable encryption of data at rest” under Encryption
  • Keep the rest of the settings as default and finish creating the EFS.

3. Creating the EC2 Instance

  • Search for EC2 in amazon console search bar
  • Select “Amazon Linux AMI 2” as displayed below



    Choose Amazon Machine Image (AMI)

     
  • To make it less expensive, you can opt for free tier eligible EC2 instance type t2.micro
  • Name the Security group “drupalvb-sg” as shown in the picture below



    Configure Security Group for the EC2 Instance

     
  • In configure Security Group Settings, add two rules to allow traffic over port 80 and 2049 as above. So we can access EC2 over the public internet and handle EFS.
  • Keep the rest of the settings as default and launch the instance.
  • You can create a new key pair and download the key or select an existing key.



    Create an existing key pair or create a new key pair

4. Setting up Drupal 8 in EC2

Using EC2 instance endpoint, SSH into the EC2 instance as shown in the image below -

Getting EC2 Endpoint

Once successful, it should look like below.

Message on terminal on successful SSH

4.1. Mounting the EFS on EC2 instance

  • Get the security group details of the EC2 instance which we created earlier.



    Find the security group details of EC2 Instance

     
  • Attach this EC2 Security Group to EFS under Network access as below -



    Attach EC2 Security group to EFS

     
  • Adding this EC2 security group will give us permission to mount EFS to our EC2 instance.
  • Complete the mounting operation of EFS drive with following commands - 

  • sudo mkdir -p /dev/mnt/efs
    sudo mount -t nfs4 -o nfsvers=4.1,rsize=1048576,wsize=1048576,hard,timeo=600,retrans=2,noresvport 172.31.0.8:/ /dev/mnt/efs
    

    [Replace “172.31.0.8:/” with IP address of your EFS drive]

    [“/dev/mnt/efs” Here you will be using the location wherever you want your EFS drive to be mounted]

    sudo chmod 777 -R /dev/mnt/efs/
    
  • Mounted EFS file system details can be seen with following command -

    sudo df -T 
    

    Displaying details of mounted EFS file systems using sudo df -T command

4.2. Installing required packages

  • PHP 7.4 (Recommended for Drupal 8)
  • Apache 2.4 (Required for Drupal 8)
  • MySQL (To verify DB Access)
  • Git (Required by Composer to install and update drupal project)

Use the following set of commands to install all of the above:

sudo amazon-linux-extras enable php7.4
sudo yum clean metadata
sudo yum install php
php-{pear,cgi,common,curl,mbstring,gd,mysqlnd,gettext,bcmath,json,xml,fpm,intl,zip,imap} mysql git
sudo systemctl is-enabled httpd
sudo systemctl enable httpd
sudo systemctl is-enabled httpd
sudo systemctl start httpd

After running above commands,  while accessing your server in web-browser with your EC2 Instance, public IP address will display following webpage - 

Accessing EC2 instance over browser using IP address

4.3. Installing PHP Composer

Run the following commands. For more information or help go to this link.

php -r “copy(‘https://getcomposer.org/installer', ‘composer-setup.php’);”
php composer-setup.php
php -r “unlink(‘composer-setup.php’);”
sudo mv composer.phar /usr/local/bin/composer

If everything goes as per the guide, and is successful, the command composer should show us the composer help.

Composer installation success message

4.4. Installing Drupal 8

We should install Drupal 8 inside a previously mounted EFS drive. Run below command to change into the directory

cd /dev/mnt/efs/

For installing Drupal 8 inside directory “drupalvb” under “/dev/mnt/efs” via composer run following command:

sudo /usr/local/bin/composer create-project drupal-composer/drupal-project:8.x-dev drupalvb --no-interaction

Installing Drupal running Composer - I

Installing Drupal running Composer - II

If the process is completed without any interruption, you will see the screen as displayed above in the images, and a new directory with the name “drupalvb” will be created as we have passed this name while using composer to install drupal 8

To provide read, write and execute permission to the downloaded “drupalvb” directory, run the following command:

sudo chmod 777 -R drupalvb

There’s a requirement for Apache “rewrite url” to be enabled for Drupal 8, and the Document Root directory also needs to be changed.

To complete this step, open “httpd.conf” file using following command and follow further instructions :

sudo nano /etc/httpd/conf/httpd.conf

Change AllowOverride “None” to AllowOverride “All ” in block “<Directory “/var/www/html”>”

Editing httpd.conf file to AllowOverride All

Change \\<Directory “var/www/html”>\\ to \\<Directory “/dev/mnt/efs/drupalvb/web”>\\

Editing httpd.conf file to change Directory

Change \\DocumentRoot “/var/www/html”\\  to \\DocumentRoot “/dev/mnt/efs/drupalvb/web”\\

Editing httpd.conf file to change Document root

5. Allow access to EC2 instance for RDS MySQL database

  • Copy the ‘Group ID’ from EC2 instance security group as displayed below 



    Copy the ‘Group ID’ from EC2 instance security group

     
  • Go to the AWS RDS MySQL Security group and add the following rule to allow “All Traffic” from EC2 security. Make sure that the ‘Group ID’ is copied, and pasted as shown in the image below. After this step, click ‘Save’.



    Editing Inbound rules to allow All Traffic from EC2 Security

     
  • To verify EC2 instances have access to the MySQL database, execute the following command in the SSH command shell.

    mysql -h  -u  -p
  • A prompt to enter the password will come up. After entering the password, you should be able to query databases as follows.

    show databases;

    Show databases in terminal

6. Launching the Drupal 8 install wizard

Now that most of the components are properly setup, we can continue to access our Drupal 8 endpoint which will automatically trigger the installation wizard.

  • Get the public IP address of your instance and open it into a browser in a new window to initiate the process further.



    Select language as 1st step of Drupal installation process

     
  • Choose language and click “Save and continue”
  • Select “Standard” from Installation profile, and click on “Save and Continue.”
  • In Database configuration select, “MySQL,MariaDB, Percona Server, or equivalent”
  • For the  reference purpose, have a look at the below image -



    Add the details of database we have created in AWS console

     
  • After filling up the required details click “Save and continue”



    Drupal 8 installation progress bar

     
  • Following the process, you should be able to see this progress bar on next step completed.



    View the Welcome to Drupal page after successful installation

     
  • Finally you have your Drupal Site up and running on AWS infrastructure with RDS and EFS.

We have completed the step by step process of installing Drupal 8 on AWS cloud.

VB360: Valuebound’s vision towards transparent performance management system

As custodian of the people function, it is crucial for Valuebound to align our people offering with the core values of the organization and the business objectives. While empathy, excellence and continuous learning will be the guiding principles in our objectives. As an organisation  propelled for exponential growth both in terms of numbers and technology footprint, it becomes crucial that our people's practices are consistent and there is a continuous feedback mechanism that aids systemic corrections in a timely fashion. VB360, our homegrown product directly impacts our employees, and can be used like any other interactive media and performance management system. VB360 is a Drupal 8 application and enables employees to remain in correspondence with one another.

While we have spent the first quarter of 2021 streamlining some key process that directly impact employees’ professional life at Valuebound like reward and recognition program, performance management and learning made rewarding, we are also focussed on creating employee centric experiences beyond work space with programs like Speed mentoring with manager, team huddles , focus group with HR. These are some initiatives that help us stay connected with our teams beyond work and help recreate the bonding of in-person interactions. Valuebound remains solidly focussed on employees’ personal-professional prepositions by bringing in that equilibrium at the workplace.

VB360 is our indigenous HRMS product. Our team stitched together the fabric of most popular HRMS modules, i.e.- Core HR, onboarding, performance management, benefits administration, workforce management, learning and development, talent management and HR analytics under one platform to make it easier and smoother for our employees to transition into the ecosystem of Valuebound.

But what stands us out from the league is employee engagement features. We bring in a range of interactive features, which makes VB360 an in-house social interaction portal. It’s like our own LinkedIn, where our employees can post photos, videos and interesting articles for social interaction. The features include ‘Kudos’ which acknowledges out-of-the-box employees. VB360 is our in-house party and work balance.

At the core of VB360 is the quarterly assessment performance management mechanism, which enables employees to set goals before they start. Additionally, it allows managers to track performance, and ensure 100% transparency and accountability. The product enables continuous feedback mechanism, which makes it possible for our employees to chart a successful career journey.

In context with this, our HR Head, Sunilee Kallianpur says, “VB360 is a goal setting idea of Valuebound’s leadership team. The product is a work-in-progress, and has allowed our firm to change the way we assess performance. It has also made the appraisal process more transparent.” Further she adds, “VB360 is more about a mindset change, than anything else. It helps our people in having clear conversations.”

VB 360 consists of Valuebound’s vision and people-centric approach. The product is a successful collaborative team effort; and yet an in-progress tool that helps our employees adapt to a new performance management system.
 

Valuebound conducts Pulse Survey to check the pulse of organization

The pulse survey was conducted in Valuebound in August 2021. Each company comes with its own values and culture, which helps in shaping the ecosystem of an organization. How does work get done, how employee interaction takes place, and how involved and inclusive do they feel in an organization- are some of the questions which sit on the foundation of organization’s habits, beliefs, system, values and vision. How does an organization ensure authentic and positive culture, nevertheless?

Proactive approach in ensuring employee inclusiveness where they feel that their voice is being heard, is an ideal state that resembles the thoughtful effort of a firm. Instead of enabling the culture of a firm to develop without guiding principles, there must be a responsibility and opportunity to inculcate a positive work environment. Valuebound’s Pulse Survey is a way for us to promote our listening strategies, and ensure higher employee engagement.

Feedback from employees for higher engagement

While employee feedback is a regular practice in most firms, Valuebound also ensures quarterly conversations by evolving our ongoing listening strategies. By seeking feedback from our employees on the pulse of our organization, drive attendant benefits to build trust between employees and the organization.

Importance of Valuebound’s Pulse Survey

Why does employees’ feedback matter to us? Here are some of the reasons-

  • Increases employee engagement
  • Helps build trust
  • Reduces negative behaviour in the organization
  • Helps us understand our strengths and weaknesses
  • Enables our employees feel included
  • Promotes healthy discussions

Trends observed with Pulse Survey August 2021

Our previous Pulse Survey was conducted in April  2021. As compared with the previous survey, here are the trends observed-

  • Organization has improved significantly in the diversity and inclusion area
  • Participants have been open to voicing their opinions on areas they would like to see improvement on.
  • Percentage of positive response to all questions asked in previous pulse has increased, especially on brand association (Employee Referral) and employee sentiment (Organization Cares).
  • Questions pertaining to organisation culture and communication of new initiatives have received high positive responses.
  • Career conversations with managers is an area of improvement.
  • Process automation, internal communication and performance evaluation mechanisms are aspects that can be improved upon.

As many as 92% of the respondents feel that Valuebound cares about its people; a sharp increase from 78% in April 2021.  Among our respondents, 89% strongly agree/ agree that they have adequate professional growth opportunities in Valuebound. Our organization has remained people-centric, and hence the policies and procedures are designed with employees in mind, to which 87% of the respondents agreed. The Pulse Survey underscored that Valuebound has a positive and engaging work culture, which 94% of the employees strongly agree/agree with.

Pulse Survey allows our leadership to get constructive feedback from employees, while also allowing us to adapt more successful behaviours and actions. Through this survey, we aim to help employees open up and voice out concerns that they might have, while also ensuring anonymity. Hence, pulse survey is our launching pad for ensuring success by discussing changes and reinforcing the positive traits.
 

A twist in web strategy: Lessons put to use by Techshala Batch 1 Interns

After completing the interview process, a few interns were selected to be a part of Techshala Batch 1 summer internship. Valuebound moves with the pace of scenario in the country, and hence a year ago we had declared to go 100% remote. Like all our employees, the interns are working remotely due to the pandemic.

As our Techshala interns are about to graduate after three months of internship, we take pride in explaining the lessons they’ve put to use in recently created digital experience for one of the clients.

Creating dynamic web experience with Angular & Drupal

Veterans web developers call it a perfect duo. When used in unison, Angular and Drupal can help in creating enriching and dynamic web experience. It’s a match that becomes one of the finest web development strategies. The cloud of digital possibilities has burst and digitalization is not an elitist concept.  Democratization of technology has enabled businesses to adapt to digitalization seamlessly.
While Drupal has already proved its prowess as one of the best CMS frameworks, Angular needs a little credit here. To explain the headless architecture that our interns built for this client, let’s see a case study.

The headless architecture: Integrating Drupal 8 with Angular 12

Drupal comes as one of the finest CMS for managing data and content. But since there has been an increase in channel numbers, front-end interactions, and API access points, there has also been a rising demand for better user experience. The older CMS structures seem insufficient to offer the ambitious digital experience that is in demand today. Headless Drupal or decoupled websites is the answer. Integration of Drupal 8 for backend and Angular 12 for frontend interactions works well in our recent case.

CASE STUDY for Nutrition Advisor Client: VB partnered with Biomarked to give impetus to their growth plans. Our hi-pot interns were given an opportunity to design and build a lifestyle app that focuses on nutrition and wellness. The client is a passionate nutritional advisor unified towards helping people recover from lifestyle disorders (Obesity, Diabetes Type 2, Fatty Liver, Thyroid).

Our interns worked on a recent project for one of the clients, a family of passionate nutritional advisors unified towards helping people recover from lifestyle disorders. The client needed a mobile friendly web app that offered customer management modules, POS front end, and interaction, among other functionalities.

Project: Interns integrated Drupal 8 and Angular 12 for creating an application that client needed. The interns implemented Angular 12 for API-based communication, developed over Drupal 8. This seemed to be the best web development strategy so as to enable clients to help with their multiple access points and channels.

Angular 12 : The Superhero of Interesting Web Development Strategy

Angular 12 is the new update from TypeScript-based web framework of Google. Our interns were proactive to pick the recently released update and use it in the latest project. Among a range of enhancements, this TypeScript-based open-source web application framework offered following benefits in developing client’s site-

Great Tooling- Angular 12 offers declarative templates which are simple to use. Our interns used template language with their own components, among the existing ones to create a great demo for the client.

High Speed and control over scalability- Using Angular 12 gives a higher control over scalability. It offers maximum speed on web platforms, which can be taken ahead with server-side rendering and web workers. Since the client has huge data requirements, Angular 12 is the right answer. The interns built data models on RxJS libraries.

Cross-platform use- The basic requirement of our client was development of a site that could be accessed across different platforms. Angular 12 enabled our interns to reuse code and abilities for creating apps for deployment targets. This app is usable across mobile web, native desktop, native mobile, and for web.

Decoupled Drupal: Headless Drupal for faster and richer UX

Drupal websites are excellent for multi-tasking functionalities. Drupal can ideally manage full-stack, i.e., front end content rendering, and back end content management. It can deliver seamless content in diverse interfaces.

Decoupled Drupal architecture for the client site allows for speed improvement since user requests need not be processed from server all the time. Technically, decoupled Drupal websites can present data in HTTP/JSON formats. Powerful frontend framework renders the data, which helps in delivering web pages faster.

Drupal-Angular Merger for a power packed performance

A basic Drupal website doesn’t need a lot of development or coding function, and Angular can help in creating rich interactive websites without complex coding. Since Angular uses HTML for user interface definitions, and directives, which helps in writing lesser codes. Angular 12 when merged with Drupal 8 created a highly interactive client site.

Taking pride in Techshala Interns

Valuebound takes pride in its future-ready interns who aren’t just college pass-outs, but professionals who can compete in the real world. Bracing their skills and leveling up with Valuebound culture, our interns at Techshala (the Valuebound University), are geared up for new competency areas. Successful web application development of the client is an impressive representation of their skills and meticulous art.

Mark your calendar, book the screen for DrupalCon Europe 2021

Bringing the Drupal community to a common podium once again is the annual conference called DrupalCon 2021 which is set to take place in Europe. The 4-day event will take place virtually from 4-7 October. DrupalCon Europe 2021 is presented by The Kuoni Congress team, DrupalCon Europe Advisory Committee, local Drupal camps and volunteers to present the event.

DrupalCon Europe 2021 is expected to be the most comprehensive event with a diverse audience, creating an impressionable impact over entrepreneurs, developers, website owners, content strategists, and digital marketers.

Comprehensive Drupal Event for European community and beyond

DrupalCon is one event that elates the Drupal community. After all, this is a fully dedicated event for the Drupallites! The community has accomplished some of the most amazing things with Drupal 9 release. It’s obvious why there’s so much of hoopla around it. This is the easiest major version upgrade and comes with dramatically easier tools meant for end-users.

So much of it is happening. Aren’t you excited about the DrupalCon Europe 2021? If you’re curious and excited about Drupal 9, and want to learn more, register for the event and be a part of the grand Drupal community.

Come on fellas! Make some noise. It’s a week more.

DrupalCon Europe

Register today and enjoy all the frolic with your fellow Drupallites!

DrupalCon Europe 2021 is set to bring together communities from all across the globe to be a part of DrupalCamps through a single DrupalCon ticket.

Camp Experiences are customized where each one will create a different aura by crafting their own content, hosting sessions and conducting interviews and case studies.

The event is aimed at-

  • Agency & Business
  • Clients & Industries
  • Makers & Builders
  • Open Web Community
  • Users & Editors

DrupalCon Europe 2021 Virtual Event brings in numerous benefits

  • Experience local European events and DrupalCon
  • Multiple experiences on 1 ticket
  • Networking with different communities in camps
  • Lesser screen time through a single event, different format and shorter days

The event will discuss about (but is not limited to) -

How Drupal fits all shapes, sizes and industries
The perfect Drupal recipe
Best practices, tools, features and future of creating web applications with Drupal
Using Drupal to reach digital goals of an organization

Important dates to mark on calendar

Call for papers close on June 28, 2021
Speakers notified on July 27, 2021
Draft Program published on August 6, 2021
Full Schedule posted on August 31, 2021

Drupal is an open source content management system which is written in PHP and was established in 2001 by Dries Buytaert. The CMS is known across the globe for its enterprise-level security features, advanced hosting solutions and interesting features which make it apt even for the government bodies to host their web applications on Drupal. Drupal 9 is expected to make it in November 2021.

Based on your persona, you can choose to attend the conference that suits you the best. The last call for papers is on June 28, 2021. Interested attendees must register for enjoying the opportunities where Drupal community meets and learns. 

Download the Drupal Guide
Enter your email address to receive the guide.
get in touch