Forem: Richard

iMate - Building a Mobile App for Mood Tracking

Richard — Sat, 16 Nov 2024 14:41:32 +0000

This isn't a tutorial but rather a showcase of the cool parts of a project

Introduction

In my second year of university, I had a module called Team Software Engineering. Where the task was to, over the course of the year, implement a substantial piece of software based on a given topic. Our title was “iMate”.

“iMate” is a concept which strives to be a mental health assistant for students and young people. It aims to help people track their mood and focus on mental health awareness.

It uses a tailored set of questionnaires to determine the user's mood (more on determining mood later). Then, it provides a set of tasks that, depending on the mood, can be used to improve or maintain the user's mood if it is already positive.

Features

The user’s mood is tracked through a journal, which shows them how their mood has changed over time throughout the week.
Provides the user with breathing exercises to ease anxiety.
A Profile and Account system to allow users to log in and save and customise their experience.
Provides the user with resources to support their mental health.

The Software Architecture

For this project, my team and I used C# because the group was more comfortable with that. We opted to build a mobile app because of its portability for a wide range of users, given that almost all (98%) UK adults aged 16-24 now have smartphones (Baker, 2024).

To build a Mobile app atop the DotNet framework, we used a multi-platform application UI framework called Maui (Microsoft, 2022) for the frontend, and the backend API, we used ASP.NET along with a PostgreSQL database.

The software architecture reflects the project’s time constraints, spanning two semesters; therefore, parts aren’t fully fleshed out. I’ll discuss this later.

Determining Mood

Computationally, determining something so complex as someone's mood is a challenging feat. A selection of different models attempts to capture the complex nature of human emotions. One such Model is the Circumplex model (Yarwood, n.d.). The Circumplex model, which measures Arousal and Valence, was developed by James Russell. Arousal looks at the activation energy level, and valence pertains to how positive or negative the emotion is (Murphy, 2024).

The difficulty in using such a model for an app is gaining access to the heart rate measures of the user (though a potential solution is using FitBit data, which is in turn limited by the need for a Fitbit).

A more simplistic yet powerful model is the PAD model, which measures features in three numeric dimensions and is more straightforward due to its existing usage in the mental health industry.

PAD measures mood based on three scales: the Pleasure-Displeasure scale (how pleasant one feels in a situation), Arousal-Nonarousal (how energised or soporific one feels) and Dominance-Submissiveness (whether or not the user feels in control or not).

The configurations for these are experimentally determined; for instance, boredom or fatigue can be described as one that is low on pleasure, arousal, and dominance (Murphy, 2024b).

Implementation

In order to implement this, we used a questionnaire based on the NHS Core-10 set of questions (Core-10, 2015). From these, we extrapolated a score based on a decision tree-style algorithm. The difference here is that we didn’t implement a full decision tree algorithm using entropy but rather implemented a tree manually, which would be traversed based on the questions the user answers; we continue this traversal until we reach a leaf node and, hence, a mood category.

private static Node root = new DecisionTreeClassifier(999, "Root")
        .WithChild(new DecisionTreeClassifier(0, "Negative")
                .WithChild(new DecisionTreeClassifier(0, "Intensity")
                    .WithChild((new DecisionTreeClassifier(1, "Angry/Disgusted")).Build())
             .Build()
        )
       .WithChild(new DecisionTreeClassifier(1, "Passivity")
             .WithChild((new DecisionTreeClassifier(0, "Anxious/Stressed")).Build())
                 .WithChild((new DecisionTreeClassifier(1, "Lonely/Sad/Depressed")).Build())
             .Build()
         ).Build())
       .WithChild(new DecisionTreeClassifier(1, "Positive")
             .WithChild((new DecisionTreeClassifier(1, "Active")
                 .WithChild(new DecisionTreeClassifier(0, "Happy/Excited").Build())
             .WithChild(new DecisionTreeClassifier(1,"Loved/Grateful").Build())
         ).Build())
         .WithChild((new DecisionTreeClassifier(0, "Passive")
                 .WithChild(new DecisionTreeClassifier(0, "Relaxed/Bored/Sleepy").Build())
         ).Build()
     ).Build()
    ).Build();

A leaf node assigned a certain score to the mood for all 3 dimensions of pad. Since these scores aren’t set in stone we used a k-Nearest Neighbours (kNN) algorithm to decide which most closely aligns with the given moods.

I implemented a simple kNN classifier for such a purpose, which is outlined below:

using PADCoordinateVector = (float, float, float);

public class EmotionClassifier
{
    private readonly Dictionary<PADCoordinateVector, string> _padRanges;
    public EmotionClassifier(List<PadRanges> ranges)
    {
        this._padRanges = new Dictionary<PADCoordinateVector, string>();
        // Construct a dictionary from the data from the database
        foreach (var moodValue in ranges)
        {
            PADCoordinateVector vec = 
                    new PADCoordinateVector(moodValue.valuePleasure, 
                                moodValue.valueArousal, moodValue.valueDominance);
            this._padRanges[vec] = moodValue.mood;
        }
    }

    private static float Euclidean_Distance(PADCoordinateVector pointA, 
                        PADCoordinateVector pointB)
    {
        // compute the Euclidean distance between points
        float xSquare = (float)Math.Pow((pointA.Item1 - pointB.Item1), 2);
        float ySquare = (float)Math.Pow((pointA.Item2 - pointB.Item2), 2);
        float zSquare = (float)Math.Pow((pointA.Item3 - pointB.Item3), 2);
        return float.Sqrt(xSquare + ySquare + zSquare);
    }

    private string KNN(PADCoordinateVector point)
    {
        // store the distances to each point
        Dictionary<string, float> distances = new Dictionary<string, float>();
        foreach (PADCoordinateVector coord in this._padRanges.Keys)
        {
            // compute the distance to the current point 
            float dist = Euclidean_Distance(point, coord);
            distances.Add(this._padRanges[coord], dist);
        }

        // Sort the dictionary 
        var sortedDict = distances.OrderBy(distance => distance.Value);
        //  return the key of the smallest distance
        return sortedDict.First().Key;
    }

    public string ClassifyEmotionByPAD(int PleasureDispleasure, 
                        int ArousalNonArousal, int DominantSubmissive)
    {
        //  normalise values placing range from 0-1
        float PD_n = PleasureDispleasure / 10f;
        float AN_n = ArousalNonArousal / 10f;
        float DS_n = DominantSubmissive / 10f;
        PADCoordinateVector coords = new PADCoordinateVector(PD_n, AN_n, DS_n);
        // get the mood
        string mood = KNN(coords);
        return mood;
    }
}

The above is a relatively standard kNN implementation minus any real training; it constructs a vector from data which is passed in via the API and classifies it based on its 3D Euclidian distance, which is computed as follows:

Or, more generally, in a D-Dimensional space:

The classifier places a new point onto the following 3D space:

App Design

The app looks like the image below; we aimed to make it simple and to the point while also keeping it engaging. We picked colours that were easy on the eyes but fell within the correct contrast guidelines based on the Web Content Accessibility Guidelines (WCAG 2).

We aimed to give users four easy-access options on the main page to help them get started and lead them in the right direction.

During development, we found that “Breathe” and “Meditate” were very similar in principle, so they were switched to “Breathe” along with “resources”.

The final product can be seen in the video below:

How we built it?

Frontend

The UI of the app was implemented using Maui. This MVVM (michaelstonis, 2022) framework uses a Model, View, ViewModel pattern. A model defines the data required by the page. For example, a user profile page may need fields such as a name and username.

class PersonalInfo
{
    public PersonalInfo(string username, string fullName, int age, string gender)
    {
         Username = username;
         FullName = fullName;
         Age = age;
         Gender = gender;
    }

    public string Username { get; set; }

    public string FullName{ get; set; }

    public int Age { get; set; }

    public string Gender {  get; set; }
}

A ViewModel is the link between the View and the Model; it provides functions to access and modify the data. We can use this to make API calls to fetch user data from the backend.

For instance, the truncated example below fetches the user information via a httpService and updates the class properties. Note here that the properties are marked as Observable, meaning the UI will reflect any changes if those values change.

Note: Commands are functions run by interactive elements from the View.

namespace iMate.ViewModels
{
    partial class PersonalInfoViewModel : ViewModelBase
    {
        [ObservableProperty]
        private string _username;

        public ICommand updateProfileCommand { get; set; }

        public PersonalInfoViewModel(IHttpService httpService) : base(httpService)
        {
            fetchProfileData();
            updateProfileCommand = new Command(UpdateProfile);
        }

