DEV Community: Nissrine Canina

Dynamics 365 Plug-in Step-by-Step

Nissrine Canina — Thu, 13 Jul 2023 16:18:53 +0000

Microsoft Dynamics 365 is a business agnostic product that provides a flexible and customizable platform for organizations across various industries. Plugins further enhance this agnostic nature by allowing businesses to tailor the platform to their specific requirements and extend its functionality beyond the out-of-the-box features.
Plugins are server-side custom components that interact with the platform's services and data. Plugins run within the Dynamics 365 server environment and can be triggered by events (also called messages) that occur within the platform. When a plugin is executed, it can utilize the Dynamics 365 platform's services, such as the Organization Service, to perform various operations, including but not limited to basic CRUD actions: retrieving, creating, updating, and deleting records.

To develop a plugin for Microsoft Dynamics 365, you can follow these steps:

1. Set up your development environment:
Install Visual Studio Community Edition for Dynamics 365 development.

Under Workloads select .NET desktop development:

Go to Individual Components tab, under development activities, select: Window Workflow Foundation

Then, click install and select C# environment.

2. Create a new plugin project:

The next step is to create a new project and select Class Library (.NET Framework) and click Next:

Configure project and solution names and click Create. The solution contains a collection of projects:

Use any meaningful name to Rename class1.cs:

3. Add references:

Go to tools -> NuGet Package Manger -> Manage NuGet Packages for Solutions. Then, browse (type Dynamics 365 in the search box), select, and install the following:
Package1: Microsoft.CrmSDK.CoreAssemblies
package2: Microsoft.CrmSDK.XrmTooling.PluginRegistrationTool

Go to Solution Explorer -> right click on References -> Add Reference -> Browse -> Go to solution name folder (ClassLibrary1 folder in this example) -> packages -> Microsoft.CrmSDK.CoreAssemblies -> lib -> net462 -> add Microsoft.Xrm.Sdk.dll -> Ok -> include using Microsoft.Xrm.Sdk.

Add System.ServiceModel from References:
Go to Solution Explorer -> right click on References -> Add Reference -> Assemblies -> Framework -> type System.ServiceModel in the search field -> select System.ServiceModel -> Ok -> include using System.ServiceModel:

4. Define the plugin class:

Create a new class that implements the IPlugin interface provided by the Dynamics 365 SDK. Then, implement the Execute method provided by IPlugin interface, which will be called when the plugin is triggered.
Go to Microsoft Documentation and copy the Execute method logic template:



public class MyPlugin : IPlugin
{
  public MyPlugin() {} // Constructor, does nothing

  public void Execute(IServiceProvider serviceProvider)
  {
    // Obtain the execution context
    IPluginExecutionContext context = (IPluginExecutionContext)
      serviceProvider.GetService(typeof(IPluginExecutionContext));

    // Obtain the Organization service reference 
    IOrganizationServiceFactory serviceFactory =
      (IOrganizationServiceFactory)serviceProvider.GetService(typeof(IOrganizationServiceFactory));
    IOrganizationService orgService = serviceFactory.CreateOrganizationService(context.UserId);

    // Obtain the Tracing service reference
    ITracingService tracingService =
      (ITracingService)serviceProvider.GetService(typeof(ITracingService));

    try
    {
      // TODO Plug-in business logic goes here. You can access data in the context,
      // and make calls to the Organization web service using the Dataverse SDK.
    }
    catch (FaultException<OrganizationServiceFault> ex)
    {
      throw new InvalidPluginExecutionException("The following error occurred in MyPlugin.", ex);
    }
    catch (Exception ex)
    {
        tracingService.Trace("MyPlugin: error: {0}", ex.ToString());
        throw;
    }
}

The execute method accepts a single IServiceProvider parameter which has a single method GetService. This method provides access to the execution context data (information about the entity and message request that caused the event and invoked the plugin). Also, GetService method provides access to Organization Web Service to perform message request to the database (i.e. read, update, create, delete).

5. Handle plugin execution:

Entity is accessible via context that has InputParameters collection which Contains an object with a Target key along with all data passed in the message request. Entity is a generic class that can represents any record (i.e. contact, account, task...). It provides a collection of the corresponding attributes of a given record on which the plugin is registered. These attributes are accessible using the logical names, not the display names.



try
       {
         // Plug-in business logic goes here.  

 string firstName = entity.Attributes["firstname"].ToString();
                    }
 string lastName = entity.Attributes["lastname"].ToString();
         // Assign data to attributes

 entity.Attributes.Add("description", "Greetings! " +  firstName + " " + lastName);
                }

The next step is to Sign the assembly with an encrypted algorithm because only signed assemblies are allowed by the cloud platform:
Right click on project -> properties -> signing -> check sign the assembly -> select New -> add key file name -> choose whether to add a password or not -> keep default or change algorithm -> Ok -> save -> build solution.
After this step, the code is compiled and an assembly should be created in a form of dll file.

6. Register and deploy the plugin:

Use the plugin registration tool downloaded in step 3 to upload the dll to the cloud file:
Right click on project name -> open folder in explorer -> Go one step up in folder directory -> packages -> Microsoft.CrmSdk.XrmTooling.PluginRegistrationTool -> tools -> open PluginRegistration -> create new connection -> login using Dynamics 365 credentials, select Office 365, and region -> login:

