Hello 👋 readers,
Did you miss me? 🤔 Ohh I forgot I have no active readers 😔
Let me Introduce myself. I am Saroj a full-stack developer living in Nepal. I am 19 years old and I am learning full-stack development for quite some time, but it has been around 36 days since I started to take it seriously and give my full into it.
And I am also trying to build an online presence by writing blogs, sharing my knowledge and learning and collaborating with the community and also by taking part in Hashnode hackathons.
Ok, it covers my intro. I will be more than happy to know about you, so don't feel shy to tell me who and where are you from. In the comment section 👇.
What is RIX?🤔🤔
Rix is an AI-powered search engine specifically for developers. Whose primary objective is to help developers find the most accurate and up-to-date information with greater efficiency and speed.
Want to learn more about it? Here is a video by Hashnode itself.
Not a fan of video content, Here is a blog explaining RIX in detail by Sandeep one of the co-founders of Hashnode.
Ok, Now that we know what Rix is let's test it shall we??
We will be testing its code writer mode. Which is one of its most useful modes among the two other modes.
Testing the Code writer mode.
Let's set up our environment first.
⬢ tests ◉
> mkdir hashnodeRixChatAi
⬢ tests ◉
> cd .\hashnodeRixChatAi\
Now, let's create an expo app since we are going to test it using react native.
⬢ hashnodeRixChatAi ◉
> npx create-expo-app clockDesign
√ Downloaded and extracted project files.
✅ Your project is ready!
Now that the project setup is complete let me show you what we will be trying to build using Rix.
Believe me when I say it took me almost 30 mins to design there were other components which I removed for the sake of simplicity. But when I tried to code it I was utterly confused, and had to spend more than 2 days, just to be able to do it. At last, I was able to complete this screen, I learnt a lot of things. Imagine learning the Formula of a circle and learning math while coding, and seeing even though the formula is correct it does not work. So, I believe It will be the perfect test for the Rix chat to see if it can pull it off or not. Without any framework, just with maths.
Here we go.
Prompt 1: How can I create a react native application using expo I want to name my application clockDesign
Response:
// Using Expo CLI
npm install -g expo-cli
expo init clockDesign
cd clockDesign
expo start
And Along with the response, there was an explanation of how to use these commands. I love the fact that it recommended the use of expo-cli instead of create-expo-app as it can generate issues with the integration of third-party modules.
Prompt 2: can you create a component called clock, that has three params currentTime, totalTime and startingTime
Response:
// clock.js
const Clock = ({currentTime, totalTime, startingTime}) => {
return (
<div>
<p>Current Time: {currentTime}</p>
<p>Total Time: {totalTime}</p>
<p>Starting Time: {startingTime}</p>
</div>
)
}
export default Clock
Like the first prompt's response, this response also came with an explanation. It understood the task and generated the component as asked, Also it made the component name's first letter capital which shows that it followed the naming convention. But although it was a follow-up question it looks like it missed the context and forgot that we are building a React Native application not a React application. It would have been great if it generated the code for react native. But anyways let's tweak the prompt and mention that we want the code for React Native.
Edited prompt: can you create a react native component called clock, that has three params currentTime, totalTime and startingTime
import React, {Component} from 'react';
import {Text, View} from 'react-native';
export default class Clock extends Component {
render() {
const {currentTime, totalTime, startingTime} = this.props;
return (
<View>
<Text>Current Time: {currentTime}</Text>
<Text>Total Time: {totalTime}</Text>
<Text>Starting Time: {startingTime}</Text>
</View>
);
}
}
This time around it generated the correct code but I wonder 🤔 why it generated the class-based component. Let me fix it. And let's get to the interesting and more complicated part.
PS: After saying it to give me a functional component it gave me a functional component explaining the advantages of functional component 🤣.
Prompt 3: Create 3 states for currentTime, totalTime & startingTime with a random default value in seconds And pass it through the props from app js
Response:
import React, {useState} from 'react';
import {Text, View} from 'react-native';
const Clock = props => {
const [currentTime, setCurrentTime] = useState(props.currentTime);
const [totalTime, setTotalTime] = useState(props.totalTime);
const [startingTime, setStartingTime] = useState(props.startingTime);
return (
<View>
<Text>Current Time: {currentTime}s</Text>
<Text>Total Time: {totalTime}s</Text>
<Text>Starting Time: {startingTime}s</Text>
</View>
);
};
export default Clock;
// In App.js:
import Clock from './Clock';
const currentTime = Math.floor(Math.random() * 60);
const totalTime = Math.floor(Math.random() * 60);
const startingTime = Math.floor(Math.random() * 60);
<Clock
currentTime={currentTime}
totalTime={totalTime}
startingTime={startingTime}
/>
There is nothing wrong with this approach but it completely messed up the App.js without any function and without any export. Let's do what it says and then we can tell it to fix its own code 😉.
As expected the code generated an error msg. Here is the complete msg unedited raw.
Error: Element type is invalid:expected a string (for built-in components) or a class/function (for composite components) but got: object.You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `withDevTools(Anonymous)`.
This error is located at:
in withDevTools(Anonymous)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent), js engine: hermes
Let's see how it handles this error.
Prompt: I copy pasted the code and it generated the following error: [ above error msg ].
Response:
The response was good it understood that it made a mistake earlier with the above example and said: "Ah okay, that error is likely because I didn't include the full component code in the examples I gave. Here is the full code that should work:" and then gave me the correct code, but this time the description section was empty and instead it wrote the entire description in the code area. Ok now comes the most awaited part the "circle with dashes".
Prompt 4: Now can you create a circle with 50 dashes separated by a 10px gap each dash should have 5px height and 4px width. Make sure that the circle is part of the clock component.
Response:
This time I am happy with the response, it has explained where the code should be added and how it has written the code. But it is adding some description in the code area but without commenting out the description. But it is not what I wanted, I wanted the border of the circle to be dotted not a circle that contains 50 dots. let's make it more clear and see if it can do it or not.
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
{/* Create circle */}
<View style={{
width: 500,
height: 500,
borderRadius: 250,
borderWidth: 4,
borderColor: 'black',
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center'
}}>
{/* Create 50 dashes */}
{[...Array(50)].map((_, i) => (
<View
key={i}
style={{
width: 4,
height: 5,
margin: 10,
backgroundColor: 'black'
}}
/>
))}
</View>
</View>
Updated Prompt: I want the circle's border to be dotted not the circle to contain 50 dots. And make sure the radius of the circle is no more than 150 and the circle should be in the centre of the screen.
It gave me an updated response. But this is also not what I wanted, let me be more clear that I still want the above requirements.
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
{/* Create circle */}
<View style={{
width: 300,
height: 300,
borderRadius: 150,
borderWidth: 4,
borderStyle: 'dotted',
borderColor: 'black'
}} />
</View>
Updated Prompt 2: Make the circles border dotted but not by using border style. Make sure to fulfil all the requirements of the dost mentioned above and use math to calculate the angle of every dot and align it in a circular path.
It quickly generated another response the response looks promising let's test it out and see what it has generated.
Response:
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<View style={{
width: 300,
height: 300,
borderRadius: 150
}}>
{/* Calculate angle for each dot */}
{[...Array(50)].map((_, i) => {
const angle = i * (360 / 50);
return (
<View
key={i}
style={{
position: 'absolute',
width: 5,
height: 5,
backgroundColor: 'black',
borderRadius: 2.5,
left: 150 + (150 * Math.sin(angle * Math.PI / 180)),
top: 150 - (150 * Math.cos(angle * Math.PI / 180))
}}
/>
);
})}
</View>
</View>
Test Result:
Although it is good, it forgot the previous content of the dost being a certain height and width. Ok, let's move on to the next step.
let's ask it to fix the dashes.
Prompt 5: Can you change the random values of the states to always be in the following order totalTime > currentTime > startingTime
Response:
I like how it tried to solve the problem, but this time around it forgot to add one of the function that it is using. It explains to me how and where should I put the code.
const [totalTime, setTotalTime] = useState(60);
const [currentTime, setCurrentTime] = useState(30);
const [startingTime, setStartingTime] = useState(0);
setTotalTime(getRandomInt(45, 75));
setCurrentTime(getRandomInt(startingTime + 5, totalTime - 5));
setStartingTime(getRandomInt(0, currentTime - 5));
I know what error it will generate so let's do as above and generate the error and paste it in for it to solve.
ReferenceError: Property 'getRandomInt' doesn't exist
This error is located at:
in Clock (created by App)
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent), js engine: hermes
Fix Prompt: It gives the following error: error msg
Response:
"You're right, my apologies for that error. I realized that I don't actually have access to the getRandomInt() function - I was mistaken.
A better way to set the state values in the correct order would be:"
This time around it was very polite and gave a better solution too.
const maxTotalTime = 75;
const minStartingTime = 0;
const totalTime = Math.floor(Math.random() * (maxTotalTime - minStartingTime)) + minStartingTime;
const startingTime = Math.floor(Math.random() * totalTime);
const currentTime = Math.floor(Math.random() * (totalTime - startingTime)) + startingTime;
setTotalTime(totalTime);
setStartingTime(startingTime);
setCurrentTime(currentTime);
as it clearly has a problem remembering the previous state it redeclared the same variable generating yet another error. But I fixed it myself because the article is already too long.
I think this is enough to test the capabilities and shortcomings of the Rix chat. If you want to see it building the entire design, then comment down 👇 I will make a full version of it. For now, it is enough and comment down 👇 If you want me to build the same thing without any AI. I am sure you will learn a lot of things and We will have a great time.
The complete version looks like this.
My opinion about Rix chat.
It is a great tool, it helps to generate the code quickly but it has some distance to travel before I can recommend it to anyone. There are some areas where it can improve. Yes, I know it is marked by the Hashnode as an experiment for the time being, in this phase the more testers and enthusiasts it gets the better it becomes. Besides, hashcode is organizing a giveaway till June 27th, 2023 see the discord announcement if you missed it.
Here are some points that it should improve upon.
Remembering the context better.
Implementing more language features such as syntax highlighting.
Fixing the bugs such as description being added to the code section.
Improving the comments, it sometimes gave suggestions in comments without using comments.
A button to copy the code can help a lot.
I think these are the features that it is lacking for now. I will love to see what else it can do in the near future.
The article got quite lengthy while testing the Rix chat's code-writing mode. If you have any suggestions or questions about the article, my writing style or anything or even if you want to say hi 👋. comment it out It will help me provide motivation to conduct such tests, and write and share what I think and have learnt over the past years or what I am learning.
Thank you 💖 for reading.
See you in the next article👋. Till then keep banging those keys hard 😉, and you will one day reach your goal.