DEV Community: mishmishel

My Ruby on Rails Application

mishmishel — Sat, 23 Dec 2023 08:23:28 +0000

Over the past couple weeks I have been working on creating a Ruby on Rails application. It was definitely a great learning opportunity and I am so grateful for the amount of things I have learned whilst creating this project.

Beginning the Project

I decided that I had wanted to created an application that I would be able to utilise as the backend for my Phase 5 project (a full stack web application). I already had some ideas as to what I would like to create in the Phase 5 stage of the course so I decided that the best course of action would be to create a backend I would actually be able to utilise later in the course.

The Idea

I decided to combine my interests by coding a Street Dance event management application. I decided upon this as it would be something I could be proud of as it is the perfect joining between Street Dance (a hobby of mine) and Software Development. As well as that, it could be something my community in the Street Dance scene could utilise. To outline my idea: the Street Dance event management application would allow dancers to see events (such as battles and jams) in Sydney, express their interest, or create events of their own. It would include some other features as well such as searching events by dance style, commenting on events, joining events etc.

Challenges

Since this project was for an assignment, I had to meet a lot of requirements to ensure my application met the set out parameters - this was definitely a challenge for me. Firstly, it had to use the Ruby on Rails framework (obviously) but reading the rest of requirements made me feel quite overwhelmed. To combat this challenge, I tried to work on each requirement one by one to ensure I was meeting the project requirements. However, I still submitted the assignment without meeting the user authentication requirements due to time constraint and so currently, users only login via their username:

Obviously, I am quite upset at the fact that I wasn't able to meet all the project requirements by the due date, however, I am confident that I will be able to get these features up in running soon!

Another issue I had encountered was the fact that I didn't create all my models in the beginning and instead created them one by one as I required them. This was an issue as it made it harder to wrap my head around the different relationships I wanted each model to have with one another and so it definitely took more mental effort to decipher what I originally wanted to do. However, after some work and a discussion with my mentor, I was able to establish the relationships between various models and get the application working as expected!

Some of my models and their relationships:

My Favourite Part

My favourite part was definitely working on the routes. Whilst I was working on the routes, I was rewatching previous lectures where my mentor discussed how to create them and where each route leads. I definitely enjoyed creating every single route and being able to observe how my application was becoming more cohesive with each coding session. I definitely became more excited with each route I created!

Conclusion

Overall, working on this application has definitely made me excited to learn more about software development and to be able to create a full stack web application over the Summer! It finally feels as though I am getting better!

Reflecting on my first CLI Application

mishmishel — Sat, 28 Oct 2023 01:43:22 +0000

Introduction

Over the past few weeks, I have had the pleasure of diving into the world of Ruby and CLI Applications in Ruby. All my previous efforts in studying and working with Ruby have allowed me to create my first ever CLI Application.

Everyone who begins learning software development wants to create applications that are useful and can benefit the average person. This is why when I was tasked with creating a CLI Application for my Phase 3 Project, I decided to create an application that I and my friends would benefit from. The result? A CLI Application in which users can easily find meanings of words as well as their synonyms. A dictionary helper, if you will.

Requirements

The requirements for my Phase-3 Project were:

Provide a CLI
Your CLI must provide access to data from a web page
The data provided must go at least one level deep

These requirements are quite versatile and I appreciated the fact that I could make a wide variety of different applications with these requirements. My first step was to come up with an idea that would check all the requirements!

My Idea

In the last lesson of Phase 3, my teacher provided us with an excellent example of a CLI Application: A Pokedex App. I drew inspiration from his app in which he utilised a Pokedex API to allow users to search for Pokemons and catch them. I decided to create a similar app but one which I would use frequently: a dictionary helper! My app draws data from a dictionary API and allows users to enter words they would like the definitions of as well as enter words they would like the synonym of.

Writing my CLI Application

The heart of my project was the run.rb file, in which I wrote the Ruby code to run my CLI application. There I defined various classes and methods to ensure my application ran smoothly and was user friendly.

Here's a glimpse into the Menu method from which users are able to select the option they want to explore:

def menu
        puts "Menu:".blue.bold
        puts "#{".dictionary".green.bold}\t - to search for a word's definition"
        puts "#{".synonym".green.bold}\t - to explore synonyms of words"
        puts "#{".exit".green.bold}\t\t - to exit out of Dictionary Helper"

        puts "Please enter your choice from the options above:".red
        gets.chomp 
    end

The main menu serves as a guide to users - presenting them with options and allowing them to interact with my application. I tried to keep my prompts short and understandable, so there would be no chance that users would get confused when running my application.

