DEV Community: Katie Clark

Django JWT Auth

Katie Clark — Tue, 18 Aug 2020 22:48:25 +0000

We've made it! Now that your DB is set up(for the most part). I'm going to dive into Django Auth.

First, you will need to install rest framework simple jwt:

Next, you are going to make two directories for your seed.py file. These will need to be located in your app folder:

For now, that is all we will be doing with the seed.py.

You will need to include 'auth' in your admin(project folder) urls like this:

Next is Permissions classes, these essentially outline what data your end users can access. There are a few different permissions classes and I will go over the most popular ones:

If this is an at-home project/test environment, you may be interested in AllowAny (this basically alleviates all the permissions for a specific class).
ReadOnly allows for the user to access the data, but not change the information and IsAuthenticated allows the user to access and change the data, as long as they've been authenticated. There is the option to have ReadOnly and IsAuthenticated together, since you will want to authorize most of your end users and just allow them to view the data.

You can have a global permissions class listed in your settings.py and then have custom permissions in your views(maybe you want most models to have authentication, but a few classes to have no authentication)!

If you want default global permissions classes you add them in your settings.py like so:

Then, for custom permissions in your views, you will need to import permissions and include the permissions class in the specified model's view:

I chose AllowAny for mine, but use whatever works best for your project.

You will need to update your CORS permissions in settings.py, this will determine which sites are allowed to access your backend data.

Next you will want to add the Token and Refresh Views in the project folder in the urls.py file:

The TokenPairView brings in JWT and Refresh tokens, refresh is used if JWT is expired. That way, the user does not have to re-login. The JWT Token expires relatively quickly, in order to change the token lifetime you can update it in settings.py:

First, import timedelta at the top of your settings.py:

Then update this below in your settings.py file:

Once that is completed, you will want to start seeding data to confirm your permissions and auth tokens are working! My next blog will go into Admin View and checking Tokens in Postman.

If you are seeding from an external API, check out this great blog:
https://medium.com/@chilinski.a/how-to-seed-a-django-api-with-data-from-an-external-api-b577b6e6ad54

If you had followed this blog previously/did not create your User model first that points to the Django Auth. Follow these steps!

These next steps should ONLY be used if you are in the early development stages and NOT in production.

First, you will need to delete all your migration files in the migrations folder-- except the init__py and pycache folder.

Delete your dbsqlite3.

Re-run your migrations:

Thanks for reading!

Note: Throughout this process, it is a good idea to continually run your server to confirm that everything is working! It makes it much easier to debug, one at a time instead of having multiple errors once your are ready to run your server!

Additionally, pushing your Django Repo to Github-- be sure to encrypt your SECRET_KEY in your settings.py file in a .env file and then include the .env in your .gitignore file.

In order to access stored information in your .env file, you will need to install the python-decouple package and import it into your settings.py file.

To install:

To import:

updated SECRET_KEY:

Be on the look out for the next installment in this series where I will be creating a custom User model, using Admin View and Postman to check CRUD and auth tokens!

Happy Coding!

Job Searching? 3 Tips on how to make your Github standout.

Katie Clark — Tue, 11 Aug 2020 18:00:13 +0000

Recently, I attended a webinar on 'What Makes a Strong Github?' and was compelled to share some of the information I felt most useful to other job seekers.

1:Git commit, at least once per day.

I know, maybe this is obvious, but it's so important. Potential employers will be looking at your activity and can see how often you commit and code. Even if you are working on some local project, always create a repository and commit! I created a repo for my CodeWars exercises, that way I am practicing and can also get my commits in.

2:ReadMe's and Pinned Projects are essential!

Make sure that your Pinned Projects are projects you are proud of because employers will look at those first! If they are just labs or minor exercises it will not look as professional and will not showcase your work effectively. Always put your completed projects in the Pinned section. That brings me to ReadMe's-- if you are a full stack dev be sure to link your backend repo in your frontend ReadMe and vice versa. This will be helpful when employers look to get the full scope of your project. Additionally, always include screenshots/demo video in your ReadMe. People are visual and if you are a full stack or frontend dev, this can be extremely influential on the employer and a great chance to show off your work!

3:Remember to remove your console.logs!

Wow, why did I not realize this? In my mind I thought "oh, yeah, look I'm checking my work!". Nope, employers see this as messy code. Same with indentation, always make sure that your code is clean before you commit! Best practices is to get a linter for your source-code editor!

