Stories by Anele Mbanga on Medium

How to create an AutoComplete input in Ionic 7?

Anele Mbanga — Thu, 15 Feb 2024 02:30:38 GMT

Figure 1: SithasoIonic7 Wireframes

I’ve been looking for a way to create an auto-complete input in Ionic 7. This I needed for my bespoke CLI (command line interface) for the wireframing application I’m developing.

A week or so ago, I added voice command to this Ionic Application, which enables one to dictate commands to the app and then it executes whatever is needed. You can see these videos on Youtube, Part 1 and Part 2.

The ion-input component does not expose the native input component, thus adding a “list” attribute and a component to ion-input does not work. One needs another solution.

The CLI functionality I want to add must have a list of available commands so that when one types in the input, auto-complete is fired and one can then choose a command and press enter. This is depicted in Figure 2 below.

Figure 2: SithasoIONIC7 Wireframes — AutoComplete List

As one has noted, some of the items in the auto-complete list are “3”, “3 view”, “all properties” etc. A user will type a command in the section depicted in Figure 3.

Figure 3: SithasoIONIC7 Wireframes — AutoComplete Input.

To create this component, we used an ion-item, input, ion-button and ion-icon. The HTML code for this looks like this.

We used an ion-item to host the input component. In the input component we set an attribute called “list” to “txtautocompletelist”. To properly format the input, we added the “native-input sc-ion-input-md” class. This makes the input to be like any other normal ion-input component.

 fill="outline" shape="round" 
style="padding-left:0px;padding-right:0px">
list="txtautocompletelist">
style="--padding-start: 0px; --padding-bottom: 0px; 
--padding-end: 0px; --padding-top: 0px;">

The list is then created with the datalist tag and we use a collection of option tags to specify the list items.

The ion-item has a button icon in the end slot. This enables one to have a click event, which can then read the value of the input and process further.

One can then use JavaScript to clear the datalist options and add new ones according to their needs.

Happy coding.

Check me out on Github and on my YT Channel for more content.

Check out my other thread about Ionic7 Wireframes

How to create a Numeric Keypad in Ionic 7

Anele Mbanga — Tue, 16 Jan 2024 07:17:32 GMT

Photo by Susan Holt Simpson on Unsplash

Figure 1: Numeric Keypad

By the end of this article, you would have learned how to create a numeric keypad like the one depicted in Figure 1.

To be able to create this numeric keypad, we use the ion-grid, ion-row, a collection of ion-col and ion-button components. We will make the size of each ion-col to be 4, so that we have 3 buttons on each “row”. We will also make our buttons round. There is one button with an ion-icon which will act as back-button, this is like the backspace button in the keyboard.