Go to Register -> Register new assembly -> browse to project -> bin -> debug -> select filename.dll -> open -> select the assembly in step 2 -> keep default setting in steps 3 & 4 -> register -> Ok.

The plugin is now uploaded to the list of assemblies. Next, we should configure when the plugin should be executed:
Select plugin and right click -> click register new step:

Message: Create -> Primary Entity: contact -> Event Pipeline Stage of Execution: PreOperation -> Register new step.

Image by Paresh Sharma https://www.tech-quantum.com/d365-understanding-plug-in-pipeline/

The plugin will update the attribute collection of primary entity contactwhich is being passed to the main event. When the user creates an account (first name and last name), the data goes through the pipeline to the Pre-Operation stage and in the serviceProvider which will provides the contextual data. From that context, we can extract entity information. In this case, the entity represents contact form.

7. Test the plugin:

Create a new contact in the Sales Hub:

Go to details and check Personal Notes:

Throughout this blog, we discussed the step-by-step process of developing a plugin, including setting up the development environment, defining the plugin logic, registering, deploying and testing the plugin.

References:
https://learn.microsoft.com/en-us/power-apps/developer/data-platform/plug-ins

Why Software Engineering?

Nissrine Canina — Tue, 13 Dec 2022 03:02:39 +0000

Software Engineering is a very rich field that satisfies a wide spectrum of skills. It can look different from one industry to another and even within the same field. This variety offers endless opportunities to learn and grow progressively. There are many reasons that make this career choice attractive other than the typical financial stability that makes this field stands out and attract fresh graduates as well as career switchers. Here are just a few reasons why:

The continuous learning aspect

Software engineers are in a constant learning mode because this field is in constant renovation. This condition may not suit everyone but if you don't thrive in routine and dead-end jobs, programming is the way to go. Continuous learning makes the day interesting and exciting, especially with the little achievements that make you thirsty for more.

Problem-solving skills

Software developers must think logically and solve problems ranging from quick fixes to more complex tasks. Additionally, finding optimum solutions via task analysis and making decisions about each step of the way.

Team collaboration

It is not uncommon to assume that programmers work alone but being a team player is a crucial skill to collaborate with other developers. Everyone learns at different paces; therefore, every developer brings value to the team.

Access to learning resources

There are many educational pathways to pursue a career in software development ranging from a traditional Computer Science Degree to online programs(free and paid). Technology is changing and there will be always new resources available.

Flexibility

Another advantage of being a software engineer is that you can work remotely depending on the job requirements. Some positions even require traveling for conferences and networking.

The software development field is definitely an exciting field of study that is worth exploring.

Building a Many-to-Many Association in Rails-React App

Nissrine Canina — Sat, 10 Dec 2022 18:39:14 +0000

One of my capstone project's features was categorizing posts by topics where the user is able to create topics, posts, and post to different topics. Also, displaying lists of posts in each topic category. To achieve this functionality, I have used Many-to-Many relationships where the topic has-many posts and the post-has-many topics through a join table topic-posts. There are various methods available when joining tables that will allow useful functionalities. In this blog, I will walk you through how I implemented this feature step by step.

The user should be able to create a post via the form below:

Note that the topic is not a column in the post table, the topic has a separate model and linked to post via Many-to-Many association.

First, we have to create the tables in the database. We need a topics table, a posts table, and a topic-posts join table.

The Entity Relationship Diagram:

A snapshot of the schema:

Next, specify the has-many-through association:

Then, create the necessary actions on the join table controller:

Similarly, the create action on the post-model controller should look like this:

The most important step in the create action of the post is that we should create the corresponding join table before saving the post to the database.

Because of the Many-to-Many relationship, it is important to pluralize topic_ids and represent it with an empty array []. In this case, we only need the first id index as shown in the create action above.

Now, off to the front end, to see what the fetch POST body sent with the request should look like:

The Select and Option tags on the form were styled using material-tailwind/react:

Mistakes to learn from:

Using a styling library in the front end before configuring the functionality of the backend can lead to errors that are not obvious to detect. It is recommended to first use the basic select and option tags to ensure that the styling library requirements don't interfere with tag attributes. In my case, the Material-tailwind/React library documentation stated that the value attribute of the Option tag should be a string whereas we need to send it as an integer to the backend.

Here is a snapshot of the documentation of the Material-tailwind/React library:

Since the value attribute datatype was an integer, interpolating the value was the way to fulfill the styling library requirements. Additionally, we should parseInt(state value) to make sure we are sending an integer value to the backend.

Saving the post to the database without creating a corresponding join table was another mistake that I made that resulted in creating posts without being assigned to a specific topic category. Also, it is important to wrap topic_ids in a string quote due to the styling library requirements discussed above. Creating the join table will only be necessary depending on the functionality we are looking for. For instance, in this project, the user can create many topics and topics have many users. For this type of behavior, I did not need to create the join table topic-users before saving the topic to the database although the topic-users join model is needed for Many-to-Many associations. The difference here is that I want my post to be specifically assigned to a topic at the time of creation, whereas that is not the case when a user creates a topic; there was no emphasis on which user creates the topic.

Understanding Polymorphic Associations in Rails