Here is the full video, there's a wealth of good information in here! https://www.youtube.com/watch?v=jUYQPI2RUpw&feature=youtu.be

Happy committing!

Step by Step Guide on how to set up a Django database Pt.2(Model, View and Serializer)

Katie Clark — Wed, 29 Jul 2020 01:24:36 +0000

Welcome back! Here's part 2 of my How-to set up a Django database:

WARNING/EDIT: If you are creating a Database with Users/Auth, you will need to do these steps, BEFORE migrating for the first time! If you have already gone too far, I will show how to remedy this in my Django Auth Blog.

Directly from Django Docs:
Due to limitations of Django’s dynamic dependency feature for swappable models, the model referenced by AUTH_USER_MODEL must be created in the first migration of its app (usually called 0001_initial); otherwise, you’ll have dependency issues.

You will need to put this in your Settings.py in your Project Folder. It should be AUTH_USER_MODEL = [your_app_name.user]:

Additionally, add this to your Models(You can customize further later on, I will be going into detail in my Django Auth installment):

Then, you will need to register your user model in your Admin.py:

For starters, let's make sure that the file structure you have is correct. You will need to have the master folder contain the src and venv folders, within the src folder you should have the manage.py, project and app folders. Like this:

Once you have confirmed your file structure is correct- Django is VERY particular and you need to have it set up in a way that enables you to run the manage.py and have access to your project/app folders- we can start on the first aspect, the Model!

Important Note: Django's syntax is built around indentation. There is no curly braces or 'end'. You need to make sure that your classes and methods are indented correctly in order for them to run.

Go to your models.py in your app folder. There we will be writing the classes and their correlating fields (basically columns that will be storing information in your Database). For my Model, I included a created_at field where it is using a time stamp. At the top of my file, I included:
from django.utils import timezone
import datetime

This is only needed if you would like to include DateTime.

In the Model, in addition to the fields you will need to add the data type that the information will be stored in. The most common is CharField, which requires a max_length attribute.

TextField is for much longer text, like paragraphs. It will still store TextField as a string, but does not need any attributes.

Finally, the DateTime field includes auto_now_add:True, which means the time stamp will be added automatically at creation. The null=True is set in the event the created_at is not existent, it will still create the instance. Finally, the blank=True means that is can be left blank and not required in your admin or custom forms.

Next, go to your admin.py file and register your models:

Once that is completed, the next step is to create the Serializer! In your command line, cd into your app folder and create a serializers.py file. Run: touch serializers.py. Then, cd back into your src folder when you are done and create your serializer:

The Serializer includes just the models and fields, there are additional attributes that can be added to customize your Serializer. One note is that Django does not automatically create an id(the Primary Key) for each instance, instead it leaves it open for customization. I included an id, because I like to have that field as my Primary Key, but it is completely up to you!

Next we have the View! The view determines how the class will be displayed. You will need to include the queryset and serializer_class(this will provide the information needed to render the data). Also, be sure to import the models and serializers into your view file:

Finally, we will need to create routes for our views! This is done in both the urls.py files in your app and project folders.

First, in your app folder register your router. There will be a router.register for each model you have:

Next, go into your urls.py in your project folder and include the urls from your app:

Hooray! Everything is set up! Be sure to run your server and check your Admin site to confirm everything is showing and perform your CRUD operations!

Be on the Look Out for my next installment in this series: Django Auth

Feel free to check out my github repo: https://github.com/kathryn0908/django_blog

Happy Coding!

Step by Step Guide on how to set up a Django Database

Katie Clark — Mon, 20 Jul 2020 23:23:43 +0000

For my Capstone project with Flatiron Bootcamp one of the requirements was learning a new technology. Since I have an affinity for backend data I wanted to take a stab at Django. While researching I noticed a lack of step-by-step guides and thought I'd write one!

To start off you will need to download django and pip(which is a package management system for django). If you are a Mac user, like myself, you will already have python installed. Make sure you have the most recent version of python before starting your project!

Additionally, you will need to install pip3. Run: install pip3.

Once you have confirmed you have the most recent version of python and pip, create a directory for your project. Once in your project, there are several commands you will need to execute.

You will need to first create a venv, which stands for virtual environment. This ensures that any changes made to your website won't affect other websites you're developing. You will want to create the venv with the most recent version of pip, pip3. Run: pip3 install virtualenv.

Once completed, I ran an additional code snippet to change the name python3 to just python in the venv. When running commands you must have python included prior to your command. You will see what I'm talking about later in this guide. Run: virtualenv --python=python3 venv.

