DEV Community: Carlos Junior

Using Javascript Snippets in Outsystems

Carlos Junior — Mon, 23 Jan 2023 12:30:48 +0000

Hi folks, been a while but now with some content about outystems, and this tool is amazing for building websites, actually I wanna show something I have been working with my team, I helped developed most of the Web Design and some features of the websites and has been a challenge but first I wanna show you how you can Integrated javascript with a low-code solution.

Let's start.

First you need to create a Client Action, let's called CheckManagerRole, you will need to get a role too called FamilyManager.

The amazing part of Outsystems is you can build fast applications for good and fast problem solving.

Now back to the project.

Using Javascript snippet with the current code.

You will need to create a Parameters, since you will need a Output variable to check the ManagerRole.

After that you will need to create an assign.

And its pretty much done.

Let me show now how you can apply on your project.

On the Screen you desire to apply this you will need a OnReady, occurs after the Screen or Block DOM is ready, so before the transition starts.

This is really important because we want the check the ManagerRole this way.

On the assign is really important to check the Manager Role.

And after that you will need a input or something you want to verify the Manager role in this case is going to be the RemoveEvent feature.

Done, check your website now.

Thank you so much for reading and im glad to be back.

Outsytems Data Types

Carlos Junior — Mon, 07 Nov 2022 15:20:01 +0000

Hi folks in this article I will show you the different data types in Outsystems:

Binary Data: Byte array with no elements
Boolean: false or true
Currency: 0.0
Date: #1900-01-01#
Time: #00:00:00#
Date Time: #1900-01-01 00:00:00#
Integer: 0 to 2147483600
Long Integer: 0 to 5645245584135987412
Decimal: 0.0 to -158121.025 4000.0
Email: "empty string"
Phone number: "empty string"
Text: "empty string"

This is just post to keep in mind the different data types you can use in the platform.

solving a problem using python (I dont know anything about python)

Carlos Junior — Sat, 22 Oct 2022 12:05:49 +0000

Hi folks, so on this weekend I decided taking a new challenge.

I saw this Open-source project made by Edgar Muniz Berlinck, and he challenged a few things was up to solve.

Since I cant hesitate on new challenge I decided to take in.

So basically what I had to do is.

1. When the user opens this game, mp3 sound will start, and you have to run all the songs until the end.

I took a few steps first, decided to create a button so i can debugg the code whenever I want.

After than i created a <audio> </audio> loading up on the website, because this is where the HTML gets the audio.

Before that i saw that if it was HARDCODE like <audio src="./src..."> </audio> I could load the page, with that information i started to get the hang of it.

Then i created a let playlist = [] this is a array where I will store the src from the songs I want, but if your thinking the same as me the code will be huge.

but STAY WITH ME FOR A SEC.

then I created a .py script

import os

dir_path = r'C:\Users\Carlos Junior\Documents\GitHub\Forked\bar-figth-game\public\assets\songs'

res = []

for path in os.listdir(dir_path):
    if os.path.isfile(os.path.join(dir_path, path)):
        res.append("'playlist[] = './public/assets/songs/'"+path)
print(res)

this script is writing my javascript code, so I can just copy and paste it on my .js code, what im doing right here is going on the folder where are the songs and list them one by one until the last one and writing the javascript code, so I dont have that much work to do it by hand.

Yep, i know the code looks huge, but im lazy to type it by hand, and the script its not optimized i had to remove 'and enter my playlist.

But it was fun and learned a bit of python.

Okay now lets get to the real code.

document.getElementById('song').addEventListener("click", myFunction)
function myFunction() {
    document.getElementById('song').innerHTML = "You clicked me";
    const audio = document.querySelector("audio")
    let i = 0;
    audio.addEventListener('ended', function () {
      i = ++i < playlist.length ? i : 0;
      console.log(i)
      audio.src = playlist[i];
      audio.play();
    })
    audio.volume= 0.1;
    audio.loop = false;
    audio.src = playlist[getRandom(i)];
    console.log(getRandom());
    audio.play();
  }

  function getRandom() {
    return Math.floor(Math.random()*playlist.length);
  }

So on this code i have a function to use when i click the button, and i have .querySelector aiming to 'audio', and after i started my counter = i, and then i add eventlistener so when the track is = 'ended' started a loop from 0 until the array length of the playlist.

The console.log are just for tracking on this case, and the the audio.src = playlist[i] this is where the tracks changes.

audio.src = playlist[getRandom(i)]; this is just for User Experience, its kinda annoying you having the same music whenever i enter the game, so i decided to make a random.

And that's it thank you

'vite' is not recognized as an internal or external command

Carlos Junior — Sat, 22 Oct 2022 01:20:23 +0000

hello folks, yea i know just wanted to share a quick fix, about this that i just learned that you CANT RUN A PROJECT after you forked, without install dependecy