As seen above, I utilised the colorize gem to colour various texts when users run my application. I did this in an attempt to make my application more visually stimulating and to make it easier for users to read the prompts.

Building Functionality

One challenge was handling errors to ensure my application ran smoothly and so that users can understand the issue if they encounter one. For example, if they enter a word that is not in the dictionary API.

if !word_data.empty?
                    meanings = word_data[:meanings]

                    meanings.each_with_index do |meaning, index|
                    part_of_speech = meaning["partOfSpeech"]
                    definitions = meaning["definitions"]

                    puts "Meaning #{index + 1}: #{part_of_speech}".blue.bold
                    definitions.each_with_index do |definition, def_index|
                        puts "Definition #{def_index + 1}: #{definition["definition"]}".blue
                    end
                end
                elsif word_data.empty? 
                    puts "Word not found.".blue
                end

As you can see above, if a user enters a word that is not in the dictionary API I drew from, my application will return "Word not found." This was my attempt to prompt users to enter valid words instead of joking around and entering gibberish.

Conclusion

In conclusion, creating this application was a very fun and very rewarding task. I look forward to honing in on my skills more and creating more fun yet useful applications.

Reflecting on my first React app

mishmishel — Thu, 10 Aug 2023 02:05:24 +0000

Introduction

When I first began learning about React I was extremely confused when it came to importing and exporting components, how to structure an App efficiently, and how to decide how many components were needed. However, after creating my first ever React app, I gained some much needed confidence when it came to using this framework.

My React app isn't perfect, and I'm sure that I missed a few mistakes when debugging, however, creating this app made me really excited about the future projects I'll be able to create and work on.

For my Phase-2 assignment, I was tasked with creating a React single page application from scratch which must include:

At least 5 components
3 client-side routes
A json-server to create a RESTful API
Some CSS styling

Creating the App

I decided to create a diary app in which users can type in diary entries and view previous diary entries. For my previous assignment in Phase-1, I created a To-Do List App, so a diary app was a logical step up for me.

I began planning my diary app (in my real-life paper diary nonetheless) and decided upon this course of action:

Initial setup (of React, json-server etc)
Plan Layout (How many components? What components?)
Create components (Just the blueprint of the app)
Implement react router (My favourite part of the app)
Build components (Adding meat to the bone)
Code interactions with json-server
Additional features?

You may be surprised to see that CSS styling is not on this list but that is because I worked on the CSS styling throughout the project, instead of dedicating a set time for it. I also tested and debugged my app throughout its creation.

Overall, I decided that I wanted to create a diary app where users can enter a diary entry with a date, title, and content (obviously), view previous diary entries, and filter previous diary entries by date. My diary app would have 3 main pages: Home, New Diary Entry, and View Diary Entries - and a 4th page nested in View Diary Entries where users can open each diary entry individually to see more information.

My Favourite Part

My favourite thing to work on during the creation of my diary app was the client-side routing.

I used a switch statement in my App component so that my app only renders the first route that matches the URL. I had to add an exact path so that the Home component wasn't displayed whenever / was followed by anything.

function App() {
  return (
    <div>
      <Navbar />
      <Switch>

        <Route exact path="/">
          <Home/>
        </Route>

        <Route path="/newdiaryentry">
          <NewDiaryEntry/>
        </Route>

        <Route path="/viewdiaryentries/:id">
          <EntryDetails />
        </Route>

        <Route path="/viewdiaryentries">
          <ViewDiaryEntries/>
        </Route>

        <Route path="*">
          <h1>404 not found</h1>
        </Route>

      </Switch>
    </div>
  );
}

export default App;

I ensured that my paths reflected what the user would be doing at the moment and that users would be able to input a URL to navigate to the page they need to see.

Things I struggled with

Because of some unforeseen circumstances in my life, I was unable to complete work on the Phase-2 modules for a couple of weeks. This meant that I had to learn some concepts 'on the go' when working on my app and that I had to utilise concepts that hadn't yet solidified in my brain.

For example, the fact that when you update state, it's important to pass in a new object to the set state - therefore, you have to use the spread operator to make a copy of the object. I forgot this fact and so had to tinker a little with my code before I got some things working.