The Ok, button is assumed to return every value that has been entered when a user clicks any of the buttons. Let’s look at the HTML code to design this numeric keypad.

        id="button1row1" mode="ios">            size="4">                style="--border-radius:50%;aspect-ratio:1/1;height:62px;width:62px">1            id="button1col2" mode="ios" size="4">                mode="ios" shape="round"
                style="--border-radius:50%;aspect-ratio:1/1;height:62px;width:62px">2            id="button1col3" mode="ios" size="4">                mode="ios" shape="round"
                style="--border-radius:50%;aspect-ratio:1/1;height:62px;width:62px">3            id="button1col4" mode="ios" size="4">                mode="ios" shape="round"
                style="--border-radius:50%;aspect-ratio:1/1;height:62px;width:62px">4            id="button1col5" mode="ios" size="4">                mode="ios" shape="round"
                style="--border-radius:50%;aspect-ratio:1/1;height:62px;width:62px">5            id="button1col6" mode="ios" size="4">                mode="ios" shape="round"
                style="--border-radius:50%;aspect-ratio:1/1;height:62px;width:62px">6            id="button1col7" mode="ios" size="4">                mode="ios" shape="round"
                style="--border-radius:50%;aspect-ratio:1/1;height:62px;width:62px">7            id="button1col8" mode="ios" size="4">                mode="ios" shape="round"
                style="--border-radius:50%;aspect-ratio:1/1;height:62px;width:62px">8            id="button1col9" mode="ios" size="4">                mode="ios" shape="round"
                style="--border-radius:50%;aspect-ratio:1/1;height:62px;width:62px">9            id="button1col10" mode="ios" size="4">                id="button1btnminus" mode="ios" shape="round"
                style="--border-radius:50%;aspect-ratio:1/1;height:62px;width:62px">-            id="button1col11" mode="ios" size="4">                mode="ios" shape="round"
                style="--border-radius:50%;aspect-ratio:1/1;height:62px;width:62px">0            id="button1col12" mode="ios" size="4">                mode="ios" shape="round"
                style="--border-radius:50%;aspect-ratio:1/1;height:62px;width:62px">.            id="button1col13" mode="ios" size="4">                id="button1btnback" mode="ios" shape="round"
                style="--border-radius:50%;aspect-ratio:1/1;height:62px;width:62px;--padding-start:0px;--padding-bottom:0px;--padding-end:0px;--padding-top:0px;">                    id="button1btnback_icon" mode="ios" slot="icon-only"
                    name="backspace-outline">            id="button1col14" mode="ios" size="8">                expand="block" mode="ios" shape="round"
                style="height:62px">Ok

The parent element for the numeric keypad is a grid with centered text. To center the text we use the class ion-text-center. We then add a single ion-row which will host all the ion-col + ion-button combinations.

We set the size of each ion-col to be 4. 4x3 = 12, which makes each “row” to span 12 spaces in the grid, making each column to be wrapped beneath each “12 spaces row”.

You will note that for each button we have set the shape attribute to round. I discovered that as much as this is set, it makes our buttons “oval” shaped, so I needed to apply styles to each button.

To make the buttons a perfect round shape, we added styles, a border-radius of 50%, aspect-ratio of 1/1 and then set a fixed width and height of 62 pixels.

The other interesting button is the back button. This button has an icon. The trick here was increasing the size of the icon. If one sets the font-size on the ion-icon, it does not work. I discovered that setting the padding on the button to 0px, on all sizes, fixes the ion-icon perfectly in place.

The best approach to increase the ion-icon font size is setting the zoom style attribute, discovered on stack overflow. I didn’t play enough with the font-size to see the cases it worked or didn’t work.

The Ok, button is a block button which takes up 8 spaces. This is done to add emphasis on the button.

One can then add events to the buttons and process the values clicked on each button. We won't expand on that here.

Happy coding.

Check me out on Github and on my YT Channel for more content.

Check out my other thread about Ionic7 Wireframes

Stackademic

Thank you for reading until the end. Before you go:

Please consider clapping and following the writer! 👏
Follow us X | LinkedIn | YouTube | Discord
Visit our other platforms: In Plain English | CoFeed | Venture

How to create a Numeric Keypad in Ionic 7 was originally published in Stackademic on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to create Numeric or Password or Text OTP Input in Ionic 7

Anele Mbanga — Tue, 16 Jan 2024 05:16:47 GMT

Source: Vecteezy

By the end of this you would have grasped how to create OTP input using Ionic 7. We will create three different types of OTPs. One for numbers, another for password and another for normal text. Our OTP can be of variable lengths, being 4, 5 or 6 characters as depicted in Figure 1 below.

Figure 1: OTP Input

We will look at the HTML to create this OTP input. To create our OTP, we use a ion-grid, ion-row, ion-col and some ion-inputs. The minimum and maximum length of each input has been set to be 1, to only allow 1 character. The size of each column has been set to 2.

The Numeric OTP

Figure 2: Numeric OTP

The fist OTP is composed of 1 ion-grid, 1 ion-row, 4 ion-col and 4 ion-input components. The size of each ion-col has been set to 2. The type attribute for each of the ion-input inside the ion-col has been set to “tel”, this will allow for a numeric keypad to be shown on mobile devices. The HTML design of this OTP is depicted below.