Nissrine Canina — Sat, 01 Oct 2022 15:59:56 +0000

The Ruby on Rails documentation defines polymorphic associations (PA) as: "A slightly more advanced twist on associations is the polymorphic association. With polymorphic associations, a model can belong to more than one other model, on a single association.". As I am researching this topic to implement it in my project, I have found that understanding what problems polymorphic associations solve makes learning this new concept much simpler.

Another way to rephrase the Rails documentation definition is that PA is needed when multiple parent models use one child model. To understand how useful PA is in this case, we should investigate the issues that will arise without applying PAs. For demonstration purposes, let's create a simple Rails application with four models using conventional has_many and belongs_to associations.

Then, let's check our comments in the schema:

As we can see in the comments schema, event_id, post_id, and article_id are required even though the comment is meant to be assigned for one model at a time and not all in one instance. Let's hop on our console and see the flow of events:

Note that the comment did not save to the database because it requires the existence of the event and the article (recall the null: false property in the schema which means that all foreign keys must exist in order to create and save a comment to the database). There is a way around this issue even though it is definitely inefficient:

It is clear how we had to build new columns in our comment table for the event and article when the main purpose was to create a comment for the post only. We can see how conventional associations were not helping the DRY principle (unnecessary rows in tables with null values) in this case. We can remove the constraint null: false and add optional:true in the comment class. This will allow us to create and save a comment successfully without manually assigning the unwanted foreign keys; however, they will be still parsed as nil in the comment table.

The efficient solution for this example is PA. Let's update the migration to add PA and remove all the foreign keys for the article, event, and post models.

Then, we update all the models as shown below:

The :commentable refers to the post, event, and article models. Let's comment on a post and an event in the console and pay close attention to commentable_type and commentable_id:

Here we are creating a comment on a post using PA without wasting space in the database. We also follow the DRY principle by removing three belongs_to associations from the comments model. Also, we are able to link the behavior expected for a commentable component to any model. We are separating concerns and reusing code. Let's create another comment on an event and note the change in the commentable-type:

We can see that the comments were created without loading our tables with nil columns. The commentable_type refers to the target model that is associated with the comment. Therefore, only the target model foreign key is created.
The comments are accessible using has_many association:

It is important to know that accessing the parent model of a specific comment will require the use of .commentable method. For instance we cannot use comment.post or comment.event to access the parent model otherwise we will get a NoMethodError. Remember that we modified the belongs_to associations with as: :commentable. Where commentable refers to the parents' models. Check the console below:

Finally, we can think of PA anytime we are faced with the need to share a model property among other models. For instance, an image model can be used by other models such as products and categories. so, imageable is the way to go!

I hope this walkthrough example is helpful for anyone learning PA for the first time.

Rails Join Table - Step by Step Guide to Create a Favoriting Feature in an Ecommerce App

Nissrine Canina — Fri, 03 Jun 2022 02:20:16 +0000

In a context of a basic e-commerce app where a user can buy, list, edit, and like an item. We are going to focus on the feature where the user can view item details and click the heart icon to save the item in the favorites list. The user can view or delete items from the favorite list. In this article, I am going to walk you through the steps to set up your backend and frontend to achieve this functionality.

Step 1: Entity Relationship Diagram (ERD)

Create an ERD of three models: a user, an item, and a favorite_item where a user has many favorite_items and has many items through favorite_items. Similarly, an item has many favorites_items as well as many favorated_by (aliased users) through favorite_items. The first association (the user has many items as favorites) is what we need for the favoring feature.

Step 2: Generate Resource and Add Associations in Rails

Use the resource command generator to create the join table of favorite items. The resource will generate the model, controller, serializer, and resource routes.

 rails g resource favorite_item user:belongs_to item:belongs_to

Then, add has_many associations to both item and user models. Since the belongs_to association is already specified, it will be provided by rails in the favorite_item model. Then, add validations to assure that an item is only favored one time by the same user.

class User < ApplicationRecord
 has_many :favorite_items, dependent: :destroy
 has_many :items, through: :favorite_items
end

class Item < ApplicationRecord
  has_many :favorite_items, dependent: :destroy
  has_many :favorited_by, through: :favorite_items, source: :user
end

class FavoriteItem < ApplicationRecord
  belongs_to :user
  belongs_to :item

  validates :item_id, uniqueness: { scope: [:user_id], message: 'item is already favorited' }
end

Next, update user and favorite_item serializers.

class UserSerializer < ActiveModel::Serializer
  has_many :favorite_items
  has_many :items
end

In the favorite_item serializer, add :item_id attribute. This will identify which item is favored by the user.

class FavoriteItemSerializer < ActiveModel::Serializer
  attributes :id, :item_id
  has_one :user
  has_one :item
end

Step 3: Add Methods to Controller

Add create and destroy actions to the favorite_item controller:

class FavoriteItemsController < ApplicationController
    def create 
       favorite_item = current_user.favorite_items.create(favorite_item_params)
        if favorite_item.valid?
            render json: favorite_item.item, status: :created
        else
            render json: favorite_item.errors, status: :unprocessable_entity
        end
    end



    def destroy 
        render json: FavoriteItem.find_by(item_id: Item.find(params[:id]).id, user_id: current_user.id).destroy
    end

    private

    def favorite_item_params
        params.require(:favorite).permit(:item_id, :user_id)
    end


