Our 2022 Recap: What a year for Nuvolar!

As yet another year draws to a close, we’d like to take a moment to look back at this incredible year together.

Full of achievements, milestones and celebrations, Nuvolar really couldn’t be more proud and grateful for everything that we’ve accomplished and of the amazing team that helped make it possible.

To have a glimpse at all the special moments that made 2022 such a remarkable year, above is a short company year recap video!

Company Year Recap: Our milestones in 2022

What a year! 2022 was full of milestones for Nuvolar.

Here are a few examples of our special achievements throughout the year:

  1. We got certified! 🚀
    95% of us agreed that Nuvolar is an Excellent place to work, which led us to obtain the official GreatPlacetoWork certification.
  2. Nuvolar expanded with new offices in Mexico! 🇲🇽
    We opened new offices in the thriving metropolis of Mexico City.
  3. Our team grew by 70% in the last three years! 🙌
    We’re now a dedicated team of 80+ technology experts from all over the world.
  4. We launched 2 new company websites! 💻
    We launched a cool new version of this www.nuvolar.eu company site and also revamped the web for our advanced software solution for business aviation operators, www.nuvolops.com
  5. We attended Dreamforce’22! ☁️
    Our Salesforce Consulting team had such an amazing experience in San Francisco.
  6. And also DreamOlé’22! ☁️ 💃
    2 of our Salesforce team members took the stage to share one of our projects.
  7. We hosted the Open Coding Night event 👩‍💻 👩🏻‍💻 👩🏼‍💻 👩🏿‍💻
    Our senior ladies volunteered to help migrant women succeed in the world of tech!

    And the Nuvofamily got together! We all experienced amazing moments during our social activities…

    • Forest Clean-up to create positive impact 🌳
    • Rooftop Afterwork party 🎊
    • We went Paddle Surfing!  🏄‍♂️ 
    • Online Carnival Contest 🎭 
    • Nuvolar’s Summer Pic competition! 📸
    • And our amazing Team Event: The best F A M I L Y   R E U N I O N, ever! 🌟 🌟

    Proud and excited for everything that is yet to come, at Nuvolar we are convinced that 2023 will be an amazing year, loaded with many new milestones for our entire team, making us better professionals and better people!

    Team Event: Our very special “Weekend Out”! 🌟

    Celebrating our milestones together, as a family, is something we love to do at Nuvolar! As a remote and global team that is constantly growing, we’re always  taking steps to foster connections among our team members. One of these actions is our annual team meeting: Every year, we get together in the unique natural surroundings of the “Costa Brava” to stay connected, boost our team spirit and have plenty of fun!


    This year, our annual team event was particularly special…

    With members coming from different cities and countries, the Nuvofamily could finally gather together for 2 amazing days, with many of us meeting in person for the first time!

    We got together. We connected. We collaborated. And of course, we had a lot of fun! That’s exactly what Nuvolar’s internal meetings are all about.

     

    Amazing sport-games to build confidence & team spirit

    The Nuvofamily also hit the beach to take part in exciting team building activities! 

    Through various wacky, fun activities and games we bonded as a team, improving certain skills to help work better together all whilst having fun!

    Here’s some of the activities we took part in:

    • 🏹 Egg throwing competition – The name says it all!
    • 👹 Haka dance – A Māori bold dance to feel strong as a team!
    • 💪Tug’o’war – Who could pull the rope the hardest!

    The whole session was conducted by an incredible team of professionals:

    Thanks to Oh-Fit Barcelona, true magicians at organizing amazing team-building activities, this event became even more special.

    It’s exercises like these that help us become even better at what we do! At Nuvolar, we really believe in our people and in building a strong team ready to take on any challenge thrown our way. 

    After spending a great weekend together, it was super enriching to see the great experience that everyone had with such positive comments on Slack:

     

    It was a really really nice experience (day and night), looking forward to the next one!

    – Gerard, Software Engineer –

     

    It was great! Thanks for letting newbies like me to join this too, It was super cool!

    – Natalia, FE Developer Intern –

     

    Truly a great weekend! It was nice to meet everyone in person and I believe we all had so much fun! Thanks to all the organisers and the people who made the effort to come!

    – Andrea, Salesforce Consulting Manager –

     

    Definitely, an amazing weekend out and amazing organization!

    – Oriol, Engineering Manager –

     

     

    Fostering connections: part of our culture at Nuvolar

    We strongly believe that encouraging connections, bonding between our people and organising all kinds of events for us to spend some time together is the best way to create a united and productive team.

    And when working remotely, fostering connections between all team members becomes even more crucial.

     

    The socialising part is very important for us. The Nuvolar team has been growing so much the past years and we find it crucial to maintain this bonding within the different team members.

    – Marc Vivas, Nuvolar CEO –

     

    Seeing people face to face, getting together, working on team building activities and having fun together, is essentially all it is! These kind of events help us to build team spirit and reinforce our amazing culture and our company values, and that is priceless!

    – Marc-Anthony Padula, Nuvolar Consulting CEO –

     

    In short, a big thank you to all the members of this great team for making this event so special… 💫

    Looking forward to spending more time together!

     

    Installing a NGINX proxy: Quick guide to get it running on a EC2 machine + SSL Certificate

    A reverse proxy is an application that sits in front of back-end applications and forwards client (e.g. browser) requests to those applications. Reverse proxies help increase scalability, performance, resilience, and security. On the other hand, an SSL certificate displays important information for verifying the owner of a website and encrypting web traffic with SSL/TLS, including the public key, the issuer of the certificate, and the associated subdomains. In this article we will explain how to install an NGINX proxy on a Ubuntu Machine (an EC2 AWS in this case) and how to create an SSL certificate with auto-renewal.

    Written by: 

    Àlex López,
    DevOps Engineer at Nuvolar

     

    Here are all the steps you need to follow to successfully install a NGINX reverse proxy server and get it running on a EC2 machine with its correspondent SSL Certificate:

    1. Create the EC2 Instance:

    For this example, an EC2 machine from AWS with an Ubuntu image will be used. The rest of the steps are valid for any other Ubuntu machine.
    How to create the machine:

    • Log in to your AWS Console, in a region of your selection
    • Use the Launch instance wizard to create an instance with these values
      • Ubuntu Server 22.04 LTS (HVM), SSD Volume Type AMI
      • t2.micro instance type
      • Select an existing key pair or create a new one. We will need to SSH to the machine later!
      • Create a new security group allowing HTTPS from anywhere and HTTP and SSH traffic only from your IP
      • Add 8GiB in a gp2 volume
    • Launch the instance and check you can SSH to it using your key from your local terminal. It will be something like:

    If you get a ‘Permissions are too open’ error while connecting to the machine you will need to change the permissions of your key pair using:

     

    2. DNS configuration:

    Once your EC2 instance is created or you have your Ubuntu machine accessible from the internet, you need to create an A record in the DNS registry of your domain registrar. Some common domain registrars are GoDaddy, AWS, Bluehost, or Hostinger.

    In this example, we will use the https://foo.example.com domain name and we will map it to the Public IP given by the EC2 console.

     

    3. Ask for an SSL Certificate with certbot:

    An SSL certificate is a bit of code on your web server that provides security for online communications. When a web browser contacts your secured website, the SSL certificate enables an encrypted connection. It’s kind of like sealing a letter in an envelope before sending it through the mail.

    To be able to add an SSL certificate to our webserver, we will need to request one from a certificate authority, in this case, Let’s Encrypt. Let’s Encrypt is a free, automated, and open certificate authority (CA), run for the public’s benefit. It is a service provided by the Internet Security Research Group (ISRG).

    We will use certbot to manage the SSL certificates communicating with Let’s Encrypt.

    a. Install certbot:

    Certbot is a free, open-source software tool for automatically using Let’s Encrypt certificates on manually-administrated websites to enable HTTPS. Install it using:

     

    b. Install Acme-dns-certbot-joohoi script:

    Download the acme-dns-certbot-joohoi python script which allows using DNS Challenge instead of HTTP one. This way, we don’t need to open port 80 to the world.

    Modify the interpreter path in the shebang in the script to your python3 path. Check the path with:

    Ask for a certificate:

    You will be prompted to add a CNAME in your DNS domain registrar. The prompt will be similar to the example below. Go ahead with the wizard:

     

    Once the CNAME has been added, you have to wait for it to be propagated. You can check it with a simple ‘dig’ command. Once propagated press Enter.

     

    Once done, you will have the path of your certificate and your key. Take note of these paths, we will need them later to be added to the server blocks in the NGINX configuration.

     

    4. How to install a NGINX proxy and create a Server Block:

    To be able to add HTTPS with an SSL certificate, we need to use a reverse proxy, we will use NGINX.

    a. Install NGINX:

    NGINX is a web server that can also be used as a reverse proxy, load balancer, mail proxy, and HTTP cache. This command will install NGINX and enable it as a service in the system.

    b. Create a Hello world HTML file:

    To test our environment we will add a Hello world HTML file which will say Hello if all is working:

    Edit the file /var/www/foo.exmaple.com/html/index.html and add the following content:

    c. Create a server block

    Create a Server Block, aka Virtual Host, in NGINX. “VirtualHost” is an Apache term. NGINX does not have Virtual hosts, it has “Server Blocks” that use the server_name and listen to directives to bind to TCP sockets.

    Create a Server Block in /etc/nginx/sites-available/sonar.nuvolar.eu with this data. Check the comments in the code to understand how it works.

    d. Enable the Server Block in NGINX

    To have it all working, we need to activate the server blocks. This is done by adding a Symlink in the /etc/nginx/sites-enabled folder to the sites-available folder where we defined the server blocks. Then reload the NGINX configuration.

    Now you will be able to access via HTTPS and HTTP your Hello World page at https://foo.example.com. Please note that you will be redirected to the HTTPS version of the page.

    5. Auto Renew SSL certificates with certbot

    The SSL certificates expire every 3 months and they must be renewed. It is very simple, you can do that with:

    But we don’t want to access the machine every 3 months to do that, so we can schedule a cron task to do it for us:

    Add this line to the file prompted:

    This will trigger the renewal process on day 1 of every month, if the certificate is near its renewal date, it will be renewed and it will be ignored otherwise.

    If you want to check, just in case, the renewal log is in /var/log/letsencrypt/letsencrypt.log . Enter day 1 of the month and see the result. You can also check the expiration date of a certificate with this command:

     

     

    6. Additional Resources

    The Brand Book: Everything you need to kick off your brand identity

    Nowadays, building a differentiated brand identity is an increasingly complex process. In a world saturated with hundreds of messages from brands and social media channels, it’s a continuous and constant communication process. The good news is that, as in any process, there is a starting point. This process begins with the brand book: a space where you should include all the guidelines aimed at building this identity. Here is everything you need to know to start creating a great brand book!

    Written by: 

    Andrea Castellvi,

    UX/UI Designer at Nuvolar


     

    Branding & Brand Book: What’s the difference?

    Branding, also known as brand management, is the discipline that encompasses a set of actions related to the positioning, purpose and values ​​of a brand.

    The goal here is to create connections -conscious and unconscious- with the target group to influence their purchasing decisions.

    Therefore, Branding is a constant process that seeks to build that brand identity. It all starts by defining the guidelines to follow during this process and the objectives to achieve.

    These guidelines should be included in the brand book, a reference document every designer, product owner, marketer or external company must refer to when creating or communicating the brand. Therefore nowadays, having a brand book is essential to any brand that intends to survive and grow in the market.

    Because think about it: Your brand is, and will be, the most important investment in your business!

    Branding means connecting a good strategy with great creativity. Your brand is, and will be, the most important investment in your business!

     

    The Brand Book & the concept of Consistency

    Long-term benefits are guaranteed for any business when deciding to create a brand book.

    This can be a document, a site or a digital space, that will help the whole organization stand out because of the brand identity development.

    Customers always look for consistency, so it’s important to understand that the brand book will help the business to remain consistent and it will strengthen the company’s values and personality, promoting trust among the audience.

     

    Which sections & contents should a Brand Book include?

    Essentially, a brand book is a set of guidelines that explain how your brand works.

    It considers information such as:

    • Company Mission & Vision
    • Company Values
    • Logo
    • Fonts
    • Colors
    • Design adaptations
    • Document Templates
    • Illustrations
    • Icons
    • Video
    • Photography
    • Social Media
    • Email
    • Merchandising
    • Presentation guidelines

    Remember to take into account the fact that all these guidelines should be flexible enough to allow designers to get creative, but strong enough to keep the consistency of the whole.

    The guidelines included in the brand book must be flexible to allow creativity and strong enough to provide consistency

     

    Why every company needs a Brand Book?

    As previously mentioned, consistency is crucial for users to engage and connect with your brand.

    There is no relevance to the context, the format, or the channel from which users receive information about your brand. Whether it’s a building façade, a web page, or a phone conversation with your Customer Service department, every one of these experiences and touchpoints that the user is interacting with should be consistent, having the same Look&Feel, a unified tone, conveying the same values, etc.

    Therefore, creating a strong brand identity will help your business maintain a coherent image. Clarifying what the brand stands for will allow the business to communicate its purpose and its personality, keeping the same message and therefore helping maintain a professional image.

    Following guidelines consistently will make the business recognizable to customers, so the more consistent and robust the brand identity is, the more likely the audience will identify it among the competitors.

    A brand book is like the soul of the company, it’s the reason why it exists.

     

    It’s important to make sure to include both technical and communicational components and to keep all these consistent so it’ll make projects successful.

     

    Who should use the Brand Book?

    The users of your brand book are basically your stakeholders (employees, investors, suppliers, distributors, partners, external agencies, etc.).

    When it comes to employees, it’s crucial that every single person in the company has access to your brand book so they can apply the correct branding -using the right colors, the right font, the right logo size, and so on. Especially when it comes to the Design, Marketing and Communication teams who will be direct users of these guidelines.

    In short, if everyone is aware of the values ​​that your brand represents, each of your stakeholders will transmit, through their actions, the identity that we seek to relay that was initially established in the brand book.

     

    The role of Brand Books in Software Development

    At Nuvolar, we are experts in high-tech cloud software​​. Our software design and development experts can bring any project or idea you may have to life.

    When creating any software solution, as UX/UI designers, we must conceive an interface that contains a look and feel that’s consistent with the identity of the brand. That is why it is so important to have a brand book when designing a software solution for our clients.

    Interested in any kind of UX/UI Design service for your brand? Contact our team today! We’d love to hear from you!

     

    WhatsApp & Salesforce: Types of Integration and best Apps out there

    “Just send me a WhatsApp”… That’s probably one of the most common answers you’re getting lately from your customers when they need to receive quotes, invoices, or information about your services. Integrating and automating all these communication processes with your customers and managing leads has never been easier thanks to WhatsApp integration with Salesforce. Here is some useful information on the most common types of integrations and the best apps to carry them out.

    Written by: 

    Andrea Onhaus,
    Salesforce Consulting Manager at Nuvolar

     

    WhatsApp integration with Salesforce: Use Cases

    2 million users every month and 100 million messages sent every day. These are the colossal figures of WhatsApp, and it would be crazy if we could not integrate this app with Salesforce, right?

    So how about another question for you: Why should I do the integration? What are the Use Cases?

    To start with, let me give you a list of the concrete benefits and use cases of this integration:

    • Lead nurturing: Your sales reps can send images, videos, brochures, and documents to your potential customers.
    • Order tracking: You can send automated messages to the clients with details about their order or/and any updates on their delivery
    • Customer support: Your support team can solve any issues in real-time via the integration, cases can be opened from the WhatsApp messages, follow-up can be done for a better customer experience
    • Customer feedback: Your customers can give immediate feedback on the company’s products, services or delivery. This can be really helpful for future improvements of the process.

    So in nutshell: WhatsApp Business makes interacting with customers easy by providing tools to automate, sort and quickly respond to messages.

    Whatsapp integration with Salesforce provides you with great Automation tools to improve your Customer Service.

     

    To get to the point of this article I will be introducing the 3 most common ways for this integration:

    • Salesforce’s own products (Digital Engagement)
    • AppExchange apps
    • WhatsApp API integration

    My, my. my! so many options. Let me narrow it down for you so you can make a better choice when selecting the best tool for your company.

    I know, too many options! Let’s narrow it down for you so you can make a better decision!

     

    1. Salesforce’s own products

    1.1) Salesforce Digital Engagement:

    The one I have worked with so here I can give some personal input as well. I have recently completed the set-up of WhatsApp via Digital Engagement. I can tell you… it was so much fun…and wow what a powerful integration.

    Learn more about digital engagement and how to set up messaging channels for WhatsApp at Salesforce’s Help site.

    1.2) Marketing Cloud:

    WhatsApp messages that can be sent from Marketing Cloud allow you to send two types of messages:

    a. Transactional template messages such as shipping notifications or reminders of unexecuted purchases.

    b. Session messages (eg.: user-initiated conversations).

     

    2. AppExchange Apps: let me introduce you to some of the most used Apps

    2.1) Avochato:

    WhatsApp & Salesforce integration: Avoc

    Thanks to this SMS Text Message App for Sales & Support features, organizations can manage all kinds of WhatsApp conversations:

    • One-to-one messaging.
    • One-to-many messaging.
    • SMS, live chat, WhatsApp and phone conversations managed from one place.
    • Skill routing.
    • Real time analytics.
    • Keyword triggered auto-responses.
    • Surveys.
    • Slack integration.
    • Embeddable live chat widget for websites.
    • Native mobile apps.
    • Programmable API and Message templates.

    2.2) Tuvis (formerly Whatslly):

    This comprehensive platform leverages AI-based routing technology to enable very interesting features:

    • Click to send WhatsApp message from Salesforce.
    • Create new leads/contacts in SF.
    • Dynamic Message Templates.
    • Copy chats into SF as activities, tasks or cases.
    • Auto Chat Syncing.
    • Upload files as attachments.
    • View open/closed opportunities.

    2.3) Mogli SMS:

    Mogli is a robust and very easy-to-use native Salesforce application for WhatsApp & SMS which allows:

    • Real-time 1-to-1 SMS & WhatsApp conversations.
    • Bulk SMS with campaigns, list views, and reports.
    • Immediate SMS notifications of incoming messages.
    • Auto-create Contacts/Leads, Cases, Opportunities and event registrations.
    • Voice features for auto-calling and text to speech.
    • Use Workflow, Process Builder, Flow and Triggers to Automate text messages.
    • Text to donate and pay.
    • Dashboard responses with the magic of Salesforce and get a 360-degree view of your clients.
    • Works with Twilio, Nexmo, MessageBird, Plivo, Telnyx.

    2.4) 360 SMS:

    Natively built on the Salesforce platform, this powerful App empowers the user to communicate effectively with Customers, Prospects and Business Partners across the globe through Single/ Bulk SMS/ MMS. These are some of its features:

    • Conversational 1-on-1 Texting.
    • Threaded text messages on any object; Link Tracking.
    • Drip Campaigns; Scheduled SMS & Event Reminders.
    • Bulk SMS/MMS, even from Reports.
    • Automated/Triggered SMS/WhatsApp through Process Builder.
    • Chatbot
    • Intelligent Text
    • Keyword-SMS based Responses.
    • SMS & Email Alerts.
    • WhatsApp:2-way global messaging & WhatsApp Live Chat from website.
    • Omnichannel SMS Routing.
    • Available for Sales, Service & Community Cloud: Marketing Cloud/Pardot/Marketo.

    3. WhatsApp API integration:

    Last but not least, there is the option of using WhatsApp Business providers, so you can directly integrate with SOAP or REST APIs.

    This way all the transactions happen through API calls between WhatsApp and Salesforce.

     

    Salesforce Consulting at Nuvolar

    As explained above, there is a wide variety of options to carry out this WhatsApp integration with Salesforce, some with characteristics that are difficult to differentiate. However, it is still essential to identify the needs and goals of each business before choosing how to approach integration between these tools.

    At Nuvolar we can help you with that. We have extensive experience developing projects of this type in different industries.

    Contact us, we’d love to hear from you!

     

    Connecting functional components to Redux Store with useSelector Hook & React.memo

    Here we’ll show you an intricate guide on how to correctly apply useSelector to efficiently render components, how to set up the custom compare function to avoid rendering and how to memoize components, helping performance by reducing the number of times the logic inside the selector is triggered

    Written by: 

    Albert Vinyals,
    iOS Developer at Nuvolar

     

    This article aims to describe the best options the Mobile team at Nuvolar considers when using functional components that connect to the Redux Store thanks to the useSelector hook.

    After previous discussions, the team decided to set a goal: to write this “Best Practices” article to make sure that, from now on, we all use the same, correct and consistent, approach, which we are explaining in detail here.

    1. useSelector: The hook which allows you to extract data from the Redux Store.

    The selector is approximately equivalent to mapStateToProps and will be called when  the store state changes. 

    Please note that useSelector will do a reference comparison (===) of the previous selector result.

    If the result is different the component will be re-rendered. For primitive values, this will have no major impact but please take this into consideration when working with objects (including  arrays).

    useSelector is called every time an action is dispatched to the store. 

    1a. Destructuring: Best way to avoid unnecessary rendering

    As mentioned previously, the useSelector will use strict reference equality to decide whether a render has to be triggered or not. Imagine the following scenario:

    If the user’s state object reference changes (even maintaining the values for name and photo keys) the component will re-render (it is comparing 2 different objects references).

    In order to avoid this unnecessary render please consider the following approach:

    This will only render if the values for the keys name and photo change. useSelector will be comparing primitives in this case, so only if the string value is different the render will be triggered.

    There is no inconvenience in creating a new useSelector for each value. This is what the documentation states:

    You may call useSelector() multiple times within a single function component. Each call to useSelector() creates an individual subscription to the Redux Store. Because of the React update batching behavior used in React Redux v7, a dispatched action that causes multiple useSelector()s in the same component to return new values should only result in a single re-render.

     

    1b. Comparing objects

    In case you have the need to compare objects and you can not use values instead, there are still 2 options one can use.

    Remember, the main goal is to avoid re-rendering when it is not strictly necessary (because a value used for rendering purposes changed).

    • Custom compare function:

    You can specify a function that will be used to compare the result of the selector. Feel free to implement your own or to use the already existing shallowEqual.

    Please bear in mind that this may hit the performance since shallowEqual may be heavy in terms of processing (depending on the object shape).

    • Memoizing: 

    Use reselect or a similar library that returns multiple values in one object, but only returns a new object when one of the values has changed. On top of that, this approach helps performance by reducing the number of times the logic inside the selector is triggered.

    2. React.memo: helping memoize with parent components

    Even when you are properly preventing your component to re-render based on the proper usage of useSelector there are still situations in which it can get rendered unnecessarily.

    This may happen when the parent component re-renders (parent state changes). 

    In order to fix this issue React.memo helps memoize the component and return the cached version if the props have not changed.

    Imagine the following scenario:

    When “increment()” is triggered, the state changes and this will re-render the component and all its children, UserComponent included.

    There is no need for this since the component will be re-rendered with the exact same layout and content.

    Avoid this by using the React.memo hoc.

    Afterwards the component returned, when the parent is re-rendered, will be the memoised version. 

    3. Additional Resources