By setting our ion-input mode to “md” and the fill to “outline” we are able to have a border around the ion-inputs. We have however adjusted the border radius style of the ion-inputs to make it more rounder.

2. The Password OTP

Our password OTP hides the text entered because each of the ion-input “type” attributes has been set to input. In the example above we created 4 inputs, this example has 1 additional input, making our OTP length to be 5 characters.

Figure 2: Password OTP

Let’s look at the HTML structure of the password OTP as depicted in Figure 2.

You will note that this HTML code is not very different from the one above. In this instance we have an additional ion-col with an ion-input component. The type attribute for each of the ion-inputs has been set to password, completing our mission.

3. The Text OTP

Figure 3: Text OTP

You guessed it right, the text OTP, means that each of the ion-input components will receive an attribute value of “text” for the “type” attribute. Let’s take a look in the HTML below.

In this example, we have created 6 rows and 6 input components. Each input component type attribute has been set to text, so that it can allow text.

Congratulations, we have just successfully created our 3 types of OTP inputs, one to take numbers, one to take a password and another one to take any text. All of these accept 1 character per input component.

Happy coding.

Check me out on Github and on my YT Channel for more content.

Check out my other thread about Ionic7 Wireframes

Stackademic

Thank you for reading until the end. Before you go:

Please consider clapping and following the writer! 👏
Follow us X | LinkedIn | YouTube | Discord
Visit our other platforms: In Plain English | CoFeed | Venture

How to create Numeric or Password or Text OTP Input in Ionic 7 was originally published in Stackademic on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to Create “Instagram” Stories in Ionic7 with SwiperJS —The Vanilla JavaScript Approach

Anele Mbanga — Mon, 08 Jan 2024 08:17:29 GMT

You can check out the Demo App on Vercel

Figure 1: Stories with SwiperJS

By the end of this, you will have learned how to make the ion-badge round and also center the ion-icon inside it. You will also learn how to put a ion-badge inside an ion-avatar, add padding to the avatar and also add a border to it. You will also learn how to use SwiperJS instead of ion-slides, but using JavaScript. Our approach is just looking at the HTML.

The current version of Ionic 7 does not have ion-slides anymore. One is able to use SwiperJS to create amazing slider applications. You can see the migration guide here.

In my learning curve about Ionic7, I decided to follow the vanilla JavaScript approach. I am well vested with Vue, but just did not want to learn Angular as yet. We will see with time though about that love and hate relationship. Ha ha ha. For this thread, I’m going to make a silly assumption that you know a thing or two about JavaScript, using the script tag, etc.

Anyway, the SwiperJS documentation has details in terms of how to get started installing Swiper in your project, so we won’t address that here. You can see the Get Started section here.

In the implementation above, each slide has an ion-avatar with padding and a border. The first slides’ avatar has an ion-badge with an ion-icon inside. The badge itself was trickier to make round, however we used css styling to ensure success, like this.


                                    mode="ios" style="aspect-ratio:1/1;border-radius:100%;display:flex;align-items:center;justify-content:center;background-color:#229ce2;bottom:-10px;right:-10px;position:absolute">

Using absolute positioning on the badge, we have set its bottom and right style properties to -10px. You can change these to suit your needs to place the badge on either TL, BL, TR, BR, the example above is for BR (Bottom Right). Due to the “badge-icon” being on the bottom right, we also set the margins of the avatar to be increased so that the badge can show.

If you happen to place the badge on either position, be sure to increase the margins also.

What I also found helpful was this TypeScript source code from the Ionic Framework documentation about ion-slides about the settings that were used before.

To make the swiper work, as above, the SlidesPerView property was set to 4.5. Below is the complete slider html source code as depicted in Figure 1.


    
        
            
                                    mode="ios" style="aspect-ratio:1/1;border-radius:100%;display:flex;align-items:center;justify-content:center;background-color:#229ce2;bottom:-10px;right:-10px;position:absolute">