        private void fetchProfileData()
        {
            string token = await SecureStorage.Default.GetAsync("auth_token");
            User Profile = await HttpService.FetchProfile(token);
            ...
        }

        public async void UpdateProfile()
        {
        var profileData = new ProfileDataModel {...}
            string content = JsonSerializer.Serialize(profileData);
            HttpService.UpdateProfile(content);
            ...
        }
    }
}

Finally, a View or, in our case, a page on the app can be a combination of a C# file and an XML file or just a C# file. We opted to use XML because it felt much cleaner and more organised. I won’t include an XML in this article because they are quite long and make for bad examples. However, if you are interested, the code link will be provided at the end.

A Page needs to take any classes you are passing by Dependency Injection (DI), in my case, the HttpService.

public partial class PersonalInfoPage : ContentPage
{
    private PersonalInfoViewModel _viewModel;
    public PersonalInfoPage(IHttpService httpService)
    {
        InitializeComponent();

            _viewModel = new PersonalInfoViewModel(httpService);

        BindingContext = _viewModel;

    }
    private void ChangePictureTapped(object sender, EventArgs e)
    {
        Navigation.PushAsync(new ProfilePhotoSelector());
    }
}

I found this method of DI super useful because it let me just pass in the code I needed to make API requests into each class that needs it, and reuse all the code!

And moving on to the backend…

Backend

The backend API used ASP.NET and, therefore, the MVCS (Wikipedia Contributors, 2023) pattern. MVCS is based on the MVC pattern and consists of a model representing the data, a service providing the database interface, and a controller handling the API's routes. Since this was a REST API, the views part of MVCS had no purpose.

The Model part defines the database model, essentially a definition of an SQL table. A mood model could look as follows:

public class MoodEntry
{
    [Key]
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
    public int Id { get; set; }

    [Required, ForeignKey(nameof(userID))]
    public int userID { get; set; }

    [DataType(DataType.DateTime)]
    public DateTime date { get; set; }
    public int? moodID { get; set; }

    public MoodEntry()
    {
        // default constructor
    }

    public MoodEntry(int userID, DateTime date, int moodID)
    {
        this.userID = userID;
        this.date = date;
        this.moodID = moodID;
    }
}

A service is the link to the dataset itself; we use this to abstract away any functions that make SQL queries. In ASP, we can use LINQ or the provided functions to access the database.

public async Task<IEnumerable<MoodEntry>> GetJournalSummary(string token)
{
    int id = await GetUserID(token);
    var now = DateTime.Now;
    // Calculate the start of the current week (Sunday)
    var startOfWeek = now.StartOfWeek(DayOfWeek.Sunday);
    // Calculate the end of the current week (Saturday) - Add 6 days to get Saturday
    var endOfWeek = startOfWeek.AddDays(6);
    var query = await (
        from Entry in ctx.MoodEntry
        where Entry.date >= startOfWeek && Entry.date <= endOfWeek && Entry.userID == id
        select Entry).ToListAsync();
    return query;
}

Controllers defined the actual API routes of the API. For instance, a GET request to compute the mood based on some values can look like this:

[HttpGet]
[Route("api/v1/[controller]/")]
public async Task<string> calculateMood(int Pleasure, int Arousal, int Dominance)
{
    // /api/v1/Mood?Pleasure=2&Arousal=0&Dominance=5
    // get the ranges from the database
    List<PadRanges> padRanges = (await _service.GetPADDictionary()).ToList();
    EmotionClassifier classifier = new EmotionClassifier(padRanges);
    string mood = classifier.ClassifyEmotionByPAD(Pleasure, Arousal, Dominance);
    return mood;
}

Notice that the [controller] comes from the class name. Here, we show the MoodController. Therefore, the route ends up being /api/v1/Mood.

This was a basic overview; there is a lot more going on in the background than I made visible in this post, but I urge you to check the repo.

What I learned?

This project taught me a lot about various topics, including project management, Object Oriented Programming and Design Patterns.

I found it primarily interesting because it wasn’t an easy problem to solve or one that has really already been solved (at least in the open-source realm). So it required some crafty solutions to come up with what I would classify as a very basic application. It applied many different aspects of my degree, such as Machine Learning, UX Development and OOP.

Project Management Methodologies

We managed this over the span of around seven months using the Agile methodology; it taught me a lot about Agile and its shortcomings. Namely, the idea of scope creep led to the project taking a lot longer than we anticipated due to changing requirements. Another downside was the focus on short-term deliverables; since we needed to prototype every sprint, the software quality suffered due to a lack of QA.

Software Design Patterns

Having spent the entire year writing C#, I learned a thing or two about C# design patterns. I've never read the Design Patterns "bible" (Wikipedia Contributors, 2018), but I watched a talk or two from Uncle Bob.

Doing this project gave those ideas a rhyme and a reason but also allowed the downsides to resurface. Object-oriented programming gets in the way a lot. Granted, you get something that is nicely organised at the end, but you also end up with something that has a lot more complexity than is needed. Maybe OOP was the right choice here, but I can't help but think… was all that complexity necessary.

Limitations

Authentication

iMate is by far not perfect; I mean, look at my bootleg solution to authentication. I manually created a JWT token:

using static BCrypt.Net.BCrypt;
using System.Security.Cryptography;

public static string JWT(string username, string password)
{
    string currentDateTime = DateTime.Now.ToString("ddMMyyyyHHmm");
    string plainText = username + password + currentDateTime;
    // Encode the string as a byte array using UTF-8 encoding
    byte[] plainTextBytes = Encoding.UTF8.GetBytes(plainText);
    var inputHash = SHA256.HashData(plainTextBytes);
    return Convert.ToHexString(inputHash);
}

And then stored it with any logged-in user in the database:

public class AuthTokens
{
    [Key, Required] public string token { get; set; } 
    [Required, ForeignKey(nameof(userID))] public int userID { get; set; }

    public AuthTokens() { }

    public AuthTokens(int _userID, string _token)
    {
        this.userID = _userID;
        this.token = _token;
    }

}

This was then used as a lookup table for a logged in user to get their profile. This isn’t at all a good solution; one could even call it the worst possible thing I could have done, but hey, at least the passwords were hashed.

A proper implementation would use an expiration date, refresh tokens, and claims.

Mood Calculation

Computing mood is challenging, primarily based on some questions. Human emotions are complex, and we can't change that; no matter the complexity of implementations, it will always be a generalisation.

To improve this, we would have to use better ML models or at least use more data for training. Other metrics like pupil dilation, heart rate, blood pressure, and body language could also be looked into. This could be an incredible Computer Vision and NLP project in the future.

What would I do differently?

The primary thing I would change is that I would use something other than Maui. To cut it some slack, we did use it in Beta; it felt more hindering than anything else. Maybe it was because we’ve never used it before this or had to uptake OOP guidelines. We’ll never know, but I would definitely opt for something more cross-platform and less complex.

A note on bias here: productivity in any tool improves the more you use it, but it doesn’t really make me want to go back and use it again.

In terms of the app itself, some other cool additions would be:

A ChatBot you could talk to in order to help you figure out your mood.
Gamification features like pets.
A shop to customise your pet using the points earned from doing tasks.

References

Code is Available here: https://github.com/iMate-TSE/

Baker, N. (2024). UK Mobile Phone Statistics 2024. [online] Uswitch. Available at: https://www.uswitch.com/mobiles/studies/mobile-statistics/.

CE (2015). CORE-10 information. [online] Clinical Outcomes in Routine Evaluation (and CST). Available at: https://www.coresystemtrust.org.uk/home/instruments/core-10-information/.

michaelstonis (2022). Model-View-ViewModel. [online] learn.microsoft.com. Available at: https://learn.microsoft.com/en-us/dotnet/architecture/maui/mvvm.

Microsoft (2022). .NET Multi-platform App UI. [online] Microsoft. Available at: https://dotnet.microsoft.com/en-us/apps/maui.

Murphy, T.F. (2024a). Circumplex Model of Arousal and Valence. [online] Psychology Fanatic. Available at: https://psychologyfanatic.com/circumplex-model-of-arousal-and-valence/

Murphy, T.F. (2024b). Pleasure-Arousal-Dominance Model. [online] Psychology Fanatic. Available at: https://psychologyfanatic.com/pleasure-arousal-dominance-theory/.

Wikipedia Contributors (2018). Design Patterns. [online] Wikipedia. Available at: https://en.wikipedia.org/wiki/Design_Patterns.

Wikipedia Contributors (2023). Service layer pattern. [online] Wikipedia. Available at: https://en.wikipedia.org/wiki/Service_layer_pattern.

Yarwood, M. (n.d.). Circumplex Models. [online] psu.pb.unizin.org. Available at: https://psu.pb.unizin.org/psych425/chapter/circumplex-models/.

