<figure><img alt="PDF signature with YouSign, Ruby Implementation — Alameda Dev" src="https://cdn-images-1.medium.com/max/800/1*rWh5Il1blQp9NVWFUNBZHQ.png"></figure>Your business might need a document signature feature for several reasons, including:
<ol>
<li>Legal compliance: Certain agreements and contracts require a legally binding signature, which can be achieved through digital signatures.</li>
<li>Streamlining processes: By having a document signature, a business can streamline its processes and reduce the time and cost associated with printing, signing, and mailing paper documents.</li>
<li>Improving customer experience: Improve the customer experience by making it easier for them to sign agreements and contracts, without having to leave their homes or offices.</li>
<li>Enhancing security: Digital signatures provide a secure and verifiable way to sign documents, reducing the risk of fraud or tampering.</li>
<li>Facilitating remote work: With the rise of remote work, having a document signature feature can enable a startup’s employees and customers to sign and process documents from anywhere, at any time.</li>
</ol>
Overall, a document signature feature can help a business to become more efficient, secure, and customer-friendly, while also complying with legal requirements.
<a href="https://yousign.com/">YouSign</a> is a digital signature solution that enables individuals and businesses to sign and send documents electronically. With YouSign, you can upload a document, add signature fields, and then invite others to sign the document online. The signed document can then be saved and downloaded for future reference, providing a secure and efficient way to sign and manage electronic documents.
Here are the four steps to create your first Signature Request:
1. Initiate the Signature Request. 2. Upload the document to sign. 3. Add a signer. 4. Activate the Signature Request.
To integrate YouSign into a Node or Ruby on Rails application, you’ll need to sign up for an API key on the <a href="https://yousign.com/">YouSign website</a>.
First, sign up for an API key: To use the YouSign API, you will need to sign up for an API key on the YouSign website.
<h4>Initiate the Signature Request</h4>
A Signature Request represents the object you send to recipients for signing. A Signature Request can have one or multiple Documents and one or multiple Signers attached. There are three different levels of electronic signatures (eSignature) offered by YouSign:
<ul>
<li>Simple eSignature for everyday work</li>
<li>Advanced eSignature for secure signatures on sensitive documents</li>
<li>Qualified eSignature, which is legally equivalent to a handwritten signature.</li>
</ul>
Here’s a code sample to create a Signature Request using the YouSign API:
<pre>require "uri" require "net/http" require 'json' base_url = "https://api-sandbox.yousign.app/v3" api_key = "YOUR API KEY" ## Create a Signature Request: url = URI(sprintf("%s/signature_requests", base_url)) https = Net::HTTP.new(url.host, url.port) https.use_ssl = true request = Net::HTTP::Post.new(url, 'Content-Type' =&gt; 'application/json') request["Authorization"] = sprintf("Bearer %s", api_key) request.body = {name: 'The name of your Signature Request', delivery_mode: 'email', timezone: 'Europe/Madrid'}.to_json response = https.request(request) signature_request = JSON(response.body) signature_request_id = signature_request["id"] </pre>
<h4>Upload the document to sign</h4>
Documents added to a Signature Request must be in PDF format. They can either be signable documents, which are meant to be signed by Signers, or attachments, which are added to the request but not meant to be signed.
To place the visual signature field on the document, you’ll need to use manual field positions and specify the absolute coordinates of the signature field on the page. You can use the YouSign <a href="https://placeit.yousign.fr/">tool</a> to find the coordinates.
Here’s a code sample to add a Document to the Signature Request:
<pre>## Add a Document to the Signature Request: url = URI(sprintf("%s/signature_requests/%s/documents", base_url, signature_request_id)) https = Net::HTTP.new(url.host, url.port) https.use_ssl = true request = Net::HTTP::Post.new(url) request["Authorization"] = sprintf("Bearer %s", api_key) form_data = [['file', File.open('./public/assets/document.pdf'), content_type: 'application/pdf'],['nature', 'signable_document'],['parse_anchors', 'true']] request.set_form form_data, 'multipart/form-data' response = https.request(request) document = JSON(response.body) document_id = document["id"]</pre>
<h4>Add a signer</h4>
You have to add a Signer’s to your Signature Request. Signers are the individuals you request a signature from on Documents of nature `signable_document`.
A Signer must have at least one Signature Field. The signature Field represents the place on the document where the Signer will apply his signature.
<pre>## Add a Signer to the Signature Request: url = URI(sprintf("%s/signature_requests/%s/signers", base_url, signature_request_id)) https = Net::HTTP.new(url.host, url.port) https.use_ssl = true request = Net::HTTP::Post.new(url, 'Content-Type' =&gt; 'application/json') request["Authorization"] = sprintf("Bearer %s", api_key) request.body = { "info": { "first_name": "John", "last_name": "Doe", "email": "osledy@alamedadev.com", "phone_number": "+33700000000", "locale": "en" }, "signature_authentication_mode": "no_otp", "signature_level": "electronic_signature", "fields": [{ "document_id": document_id, "type": "signature", "page": 1, "width": 146, "height": 52, "x": 224, "y": 733 }] }.to_json https.request(request)</pre>
<h4>Activate the Signature Request</h4>
The last step is to activate the Signature Request. Activating the Signature Request sends an email invitation to the Signers to sign the document.
<pre>## Activate the Signature Request: url = URI(sprintf("%s/signature_requests/%s/activate", base_url, signature_request_id)) https = Net::HTTP.new(url.host, url.port) https.use_ssl = true request = Net::HTTP::Post.new(url, 'Content-Type' =&gt; 'application/json') request["Authorization"] = sprintf("Bearer %s", api_key) response = https.request(request) puts response.body</pre>
The Signer will receive an email requesting to sign.
<figure><img alt="PDF signature with YouSign, Ruby Implementation — Alameda Dev" src="https://cdn-images-1.medium.com/max/1024/1*sMrnGylLztxjljs4z5lPKg.jpeg"></figure><h4>Custom Experiences</h4>
Apart from the base service, you can customize the look and feel of your signing experience with Custom Experience.
To personalize the signature process and adapt it to your brand identity, it is possible to:
<ul>
<li>Customize the signature experience appearance (colors, start screen, left panel).</li>
<li>Personalize the user’s journey with the redirect success and redirect error link.</li>
<li>Manage email notifications triggered when an event occurs on the Signature Request (ie. “Request is -approved”, “Request is rejected”).</li>
<li>Manage emails settings (ie. show the due date or your logo)</li>
</ul>
More details about Custom Experiences can be found <a href="https://help.yousign.app/kb/guide/en/customise-your-signing-experience-with-your-brand-identity-RMuZy1t1QZ/Steps/1108732)">here</a>.
With these steps, you can integrate YouSign into your Node or Ruby on Rails application and start sending electronic signature requests.
Note that the above code is just a sample, and you may need to modify it to meet your specific requirements and integration needs.
Implementing a digital signature solution can be complex, but it doesn’t have to be. Fortunately, there are many solutions available to make the process easier. If you’re interested in adding digital signatures to your business processes, for more contact us: <a href="http://www.alamedadev.com/contact">www.alamedadev.com/contact</a>. Our team of experts will be happy to help you develop custom software for your specific needs.
Hello We are Alameda Dev.!
We would love to help you, offer you a first conversation to talk about your ideas and help you focus on them.
Alameda Dev. Is a 100% remote team. Specialized in developing mobile applications, websites and advanced software in the React and Ruby on Rails ecosystem.
You can read other interesting posts about technology: <a href="https://medium.com/alameda-dev">https://medium.com/alameda-dev</a>
You can also visit our web: <a href="http://www.alamedadev.com/">www.alamedadev.com</a>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=f12b0535a9ad" width="1" height="1" alt=""><hr>
<a href="https://medium.com/alameda-dev/implementing-yousign-in-a-web-application-with-nodejs-or-ruby-on-rails-f12b0535a9ad">Implementing YouSign in a Web Application with NodeJS or Ruby on Rails</a> was originally published in <a href="https://medium.com/alameda-dev">Alameda Dev.</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Implementing YouSign in a Web Application with NodeJS or Ruby on Rails