You can see the spread operator in my code in my handleInputChange function in my New Diary Entry component.

 const handleInputChange = (e) => {
        const { name, value } = e.target;
        setEntry(prevEntry => ({
        ...prevEntry, /* Spread operator creates copy of current entry state object and updates property by name with new value */
        [name]: value
    }));

The above function determines what property of the entry object needs to be updated, uses the spread operator to create a copy of the entry state, and updates the property specified by name with the new value.

Additional Features

After meeting the Phase-2 assignment requirements, I decided to add an additional feature: filtering diary entries by date. This is a very simple feature and it was quite easy to add, however, it made my site so much more interesting!

I really would've liked to add more additional features but I was quite pressed on time and wanted to focus more on building the React components and client-side routing.

Despite the fact that this app was for an assignment, I will continue working on it even after submitting. Ideally, I would add more interesting features, for example: a favouriting feature, search bar, more interactive UI, etc.

Conclusion

In conclusion, I am quite happy with the app I have created in the given time frame and I look forward to experimenting more with the React framework.

How I created my first ever web application

mishmishel — Fri, 16 Jun 2023 02:05:33 +0000

Introduction

Hello, my name is Mishel and I am studying to become a full-stack web developer. But! I won’t get ahead of myself - I’m still in the beginning stages of web development and have only been getting my hands dirty with HTML, CSS, and JS thus far. In this blog post, I will document the process of creating my first ever web application using HTML, CSS, and JS.

Getting the ball rolling

I believe that the hardest part of any difficult task is getting started - there is no space for worrying or self-doubt here! Because I am creating this application as an assignment for my course, there are certain criteria I have to abide by. In short, I need to create a single page web application that will fetch data from an API or mock server and output dynamic data.

I began with creating a list of goals that my website should be able to achieve. I decided that I would like to make a to-do list application that allows users to create a to-do list and check off completed tasks. My website should:

Allow users to write text into an input form and submit their task
Allow users to check off completed tasks
Allow users to delete tasks (completed or not)
Ensure data is saved on the website so upon refreshing any checked or unchecked tasks are still on the page and deleted tasks do not appear

These goals allowed me to create a clearer image in my head of what I wanted to achieve and allowed me to begin thinking about what I could do to achieve these goals.

Initial code

The first day of coding was spent creating a framework for my website using HTML and making it ✨ pretty ✨ using CSS. Since my website is a to-do list app, the most important feature is an input field where users can enter their tasks:

<div class = "enter-and-add"> 
<input type="text" id="input-box" placeholder="Write your tasks here!"><button>Add</button>
</div>

I placed the input field and 'add' button into the same div in order to easily edit their appearance in CSS.

Meeting project requirements

The next few days were spent making sure that my web application meets the project requirements. Since I am creating this web application for an assignment, there are certain criteria that have to be met. These are the following:

The app must be a HTML/CSS/JS frontend with access to a public API or a mock server
The entire app must run on a single page
It must use at least 3 unique event listeners
It must include at least one instance of array iteration
It must follow good coding practises

These were the hardest few days of the project as I was experimenting with fetch requests and methods to ensure my data was saved to a mock server and that it would load up onto my web application upon the site being refreshed. Working on this section was a headache because I had to commit to a lot of research and trial and error before I got everything working the way I wanted it to.

For example, fetch requests:

fetch('http://localhost:3000/tasks')
.then(response => response.json())
.then(json => {
    json.forEach(task => {
        let li = document.createElement("li");
        li.innerHTML = task.task;

        if (task.checked) {
            li.classList.add("checked");
        }

        listContainer.appendChild(li);

        let span = document.createElement("span");
        span.innerHTML = "\u00d7";

        li.appendChild(span);
    });
})
.catch(error => {
    alert('Failed to fetch tasks from the server.');
});

The code above ensures that if a user refreshes the to-do list app the web application will fetch data from the server to ensure that any tasks that were on the page before the reload will be on the page after. It took me a lot of time researching, asking friends for help, and rereading notes in order to get all my fetch requests working the way I wanted them to. I got very frustrated at times as I searched for tutorials and nothing came up that explained the concept perfectly! I was only able to succeed when I utilised a number of different sources and applied them all together.

However, it was a great learning opportunity for me as I was able to apply concepts that I had learned in class and was able to gain a better understanding of the code that I was writing - all these concepts that once confused me began to make more sense!

What I would do differently next time

Next time I decide to code a website, I would like to focus on applying as many concepts I was confused on as possible. For example, if I find a certain concept difficult during my studies, I'll try to implement it in my project so that I can turn a weakness into a strength and gain a better understanding of the concept and how to use it.

My main takeaway

My main takeaway from this project was that yes, studying concepts is important, but, it is much more important to try to apply and actually implement them in your code because that is the only way you’ll understand them!