Ohh yes, instead of inline styling, you can use css class names and put the styles there and just pass the class name instead of using the “style” attribute in the HTML. That will also eliminate the duplicated styles everywhere. Gosh, using TailwindCSS methodologies I see. Besides, we all have different coding styles.

For an Angular Perspective, Simon has written a well documented approach here. You might find it very useful.

As noted above, by seeing from the attached HTML, we have learned how to create a swiper with slides. Each slide has an avatar with a border and padding. The first avatar has an ion-badge, which has an ion-icon. We saw how styles were applied to center the ion-badge ion-icon and make the badge round.

Happy coding.

Check me out on Github and on my YT Channel for more content.

Check out my other thread about Ionic7 Wireframes

PlainEnglish.io 🚀

Thank you for being a part of the In Plain English community! Before you go:

Be sure to clap and follow the writer️
Learn how you can also write for In Plain English️
Follow us: X | LinkedIn | YouTube | Discord | Newsletter
Visit our other platforms: Stackademic | CoFeed | Venture

How to Create “Instagram” Stories in Ionic7 with SwiperJS —The Vanilla JavaScript Approach was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to add a badge to a button in Ionic 7

Anele Mbanga — Sat, 06 Jan 2024 22:16:46 GMT

Photo by Joao Tzanno on Unsplash

Let’s add a badge to a button, and place it on the top right corner of the button in Ionic 7.

Figure 1: Button with Badge

I wanted to add a badge to a button on either side, whether top left, top right, bottom left or bottom right. This is how I did it.

With some tweaking and enabling overflow:visible style on the (native) button, I was able to see the badge.

I have defined my button-badge HTML code like this, with some inline styling.



    Button
    
    style="aspect-ratio:1/1;border-radius:100%;display:flex;align-items:center;justify-content:center;background-color:#AF08F5;font-size:0.8em;height:30px;width:30px;right:-30px;position:absolute;top:-30px">
20

With Ionic, due to the button using “shadow”-ing, applying overflow:visible style directly on the button itself won’t work. Part of the badge will be shown and the rest cut off. To fix this proble, the overflow style needs to be applied to the native button internal to ion-button.

As per documentation for the ion-button, the shadow part for the button is called “native”

Figure 2. Button Native Part

So to apply the overflow:visible, so that the badge shows properly, we add this css rule.

#button1::part(native) {overflow:visible}

There you have it. Happy coding.

Check me out on Github and on my YT Channel for more content.

Check out my other thread about Ionic7 Wireframes.

Stackademic

Thank you for reading until the end. Before you go:

Please consider clapping and following the writer! 👏
Follow us X | LinkedIn | YouTube | Discord
Visit our other platforms: In Plain English | CoFeed | Venture

How to add a badge to a button in Ionic 7 was originally published in Stackademic on Medium, where people are continuing the conversation by highlighting and responding to this story.

SithasoIONIC7 Wireframes: A Step-by-Step Guide to Professional Ionic 7 Mobile Apps Designs

Anele Mbanga — Mon, 27 Nov 2023 10:35:51 GMT

Some time ago I spoke about Unboxing SithasoIONIC7 Wireframes, a Web App that I have been working on that runs inside PocketBase to create wireframes / mock ups for Ionic7 mobile apps.

Figure 1: SithasoIONIC7 Wireframes

The SithasoIONIC7 Wireframes WebApp is free to use and you can download it here. After you download it, unzip the file and double click the file named run_server_9090.bat. You will also need to ensure that port 9090 is not firewall blocked.

This will start PocketBase and then open your default web browser. If all goes well, you will see the Figure 1 depicted above in your browser.

Figure 1 above shows a reproduction of the ion-tabs example from the ionic documentation here.

Figure 2: ion-tabs (Source: Ionic Documentation)

The wireframes webapp is being built to help anyone who wants to build their Ionic wireframes. One can be a beginner who is learning Ionic. The app itself is built using vanilla javascript, using the best of ionic framework components.