<figure><img alt="" src="https://cdn-images-1.medium.com/max/512/1*6aN8lK1dh8oKZivZFrbFgw.jpeg"></figure>What are we going to talk about?
Artificial intelligence (AI) has arrived, and it’s already brought on outstanding improvements to our daily lives. Its uses are far-reaching, and are seen in almost, if not every, industry. When it comes to development, the popular JavaScript library, including React, has shown considerable flexibility. This encompasses everything from blogs and social networks to e-commerce and cross-platform mobile apps.
So, what can these two achieve when combined?
1. Introduction to AI and React
<ul>
<li>Artificial intelligence (AI) is a rapidly growing field that involves the development of computer systems that can perform tasks that would normally require human intelligence, such as learning, problem-solving, and decision-making. AI has numerous applications in various industries, including healthcare, finance, and retail.</li>
<li>React is a popular JavaScript library for building user interfaces. It was developed by Facebook and has become widely used for building web applications due to its efficiency and flexibility. React allows developers to create reusable components that can be easily incorporated into larger applications, making it easier to build and maintain complex projects.</li>
</ul>
AI and React can be used together to build powerful and interactive web applications. For example, a React application can use AI to classify images, translate text, or provide personalized recommendations. By leveraging the capabilities of AI and the flexibility of React, developers can create innovative and intuitive web experiences for users.
2-Developing an AI-powered React component
<blockquote>Image Classify Component</blockquote>
<pre>import React, { useState } from 'react'; import * as tf from '@tensorflow/tfjs'; const ImageClassifier = () =&gt; { const [classificationResults, setClassificationResults] = useState([]); const classifyImage = async () =&gt; { // Load the model const model = await tf.loadLayersModel('model.json'); // Classify the image const predictions = await model.predict(image); setClassificationResults(predictions); }; return ( &lt;div&gt; &lt;button onClick={classifyImage}&gt;Classify Image&lt;/button&gt; &lt;ul&gt; {classificationResults.map((result, index) =&gt; ( &lt;li key={index}&gt;{result.className}: {result.probability}&lt;/li&gt; ))} &lt;/ul&gt; &lt;/div&gt; ); }; export default ImageClassifier;</pre>
To classify an image, the method in this example uses TensorFlow.js to load the layers model and predict functions to classify an image using a pre-trained model. The classification results are stored in the component’s state and displayed in a list. When you click the "Classify Image" button, the classify image method is run, and the results of the classification are updated.
Implementing AI functionality in a React application can be a fun and exciting way to bring your project to the next level. With libraries like TensorFlow.js and Brain.js, it’s easy to get started with incorporating AI into your React application.
AI is challenging, so it may take a while to get your model working in general. With the right tools and determination, you can develop AI-powered React features like:
<ul>
<li>Language translation</li>
<li>Real-time data processing</li>
<li>Image recognition</li>
<li>Text classification</li>
<li>Predictive modeling</li>
<li>Speech recognition</li>
<li>Chatbots</li>
</ul>
And many more.
<blockquote>Chatbot component with brain.js</blockquote>
<pre>import React, { useState } from 'react'; import brain from 'brain.js'; const Chatbot = () =&gt; { const [input, setInput] = useState(''); const [output, setOutput] = useState(''); const handleChange = (event) =&gt; { setInput(event.target.value); }; const handleSubmit = (event) =&gt; { event.preventDefault(); // Train the chatbot const chatbot = new brain.recurrent.LSTM(); chatbot.train([ { input: 'hi', output: 'hello' }, { input: 'how are you', output: 'I am doing well, thanks for asking!' }, { input: 'what is your name', output: 'My name is Chatbot.' }, // Add more training data here ]); // Use the chatbot to generate a response const response = chatbot.run(input); setOutput(response); }; return ( &lt;div&gt; &lt;form onSubmit={handleSubmit}&gt; &lt;label&gt; Message: &lt;input type="text" value={input} onChange={handleChange} /&gt; &lt;/label&gt; &lt;input type="submit" value="Submit" /&gt; &lt;/form&gt; &lt;p&gt;{output}&lt;/p&gt; &lt;/div&gt; ); }; export default Chatbot; </pre>
This part gives the user a form to fill out and a text for the chatbot to say in response. After the user sends in the form, the chatbot learns from sample data and responds. Is trained using some sample data and then generates a response based on the user’s input.
In conclusion, using AI and ReactJS together could change the way we build and use intelligent applications. Using the power of ReactJS to build user interfaces and the power of AI to add advanced functionality, developers can make really innovative and useful solutions. Whether you’re a developer or a professional who isn’t technical, it’s important to know what role ReactJS plays in the development of AI apps and what the future holds for it. As AI continues to grow and change, we can expect to see even more interesting things happen where these two technologies meet.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=388e140375f2" width="1" height="1" alt=""><hr>
<a href="https://medium.com/alameda-dev/ai-development-with-reactjs-overview-for-non-developers-388e140375f2">AI development with ReactJS overview for non developers</a> was originally published in <a href="https://medium.com/alameda-dev">Alameda Dev.</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

AI development with ReactJS overview for non developers

<figure><img alt="" src="https://cdn-images-1.medium.com/max/512/1*rYy-PP7m1tid7entWQn-ZA.png"><figcaption>AWS Amplify GraphQL, Query using Multiple OR/AND filters</figcaption></figure>AWS Amplify is a framework that allows developers to easily build and deploy cloud-powered applications. One of the key features of AWS Amplify is its support for GraphQL, a flexible and powerful query language that allows developers to request exactly the data they need from a server. In this article, we will explore how to use AWS Amplify to query a GraphQL API with multiple OR/AND filters.
First, let’s take a look at the basics of GraphQL filtering. In GraphQL, you can use filters to narrow down the results of a query based on certain criteria. Filters are specified using the where argument in a query, and can be used to filter on any field in the schema. For example, if you have a GraphQL API with a Person type that has fields for name, age, and location, you could use filters to find all people with a certain name, age, or location.
Filters can be combined using logical operators such as AND and OR. The AND operator is used to specify that multiple filters must be met, while the OR operator is used to specify that at least one of the filters must be met. For example, you could use the following query to find all people who are either over the age of 30 or live in a specific location:
<pre>query { people(where: { OR: [ { age: { gt: 30 } }, { location: { eq: "San Francisco" } } ] }) { name age location } }</pre>
In this query, the people field is the root field of the query, and the where argument is used to specify the filters. The OR operator is used to specify that the results should include all people who are either over the age of 30 or live in San Francisco. The gt and eq operators are used to specify greater than and equal to, respectively.
Now that we’ve covered the basics of GraphQL filtering, let’s take a look at how to use AWS Amplify to query a GraphQL API with multiple OR/AND filters.
To get started with AWS Amplify, you will need to install the AWS Amplify CLI and configure it with your AWS credentials. Once you have the CLI installed, you can use it to create a new Amplify project and add a GraphQL API to your project.
To query the GraphQL API with multiple OR/AND filters using AWS Amplify, you will need to use the API module. The API module provides a simple interface for making GraphQL queries and mutations, and it includes support for filtering.
Here is an example of how to use the API module to query a GraphQL API with multiple OR/AND filters:
<pre>import Amplify, { API } from 'aws-amplify'; const query = ` query { people(where: { AND: [ { OR: [{ name: { eq: "John" } }, { name: { eq: "Jane" } }] }, { OR: [{ age: { gt: 30 } }, { location: { eq: "San Francisco" } }] } ] }) { name age location } } `; API.graph</pre>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=fbb2649436fc" width="1" height="1" alt=""><hr>
<a href="https://medium.com/alameda-dev/aws-amplify-graphql-query-using-multiple-or-and-filters-fbb2649436fc">AWS Amplify GraphQL, Query using Multiple OR/AND filters</a> was originally published in <a href="https://medium.com/alameda-dev">Alameda Dev.</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Design.

Develop.

Launch.

Alameda Dev. provides full-service end-to-end software and mobile application solutions on-demand.

We are

A dedicated team of professional developers and designers

We develop software solutions for industry leaders.

Our Services

We develop digital products that drive innovation and create sustainable value.

Custom Software Development

UX/UI Design

On-Demand Software & Mobile Application Team

CASE STUDIES

Here are some of the solutions we’ve provided so far

Our Playbook

We partner with you, play-by-play, to build and support bespoke software solutions.

Blog

Demos & Posts

Let’s get started on your software solution or mobile app project today!