If you are a web developer, choosing a web framework to build an app is a big deal. There are quite a number of frameworks out there to pick from, each designed to meet general as well as specific requirements.
Django is an open source backend framework that focuses on one simple principle: rapid development. By following common pragmatic paradigms such as using MVC (model-view-controller) core architecture, and having its own Object Relation Mapper (ORM) to make database CRUD operation calls, Django makes it to build complicated features quickly.
Another philosophy the Django community follows is called DRY (or Don’t Repeat Yourself ) that states that you write the code in a way such that you can reuse it instead of writing too much boilerplate code in your application
In this tutorial, you will be building a small Django web application with the help of the Crowdbotics App Builder which reduces the amount of time needed to get your Django app up and running even further.
You: An app builder, what? Why?
Using an app building platform is potentially one of the best things you can do in terms of saving time and cost that goes in order to build your next product or service. The Crowdbotics App Builder greatly reduces initial setup time for Django applications.
With these steps, I do not want to convey that this is a promotional article. Those are not my intentions. I just want you to know everything I know about this app building process such that if you decide to use Crowdbotics platform as a service, you know what you are getting into.
The workflow is simple and the intention is to help solo/indie/startup and existing team to build and launch their product(s) without spending too much time in scaffolding or generating the project. Crowdbotics has multiple boilerplate ready to use projects to get you started.
In the next section, you will be building your first Web App app with Django and Crowdbotics.
To setup a Crowdbotics app, you have to visit app.crowdbotics.com and register an account. You can either login from Github or use other authentication (an email) options to create a new account. Once you are logged in you will be welcomed by the dashboard screen similar to below.
Click on the big plus sign button to create a new application and it will prompt with options of which tech stack to choose from in the next window.
Choose Django under the category web app.
Scroll down below and enter the name of the application and click the button Create my app!.
In a matter of seconds, the app builder will generate a new application for you. You will be prompted with a dashboard interface of your project. There are so many options for you to do such as collaborating over Slack with your team members, or viewing the source code of your project on Github or requesting for a designer or developer from Crowdbotics services and so on.
The Crowdbotics App Builder generates an automatic Github repository under their host name. It also shows recent PRs and commits made on the Github repository. So take a halt and take a look at this repository. To use this scaffolded project, all you have to do is clone this repository and start working on it. There is a README.md file attached to every project or app generated using Crowdbotics app builder that has a reference on how to get started.
Open your favorite terminal and run the below command to clone the repository.
The Github URL in your case will be different depending on the name of your web application. Once the cloning is done, traverse inside the project directory. You will get the following structure.
Take a look at the project structure. djangowebapp_demo_1240 is your main project builder.
Open up Pipfile and look out for the packages that are needed to install in order to run this web app. In this line, notice that our project requires you to have Python version 3.6 installed on the local dev machine.
If you do not have it already, use the below command from terminal to install.
Also run the below command, to install all dependencies described in Pipfile.
In the previous section, you looked into the project structure made available to us by Crowdbotics App Builder. Now, take a look at the file called settings.py. You will notice many different settings such as DEBUG mode, application definitions, middlewares, database setting, setting up Timezone or enabling/disabling Internationalization.
There are many other settings, but we are not going to look at them in detail here. The main concern in this section is to get familiarize with the concept of App Definitions. Django comes pre-installed with some default apps such as authentication and session manager apps. An app in Django is known as a self-contained unit of code which can be executed on its own. Take a look at the section INSTALLED_APP in the above file.
Each app can operate different functionalities such as serving a webpage to the browser or handle user authentication, handle user session and so on. Any apps you create or install a third-party, has to be added and mentioned in this section.
To verify that a Django project works, run the following command.
If the above command successfully runs, you will see a similar output below.
Django server always run at http://127.0.0.1:8000/ unless you want to change the the port. Using the development server you can create your app rapidly and test it well before deploying on the production.
To create our first Django app run the following command from a terminal window.
Django comes with the utility that automatically generates the basic directory structure of an app. All you have to focus is on writing the code rather than creating files and folders. Using manage.py command, the newly created Django is created as a top level module in the directory structure rather than a sub module.
The directory structure of the helloworldapp will be similar to below.
To get Django to recognize the newly created app, open settings.py file and add the name of your app under INSTALLED_APPS section.
Now run the development server and visit the URL http://127.0.0.1:8000/ in the browser. When the page loads, you will get the warning that you have unfulfilled migrations. Migrations in a Django app, help you change the database schema without losing any previous data. Whenever a new database model is created, running migrations will update the existing database tables to use the new schema without you having to lose any data. Migrations also help you to avoid going through the process of dropping and recreating the whole database yourself.
To use migrations in our application, run the following command.
If the command runs successfully, you will see a similar output like below.
Try running the development server again and visit the local host URL again, you are not going to see any warnings this time.
You will have to create templates in the helloworldapp directory to avoid errors in the future. Use the following terminal commands and create new folder templates and inside it a new file called index.html which is going to be our first view.
Next, open the index.html file and the following snippet.
This page will still not render as you haven’t configured the views and let the Django app know about the new view to render. To configure views, go to the helloworldapp directory and inside it, open file views.py. Add the following content.
A view in Django app determines what to display on a given route. In the above file, you are telling the Django app to render the HTML file index.html. However, this will not work. We still need to setup a route and map it to this view.
To map the route to our view, open a file called urls.py inside djangowebapp-demo-1240/djangowebapp_demo_1240. It consists of the following code.
Modify this file accordingly.
Now go back to the root directory and run the development server with the following command.
In the browser window, you will notice the following result.
This is just a start.
If you are already a Django expert, I urge you to take a look at this process of building the application that saves a lot of time.
You can find the complete code at this Github repository. 👇
crowdbotics-apps/djangowebapp-demo-1240
_This django application was built with Crowdbotics www.crowdbotics.com - crowdbotics-apps/djangowebapp-demo-1240_github.com
Aman Mittal
Originally published:
March 12, 2019