After creating your venv and renaming python3 to python, you will need to activate your venv. When it's installed, it includes a bin folder that you need to activate. Run: source venv/bin/activate. Once activated, it should look like this, where it has (venv) before the command line:

Next, you will want to install Django in your venv. Run: pip install django.

Then install the django restframework:

Once these steps are completed, you can create your project folder. Run: django-admin startproject [your_project_name].

Your file structure should now look like this:

cd into your new project folder and rename the folder src:

cd into your src folder once it has been renamed.

You will need to put this in your Settings.py in your Project Folder. It should be AUTH_USER_MODEL = [your_app_name.user]:

Additionally, add this to your Models(You can customize further later on, I will be going into detail in my Django Auth installment):

Then, you will need to register your user model in your Admin.py:

Ok...back to the standard set up....

Once you are in your project src folder, you will need to run: python manage.py migrate. This will migrate over all of the Django admin and user information that comes pre-packaged with Django!

Then, create a super user- this will be your admin information for you to access and change your backend data on the web browser. Run: python manage.py createsuperuser.

It will prompt for a user, email and password. The email is optional.Once completed the terminal will say: SuperUser created successfully.

To confirm, run: python manage.py runserver click on the localhost site provided in the terminal and login using the credentials you just made!

Finally, you can start your app! Run: python manage.py startapp [app_name]. This is where you will begin to use python manage.py at the beginning of each command you run.

Your file structure should look like this:

Install cors headers using: pip install django-cors-headers.

Once your app is created, be sure to add your app name, rest framework and cors headers to the list of installed apps in settings.py.

Include cors headers information in your middleware in settings.py:

Once that is completed the fundamentals of your django database are set up! This is part 1 of (at least) 2 blogs I will be creating to show how to set up and create your Django DB.

EDIT/TIP: You may want to name your app folder with additional clarification such as: [app_name_app]. In order to differentiate between the project and app folders. You will always need to run commands from your project folder in order to access the manage.py file, so it helps to have a distinction between the two!

Happy Coding!

Tips and Tricks on how to be a better coder.

Katie Clark — Tue, 07 Jul 2020 16:55:52 +0000

I decided to write this is order to give some perspective and hopefully some advice new coders. Learning at a bootcamp is no cakewalk, that's why they call them bootcamps. And I have to say it was nothing like any educational experience I have had in my life. The amount of material you need to pick up and practically master, in a matter of months, is vast and can be daunting at times. It took me awhile to adjust and, in turn be a better coder. Here's a few tips I've learned along the way:

GET GOOD SLEEP - sounds obvious, right? But the truth is, when you are in the trenches you want to capitalize on your time as much as possible. A lot of students, and coders in general, will code into the night and try to squeeze out their last bit of motivation. Here's the deal though, for every hour you stay up trying to get something done-- the higher chance you are going to fall into an error pit(especially for newbies). What's an error pit? An error pit is when something goes wrong, you can't figure out what it is and instead of doing the work you wanted to get done, you are stuck trying to solve the error FOR HOURS. Most of the time, it's a relatively easy fix, but your brain is tired and it makes it that much harder to solve. Your adrenaline is pumping because you think you've 'broke' your project, which causes more stress than is needed. This has been an experience of me and other's in my cohort. The thing is, after a night of sleep, they solve the problem in a matter of minutes. Another, aspect of this is when you don't get good sleep your problem solving skills greatly suffer. I have had a few times where I didn't sleep as well as I liked and I could tell my productivity when down significantly.

Tip: A great way to solve this that has worked for me, is to give yourself a schedule. Only allow yourself to work 9 hours per day. I have a set time that I do not continue coding after 7pm. After 7pm, my brain starts to get tired and I never get what I want done. Instead, I relax, get a good night's sleep and start out again at 9am.

2)Exercise, exercise, exercise. It seriously amazes me how much more productive I am when I do between 15-30min of exercise per day. Something about getting your blood pumping and your brain and body alert sets your pace for the day. Additionally, the endorphin rush is especially helpful when running into problems(which I will explain more in my next point).

Tip: I do want to say, if you are not the exercise type- try walking! It's a great way to get out, get some vitamin D and still refreshes you to code!