One can also download their wireframes as images for later use and also is able to get a custom view guide for using SithasoIONIC, a b4x library to develop Ionic mobile apps using the b4x rapid application development framework. The b4x rapid application development framework allows anyone to develop Android, iOS, Arduo, Desktop Apps (Java) using a simple programming language called b4x, which is similar to visual basic and very powerful. All the code you write is transpiled to native code i.e. java, xcode and or javascript depending on what you are doing.

Due to this WebApp evolving, we have now included a guiding document for starters. This can be used with the Abstract Designer and is also applicable to use on the SithasoIONIC7 Wireframes app.

Instructions in the document are as simple as…

1. maincontent

The maincontent (ion-content) element will host your whole application. It will contain the ion-menu and ion-page (div with ion-page) class. This component is not visible to the eye.

1. In the B4J IDE, click the ‘Designer’ menu option.

2. Click ‘Open Internal Designer.

3. Close the ‘Form (WYSIWYG Designer)’ if its open.

4. Right click on the layout and click ‘Add View’.

5. Select ‘Custom View’. This is the menu item that you will use to add the components defined below. Clicking an item will place the component in the layout.

6. When adding components to the layout designer, you might need to resize them to fit or shrink. Usually the first item should be enlarged to fit the area where more components will be added.

7. Now, let’s start adding the components to the layout. To add each component, you will use ‘Add View’ > ‘Custom View’ and then select the component from the menu.

8. NB: It’s not compulsory to specify the ‘ParentID’ property. It has been added for very specific few cases.

********** 1 **********

Right click ‘Add View’, then ‘Custom View’, then click ‘SHIonContent’.

Change the following properties for the ‘SHIonContent.maincontent’ component.

Name -> maincontent

Ion Page -> false

Please note that the instructions above might not make a lot of sense as yet, however, if you have read my article about using the b4x Abstract Designer, you might be on familiar ground. You can however quicky dive into this old article: Introduction: Develop Cross Platform Apps using B4X for reference.

There are 2 videos that I have completed to take you through how to start creating your wireframes for Ionic.

https://medium.com/media/69baa3bec81ebfb2e8a60e23a002a5de/href https://medium.com/media/683b8adf4560ce2e3242a02bf85b6e32/href

Thank you so much for taking time to read the article. If you are using Ionic Framework, please give the tool a try and send me your feedback. I appreciate any kind of feedback that’s helpful.

Check me out on Github and on my YT Channel for more content.

Happy Ionic coding!

Unboxing SithasoIonic7 Wireframes App— The ion-component

Anele Mbanga — Thu, 09 Nov 2023 14:16:43 GMT

Good day. We want to demonstrate how our bespoke wireframe application works. This app has been built with the Ionic Framework, using Vanilla Javascript. We will recreate demos from the Ionic Documentation. We will start with the ion-content component and built it with the demo using our wireframe application.

The content component provides an easy to use content area with some useful methods to control the scrollable area. There should only be one content in a single view.

You can check this reel out about what we are trying to do here.

https://youtu.be/opY5GmO6GQ0

Here we go, we want to create this UI using our wireframe app.

Figure 1: ion-content from Ionic Framework website

Our application has been built from the ground up using Ionic 7 framework and is powered by b4x, which later transpiles it to javascript.

Figure 2: SithasoIonic7 Wireframes App

The application is split into 3 sections, these are navigation on the left, view area in the middle and on the right, the properties area.

Lets create the ion-content component, we go to pages and then select content. This will activate the properties of the component for us to change them.

Figure 3: Navigation > Pages > Content

In the properties section, we can update the ion-content name, color and other settings.

Figure 4: ion-content properties / settings

As this is the first component on the layout, we will set the Parent Component to — none — . We want this to be displayed on the device preview, so we also check that.

We can also change the color of the component, by choosing a color from the provided list.

Figure 5: Changing the color property.

Figure 6: Color set to “success”

