Hello and Good Morning! Welcome to the last (hopefully) post in this series! (Probably not…)

This is a short checklist of basic things that weren’t covered in the previous posts;

  1. Custom styles 🎀
  2. Images 🖼️
  3. Custom fonts 🗚

Step 1 — Prettify the UI

Going through my app, I was able to see a few things I wanted to change.

Remember those little messages below the input fields in the login, register and reset password pages?

Image for post
Image for post
Error message with underline

I just realized that, since they are essentially <ion-item>, they have a line at the bottom. Not that great.

Thankfully, it’s a simple fix! There’s a global property called no-lines, that you need to add to the <ion-item> like…

Hey all! Last week, we added Firebase and 3 authorization pages (Login, Register and Forgot password), and boy, was that a really long post (Honestly, I got soooo tired halfway through).

This week we will integrate Firebase to all our existing methods.

The coding will be quite simple, as we have already integrated AngularFire into our app. The major changes will be made only to the back-end logic in the home.ts file, and one simple addition to the home.html to handle lists we get from Firestore.

Step 1 — The C in CRUD to Firestore

We’ll first start with adding functionality to the addTask() method. But first we need to import AngularFirestore to the home.ts …

As promised in my first post, we will be connecting this app to Firebase. But I will also be including user authorization (i.e. register, login, forgot password). That’s what we will be tackling today!

Firebase has everything, from authorization to a database to file storage, one of the many reasons it’s a good choice to add to mobile apps. In this post, we will explore Firebase, create a project and make a handler component for Firebase in the app.

Step 1 — Setting up the Firebase console

But first step’s first, you need to create a project on the Firebase console. All you need is a Google account to access Firebase. So head on over here to get started. Add a new project and give it a name (I just called mine ‘Tasks’), agree to everything they ask and hit Create Project. …

In the last post, we implemented the C and R in CRUD for a simple to-do list app. It worked like a charm!

Now, onto the other half of CRUD; Update and Delete.

We will first begin with changing the GUI so that it can fit both the update and delete features. Thereafter move onto the TypeScript code, to show its functionality.

Image for post
Image for post

Step 1 — Change that look

Whoops! Little forgetful ole me! I didn’t change the app name on the home page… 😅😅😅

Go ahead and call it whatever you wish (I’ll be basic with ‘To-do List’).

The first step, to be done in the home.html, is to add the delete button to the left side of each list item. That’s easy! Reuse the very same code I used to include the addTask button next to the input in the <ion-item>, nesting this button within the div with the class item-note, but change that + into an 🗑️icon (don’t want to get confused now, do we?). Since this is a button, give the event handler the name deleteTask(). The button will also have another style class clear, which gives it a clear background. Since this button will be within the <ion-item> that is in the <ion-list>, it will be generated for all items in the list. …

In the last post, we went through the (extremely 😪) lengthy process of getting your app set up. Today, I hope to get started on the first half of CRUD, creating and reading a to-do item. A brief summary of the app structure will be found too.

Image for post
Image for post
Wireframe of the app

What I hope to implement, as seen on the side, is a very simple design; a text input to type the tasks, a button to add it to the list, a list view to view the items and finally a delete button to remove the items from the list. …

Hey all! A new post each week or two, on an up and coming tech topic — Ionic! By the end of this series, the goal is to create a simple CRUD (Create, Read, Update and Delete) to-do list app, which is also connected to an online database, like Firebase.

In this post you will learn how to;

  1. Set up an Ionic Project.
  2. Run it on your browser.

Hybrid Mobile Application — What are they?

Simply put, they are mobile apps created by the easier to learn languages; HTML, CSS, and JavaScript. The beauty of developing a hybrid mobile app is the fact that they can be compiled to work with any platform. …

Hey All! This week we will be looking into a behavioral design pattern, Command. If you can recall from my first post, a behavioral design pattern focuses on how classes and objects communicate with each other. The main focus of the command pattern is to inculcate a higher degree of loose coupling between involved parties (read: classes).

Uhhhh… What’s that?

Coupling is the way that two (or more) classes that interact with each other, well, interact. The ideal scenario when these classes interact is that they do not depend heavily on each other. That’s Loose coupling. …

I’m gonna give you a small scenario.

Say you own a coffee shop, and like any newbie, start out with just two types of plain coffee, the house blend, and dark roast. In your billing system, there was one class for the different coffee blends, which inherits the beverage abstract class. People actually start to come by and have your wonderful (albeit bitter😖) coffee. Then there are the coffee newbs that, God forbid, want sugar or milk. Such travesty to coffee!! 😱😱

Now you need to have those two add-ons as well, both to the menu, and unfortunately on the billing system. Originally, your IT guy will make a subclass for both coffees, one including sugar, the other milk. …

Hey all! New series on design patterns! Though it does say ‘Design Patterns a day’, no ones that free; it just sounds better than ‘Design Patterns a week’. Expect a new post either every Saturday or Sunday. Let’s get on with this show!

What’s a Design Pattern?

They are design level solutions for recurring problems that us software engineers come across often. It’s not code, I repeat, CODE. It is like a description on how to tackle these problems and design a solution. Using these patterns is considered good practice, as the design of the solution is quite tried and tested, allowing higher readability of the final code. …

Image for post
Image for post

In our last tutorial, we used Firebase to store and keep track of the tasks we needed to complete. But that approach wasn’t customized to a specific user, i.e. they all got the same list of tasks. One way of personalizing these tasks for different users is to include user authentication. And that’s exactly what we’ll be doing in this post.

Note: The app created in this post is a continuation from the post below. You can find steps to setup Firebase Cloud Firestore as well as Firebase for Flutter here.

In this post we will:

  1. Allow user authentication from…


Sameeha Rahman

Final Year Undergrad

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store