2022 - A Review on Burnout

Richard — Fri, 06 Jan 2023 15:11:30 +0000

TLDR: If you feel yourself burning out, take a break and try something different, be that related or unrelated to what you currently do.

I've been trying to figure out what I've actually been doing these past two years since the last review, which was in 2020!

At the end of 2020, I set out with this:

"I have many long-term goals. Eventually, I would like to try VueJS and Express. But going into 2021, I will be building more APIs using Django and getting better at integrating them on the front end."

Did I accomplish my goals in 2020?

I am happy to say I did a lot of Vue that year. It's nothing crazy, but there are a lot of test sites. I am trying to figure out whether I prefer writing code using the new composition API or if the options API is the way to go. I've got to say I have been mixing between the two since lots of Vue3 libraries give you demos using the composition API.

A lot of my time in 2021 was taken up by A-Levels. Namely my final project for Computer Science. I spent over a year working on a timetable application for my school. You can read about that here.

The first half of 2022 was taken up by my final year in sixth-form college. Lots of exams and a lot more stress with university applications. Due to COVID, we had many more exams than we normally would. Hence, the time I had to code was very minimal.

By the time I was done with exam submissions and university applications, I had been working incredibly hard and learning different things; hence, I was incredibly burnt out. I had no desire to do anything productive. I spent a lot of time with friends before I had to leave for a different city and move to university inevitably.

I got my first University offer at the end of 2021!! I accepted a place around June once all the other universities had decided.

However, I had no desire to do anything related to web development. I started to play around with Haskell. It was a bit of a change of pace, but it was fun and something different to do when I felt bad about not doing anything.

Even though I wasn't doing much programming myself, I watched a lot of different Twitch streamers make different apps and software. I think this helped keep me interested without burning myself out more. I liked watching Tsoding on Twitch; he does many different bits with many different languages and was a good source of inspiration and motivation.

Starting University

Between August and October, I had a lot of administrative work for the university. I had to fill out countless forms for enrollment, accommodation, etc...

October 2022 was my first semester doing Computer Science at University. For the first two months, it was about settling in. The only code I wrote was what I had for my programming modules. Taking the 3-month break from code helped put a different perspective on things.

Once I felt the motivation come back slightly, I challenged myself to redesign my portfolio from scratch in the span of a week. This was a really fun challenge because I meant I couldn't really procrastinate from doing it. I wanted to make it simpler and less of a hassle to maintain. So, I opted for Next JS (the link is below). I also made a custom new tab screen with all the commonly used links for my university.

Portfolio

This brings us to December of 2022. With a newfound interest in lower-level programming, I decided to spend more time learning C and improving at Haskell while completing university work.

2023 and Beyond

This year I want to keep reading books on Haskell unitl I really become comfortable with it. I want to do more low-level programming, maybe messing with x86-64 assembly. Some books I would recommend are:

Programming From the Ground Up - Jonathan Bartlett
Real-world Haskell
Learn You a Haskell

I also have a goal to build everything from scratch at least once. At the moment, I want to make my own programming language with a compiler and, hopefully, a browser. I would also like to do the Harvard CS50 course.

I hope to apply to some dev jobs this year to do alongside university if that works out, but more importantly, I am soon moving to the final semester of my first year, so getting through uni is my top priority.

Summary

I appreciate that this article was a little over the place, but if anything, it reflects my life these past two years.
Ultimately, what helps me most with burnout is taking a longer break from everything and trying something different to see what else might interest me. ❤

Building a Timetable Generator

Richard — Wed, 29 Dec 2021 19:51:00 +0000

About a year ago, I began planning my final project for school. The main goal was to solve a real-world problem while learning to work on a large project independently. It is no secret that this wasn't my first large project; however, It wasn't a smooth process. This post is a reflection on the process.

The problem statement

The current system for making timetables involves a conditional excel sheet in which you would drag boxes around until they fit. My goal was to make that process easier for the client. They needed an app that would allow them to make timetables with zero chance of overlap or double-booking.

Evaluating the Technical Feasibility

The problem of programmatically creating timeslots that fit into a timetable as a whole is NP-Complete. I would have to evaluate all possible combinations to find a semi optimal solution.

A similar problem which is also NP-Complete is the Knapsack problem. For those who are unfamiliar; with the Knapsack problem, you start with a Knapsack that can hold a finite amount of items let's say 40lbs. From a selection of items in a shop all with differing weights, what arrangement of items would you steal to obtain the highest possible value which fit in the 40lbs limit.

One way to solve such a problem is by use of greedy algorithms; which pick an optimal move at each step to achieve a "good enough solution". (Note that there are other possibilities such as Genetic Algorithms).

However, this is a timetable that relies on a lot of different variables. For instance "do specific classes need a specific professor due to experience level?" or "would specific classes be better off having the same professor as they did previously?". Thus neither of the stated "automated" solutions are feasible for my problem.

Instead, I took a step back. Away from all this maths and algorithms which are edging dangerously close to machine learning. I decided the best description for my solution is "smart suggestive filtering". In order to make timetable generation easier for my client, I would display all the data in such as way that overlap is impossible, the system would suggest which classes should be on what timeslot while maintaining the freedom for a human to make decisions.

Design Stage

I find the best way to start any project is to set your requirements straight and build on top of them. The requirements I set for this project were as follows:

Define database relationships and be able to store the data needed for the app.
Be able to authenticate the user and secure API endpoints.
Create endpoints for retrieving data for specific year groups.
Be able to assign a timestamp to specific lessons for a class.
View all the classes which have timestamps and those which do not.
Run reports on the data.

Database Design

Starting with the data; I made a list of all the entities and attributes I would need. From this, it was just a case of putting it all in an ER diagram and determining the relationships.

Note that this isn't normalised in any way, for me it was better to have a structured database that makes sense rather than lots of tables which would have just made the queries more complicated than they already are.

UI Design

A useful way to see how your data will flow is to create mockups of UIs. This will allow you to map out what is going to happen to the data, how it will be presented before you start coding. I find this makes the whole process easier down the line. I made my mockups in Figma which allowed me to plan user interactions as well.

Technical solution and its problems

I decided to use Django Rest Framework on the backend, because that is what I am most familiar with and React on the Frontend. I chose React because I was still learning Vue at the time and didn't quite have the confidence to undertake such a large project in Vue.

The first roadblock I came across is that Foreign Keys return Ids when serialized. To help me with this I made an abstract base class which converts the objects of ids into an object of data.



class SharedMethods:
    @staticmethod
    def ExtractValuesById(DataCollection):
        TeacherVal = Teacher.objects.get(id=DataCollection['Teacher']).name
        RoomVal = Room.objects.get(id=DataCollection['Room']).RoomNumber
        SubjectVal = Subject.objects.get(id=DataCollection['Subject']).name
        ClassGroupVal = ClassGroup.objects.get(id=DataCollection['ClassGroup']).classCode
        data = {
                'id': DataCollection['id'],
                'Day': DataCollection['Day'],
                'Unit': DataCollection['Unit'],
                'Teacher': TeacherVal,
                'Room': RoomVal,
                'Subject': SubjectVal,
                'ClassGroup': ClassGroupVal
            }
        return data

By doing I could reuse this code wherever I needed it by inheriting it into other viewset classes.

While filtering the data I needed a way to get all the free teachers, because teachers teach more than one lesson a week I couldn't have a field for "isFree" on the teacher model.

To work around this finding set differences between all teachers and all teachers who are teaching on a specific day.



currentOccupiedTeachers = Timeslot.objects.filter(Day=day, Unit=f'Unit{unit}')
currentTeacherData = TimeslotSerializer(currentOccupiedTeachers,many=True).data
occupiedTeacherIds = set([timeslot['Teacher'] for timeslot in currentTeacherData])

# Get Ids of all teachers
allTeachers = Teacher.objects.all()
allTeacherData = TeacherSerializer(allTeachers, many=True).data
allTeacherIds = set([teacher['id'] for teacher in allTeacherData])

freeTeachers = allTeacherIds - occupiedTeacherIds

I used two sets to make sure they are unique and subtracted one from the other to get all the teachers who do not have timeslots on a specified day. From there it is easily converted to a queryset like so:



FreeTeacher = Teacher.objects.filter(id__in=freeTeachers)

I also found that I needed more specific queries. I needed to determine if a field has one value or another. Django has a neat function Q which allows you to form composite queries:



from django.db.models import Q
query = Q(Description='ICT') | Q(Description='Computing')
queryset = Room.objects.filter(query, id__in=outPutFilteredRooms)

