Vue + Ionic 4 Project - Week 003 - Messy

in blog •  6 years ago 

Today, I got nothing to show you as right now the app is being restructured. Once I figured out how things worked with Uber and Lyft then I decided to redo the section displaying the different “drivers” for this app. Regardless, I will discuss what I did and learned with the app besides I can not make up my mind. Hey! It is my sandbox!

I added two new Mixins:

  1. Ionic Mixin

  2. Error Mixin

IonicMixin is a place to store any repeated functionality related to the Ionic library. This will include the ToastController to handle any short message prompts from interactions of the user. Eventually, I will add a LoadingController to show the loader, but at the moment I am unsure how to handle the present() and dismiss() methods if I retrieved the loader directly from the Mixin. This will be handy when the user has to wait for data to be retrieved when making a command like grabbing individual driver data.

ErrorMixin is a place to handle error messages that is a common occurance like axios errors, or errors that came from the Node.js server even if it might been from axios. It will take the error object, and convert the data from that object to a string; like a toString() technique. Depending on the HTTP code, different circumstances will happen with the output of the error. Any 500 errors will simply output:

Unable to connect to server

There is an optional task descriptor argument where I can add a small message prepending to the error message to show myself or the user where the problem originated. This could lead to bug reports from the users (hopefully that might not happen often) to me or a developer.

On Node.js side, I decided to bring the conversion data from Vue to Node.js. Conversion data? In order for the two service “driver” data to interconnect I need to take alike data from both sides and merge it into a single class object. Most of Uber and Lyft data structure are similar with some key differences:

  • Uber has several flags for shared riding, upfront fares, and descriptions.
  • Lyft only measures their cost per distance in miles while Uber handles both kilometers and miles.

JavaScript does not handle classes compare to other languages, but later versions had put in “semantic” keywords to allow JavaScript to use classes instead of fancy functions/methods. At the least, you can apply a constructor method into these classes, and inheritance which I did with the driver objects. I first made a simple Driver skeleton class, and a UberDriver and LyftDriver class to better map the native data to the Driver class. It was a fun experiment to work with classes in JavaScript.


On another note, I am starting to work on another project, but this time it is a React app website. I will try to decide what I want do with reporting this project. Right now I am doing this to teach myself React as I will eventually be working with React for my job in the near future.

I got other projects in the pipeline as I go using different technologies.

Posted using Partiko Android

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!