end

Also, make sure to specify routes in the routes.rb file as such: resources :favorite_items, only: [:create, :destroy]

Step 4: Frontend React Side - Add Favorite

The favoriting icon is showing when the user is viewing item details:

In the selected item component, add the heart icon:

<div >
 <Icon onClick={() => addFavorite(selectedItem) } 
 color="red" name="heart outline" />
</div>

The addFavorite(selectedItem) is a callback function defined at the highest level App.jsx:

const addFavorite = (item) => {
    const newFavorite = {
      favorite: {
        item_id: item.id, user_id: currentUser.id
      }
    }
    fetch("/favorite_items", { 
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(newFavorite),
    })
    .then(resp => {
      if (resp.ok) {
        return resp.json()
      } else {
        return resp.json().then(errors => Promise.reject(errors))
      }
    })
    .then((newFav) => {
      setFavorites([...favorites, newFav])
      navigate("/items")
     })
  }

When you click on the heart icon, you will be redirected back to the main list of items for sale. The favored item/s can be viewed via the favorites button in the navigation bar.

Step 5: Frontend React Side - Remove Favorite

Create the favorite items' container and reuse ItemCard component when you map through favorite items:

import React from 'react'
import ItemCard from '../components/ItemCard'
import { Container, Card } from 'semantic-ui-react'

const Favorites = ({ favorites, removeFavorite }) => {

  return (
    <Container textAlign="center">
      {favorites.length === 0 ? <h2 style={{ paddingTop: '50px' }}>You have no favorites!</h2> :
      <>
      <div>
        <h1>The items you liked!</h1>
      </div>
      <div className="ui divider">
        <Card.Group itemsPerRow={3}> 
          {favorites.map((item) => (

            <ItemCard 
             key={item.id}
             item={item}
             removeFavorite={removeFavorite}
             redHeart={true}
            />
          ))}

        </Card.Group>
      </div>
      </>
}
    </Container>
  )
}

export default Favorite

Use props to display the red heart icon in ItemCard component:

import React from 'react'
import { Card, Image, Icon } from 'semantic-ui-react'
import {useNavigate} from 'react-router-dom'
const ItemCard = ({ item, removeFavorite, redHeart }) => {

  const navigate = useNavigate()

  const handleClick = () => {
      navigate(`/items/${item.id}`)
  }

   return (
    <div className="item-card">
        <Card color='blue' >

        <div onClick={handleClick} className="image" >
          <Image src={item.image} alt={item.name} wrapped />     
         </div>

           <Card.Content>
                <Card.Header>{item.name}</Card.Header>
                <Card.Description>{item.price}</Card.Description>

            </Card.Content>
            <br />
            {redHeart ? (
              <span onClick={() => removeFavorite(item)}>
                <Icon color="red" name="heart" />
              </span>
            ) : null }
        </Card>
    </div>
  )
}

export default ItemCard

When the user clicks the red heart icon, it will run the callback function removeFavorite(item). This function is defined in the highest level component App.jsx:

const removeFavorite = (item) => {
    const foundFavorite = favorites.find((fav) => fav.id === item.id)

   return  fetch(`/favorite_items/${foundFavorite.id}`, {
      method: "DELETE"
    })
    .then(resp => resp.json())
    .then(() => {
      const filteredFavorites = favorites.filter((fav) => fav.id !== foundFavorite.id)
        setFavorites(filteredFavorites)
    })
  }

Step 6: Update Login/Authentication State

In this project, session cookies were used to log the user in. Therefore, you need to update the state when you sign up, log in, and refresh respectively:

function handleSubmit(e) {
    e.preventDefault();

    const userCreds = { ...formData }
    fetch("/signup", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(userCreds),
    })
    .then((resp) => resp.json())
    .then((user) => {
      console.log(user)
      setFormData({
        email: "",
        username: "",
        password: "",
        passwordConfirmation: ""
      })
      setCurrentUser(user)
      setAuthenticated(true)
      setFavorites(user.items)
      navigate("/items")
    })
  }

function handleSubmit(e) {
    e.preventDefault();

    const userCreds = { ...formData };

    fetch("/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(userCreds),
    })
      .then((r) => r.json())
      .then((user) => {
         setCurrentUser(user)
          setAuthenticated(true)
          setFavorites(user.items)
        setFormData({
          username: "",
          password: "",
        });
        navigate("/items")
      });
  }