Here the filter will match if the Description is "ICT" or "Computing".

One way in which I suggested options for the timetable is by making sure the recommended option is first. Each yeargroup has a set amount of each lesson which they need on their timetable for instance 6 maths lessons per week. So I make sure the subject they have the least of is on top. However using Model.objects.filter() doesn't preserve order. Hence we can use this handy trick:



from django.db.models import When,Case
currentAmounts = self.__getCurrentSubjectTotals(class_, allSubjects)
subjectMissingIds = self.__getMissingSubjectAmounts(currentAmounts, pk)

preserveOrder = Case(*[When(pk=pk, then=pos) for pos,pk in enumerate(subjectMissingIds)])


subjectFrequencyQueryset = Subject.objects.filter(
                yearGroup__name = f'Yr{pk}',
                id__in=subjectMissingIds).order_by(preserveOrder)

serializedSubjects = SubjectSerializer(subjectFrequencyQueryset, many=True)
return Response(serializedSubjects.data)

Using Case Where Enumerate will make sure the order of the array you pass in is preserved in the query.

App Demo

What I learned?

The whole year in which this app has been in the making has taught me the importance of planning. If I didn't plan so much of the app beforehand, writing the code would have been unnecessarily difficult.

I also learned how vital a good client-dev communication is for maintaining the stabilty of a project.

Finally I explored the ways of Agile Development. Agile is a project management methodology in the SDLC and focuses on involving the customer in every step of the development process, it was developed to overcome the drawbacks of the standard waterfall model.

It does this by breaking down the entire project into smaller development lifecycles called iterations or sprints. In Agile for every sprint, you develop a version of the working software called the increment.

I found this very useful for the project as the clients view on how the app worked was my top most priority, for the best possible UX.

If I could do it again?

Overall I am pretty happy with the product. If I could do it again I would swap out Zustand for Redux Toolkit, because I got to the point where small state slices began to look really messy.

I would also handle error messages a lot better. A custom component which showed errors would have been more user friendly.

The Vim Reference

Richard — Sat, 22 May 2021 17:37:33 +0000

Recently I decided to learn vim after hearing how much Ben Awad loves it. I though maybe it could boost my productivity too. I am still getting use to it, but right now it seems pretty fun.

Now to the reference. Here are some useful commands and what they do:

Using Vim

Open Vim: vim filename
Closing Vim:
- :wq -> save and quit
- :q -> quit and not save
- :w -> save and not quit

Movements

Hitting gg will take you to the top of file
G takes you to the bottom
} and { navigate code blocks
o adding a new line and put into insert mode
O adding a new line above and put into insert mode
w will jump to next word b will take you back
:number will take you to line number
0 will take you to the start of the line
0 + w or ^ will take you to the first word of a line
h j k l to move up down left and right
a move over by 1 and set insert mode
A jump to end and set insert mode

Editing

Hitting "i" in command mode lets you insert
Hitting shift + i will set insert mode at the beginning of the line
Then esc puts you back into command mode
Hitting dd will delete a line and copy to clip board
Hitting d + } will delete a whole block of code
Hitting 10 dd will delete 10 lines
Hitting u will undo
Hitting ctrl + r will redo
Hitting yy will copy a line
p to paste bellow P to paste above
x remove a letter where the cursor is
number x remove number letters before cursor
~ swap the case of the letter prefix with number for multiple characters
. redo
$ will take you to the end of a line
W will jump spaces and B reverses that
f + char find and place cursor on char
t + charfind and place cursor before char
% take you to and from closing brackets
d + % remove code between brackets
c + w change mode and word will remove a word and set insert mode
D remove everthing from cursor onwards
c + t + char edit from cursor to char
C change whole line
d + t + char delete from cursor to char
* take you to occurances of the word where your cursor is
; take you to next instance after using a find command
r + char replace letter at cursor with char prefix with number for multiple replaces
R allow to replace lots of letters into replace mode
/word highlight all occurances of word

Macros

Press q to start recording then select a hotkey. Now run some commands and hit q to end. Then hit @ hotkey to replay a command. Prefix @ with a number to replace that many times

Visual Mode: V

Select text with movement commands then you can hit:
- d to delete
- After selected > or < to indent code.
shift + v selects the whole line and puts you into visual mode.
v + move select from cursor while move

Visual Block Mode

ctrl + v enter visual block mode. Now you can select columns and hit r to replace things.
In visual block mode hitting shift i will allow you to type and then after you hit esc the text will appear in all places selected.

Thank you for referring to this guide, I hope you found it useful.

Photo by Bich Tran from Pexels

Two Year Recap

Richard — Sun, 27 Dec 2020 16:09:33 +0000

With 2020 coming to a close; I decided to take a step back on my learning journey and look at how far I've come. It's always pleasing to self-reflect, you can use it as a form of motivation. It has been a difficult year for all of us and I think it is time to look back and celebrate your accomplishments.

I find many people describe their path into the tech industry as a "Journey", mainly because it is never-ending. Although you may reach your end goal and get a job (if that is even your goal), you never stop learning. The industry is forever evolving.

My first interaction with HTML and websites was in 2017 using Adobe Dreamweaver. I started my journey into Web Development in September 2018. I got a recommendation from youtube; It was a video from DarkCode who does fantastic short HTML CSS and JS creations. I found it fascinating how some code could create such beautiful web components. I have done some basic HTML on Dreamweaver before this, but I still didn't know what was happening. It was like magic. Later I decided I want to do this my self and started learning HTML. After going through all the HTML and CSS courses on SoloLearn, I began building simple, not so pretty sites (I spoke about this more in this blog).

Around November 2019, I started the #100DaysOfCode Challenge on Instagram. The aim of this was to get better at CSS and basic-level JavaScript. I completed the challenge in February 2020. From there until about April I really started to learn JavaScript in depth.

In April 2020; I began to learn React. I watched a bunch of videos and gave up about 4 times because this whole concept of JSX confused me. Eventually, I found the instructor (CodeEvolution) who helped me understand React and how it works. At around this time, I started the second round of 100DaysOfCode. This time to focus on learning react (I spoke about why I chose to do 100 days of code in this blog). This time was full of ups and downs I thought of quitting React when it got hard when I couldn't get anything to work, but I held on and it was worth it. While all this was happening I began to have a look into some backend frameworks. I took a long time to decide which I wanted to learn. I started with Flask and then realised I prefer Django.

I was then practising ReactJS, I built my Portfolio at the beginning of July; at this point, the UK was well into Quarantine. With nothing better to do, I spent the rest of July polishing my React JS skills.

End of July beginning of August, I began to delve into the backend. I built my first Rest API using Flask on the 29th of July. I began to learn Fullstack Django on the 31st of July. I felt pretty confident with Django after finishing a Dating App for Developers project at the end of August.

As schools opened up in September I had less and less time to code, however, I made sure I get at least an hour in each week. Later in September, I finished a collaborative project with someone I met on "Dev.to"!

I took part in Hacktoberfest in October and learned so much about contributing to open source. Then we get to the present; I started to learn about Django Rest APIs in December of this year and hope to continue into the next.

To put things into perspective back when I started to learn the back-end it made no sense to me how a back-end and a frontend connect together; now I'm the one writing APIs.
It's crazy to think I was writing HTML and CSS just over a year ago and now I brand myself as Fullstack.

The Future

I have many long term goals. Eventually I would like to try VueJS and Express. But going into 2021 I will be building more APIs using django and getting better at integrating them on the frontend.

Thank you for taking the time and allowing me to share my past 2 years with you. If there is anything I would like you to take from this; it would be that you can achieve your goals, never give up and if you are dragged down by anything; always get back up and pull back with greater force. You've got this <3

Photo by Sora Shimazaki from Pexels

Learning to Code as a Student

Richard — Sat, 19 Dec 2020 12:52:35 +0000

I get a lot of questions on how you should learn to code. What resources, where to start and how to practise. As a result, I decided to write a post with some general tips and more specific web development tips (Mainly HMTL, CSS, Javascript, React and Python, Django)

Although this may sound cliché, learning to code is all about practice. Once you've found the right resources; it's about learning from your mistakes. The process is not to learn everything, only learn what you need as and when you need it.

As a student it isn't financially viable for me to spend a bunch of money on Udemy, so if you're in a similar situation this may just help you out. First and foremost you should lay out your goals as a form of motivation. Setting out your goals helps you to keep learning; to allow you to strive for your goals. Why? you may ask. Well on a budget you will be looking for your own resources using your own initiative, which may feel like a waste of time, but trust me it's crucial.