We want this component to have ion-padding and ion-page classes added to it, so we check these properties on the settings bag.

Figure 7: ion-padding & ion-page classes

The toolbar, provides a way to save, clone and delete any component we have added. After updating the settings, we save the component.

Figure 8: Saving the component

We have finished with the ion-content, let’s now add the headings and paragraphs. To do that we go to Typography and choose the heading we want. We ensure that the parent component is the ion-content component we created before, and then change the text to be heading 1.

Figure 9: Heading 1

We will then continue adding the rest of the headings like this one. All the components created will be added to the device preview so that we can see how our wireframe looks like. I will change the device to see how the currently added components will look like on another device, an ipad-mini.

Figure 10: Wireframe in another device

For our last component, the paragraph, we set Lorem Ipsum and Wrap Content to true. We want out paragraph text to be a lorem ipsum text and it should be wrapped.

Figure 11: Settings for paragraph.

For child components, the Parent Device property should always be false and only true for the main parent component. We save our component and then refresh our wireframe.

To view the wireframe on different devices, we go to Devices and choose the device we want.

Figure 12: Devices

Thank you for reaching the end of this article. Appreciated.

You can…

Read, How to Create Ionic 7 Apps in Vanilla JavaScript with No Frameworks.

Reach me on GitHub

Check out SithasoIONIC7 on the b4x forum

In Plain English

Thank you for being a part of our community! Before you go:

Be sure to clap and follow the writer! 👏
You can find even more content at PlainEnglish.io 🚀
Sign up for our free weekly newsletter. 🗞️
Follow us: Twitter(X), LinkedIn, YouTube, Discord.
Check out our other platforms: Stackademic, CoFeed, Venture.

Unboxing SithasoIonic7 Wireframes App— The ion-component was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to Create Ionic 7 Apps in Vanilla JavaScript with No Frameworks.

Anele Mbanga — Mon, 25 Sep 2023 08:17:31 GMT

No Angular, no Vue, no React, and no TypeScript — Header

Continue reading on JavaScript in Plain English »

Let’s create a full-stack Mini CRM WebApp with TailwindCSS CSS and MySQL — Part 1

Anele Mbanga — Tue, 01 Aug 2023 06:16:31 GMT

Create a Full-Stack Mini CRM WebApp with TailwindCSS, CSS and MySQL

Part 1

The purpose of our CRM app is simple, as demonstrated in the dashboard below. This includes the following:

Figure 1: Dashboard

Customer Details: name, email addresses, telephone numbers, etc
Reminders: things to be reminded about pertaining to customers
Communication: communication done with customers
Emails: emails sent to customers. We use EmailJS for sending the emails using fetch
Appointments: meetings held or to be held with customers
Tasks: tasks done or to be done
Documents: documents can be uploaded and shared
Email Templates: templates used to generate emails sent to customers

Personally, I am using the same application, which I conceptualized and created, and my version uses a PocketBase back-end and Web Server.

To develop this WebApp, we will follow the same approach we used when we created the Vehicle Expense Tracking WebApp.

Before we delve deeper into this topic, perhaps let's look at the toolset we are using on this reel titled: Installing SithasoDaisy and creating you first TailwindCSS & DaisyUI WebApp using b4x

https://youtu.be/LOMSJ_lkg0Y

Now, let’s take a look at the various sections of the WebApp. We will start with the Side Drawer so that you can see the basic building blocks of our application. These are the (a) abstract/visual designer and (b) b4x code. Both are later transpiled to JavaScript, HTML, and CSS. These will help us create the amazing CRM WebApp we want.

Side Drawer

The side drawer is meant for one to access modules of the app from any screen.

Figure 2: Side Drawer

As seen in Figure 3, we have a base layout that has a navigation bar and a side drawer. When we navigate to other pages, the “view” or

component within the body of the page is used. To create this view, we have used an abstract designer and dragged and dropped the components we need.

Figure 3: Base Layout

Each component that we put in the Abstract Designer is then updated using a property bag, as demonstrated in Figure 4 below.