So im pretty knew to programming i wanted to share the meaning of Dependency, what it means?

A dependency is defined as a file, component, or software package that a program needs to work correctly.

Like a bookshelf, you cant LEARN if you dont have a place where you put all your books that you actually learn, in this example its not the same thing but i just wanted to share a example with you.

Ok but what do i need to do?

its easy

npm i

Ok what is that lol?

You are installing all dependencies or devDependencies from a package. json file.

Im using this github project as example using Vite instead of CRA

after that you can do

npm run dev

using VITE to open the project

And you done !

How to make interaction with React.js and Smart-Contract

Carlos Junior — Mon, 17 Oct 2022 16:25:27 +0000

Hello fellow programmer, so on this tutorial i will teach how function in react works, lets get to work!

First of all you will need to use useEffect and useState

import React, { useEffect, useState } from "react";

and after

const [currentAccount, setCurrentAccount] = useState("");

this will creating a hook

On this code block
`const checkIfWalletIsConnected = async () => {
try {

const { ethereum } = window;

if (!ethereum) {
  console.log("Garanta que possua a Metamask instalada!");
  return;
} else {
  console.log("Temos o objeto ethereum", ethereum);
}
  /*
  * Confirma se estamos autorizados a acessar a carteira do cliente
  */
  const accounts = await ethereum.request({ method: "eth_accounts" });

  if (accounts.length !== 0) {
    const account = accounts[0];
    console.log("Encontrada a conta autorizada:", account);
    setCurrentAccount(account);
  } else {
    console.log("Nenhuma conta autorizada foi encontrada");
  }

} catch (error) {
console.log(error);
}`

This will check the const ethereum that will be the blockchain we are currently using, and after that, and basically the method: gets the eth_accounts and checks with IF.

After that you will need to create the button is simples, all you need is

{!currentAccount && ( <button className="waveButton" onClick={connectWallet}> Conectar carteira </button> )}

the function connectWallet will get the wallet and connect to it.

Good job you did it!

First Web3 smart-contract

Carlos Junior — Mon, 17 Oct 2022 15:45:47 +0000

Hi, so this week i just started a bootcamp, and i have been learning how to deploy a contract.

Currently i have been working on this project called Tickr, space where you can buy Tickets for shows but in Portuguese.

This is the backbone of my contract simple, but since i have good grasp of blockchain been easier for me to learn.

New project - Soneca Sorteio

Carlos Junior — Tue, 27 Sep 2022 03:03:45 +0000

https://github.com/CarlosJunioor/sorteador-xlsv

Here is my first solution to a problem, although the people that i created to use didnt used.

Anways it was good way to learn, and i need to learn something like CMS and the basics

Need some feedback.

High Intensity

Carlos Junior — Fri, 23 Sep 2022 09:29:26 +0000

So recently i found this podcast called broken by concepts that related to league of legends ranked climbing methodology, i they came up with a lot of great concepts and idea.

the concept of being expert at something can really apply to programming in general, and probably that’s why im in love with programming, is not the end goal for me but the process of learning and get better everyday.

Like michael jordan and what makes him one of the best player of all time, we need to see what he did everyday to reach the top 0.01%, just a little talk to keep my medium update.

Github Study

Carlos Junior — Fri, 23 Sep 2022 07:10:53 +0000

differences beetween oring and upstream

upstream = my current open-source project

origin = my forked repo from the open-source project

just a small tip for me, because it was confusing at the beginning now im starting to get the hang of it!

react router explained for beginners

Carlos Junior — Thu, 22 Sep 2022 07:26:27 +0000

react router explained
hi everyone this is a simple guide for react router, first things first you need to create a page.

on this example im creating a report page

after that i need to make the standard react call out, and this code.

after that on my APP.tsx i need to route the index element to the Import i wanted to be in.

simple guide and tip for you!

Hello world

Carlos Junior — Thu, 22 Sep 2022 07:23:12 +0000

this is actually my second blog, im using medium right but i might be migrating to Dev.to is fun tho!

this is carlos so yea, this is kinda wierd but this medium blog is made only for me or maybe a chance of anyone finding this blog interesting or whatever.

i decided to create this today to only check what i learn on programming right now, i had a couple of ideas a few weeks ago about pointers i tought i could never learn but know seems pretty easy to me.

and i failed to join 42Lisbon in August of 2022 so i can remember myself i actually really bad at programming and i must learn a lot if i rly wanna get a job, also wanna practice my english writing skills since im brazilian.

i would say my goal is to be blockchain developer and work full-time with blockchain developing contracts or doing audits still very new but im currently working on there.

well if anyone finds this medium blog here is my socials i guess.

Linked-in https://www.linkedin.com/in/carlosjuniordev/

github https://github.com/CarlosJunioor