I am a practical learner, so the first thing I usually do is look for a tutorial series on Youtube, this not only allows you to write code but to make comments on the code from the tutorial. Don't just passively follow a tutorial, that's no use. Instead, I suggest you comment everything; write what the line of code is doing and why it's there. Once you have finished the tutorial you could add your own features to the app. However this isn't all, I can guarantee that you didn't take in everything in the tutorial hence I upload tutorial code to GitLab; when I'm building my own projects I can refer back to the tutorial code if it had similar functionality until eventually you won't need to refer back to old code and you just know what you're doing.

I would also like to note you don't have to memorise everything in a language; A lot of the time it's a case of knowing the basics and being aware of what's possible. That way you can check the docs for specific features, as long as you know the basics. For example, when making a database model in Django I don't always remember the field names, but I am aware that there is an image field, so I'll look it up in the docs. Search Engines are your best friends.

Once you know the language enough to build things with relative ease, read. Read books and articles in your language or Framework; learn from other people. The Software industry is huge, we all strive to achieve our goals and the only way we'll get there is by learning from each other.

Now for specific tips (These are entirely based on what I did and may not necessarily work for you, it depends on what type of learner you are)

Python - Most features of Python can be learned from SoloLearn. They take you through everything from variables to OOP and functional programming. Once you have the basic awareness, it is again a case of practice. I use CodeWars for this they have incrementally harder problems, and show you solutions from other people once you have completed the challenge; learn from them, pick apart the interesting ones this will help you in the long term. Learning a language is all a mind game be aware of a feature, recall 50% and google the rest.
Book suggestion: Python Tricks the Book by Dan Bader