Figure 4: Side Drawer Property Bag

The name of the side drawer is appdrawer, and is the unique id that identifies it. It will be placed inside the body element of our HTML page.

In Figure 5 below, we have run ‘inspect element’ from our web browser when our app is running to see the placement of the drawer.

Figure 5: Inspecting the Side Drawer from the browser

The code to build the Side Drawer menu items is rather easy to follow, as seen in Figure 6. It is written in a coding language called B4x. Yes, some internal code runs when we add each page link to the drawer, like getting the page name, icon and then establishing how to show the page when its selected. The end result of this code is what one sees in Figure 7.

Figure 6: Side Drawer Code to add menu items

Figure 7: Side Drawer Menu

Above, we introduced you to the basic building blocks of our application. We have used the b4x abstract designer, written b4x code, and seen the end result of our code on the browser element inspection.

When building the rest of the application, we will follow the same approach to build these screens with CRUD functionality.

In Part 2, we will look at a step-by-step process of how we can easily create this beautiful TailwindCSS WebApp using the DaisyUI component framework.

We will also look at how to create these awesome product tours.

https://youtu.be/5UIYYntO4As

TailwindCSS WebApps using b4x

Let’s Create a Vehicle Expense Tracking App with a SQLite Web Server and Tailwind CSS

Cloning the Expense Tracker to TailwindCSS, DaisyUI, PocketBase & ChartJS

Running a web-scraper on my TailwindCSS Website

Using PocketBase (Firebase Alternative) for your WebApps.

You can catch me on Github and YouTube.

More content at PlainEnglish.io.

Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.

Let’s create a full-stack Mini CRM WebApp with TailwindCSS CSS and MySQL — Part 1 was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.

Let’s Create a Vehicle Expense Tracking App with a SQLite Web Server and Tailwind CSS

Anele Mbanga — Thu, 11 May 2023 11:17:18 GMT

See Netlify Demo hosted on PocketHost

A vehicle expense tracker app typically keeps track of expenses for your vehicles. This could be expenses like an oil change, repairs, tires, toll fees, fuel, etc. It can also keep track of meter readings for your vehicles.

A vehicle has a make, a model, and a type. It has a particular number of seats. A make can be a Toyota, a Honda, or a Mercedes, for example. The model could be the Camry (Toyota), the Ballade (Honda), or the C-Class (Mercedes).

We will keep a record of these makes, models, and vehicle types. These will be used to create our vehicle lists.

Let us watch the Demo of this WebApp in action.

https://youtu.be/3kwF89O6sx8

Our IDE

Before we delve deeper into this topic, perhaps lets look at the toolset we are using on this reel titled: Installing SithasoDaisy and creating you first TailwindCSS & DaisyUI WebApp using b4x

https://medium.com/media/908e3ed582146d168f79d52c8f0747c7/href

And then we can look at the app developing process.

Vehicles

Each vehicle on our list will have a picture. Figure 1 below depicts a typical form to capture the details of each vehicle.

Figure 1: Vehicle Form

Expenses

To capture expenses, we will need the expense types. The expense types can be oil change, repairs, tires, toll fees, etc. These expense types help us classify our expenses and can be used to draw a chart of our expenses over time. Figure 2 depicts a form to capture vehicle expenses.

Figure 2: Vehicle Expense Form

Fuel Logs

We want to record the quantity of fuel we are purchasing for each of our vehicles. To do this, we will create a form to capture our fuel purchases. We depict our fuel logs form below in Figure 3.

Figure 3: Fuel Logs Form

Reminders

We want to be reminded of milestones in our vehicles' lives. This could be taking a vehicle for service, fluid checks, tire checks, etc. To do this, we will create a form like the one depicted in Figure 4.

Figure 4: Reminders Form

Meter Readings

We can log the kilometers traveled per day for each vehicle too. The form will have a vehicle, a date, and start and end kilometers, as depicted in Figure 5 below.