useEffect(() => {
    fetch("/me", {
      credentials: "include",
    })
    .then((res) => {
      if (res.ok) {
        res.json().then((user) =>{ 
          setCurrentUser(user)
          setAuthenticated(true)
          setFavorites(user.items)
        });
      } else {
        setAuthenticated(true)
      }
    });

Conclusion

This example concludes one of the possible ways to implement favoring an object from a list and displaying a new list of favorite objects using rails join table associations.

Ruby Fundamentals, Compare and Contrast with Javascript

Nissrine Canina — Thu, 10 Feb 2022 11:51:53 +0000

Learning Ruby Coming from Javascript

Novice programmers often get intimidated by the idea of learning a new language. That is where the idea of this blog comes from. As a student in the Flatiron School, I spent my first half of the program learning Javascript and its framework React (the front-end side). When the time comes to switch gears, Ruby comes into play to code the back-end side of our programs. It was natural to compare and contrast Ruby and Javascript along the way to understand their similarities and differences. The purpose of this blog is to help anyone, new to Ruby, learn its basic concepts and fundamentals.

Introduction to Ruby

It is important to note that Ruby is primarily an Object Oriented Language (OOP) whereas Javascript is not strictly OOP; however, Javascript provides features such as classes and objects which are inspired by OOP. So, what is OOP? OOP is a type of programming based on the concept of "objects" which can contain data in the form of fields (often known as attributes or properties), and code in the form of procedures (often known as methods).OOP is about structuring code so that its functionality can be shared throughout the application program. On the other hand, Javascript is procedural programming language by nature where programs are built in sequential order and functions are called to share their behavior. Javascript can be an OOP language but it was not originally designed as an OOP language. The OOP syntactic sugar was added later on. Understanding this concept will explain the key differences between Ruby and Javascript syntax.

Language Purpose

Javascript

build client-side applications that run in the browser.
Work in the browser environment/sandbox where we can access:

Make network requests
Update the DOM
Listen for events
Debug our code in the browser's developer tools

Ruby

build server-side applications.
take advantage from our computer system:

Read and write files
Listen for network requests and send responses
Connect to a database to access and update data we can build all kinds of apps not just web apps Command line interfaces Web servers Games Web scrapers

Terminal Output Methods

One of the main differences between Javascript and Ruby is that Ruby code run from the terminal using the Ruby interpreter whereas Javascript run code in the browser.

The command ruby -v is used to check which Ruby version is used in the system.

To run Ruby application use the command ruby some_file.rb, where some_file is the name of the file where Ruby code is written.

Any code written in some_file.rb can be outputted to the terminal using Ruby's various methods for printing output: puts, print, p, and pp.

puts and print are both used to print strings to the terminal with a difference of a line break added at the end of each string when puts is used.

If we run this code:

puts "I am learning Ruby!"
puts "I am learning Ruby!"
puts "I am learning Ruby!"

We will receive this output in the terminal:

I am learning Ruby!
I am learning Ruby!
I am learning Ruby!

If we run the same code using print:

print "I am learning Ruby!"
print "I am learning Ruby!"
print "I am learning Ruby!"

We will receive an output without a line break:

I am learning Ruby!I am learning Ruby!I am learning Ruby!%

To inspect a non string data, p would be a better choice compare to puts because the latter one attempts to convert everything to a string by calling the .to_s method. On the other hand, p calls the .inspect method which will present data in a nicer format.

puts [1, 2, 3, 4]
1
2
3
4
 => nil 

#`puts` will convert `nil` to an empty string

puts [1, 2, nil, nil, nil, 6]
1
2



6
 => nil

p will return a raw version of an object (i.e including quotes and new line characters). puts will always return nil.

p "Hello World!"
"Hello World!"
 => "Hello World!" 

p "Hello World!\n"
"Hello World!\n"
 => "Hello World!\n"

p is more useful for debugging purposes whereas puts is useful for display to the user.

pp is used for printing nested and complicated arrays and hashes. pp calls the .pretty_inspect method to print the data in an organized and easy to read fashion.

[{:id=>1, :color=>"blue"},
 {:id=>2, :color=>"red"},
 {:id=>3, :color=>"yellow"}]

In Javascript, console.log would have the equivalent function to puts in Ruby.

Data Types in Ruby

Strings

Strings in Ruby can be defined with single or double quotes similarly to Javascript:

   "I am a string!"
   'I am also a string!!'

Since Ruby is an OOP language, we can call several methods on string literals (i.e. "hello"). Each string in ruby is actually an instance of the class String. Therefore, class methods are available to its instances. We can check look up these methods via "example".methods.

"hello".upcase
# => "HELLO"
"hello".capitalize
# => "Hello"
"hello".reverse
# => "olleh"

String Interpolation

String interpolation exists in both Ruby and Javascript; however, backticks have a different purpose in Ruby:

# Ruby (comment in Ruby)
name = "Joe"
puts "Hello #{name}"

// JavaScript (Comment in Javascript)
const name = "Joe";
console.log(`Hello ${dogName}`);

Numbers

There are two types of numbers in Ruby: integers as whole numbers and floats as decimal numbers. Ruby provides several methods to work on both types of numbers.

> 2.3.floor
 => 2
> 8.5.ceil
 => 9

Also, we can convert strings to numbers:

> "2.5".to_i
 => 2 
> "2".to_i
 => 2 
> "2".to_f
 => 2.0

Unlike Javascript, Ruby will not convert an integer to a float during the process of arithmetic operations unless one of the sides is a float:

> 5/4
 => 1 
> 5/4.to_f
 => 1.25 
> 5/4.0
 => 1.25

Nil

In Ruby, there is only one case of absence of value which is represented by nil. For example, puts will always return nil. On the other hand, Javascript has two different datatypes that represent the absence of a value null and undefined. The latter one is commonly seen when we create a variable and we do not assign a value to it. Ruby will not allow the creation of a variable without assigning a value to it. If we intent to create a variable and not assign it a value, we must explicitly assign nil to declare an empty value.

 puts "Return something"
 # Return something
 # => nil

 > name
 NameError (undefined local variable or method `name' for main:Object)

> name = nil
 => nil 
>

 let someValue;
console.log(someValue);
// => undefined
someValue = null;
console.log(someValue);
// => null

Booleans

Booleans have two values: true and false like in Javascript. In Ruby, however, true is an instance of TrueClass and false is an instance of FalseClass.
Additionally, only nil and false are falsy values. Everything else is truthy including 0 and empty string"". On the other hand, in Javascript, null, undefined, 0, false, "", and NaN are falsy values.

Symbols

The symbol data type (:symbol_example) exists in both Ruby and Javascript yet the use of symbols is more common in Ruby where symbols are used as keys on a hash (a hash is equivalent to an object in Javascript). While a symbol is a representation of data similar to a string, Ruby allocates the same space in memory for symbols versus a string which is allocated a different space in memory each time it is called:

 > :some_symbol.object_id
 => 2077788 
 > :some_symbol.object_id
 => 2077788 
 > "a string".object_id
 => 260 
 > "a string".object_id
 => 280 
 >

Arrays

Arrays have similar functionality in both Ruby and Javascript. They can be created using literal or class constructors:

 > [3, 6, 9]
 => [3, 6, 9] 

 > Array.new
 => []

The Ruby documentation https://www.ruby-lang.org/en/documentation/ provides a comprehensive list of methods to perform CRUD actions (create, read, update, delete) in addition to operating on arrays as well as elements within an array. Some of these methods can work for both Ruby and Javascript arrays, some methods in Javascript have equivalents methods in Ruby, and some others are exclusive to Ruby.
Similarly to Javascript, we can check elements in an array by index in Ruby:

 #Ruby
 > my_array = [3, 6, 9, 12, 15]
 => [3, 6, 9, 12, 15] 
 > my_array[0]
 => 3 
 > my_array[-1]
 => 15

Ruby has a wide selection of enumerable methods that allows us to traverse, search, and sort through arrays. Some enumerables are used interchangeably in Ruby as well as in Javascript to loop over elements of an array. Some examples consist of but not limited to .map, .filter. .each, and .find. Ruby has a version of .map called .collect and .select which is equivalent to .filter.

Ruby has convenient methods to check first and last elements on a given array: Array.first and Array.last respectively compare to Javascript. For instance, to check the last element on an array with an unknown size we use: Array[Array.length-1]. And, to check the the length of an array in Ruby we use Array.size.

To extract a range of element from an array in Javascript, we can use the slice method. The slice method does not mutate the original array and it stops extracting elements before the last designated index. For instance: slice(1,3) will extract the element with index 1 [1] and exclude the element with index 3 [3]:

 //Javascript
 someArray = [1, 2, 3, 4, 5, 6]
 (6) [1, 2, 3, 4, 5, 6]
 someArray.slice(1,3)
 (2) [2, 3]
 someArray
 (6) [1, 2, 3, 4, 5, 6]

In Ruby, we can extract a range of elements from an array using [0..2] which will return all the elements between index 0 and index 2 including the last one. But if we want to exclude last element we use the three dots method: [0...2]:

 :006 > my_array = [3, 6, 9, 12, 15]
 => [3, 6, 9, 12, 15] 
 > my_array[0..1]
 => [3, 6] 
 > my_array[0...2]
 => [3, 6] 
 > my_array[0..2]
 => [3, 6, 9] 
 > my_array[0...2]
 => [3, 6]

To add an element to the end of an array in Javascript we use push method whereas the shovel << method is more commonly used in Ruby:

 //Javascript
 someArray
 (6) [1, 2, 3, 4, 5, 6]
 someArray.push(9)
 7
 someArray
 (7) [1, 2, 3, 4, 5, 6, 9]

#Ruby
 011 > my_array = [3, 6, 9, 12, 15]
 => [3, 6, 9, 12, 15] 
 2.7.4 :012 > my_array << 10
 => [3, 6, 9, 12, 15, 10] 
 2.7.4 :013 >

Both languages have the ability to concatenate arrays, meaning combining multiple arrays, using concat() method. In Ruby, we can combine arrays using + as well:

//Javascript
 a = [1, 2, 3, 4]
 (4) [1, 2, 3, 4]
 b = [3, 6, 9]
 (3) [3, 6, 9]
 a + b 
 '1,2,3,43,6,9'
 a.concat(b)
 (7) [1, 2, 3, 4, 3, 6, 9]

#Ruby
 > a= [1, 2, 3, 4 , nil] 
 => [1, 2, 3, 4, nil] 
 > b= [6, 7, 8, 9]
 => [6, 7, 8, 9] 
 > a.concat(b)
 => [1, 2, 3, 4, nil, 6, 7, 8, 9] 

 >a= [1, 2, 3, 4 , nil] 
 => [1, 2, 3, 4, nil] 
 > b= [6, 7, 8, 9]
 => [6, 7, 8, 9] 
 > a + b
 => [1, 2, 3, 4, nil, 6, 7, 8, 9]

To remove first and last elements from an array, both Ruby and Javascript use shift and pop respectively.

In Ruby, there are some methods that has either a question or an exclamation mark (i.e. include? and reverse!). if a method includes a question mark, this means that the return will be a boolean value (true or false). Any method with exclamation mark will change the original array. We can keep original array by omitting the exclamation point:

 #Ruby
 > a = [1, 2, 3, 4]
 => [1, 2, 3, 4] 
 > a.reverse
 => [4, 3, 2, 1] 
 > a
 => [1, 2, 3, 4] 
 > a.reverse!
 => [4, 3, 2, 1] 
 > a
 => [4, 3, 2, 1]

It is also worth mentioning that some methods are simpler to use in Ruby compare to Javascript. For example, to add all elements in a given array we simply use .sum whereas in Javascript we use the reduce method: Array.reduce((sum, num) => sum + num). Another example of a simple method in Ruby is the .uniq method which returns one version of each element in an array: [1, 1, 2, 3].uniq => [1, 2, 3]. To achieve the same results in Javascript, we use the filter method array.filter((num, index, array) => array.indexOf(num)===index)

In Ruby, we can create arrays of strings and symbols as such:

 #Ruby
  %w[word word]
 => ["word", "word"] 
 > %i[word word]
 => [:word, :word]

Hashes

Hashes in Ruby can be compared to a plain old Javascript object. However, the term object is used in Ruby to indicate an instance of a class. Hashes are composed of key/value pairs where each key points to a value: { key1: "value1", key2: "value2" }.
Unlike Javascript, we cannot use use dot notation to access values within a hash, only bracket notation is valid with hashes:

 some_hash = { key1: "value1", key2: "value2" }
 some_hash[:key2]
 # => "value2"

We can also create hashes with strings instead of keys: { "string1" => "value1", "string2" => "value2" }.

A hash can be converted to an array:

 > some_hash = { key1: "value1", key2: "value2" }
 => {:key1=>"value1", :key2=>"value2"} 
 > some_hash.to_a
 => [[:key1, "value1"], [:key2, "value2"]]

There are several methods that are available to the Hash class similarly to the Array class. The Ruby documentation https://www.ruby-lang.org/en/documentation/ provides a list of method for every class.

Methods

A method in Ruby is the equivalent of a function in Javascript:

 //Javascript
 function someFunction(parameter) {
  console.log("Running someFunction");
  return parameter + 1;
 }

 #Ruby
 def some_method(parameter)
  puts "Running some_method"
  parameter + 1
 end

Here are the key differences:

The def keyword defines a method in Ruby just as function in Javascript.
By convention, the name of the method some_method is in snake case whereas the name of the function in Javascript is in camel case someFunction.
Parameters are defined in parentheses in both languages but we can omit the parentheses if the method has no parameter.
the end keyword defines the method's body just as the curly parentheses do in Javascript.
puts is equivalent to console.log. It will output to the terminal but has a nil return value.
The return value in a Ruby method will be always the last line in the method's body. The return keyword can be omitted and the method will implicitly return the last line.

Method Scope

In Javascript, functions have access to variables defined in their parent scope whether the parent scope consists of another function or the global scope. In Ruby scope functions differently. Any variable defined outside of the def and end keywords is unreachable:

 guest_name = "Joe"

 def say_hello_to_guest
  puts "Hello #{guest_name}!"
 end
 => NameError (undefined local variable or method `guest_name' 
 for main:Object)

Calling the guest_name variable from inside the method will throw an undefined local variable error. To solve the issue of an out of scope variable, we have to pass is as an argument:

 guest_name = "Joe"

 def say_hello_to_guest
  puts "Hello #{guest_name}!"
 end
 say_hello_to_guest(guest_name)
#=> "Hello Joe!"

Variables

In Javascript, declaring a variable require either let or const keywords preceding the variable name. A let variable can be declared first before assigning a value to it whereas a const variable hoists the declaration and the assignment at the same time. We cannot declare a const without assigning a value to it. In Ruby, due to scoping issues as well as the concept of Object Oriented Programming, variables are treated differently.

Variables in Ruby:

Local variables: start with a lower case or an underscore(_), should snake case if more than one word is used to name the variable (i.e. name = "Sarah", pet_name = "Pup").
Global variables: start with a dollar sign ($) and are available in the global scope. They are rarely used because of debugging issues:

 > $guest_name = "Joe"
 => "Joe" 
 > def say_hello_to_guest
 >   puts "Hello #{$guest_name}!"
 > end
 => :say_hello_to_guest 
 > say_hello_to_guest
 Hello Joe!
 => nil

Instance variables: start with an at symbol (@) (i.e. @name = "Sarah").
class variables: start with double at symbol (i.e. @@name = "Sarah"). Both instance and class variables are seen within the topic of Object Oriented Programming.
Constant: holds data that does not change. Must be in all caps (i.e. NAME = "Sarah"). It is equivalent to const in Javascript. Scope wise, a constant can also be accessed from outside of the class using: book::GENRES. Unlike Javascript declaring a variable with a constant in Ruby does not prevent the variable from being reassigned though it will give a warning.

Debugging in Ruby

Ruby comes with its own REPLs (Read, Evaluate, Print, Loop) when installed. The first REPL is IRB (Interactive Ruby) which is similar to the browser's console in Javascript. IRB allows you to experiment some procedural programming. It is a completely new environment, separate from our code, where we have to copy and paste the blocks of code we want to test. The second REPL is 'Pry which offers more functionality than the previous one because it injects an interactive environment into our code. Pry allows more flexibility in testing our code, we just have to add binding.pry anywhere in our code similar to debugger in Javascript.

Conclusion

Learning the syntax is the first step to learn a new language. It is also crucial to understand the concept the language is built around as well as its history https://www.ruby-lang.org/en/documentation/ruby-from-other-languages/. After mastering Ruby fundamentals, the next step is to learn about Macros(getters and setters methods), initialize method, public vs private methods, self, class variables and methods, instance variables and methods, and class inheritance.

useEffect Hook

Nissrine Canina — Wed, 24 Nov 2021 21:43:13 +0000

Definition

The useEffect hook is used to handle the side effect of React functional components outside of returning JSX. For instance, fetch data from an API when a component loads. Another example consists of starting or stopping a timer. Also, the useEffect allows to make manual changes to the DOM.

Any code defined inside the useEffect hook will run after React components finished the DOM updates. By default, useEffect runs both after the first render as well as whenever the component's state updates.

useEffect Dependencies Array

The default behavior of useEffect does not always agree with the purpose of our code. To adjust this behavior, we can run useEffect hook functions conditionally using dependencies array.

Empty array of dependencies[]:

for Example, we only need to run a fetch call to an API once after the JSX has completely loaded. Adding an empty dependencies array as a second argument to the useEffect function will stop the fetch call to API from happening with every re-render of the components. Therefore, the fetch call will only occur when the component renders for the first time.

Dependencies array with one or more elements [element1, element2,..]:

Using the example of an incrementing counter running as a side effect. We can add the counter variable to the dependencies array. Therefore, the useEffect will run every time our counter state changes.

Conclusion

Using useEffect with no dependencies array means that the side effect will run every time the component renders and whenever state or props change.
Using useEffect with an empty dependencies array means the side effect will only run the first time the component renders. No state is involved in this case.
Using useEffect with dependencies with elements in it means that the side effect will run every time those elements/variables change. The side effect will be triggered by the state changes of the elements inside the dependencies array.

Client-Side Routing in React

Nissrine Canina — Tue, 23 Nov 2021 02:56:33 +0000

Introduction

On this blog post, I would like to share a general overview of the concept of client-side routing that I have learned through the React phase. It was very helpful to use React tools in one project to understand the hierarchy of the components as well as nested children.

Definition

Client-side routing comes into place when building a single-page-application to separate its components onto different pages based on the endpoint of the URL of each page. The client-side routing is the internal handling of a route inside the Javascript file that is rendered to the client; without making additional Get requests for new HTML documents other than the initial and only Get request.

Pro

The major benefit of client-side routing is speed. Since the client-side code is responsible for routing, fetching, and displaying data in the browser, the client side router swaps the components in response to the user clicks.

Limitations

The limitations of client-side routing consist of:

It takes a while to load all the CSS and Javascript on the initial GET especially if the application size is large.
It is hard to track page views via analytic tools.
Single-page applications are complicated design wise compare to multi-page applications.

React Router

React Router is the client-side library that enables two major features:

Conditional rendering of components based on the endpoint of the URL.
Programmatic navigation that updates the content of the page without making new GET requests.

React Router Code for Main Routes

The first step to start using React Router is to install react-router-dom in the terminal: <$npm install react-router-dom>.Then, import Browser Router from react-router-dom in index.js file:

Next, import Route from react-router-dom in the parent component "App":

We use a Switch component to give the routes more predictive behavior. The Switch component is also imported from react-router-dom:

Now that we define our routes, we can manipulate them via the address bar; but there are more efficient ways to achieve that via other tools such as Link and NavLink provided by the React Library.

NavLink

The NavLink renders an anchor tag < a > to the dom and is used as a navigation bar with built in and customizable styling. NavLink should be placed outside and above the switch component so it can be accessed and displayed in all the pages. An example of NavLink component:

Link

Similarly to NavLink, Link also renders an anchor tag < a > to the dom. Link can be used within the application pages as buttons with links that takes you to specific routes. Example of Links:

Note that routes are following RESTful conventions.

React Code for Nested Routes

useParams Hook

React modular applications are perfect tool for displaying lists of items. Going back to the example of list of cars (see code snippets above), the user should be able to click a car card and be directed to car details. Since, we are fetching the data using a db-json server and each car in the list has its own unique id, we can use useParams() method to get dynamic params from the URLs and therefore display the correct item.
First, we have to import useParams() method from react-router-dom.

Next, we have to assign the useParams() method to a variable inside our ItemDetails (i.e. CarDetails) component.

The id variable can be used then to fetch that specific item:

Programmatic Navigation

The purpose of programmatic navigation is to direct the user to different pages without the need to click on a link. For instance, when the user submit a form (a new item) and need to be directed to the list of items to see the newly created item displayed in the original list. Another example is when we perform a delete action and we need to direct the user back to the main list. One way to achieve that is via useHistory Hook.

useHisory Hook

Fisrt, we import the useHistory Hook from react-router-dom.

Then, assign it to a variable:

Here is an example of Patch request of a form submit action where the user is directed to the main list after submitting the new item:

Here is another example of Delete request where the user will be directed to the main list of cars after deleting the a specific item (car):

Conclusion

This was a general overview of the concept of client-side routing with some useful hooks from the react router library.