3) Mindset is everything when it comes to coding(queue good sleep and exercise). I've gotten to the point in coding where error messages, excite me. It sounds masochistic, but the truth is, it's a learning experience! Having a positive mindset will take you miles in coding. You need to have grit, enjoy working through obstacles, and solving problems because these are the personality building blocks of a proficient coder. If you can take a problem head-on and enjoy it for what it is, you are in the right field!

Tip: Being positive will always set you on the right foot. For me, it enables me to actually solve the problem faster. Being able to get excited and learn how to fix something enables better problem solving and better results. When someone get's stressed about an issue, hormones that can affect you negatively set in, you can actually hurt your ability to solve the problem and you have a bad experience overall.

I understand, yes these tips seem obvious--right? The reason why I wanted to write this is because despite it being obvious, we all fall into these pitfalls from time to time and it's especially helpful for new coders to take these tips to heart. Hope these help!

Multi-Relational Models in Ruby, how to use 'includes' to your advantage.

Katie Clark — Tue, 30 Jun 2020 16:26:40 +0000

For my Charity Organizer project, that I completed through Flatiron's Coding Bootcamp, I truly learned the in's and out's of Ruby's relationship models. The project involved four relational tables: User, Charity, Favorites and Donations. At the time, I thought 'yes it's one more than usual, but how crazy can it get?'. Right?, Wrong. I searched high and low through Google and even had an instructor help me determine what the correct syntax was for connecting one of my models. I wanted to share with you my findings so that hopefully, in the future, this will help someone much faster than the hour+ of digging I needed to do for a simple line of code.

First, I'm going to show you my models to better explain the relationships between all of the classes.

User:

Charity:

Favorite:

Donation:

The User and Charity models have slightly more complex relationships than I had encountered before, which made it difficult when determining how to use 'includes' in my Controllers. Specifically, my Favorites Controller. I wanted a user to be able to create a Favorite of a Charity and then add/post donations to said Charity on their own personal page. This became difficult because Favorites and Donations are not linked in any direct way, so it was not just a simple 'includes' statement. I had to include the Charity class and through the Favorites class, access the Donations class. Which I thought would be simple to find information on, right? I mean how many large-scale corporations have multi-relational databases, if not all? This proved more difficult than I had anticipated and after an hour of searching(and really only playing around with the syntax), this is what finally worked:

Additionally, this is what I used for my Charities Controller:

This finally enabled me to access the props in my frontend React application and made my project work! I hope this helps any of you in the future in connecting multiple databases using Rails. Happy coding!

Optimistic Rendering...what is it and why is it important?

Katie Clark — Mon, 01 Jun 2020 17:17:02 +0000

Optimistic Rendering. I had heard it a few times early on in my quest to becoming a full-stack developer, but did not recognize the importance and influence it has throughout frontend and full-stack development. Why is it so important? As soon as I discovered what exactly Optimistic rendering was, the relevance became clear. To better understand Optimistic rendering, I want to also explain its counterpart, Pessimistic rendering. Pessimistic rendering is the opposite of Optimistic rendering and is considered to be "expensive".

Well, what is "expensive"? And what does that even mean?

Essentially, what Optimistic vs. Pessimistic rendering boil down to is whether or not events on a page happen before or after they fetch information to and from the database.

Optimistic is before, Pessimistic is after. The reason that Pessimistic is so "expensive" is because rendering content that first must be stored in the backend and then retrieved back to the frontend can take a long time, in an end-user's eyes. Most websites use Optimistic rendering because it enables the user to see their results fast. Fetching pessimistically to the backend first can leave the website open to potential vulnerabilities. Especially in the event that something on the backend happens to misfire or take longer than expected.

In our current world, especially in the context of the internet, people consume things quickly and expect instantaneous feedback. According to Kissmetrics, 47 percent of visitors expect a website to load in less than 2 seconds, and 40 percent of visitors will leave the website if the loading process takes more than 3 seconds. This is the instance where something can become "expensive", you want end users to be engaged and stay on your site for as long as possible. Losing users at a fast rate can be damaging to your companies long-term success, which is why Optimistic Rendering is now the status quo for front-end web development.

Now, for the "how". Because Optimistic rendering sends the fetch after the event, the code in javaScript looks something like this:

This is in vanilla JS. I created an update eventListener that uses FormData to get the information input by the user once the form has been submitted. By adding the fetch call to the end and adding the event.preventDefault(), which enables the update to be made without reloading the page, this optimizes the user's experience and facilitates longer engagement.

source for statistics on user engagement:websitemagazine.com/blog/5-reasons-visitors-leave-your-website