Figure 5: Meter Reading Form

Lists

To ensure data integrity for our app, we will create lists. These lists will have details for our car models, car makes, car types, and expense types.

On each list, there will be a unique identifier and the name of each item. The identifiers will be hidden in our forms, and only the name will be required.

Figure 6: Car Makes

Figure 7: Car Models

Figure 8: Car Types

Figure 9: Expense Types

SQLite WebServer—Backend

The backend for our app, which we will use to store our records for our vehicle tracking app, will be a SQLite database. It is called PocketBase.

PocketBase is an open source backend consisting of an embedded database (SQLite) with real-time subscriptions, built-in auth management, a convenient dashboard UI, and a simple REST-ish API.

Figure 10: Pocketbase UI

TailwindCSS — Frontend

Our front end is being developed using a Tailwind CSS-based component framework called DaisyUI.

Figure 11: DaisyUI Components

Development Tools

To develop our application, we will use an IDE called B4J. This IDE looks like this.

Figure 12: B4J IDE

Designing the UI

I will use an existing project to explain how this will work.

We will use a B4J abstract designer. We drag and drop components that later become our user interface. Each component can have events linked to it, for example, a click event for a button or a change event for a select component.

Our pages for each of the forms discussed above will have a table to list existing records and then a modal to capture the details.

Figure 13: B4J Abstract Designer Layout

The component “tblprojects” above becomes the table depicted in Figure 14 below when our web application executes. The table has edit and delete buttons in each row.

Figure 14: Projects User Interface.

Property Bag Forms

The forms in the application are built using a property bag dialog approach. In Figure 13, the property bag component is “pbprojects”.

The various components are defined in a JSON file schema. Each component is defined like this.

Figure 14.1 : Email Input Component JSON Definition

This component builds the “Email” input component depicted in Figure 15.

I will explain how a typical process of adding, updating, and deleting records works below.

Adding Records

Above the table, we have an "add" button. Clicking this button will activate a dialog modal for data entry, as depicted in Figure 15 below.

Figure 15: Adding records

The modal above to add the records is activated by the code below.

Figure 16: Add Source Code

Updating Records

When an edit button is clicked in each row on the table, the “tblprojects_edit” code is executed. This receives a row object of key-value pairs of column names and values for each record.

Figure 17: Edit Source Code

This code also shows a modal dialog where our record is shown for updating. One can click "Save" or "Cancel." Saving will update our backend with whatever changes have been made.

Figure 18: Edit Modal Dialog

Saving Records

When one adds or edits an existing record, one is able to add it to the database by saving it. This validates the content entered when there is required content and then adds a new record or updates an existing record.

All saved records will then be listed in the table, as depicted in Figure 14.

Figure 19: Save Source Code

Deleting Records

When one wants to delete a record from the database, one will click the delete button on the table corresponding to the record to be deleted. This activates a confirmation dialog.

Figure 20: Delete Confirm Dialog

This dialog is activated by this code. It receives the row to be processed and saves it for later processing.

Figure 21: Delete Confirm Source Code

The second part of this code is the actual code that then deletes the record in the database when “Yes” is clicked by the user.

Figure 22: Delete Source Code

This code gets the record identifier and uses that to delete the record from the database.

Summary

In closing, we have summarized what each of the forms in our Vehicle Expense Tracking App will look like. We indicated which backend we will use, the IDE we will use, and how the source code to knit the application will work.

We also explained the various lists that will help with the data integrity of the application.

You can find more articles about this approach here.

Introduction: Develop Cross Platform Apps using B4X

TailwindCSS WebApps using b4x

Using PocketBase (Firebase Alternative) for your WebApps

Cloning the Expense Tracker to TailwindCSS, DaisyUI, PocketBase & ChartJS

How to Sync Individual PocketBase Collection Schemas and Data

You can catch me on Github.

More content at PlainEnglish.io.

Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.

Let’s Create a Vehicle Expense Tracking App with a SQLite Web Server and Tailwind CSS was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.