HTML and CSS - You can again learn this from SoloLearn (that's what I did), many people like to use W3Schools.
Book suggestion: HMTL and CSS by Jon Duckett

Javascript - JS is on Sololearn. However, it is such a huge topic which can only be learned by practice and building things. I suggest Frontendmentor.io. Javascript is one of those gifts which keeps on giving. I suggest you have a look into JavaScript.info
Book suggestions: Jon Duckett's Javascript and JQuery and for more advanced users: Eloquent Javascript (People have mixed opinions about this because of the complexity, but personally understanding something more complicated gives you a better understanding of the basics)

React - I will be talking about React, but this applies to any framework.

Disclaimer: I am not by any means saying you should learn React there are many other cool JS frameworks like Svelte and Vue. Try them all and choose, don't go for what's hot right now. I may also be handy to look at jobs in your area, depending on your goals.

I learned React from CodeEvolutions youtube series suggested to me by a good friend of mine, but have a look at the documentation to extend your knowledge, and get used to navigating it.

Django - Django is a full-stack python framework. This may sound like the common answer of "Read the Docs!!", but the Django documentation is one of the best I've seen. They have a tutorial for beginners which I suggest following, you will build a simple polls app. Make sure to get used to the layout. For Django, I once again turned to good old Youtube and watched Corey Shafer's series (I have a series of posts on this). From there is a case of building as much as you can with reference to your old code. Don't be afraid to steal code from yourself.

I'm currently learning Django Rest Framework, so check back here of an update on that; if you're interested.

How do you learn? Type it bellow and let's create a thread for the code community.

Got questions about me and code check the FAQ

Django Diaries - Password Reset Email

Richard — Sun, 09 Aug 2020 15:58:40 +0000

This is part 5 of the Django Diaries, We will be sending password reset emails to users if they forget their password.

The code from Corey Schafer's Tutorial can be found here (Number 12). This blog series is entirely based on what I learned from here:

Django has it's own functionality to generate a secure token for resetting a password. Django also encrypts all the passwords automatically.

The fist thing we need to do is to set up the URLs in the main project 'urls.py'. There are quite a few default views Django needs. We need to add these to the URLs.

from django.contrib.auth import views as auth_views

urlpatterns = [
    path("password-reset", auth_views.PasswordResetView.as_view( template_name="users/password_reset.html"), name="password_reset"),
    path("password-reset/done/", auth_views.PasswordResetDoneView.as_view( template_name="users/password_reset_done.html"), name="password_reset_done"),
    path("password-reset-confirm/<uidb64>/<token>", auth_views.PasswordResetConfirmView.as_view( template_name="users/password_reset_confirm.html"), name="password_reset_confirm"),
    path("password-reset-complete/", auth_views.PasswordResetCompleteView.as_view( template_name="users/password_reset_complete.html"), name="password_reset_complete")
]

We also need a bunch of templates that django can use. 'users/password_reset.html' is a form that the user fills out to send a rest password email.

We then have the password reset done template which is where the user is send to when the user submits the form, it would tell them that an email has been sent and they should follow the instructions in their inbox.

users/password_reset_done.html

Another route & template that is needed is the 'password_reset_confirm'. This route requires the uidb64 token of the user and a token, so we put this in the route. These are used to identify the user and are passed in by django from the link in the email. This is the route that Django follows when the user submits the first form and here is asked if they are sure they want to reset their password.

Now we need to specify the email client, so django can send an email. I will use Gmail. The first setting tells django that it should be using and SMTP (Simple mail transfer protocol). We then set a email host in this case gmail. If you need other Email Clients see the django docs. We then set the gmail post which is 587 and tell it to use TLS, this is for security.

Finally you need to add your email details, I added my email address to my computers environment variables and called it EMAIL_USER. For the password I recommend visiting https://myaccount.google.com/security and turning on Two-Factor Authentication. This then allows you to set up an app password so you don't have to use your real password. Google will generate a password for you which you can use.

settings.py

EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = "smtp.gmail.com"
EMAIL_PORT = 587
EMAIL_USE_TLS = True
EMAIL_HOST_USER = os.environ.get('EMAIL_USER')
EMAIL_HOST_PASSWORD = os.environ.get('EMAIL_PASS')

Now you should be able to send an email. This will send you a link with a form to set a new password. This will be '/password-reset-confirm/UID/token'

The final route is the 'password_reset_complete' which is where django takes the user when the password has been reset.

Finally you can add a 'forgot password' link on the login page.

✨If you would like to follow my day to day development journey be sure to check my Instagram.

Django Diaries - Pagination

Richard — Sun, 09 Aug 2020 13:32:05 +0000

This is part 4 of the Django Diaries, we will look at implementing Pagination in Django.

The code from Corey Schafer's Tutorial can be found here (Number 11). This blog series is entirely based on what I learned from here:

Django has pagination sorted for us, we just need to implement the buttons and set some attributes.

Example

For this example I will open the django shell with python manage.py shell

>>> from django.core.paginator import Paginator
>>> posts = ['1','2','3','4','5','6','7','8','9','10']
# Posts is our object of posts and 2 is the number of posts per page
>>> p = Paginator(posts,2)
# Return the number of pages in this case we have 10 post with 2
# per page, so 10/2
>>> p.num_pages
5
# page_range is an object of pages
>>> for page in p.page_range:
...     print(page)
1
2
3
4
5
# Get specific page
>>> p1 = p.page(1)
>>> p1
<Page 1 of 5>
# get page number
>>> p1.number
1
# get all the posts on that page
>>> p1.object_list
['1','2']
# Check for previous and next pages
>>> p1.has_previous()
False
>>> p1.next_page_number()
2

Creating a Paginator

For paginating our blog post app, we need to specify some attributes in the view.

class PostListView(ListView):
    model = Post
    template_name = "blog/home.html" 
    context_object_name = 'posts'
    ordering = ['-date_posted']
    # Add Django Pagination
    paginate_by = 4

Now the Paginator knows now many posts should be on each page, simply by adding a 'paginate_by' attribute, because we are using a class based view we don't actually need to import paginator. That's the pagination done. I set 'paginate_by' to four as I want 4 posts per page.

If we reload the server and visit '/?page=2' we should see the next page being loaded. All we need to do now is to add links to the next page in our templates.

Adding buttons to the template

For this I will use a Bootstrap button group.

Here we check if there is a Paginator active. Then we add the First and Previous Page links. We Check if there is a previous page, and then set a link to page 1 by setting the page to 1. We can then access the page object using page_obj to get the previous page number and link to that.

We do the same to add buttons for the next and last page. Notice we are setting the last page number to the number of pages; because if we have 25 pages then the last page will be number 25.

Finally we loop over the number of pages to create a link for a couple of pages around the current page. So if we are on page six we have links to 7,8,9 and 5,4,3 just so we don't have all the numbers showing.

We create a for loop to loop over all the pages. Then we add a button for the current page with different styles, using a condition to check if the loop value is the current page. We then print a few pages around the current page using django filters, so we check if the current number is > 3 pages bellow the current page and < 3 pages after. (This all goes in the is paginated conditional)

Here you can see that other pages are displayed around the current page, I only have 3 pages so we don't see 3 up and 3 down.

Adding links for user specific posts

Now we would like to see all of one users posts when we click on their name.

In order to modify the results of a query from a view we can define a method called get_queryset()

For this I will create a new view.

from django.shortcuts import get_object_or_404
from django.contrib.auth.models import User

class UserPostListView(ListView):
    model = Post
    template_name = "blog/user_post.html" 
    context_object_name = 'posts'  
    paginate_by = 4

    # over ride query
    def get_queryset(self):
        user = get_object_or_404(User, username=self.kwargs.get("username"))
        return Post.objects.filter(author=user).order_by('-date_posted')

We have created a new list view, and defined a get_queryset method. Now we can use a django shortcut called get_object_or_404 to make user the user exists. We get the username from the url using self.kwargs.get('username'). Kwargs refers to the keyword arguments from the url. We then filter the posts be author and reorder then because we are overiding the query.
Finally add this to urls.py

 path("user/<str:username>", UserPostListView.as_view(), name="user-posts")

Last but not least we need to make a user_post template, as that's what we called it in the view. For this we can just copy the home template as it will be very similar. I will add a conditional on top to display the users name or 'Your Posts' of the user is looking at their own posts.

We will also add links in all templates to go to the users posts.

Thank you for reading part 4. Up next is the finally part where we will send emails to reset a users password.

DISCLAIMER: This is all from Corey Schafters Tutorial series, I you want to build this project I highly recommend you check out the videos If you want to build this yourself.

✨If you would like to follow my day to day development journey be sure to check my Instagram.

Django Diaries - CRUD

Richard — Sat, 08 Aug 2020 15:44:31 +0000

This is Part 3 of Django Diaries. Today we will learn about CRUD functionality in Django.

Again this is all based on what I learned from Corey Schafers Youtube Series. The code for this article from the tutorial is here: (Numbers 10)

So far we have seen function based views. Django also has class based views; these has more inbuilt functionality. There are a couple types:

List Views
Update Views
Delete Views
Create Views

List View Example

# This is the view we had for the home page:
def home(request):
    context = {
        'posts': Post.objects.all()
    }
    return render(request, "blog/home.html", context)

# Now converted to a class View.
from django.views.generic import ListView

class PostListView(ListView):
    model = Post
    template_name = "blog/home.html"  
    context_object_name = 'posts'  
    ordering = ['-date_posted']

First we specify which model the view should be looking at (this needs to be imported).
Class views look for templates with specific naming conventions: <app>/<model>_<view_type>.html, So to load our template we would call it post_list.html however if we want to use something else we specify a template_name.
We then need to pass the context, by default the list view calls this object, but we would have to change this in the template, so we can set a context_object_name.
Now by default the latest database update is at the bottom, so we can add an attribute called ordering by setting it to 'date_posted' it will order from oldest to newest thus if we set ['-date_posted'] the posts will be ordered from newest to oldest.

This view could have been two lines of code if we'd have stuck to the conventions.

Finally we need to load this view in the blog app URLs file. We use the as_view() method to load a class based view.

from .views import

urlpatterns = [
    path('', PostListView.as_view(), name="blog-home")
]

Now lets make a view to show the details for each blog post. This is like clicking a post to see the whole article.

from django.views.generic import DetailView

class PostDetailView(DetailView):
    model = Post
    # Default blog/post_detail.html

# Then set the url pattern
from .views import PostDetailView

urlpatterns = [
    path('post/<int:pk>/', PostDetailView.as_view(), name="post-detail")
]

Notice the angle brackets <> here we set variable in the URL, here it is expecting the primary key this should be an integer. Django handles this by looking it up in the model. We can them create a template by convention:

blog/post_detail.html

This is similar to the home view, The for loop was removed and because the view expects the model to be called 'object' the post variable was replaced with 'object', so from 'post.title' to 'object.title'

Now if we go to /post/1 we will see blog one. Then we can add these links to the anchor tags in the home view.

Creating a new Post

For creating django has set up a view. We need a form for the title and the content of the post:

views.py

from django.views.generic import CreateView

class PostCreateView(CreateView):
    model = Post
    fields = ['title','content']

    def form_valid(self, form):
        # get current logged in user
        form.instance.author = self.request.user
        # run parent form valid method
        return super().form_valid(form)
        # Finally redirect after submit

Then import this in URLs:

path("post/new/", PostCreateView.as_view(), name="post-create"),

This view expects the template to be called model_form.html so if your model is called post this should be called post_form.html.

We then use the form valid method to set the author. If we submit the form, the post will be created but django doesn't know where to redirect the user when the post is created. So back in the post model we define a get absolute URL method.

from django.db import models
from django.utils import timezone
from django.contrib.auth.models import User
from django.urls import reverse

class Post(models.Model):
    title = models.CharField(max_length=100)
    content = models.TextField()
    date_posted = models.DateTimeField(default=timezone.now)
    author = models.ForeignKey(User, on_delete=models.CASCADE)

    def __str__(self):
        return f'{self.title} from {self.author}'

    # Redirect will redirect to route and reverse will return 
    # the url as a string and let the view redirect.

    def get_absolute_url(self):
        return reverse("post-detail", kwargs={'pk': self.pk})

In the template we can then add the form and add a crispy filter.
We also need to make sure the user can't create a post of they aren't logged in. With functional views we used a decorator but we can't decorate a class, instead we import a mixin and let the view inherit it.

blog/views.py

from django.contrib.auth.mixins import LoginRequiredMixin

class PostCreateView(LoginRequiredMixin, CreateView):
    model = Post
    fields = ['title', 'content']

    def form_valid(self, form):
        form.instance.author = self.request.user
        return super().form_valid(form)

Note that mixins have to be placed in the brackets before the view.

Updating

class PostUpdateView(LoginRequiredMixin, UserPassesTestMixin, UpdateView):
    model = Post
    fields = ['title', 'content']

    def form_valid(self, form):
        form.instance.author = self.request.user
        return super().form_valid(form)
        # Finally redirect after submit

Add to URLs

path("post/<int:pk>/edit/", PostUpdateView.as_view(), name="post-update")

We provide the primary key so that django knows what to update, it will also use the same template as the create view. However we should make sure only the author of the post can update the post. This is where another mixin comes in:

from django.contrib.auth.mixins import LoginRequiredMixin, UserPassesTestMixin

class PostUpdateView(LoginRequiredMixin, UserPassesTestMixin, UpdateView):
    model = Post
    fields = ['title', 'content']

    def form_valid(self, form):
        form.instance.author = self.request.user
        return super().form_valid(form)

    def test_func(self):
        post = self.get_object()
        if self.request.user == post.author:
            return True
        return False

The test_func method is what the user passes test mixin uses to validate. We can use the get_object() method to get the post.
Then if the user who requested to update the post isn't the author the server returns 403 or forbidden.

Delete

We import DeleteView as we did the others. Here we need to make sure the user is logged in and is the post author. We can copy this from the update view.

class PostDeleteView(LoginRequiredMixin, UserPassesTestMixin, DeleteView):
    model = Post

    success_url = '/'

    def test_func(self):
        post = self.get_object()
        if self.request.user == post.author:
            return True
        return False

The only new attribute here is the success_url

Add to URLs:

path("post/<int:pk>/delete/", PostDeleteView.as_view(), name="post-delete")

The delete view looks for a _confirm_delete.html template.

blog/post_confirm_delete.html

This doesn't have a default form, so all we do is add a confirmation button.

Now we can add all the links. We can check of the user is authenticated show a create post button and if not show a login and register button.
Then on the post, we can check if the author (object.author) is the current logged in user (user) then show an update and delete button.

Thank you for reading part 3. Up next Django Pagination.

✨If you would like to follow my day to day development journey be sure to check my Instagram.

Django Diaries - Database & Users

Richard — Mon, 03 Aug 2020 16:11:18 +0000

This is part 2 of the Django Notes. Today we will implement a database, register and login users.

Again this is all based on what I learned from Corey Schafers Youtube Series. The code for this article from the tutorial is here: (Numbers 5 - 9)

Models

In Django Database tables are defined in 'models.py' we create a model for each table.

For a Blog, we would need a Post model, containing an author, a post title, the content and date.

from django.db import models
from django.utils import timezone
from django.contrib.auth.models import User

class Post(models.Model):
    title = models.CharField(max_length=100)
    content = models.TextField()
    date_posted = models.DateTimeField(default=timezone.now)
    author = models.ForeignKey(User, on_delete=models.CASCADE)

Here we have created a Post model with a character field of 100 characters, an unrestricted text Field, a date set to timezone.now this will be equal to the time of when the post was created. Finally we use a foreign key to create a one-to-many relationship as a user can have multiple posts but a post should only have one author. 'models.CASCADE' is a way of telling Django that if a user is deleted then the post should be deleted too.

To make the changes to the database, we have to make a migration.

python manage.py makemigrations

If you run make migrations you should see some numbers that show the number of migrations you have run: '0001_initial.py'. We can use this to view to SQL that will be run to make the table. Django uses SQLite by default and Django will do all the SQL for you.

python manage.py sqlmigrate <app_name> <migration_number>
python manage.py sqlmigrate blog 0001

To run the migrations we can run the migrate command:

python manage.py migrate

Let's see how we can query the database in the django shell.

(Assuming users have been created from the admin panel)

python manage.py shell

# Get the needed models
>>> from blog.models import post
>>> from django.contrib.auth.models import User

# Show all users
>>> User.objects.all()
<QuerySet: [<User: UserOne>, <User: USerTwo>]

# Show only first user
>>> User.objects.first()
<User: UserOne>

# Show first user that matched filter
>>> User.objects.filter(username="UserOne").first()
<User: UserOne>

# We can query a user
>>> user = User.objects.filter(username="UserOne").first()
>>> user.id
1

# See all the posts
>>> Post.objects.all()
<QuertSet []>

# Make a new post
>>> post_1 = Post(title="Blog one", content="New blog",author=user)

# Save the post in the database
>>> post_1.save()

We can make a nicer output for printing the post by adding str or repr dunder methods:

from django.db import models
from django.utils import timezone
from django.contrib.auth.models import User

class Post(models.Model):
    title = models.CharField(max_length=100)
    content = models.TextField()
    date_posted = models.DateTimeField(default=timezone.now)
    author = models.ForeignKey(User, on_delete=models.CASCADE)

    def __str__(self):
        return f"Post Name: {self.title} by {self.author}"

If we wanted to get all the posts by a specific user, then back in terminal we can import the models:

# all instances are under .modelName_set
>>> user.post_set.all()
<QuerySet [<Post: Post Name: Blog One by user>]>
>>> user.post_set.create(title="Blog 3",content="Post 3")
<Post: Post Name: Blog 3 by user>
# We didn't specify an author as we running the users post set

Using This Post data in the views

blog/views.py

from django.shortcuts import render
from .models import Post

def home(req):
    context = {
       'posts':Post.objects.all()
    }
    return render(req, 'blog/home.html',context)

Here we would be rendering dates in our template. We can change the date format using the | character as a filter.

blog/templates/blog/home.html

<small>{{ post.date_posted | date:"d / m / Y" }}</small>

We have now added a post models. However to view this on the admin page we must register it:

blog/admin.py

from django.contrib import admin
from .models import Post

admin.site.register(Post)

Now it will show up on the admin page and we can update blogs manually from there.

User Registration

It is a good idea to create a new app to hold the user logic:

python manage.py startapp users

Remember to add this to installed apps: 'users.apps.UsersConfig'

The Default Django forms aren't the prettiest, so we can use crispy forms. To use this run a pip install and add it to installed apps and then specify the styles.

users/views.py

from django.shortcuts import render, redirect
from django.contrib import messages
from django.contrib.auth.forms import UserCreationForm

# Django already has all the necessary logic such as validation handled

def register(request):
    # if the form is submitted validate if not just show the form
    if request.method == "POST":
        Form = UserCreationForm(request.POST)
        # UserCreation and validation comes from django
        if Form.is_valid():
            Form.save()  # save user and hash password
            # Grab the username
            username = Form.cleaned_data.get("username")
            # Render a message. You can grab this and conditionally render in the UI
            messages.success(
                request, f"Your account has been created. You can now log in")
            # Take the user to the blog screen
            return redirect("blog-home")

    else:
        Form = UserCreationForm()
    return render(request, "users/register.html", {'form': Form})

users/templates/users/register.html

Finally we need to add a url pattern to the projects url.py

from django.urls import path, include
from users import views as user_views

urlpatterns = [
    path("register/",user_views.register,name="register")
]

Now all the validation will be handled by Django and styles by crispy forms. NOTE form.save() here will actually add a new user.

Adding an Email field to the form

The Django form doesn't give us an email by default, we can add one manually. We create a file in the users app called 'forms.py'

users/forms.py

# make a custom form

from django import forms
from django.contrib.auth.models import User
from django.contrib.auth.forms import UserCreationForm
from .models import Profile

# inherit from userCreationForm
class UserRegister(UserCreationForm):
    # by default required = True
    email = forms.EmailField()

    class Meta:
        model = User
        fields = ['username', 'email', 'password1', 'password2']

In meta we define what model the form should interact with. We can then use this instead of the default UserCreation form:

from .forms import UserRegister

def register(request):
    if request.method == "POST":
        Form = UserRegister(request.POST)
        if Form.is_valid():
            Form.save()  # save user and hash password
            username = Form.cleaned_data.get("username")
            messages.success(
                request, f"Your account has been created. You can now log in")
            return redirect("login")

    else:
        Form = UserRegister()
    return render(request, "users/register.html", {'form': Form})

User Login

Django has most of this taken care of, so we can just import the remade views into the project 'urls.py' and render our own templates.

from django.contrib.auth import views as auth_views

urlpatterns = [
    path("login/", auth_views.LoginView.as_view(template_name="users/login.html"), name="login"),
    path("logout/", auth_views.LogoutView.as_view(template_name="users/logout.html"), name="logout")
]

These are class based views to we use the as_view() method. The login template will be very similar to the register template.

Notice the format of the href attributes. We open a code block and define a url and a url name which was defined in the path.

Another thing Django needs to login a user is somewhere to take them when they are logged in. By default I looks for an accounts view, but we can change this in settings.py by specifying a LOGIN_REDIRECT. We can set this to '/' to go to the home page.

If we wanted to change the navigation based on whether a user is logged in we can do this using DTL. By opening a code block and access the is_authenticated attribute of the user.

if user.is_authenticated

Restricting Routes.

If a user who isn't logged in we can stop them from accessing certain views. To do this Django has a decorator:

from django.contrib.auth.decorators import login_required

@login_required
def profile(request):
    return render(request, "users/profile.html", context)

If the user tries to access the profile without being authenticated. Django looks for a route at 'accounts/login/?next=/profile/'. We can again change this by adding a LOGIN_URL variable to 'settings.py'

Notice the parameter of next. Django is keeping track of where the user wanted to go and will redirect them when they login.

Uploading Images

To upload images use need to extend the default user model.

users/models.py

from django.db import models
from django.contrib.auth.models import User

class Profile(models.Model):
    # CASCASE if delete user delete profile too
    user = models.OneToOneField(User, on_delete=models.CASCADE)
    # profile_pics is a folder that will be created, if there is no image a default will be used.
    image = models.ImageField(default="default.jpg", upload_to="profile_pics")

    def __str__(self):
        return f"{self.user.username} Profile"

    def save(self):
        super().save()
        img = Image.open(self.image.path)
        if img.height > 300 or img.width > 300:
            output_size = (300, 300)
            img.thumbnail(output_size)
            img.save(self.image.path)

Image Field needs Pillow installed, this is a python library to manipulate images, so you can run pip install Pillow
Save the database by running migrations.

Remember to register this model with the admin page.

The save method is used to save the image on submit and then shrink the image, if the image is too big.

We can change where the images are saves by adding a MEDIA_ROOT and MEDIA_URL to the settings.py file. For example:

# Where uploaded files will be located.
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
MEDIA_URL = '/media/'

We now need to add the media to urls.py

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL,
                          document_root=settings.MEDIA_ROOT)

