I had to do research to hybrid frameworks. To get an introduction I had to pick a hybrid framework, this is to help me understand what hybrid development means and how it works on a technical level.
I had to choose out of a list with frameworks and I choose for Ionic.
Why I chose Ionic
Ionic is easy to learn, and integrates with other libraries or frameworks, such as Angular, React, or Vue. Because it is built on top of Angular and Apache Cordova.
Ionic provides a library of mobile-optimized UI components and tools for building performant apps on the web, iOS, and Android.
Because I had prior to this no knowledge about framworks this one looked the most appealing to me.
The goal of this project
The goal of this assignment was to grasp a basic feeling about programming with hybrid frameworks.
So that I know how to set up a new app, add some UI stuff and some programming algorthm functions.
For that reason I had to build a calculator app in one week.
The calculator
First I started with going through the documentation.
After that I started with installing the Ionic CLI with npm:
npm install -g @ionic/cli
Because I wanted to use Vue I also installed Vue the ssme way as I installed Ionic.
From there I created a new Vue project and navigated the working directory to the newly created project folder.
To ise Ionic with Vue, I needed to add the packages as a dependency to my project, I used the following command:
npm install @ionic/vue
From there I opened my project and in the main.js, I imported the necessary modules to configure Vue to use Ionic.
From threre I looked through the documentation of Ionic to get started.
Now I had the right structure to create the components to start building the calculator.
After I was finished, I run my program locally:
npm run serve
Because I had one week the design itself was not detailed, I mainly wanted to have it function as a calculator.
Difficulties and Solutions
I had to put add some functionallity to perform the calculations, to do that I had to set up some methodes to handle the user interaction and perform calculations
The part where I struggled with was to clear the initial 0 when a button is pressed.
So I asked a classmate to get some more insight in how to tackle this problem.
So I came up with this solution:
If the input is equal to 0 and when clicked on the button C the initial should be cleared.
Final result