This allows usage only in Debug mode, we can use a different method in production.

When we make a user, currently a Profile won't be created. This is why we use signals to trigger an action. We want to make a profile when a user registers.

Make a new file called signals.py

from django.db.models.signals import post_save
from django.contrib.auth.models import User
from django.dispatch import receiver
from .models import Profile

# this allows to create a profile
# it sends a signal if a user was created


@receiver(post_save, sender=User)
def create_profile(sender, instance, created, **kwargs):
    if created:
        Profile.objects.create(user=instance)


@receiver(post_save, sender=User)
def save_profile(sender, instance, **kwargs):
    instance.profile.save()

# this has to go into ready in user app.py

app.py

from django.apps import AppConfig


class UsersConfig(AppConfig):
    name = 'users'

    def ready(self):
        import users.signals

Thank you for reading part Two. Next Up CRUD functionality.

✨If you would like to follow my day to day development journey be sure to check my Instagram.

Django Diaries - Getting started

Richard — Sun, 02 Aug 2020 18:28:50 +0000

I have recently started learning Django as my Back-end of choice. So to help me and any future learners, this series of notes will contain my notes and what I've learned about different parts of Django.

Firstly I have discovered a few YouTube creators so far who have awesome Django content:

Getting Started

The first step is to install everything needed to start working with Django.

I will assume you have python an pip installed. ```

pip install django
pip install virtualenv

We can start a project using the django CLI

django-admin startproject project_name


## Project Structure
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t5t73mt2w689joo4shlk.jpg)

Your project will look like this. You will have another folder inside with your app name and a 'manage.py' file.

- The `manage.py` file gives you command line commands to perform actions such as starting the server and updating the database.

- Within the second 'project_name' folder you have a couple of files. 
    - The `__init__.py` tells python that it's a python package. 
    - `settings.py` this allows you to configure the project.
    - `urls.py` this is where routing happens and takes the user to other places
    - `wsgi.py` is how the server communicates with the project. 
You won't have to touch the init file or the wsgi file.

### making a virtual environment

For bigger python projects I prefer to make a virtual environment. This allows you to install packages only on that project. 

You can create one in python for your Django project.

> In terminal

virtualenv env
env\Scripts\activate.bat

For Mac I'm pretty sure it's bin/activate

### Running the server 
You can start the server, and view the default landing page with the command given by the 'manage.py' file.

python manage.py runserver

This will tell you about unapplied migrations, but ignore that for now. You should see that your sever is running on localhost:8000

If you now visit `localhost:8000/admin` you should see the admin login panel. You won't be able to access that just yet but this is handled by the urls file.

from django.contrib import admin
from django.urls import path

urlpatterns = [
path('admin/', admin.site.urls)
]

This bit of code allows django to send the user to 'admin.site.urls' when they visit /admin. This is how you handle routes in django.

## Apps

You have now created a project. To start your website you create apps which handle separate functionality. Each app does something different, you can have multiple in one project (SoC).

python manage.py startapp blog

Your project directory will now look something like this:
(db.sqlite3 was generated when you ran the server)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1ycqp2qcp7djo4dn3l4b.jpg)

- `admin.py` - this is where you add models to the admin site.
- `apps.py` - Holds the name of the app this is added to settings.
- `migrations` - the migrations folder holds info about the state of the database. You won't need to do anything here.
- `models.py` - This is were you define your database schema.
- `test.py`  - This can be used for unittests.
- `views.py` - Views is where you define what the user sees.

#### Let's create our first View
> Views.py

from django.shortcuts import render
from djagno.http import HttpResponse

def home(request):
return HttpResponse("

Hello World

We can now map a url to this view, which will render 'Hello World' on the screen. To do this we create a new file in the app directory called `urls.py`

This will be very similar to the project urls.py:
> blog/urls.py

from django.urls import path
from . import views

urlpatterns = [
path("", views.home,name="blog-home")
]

An empty string will be the root url of / and would map that to the home view. However we also have to add this route in the project `urls.py` as that's where django will look first. For this we need to import include:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
path('admin/', admin.site.urls),
path("blog/",include("blog.urls")),
]

Now when a user goes to 'localhost:8000/blog' django will check the main 'urls.py' file and map to the urls file in the blog app. It will cut this part of and go to urls in the blog app. From where the user is mapped to an empty string '' and will render the home view. 

If you open this in the browser you will see a 404 page on 'localhost:8000', if we go to 'localhost:8000/blog' you should see "hello world".

Let's say we have added another view to the blog app called 'about', we don't need to add anything more to the project urls.py as we are already matching the blog app. We just add it to the blog/urls.py file like so `path("about/",views.about,name="blog-about")`

## Templates

To start rendering HTML pages we create templates. In the blog app make a new folder called 'templates' and within that as a django convention add another folder called 'blog'. This is were we add templates. I will make one called 'home.html' :
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2iv0aho3hxm5ax7cgkyt.jpg)

In order for Django to look for templates we must add the app to the installed apps array in 'settings.py'.
Navigate to blog/apps.py and you will see the name you add to settings:

INSTALLED_APPS = [
'blog.apps.BlogConfig',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]

We can create regular HTML pages in the template and add variables from context via the DTL (Django template language) syntax; this is very similar to Jinja.
- Any code that is repeated through out templates can be added to a base.html file and then inherited. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yv6qrjq0lz5mp2eult4s.jpg)

Here I have everything that will be repeated. You can them extend this base and add extra content between the blocks:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ffafujxtll4eoebyd85t.jpg)

You can now render the template from the blog view, using the render function:

from django.shortcuts import render
from django.http import HttpResponse

def home(req):
return render(req, "blog/home.html")


We can pass information to the template by passing context to the render method.

posts = [
{
"author":"Richard",
"title":"New blog"
},
{
"author":"Steve",
"title":"This is my new blog post"
}
]

def home(req):
context = {
'posts':posts
}
return render(req, "blog/home.html", context)


We use DTL to access the variables 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9nxud71dpnxq5muy9r33.jpg)

#### Adding Static Files

Static files are stored in a static folder in the app. I will add my CSS file like this:

project_name > blog > static > blog > main.css

To add this to the base template we first load the static files in the top:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t01a0d88jjtjj9fa0wec.jpg)
Then Link the CSS:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vku1nkkmstjw1et6zatw.jpg)

## Using the admin page
If recall visiting 'localhost:8000/admin' takes you to the admin page, but we couldn't quite log in. We need to create an admin user in our terminal:

python manage.py makemigrations
python manage.py migrate
python manage.py createsuperuser

If we run createsuperuser without making migrations first it will throw an error. Migrations create updates to the database. This will ask you to add a username and a password.

Here you will be able to see all the models and tables, along with users. 



Thank you for reading part one. I will be posting more as I learn. 


-----

✨If you would like to follow my day to day development journey be sure to check my [Instagram](https://www.instagram.com/me_richard1/).

What I learned from 100 Days Of Code

Richard — Wed, 22 Jul 2020 11:35:06 +0000

I am going to talk about why I did and am doing the 100 days of code challenge; and why I think you should too.

What is 100daysofcode?

100DaysOfCode is a challenge created by Alexander Kallaway. It requires the undertaker to code for at least an hour a day and tweet their progress with the #100DaysOfCode hashtag. They should also connect with two other people who are doing the challenge.

My experience

I decided to start my first round of 100 days of code on the eighth of November 2019 and completed it on the sixteenth of February 2020. I posted my progress on Instagram instead of Twitter purely because Instagram allows you to write more detailed captions. For me, each round has an end goal. Round one had an end goal of improving my HTML and CSS skills.

I am currently just over halfway through my second round; whose aim is to learn React and make a start with back-end development. If you are wondering how I am doing, feel free to check it out.

Why it's a good idea

Doing the challenge helps you build a coding habit. Habits are beneficial as they create neurological cravings in your brain. Thus allowing your brain to release dopamine which is a "pleasure chemical"; this further emphasises the enjoyment of the task, and you learn more from it.

Sticking to something for 100 days can be challenging, however making it public and sharing my progress motivated me to keep going. The community spirit is just amazing. You meet so many amazing people who support you on your learning journey.

Habit building is a crucial life skill. Being able to set a task and stick to it daily will help build resilience. Coding for 100 days helps developers at all levels either learn or develop new skills.

Why I did it?

For me personally, I undertook the challenge because it motivates me to code every day. I believe that if I didn't start my second round I would be nowhere near as confident with React JS as I am now. If you are interested I added my notes here:

MeRichard123 / Learn-React

I created this repo while I was learning ReactJS it houses all my notes from various sources and videos I watched as I went. Feel free to use this as a reference. A table of contents is included in each folder to help you navigate.

Another bonus is that tracking progress lets you see how far you've come. Once you have finished you can look back on the early days and just see how much you've improved since.

If you ever look back at code you have written in the past and think "Ahh that's awful", that's a good sign that you have improved since.

What did I learn?

Looking back I learned a lot. Sixty days ago, when looking at React Code I was sort of deterred and scared by this whole JSX jargon. However, after looking into it more I came to understand it all.

Go back One hundred and Sixty and Responsive web design felt unnatural like forcing content in place with 'a million' media queries; now I use a maximum of three media queries "for smaller projects" to change the font size (and even that won't be needed with the new CSS clamp property).

Recommendation

I definitely recommend you undertake this challenge, not only will it serve as the development of your skills it will also be a form of personal development. Furthermore the feeling you get after completing 100 days of something is so rewarding, the pride and contentment.

Best of luck to anyone learning a new skill or developing one <3

✨If you would like to follow my day to day development journey be sure to check my Instagram.