How To Build A Django Web App Using Termux And Push To GitHub
Tags: webdev, termux, django, github
Published: 2022-04-10 14:40:20

## INTRODUCTION:

In this article, you will learn how to build a django web app on your android phone using termux and push it to GitHub while keeping your code secure. If you do not have a laptop, or you need to push your code to GitHub on your mobile phone easily, then this article would be very useful to you. 
By the end of this article, you would have learned how to install termux on your android phone, how to build a web app using Django, how to protect your Django secret key in your web app and how to install Git and push your code to GitHub.

First, what is Termux?
Termux is an application that runs on android phones. It is a terminal like the command prompt on laptops that can run programs.
Django is a programming language framework that is used to build server-side web applications.
GitHub is a version control application where you can save your code or documentation, make changes and also collaborate with other developers on projects.

## PREREQUISITES:
Here are the prerequisites you will need for this tutorial:

- A formal knowledge of Python

- An android phone of version 7.0 and upwards.

- Internet connection(because you are going to be downloading packages and you need the internet for that)

## STEP 1 - INSTALLING TERMUX
First, you need to install termux. There has been an update and the termux app on Google play store is no longer supported. You can download it from F-droid. When you open this [link](https://f-droid.org/en/packages/com.termux/), click on "download APK" for the first link you see.

![Termux download](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tx8xflgjsbdi5u0nk2zb.png)

After it has successfully downloaded, you click on the file and it would request for your permission, if you have it set. Grant the permission and the app will be installed.

![Termux installation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijgunqjtetxyx1rpx13w.png)

You can open it. This is what you would see.



![Termux tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s5yx1ee3h9k681s7b21l.png)

`apt update && apt upgrade`



![Termux shell upgrade](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdpyggx89k65urfo06k1.png)

This will install and upgrade all the packages used in the termux app.
During installation, type in N, unless you want to configure the app for special use.

![Termux command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f2xhwvj2iw9u9ala3vap.png)

Now, after downloading, you need to set up your storage so termux can access your local files and you can save files there as well. To do that, enter this:

`termux-setup-storage`


![Termux Storage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/euew6c6hm5hih7dem4ur.png)

It will bring up a permission box, click on allow.
After this, you can check your storage to know the files contained. By entering:

`cd storage`

This would take you to the storage on your device. You can enter:

`ls`

This will give you a list of all the files, and folders in your storage.
You can `cd`into any of the folder and `ls` to check them out.

_Note_: if you want to go back to your previous folder or to your root, enter:

`cd ..`(and press enter)

![Linux command on Termux](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wg3versomy2z4rydf4f9.png)

## STEP 2 - BUILDING THE DJANGO WEB APP
**Installing Python:**
To build the app, enter this:

`pkg install python`

This will install the latest version of python. To confirm that you have installed python, enter:

`python`


![python installation on Termux](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ss3ag0usce1w3713ftb0.png)

To exit the python shell, press _Ctrl+Z_

**Installing Django:**

After that, you need to install Django. 
 Enter:

`pip install django`


![Django Installation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o4bj8ctks2v9zr1c9swz.png)

That should install it.

Now, the application is called zicodx_project.
 You can create this manually by going to the file manager and creating a folder there. Or you can `cd` to the folder you want and I am choosing downloads in mine. Then, you enter:

`mkdir zicodx_project`

That should create a folder in the downloads folder.


![Creating a folder for Django](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5zahmh2yskipoaupu1m0.png)

To confirm, enter:`ls`

Then `cd`to the folder you just created and enter:

`django-admin startproject zicodx_project .`


![Django App Installation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sn8yf7tv29aql0y2lu7p.png)

_Note_:Do not forget to add the dot. That would create a manage.py file in your folder.

**Creating The Database:**

You create the database by entering:

`python manage.py migrate`


![Creating a database for Django](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vuywyc4oleds3b7da64o.png)

After creating the project, you can view it by entering:

`python manage.py runserver`

Go to your web browser, type in `127.0.0.1:8000`
This will display a default web page rendered by Django. If you are seeing this web page, then the project was successful.


![A default web page for Django](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w8sf00d3udhrz6wb3i1v.png)

To exit the session, enter _Ctrl+C_

**Creating The App:**

Next is to create an app for your project. This is what will house all the files running the app on the project you created. Enter:

`python manage.py startapp zicodxapp`


![Creating A Django App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtet9fvtltmsk0osqqxj.png)

Now, you need to add the app you just created to your settings.py file which is in the zicodxproject. Open the ACode editor or any other editor you installed. Search for the zicodxproject where you saved it and open the settings.py file. Add this: 

```
#My apps
'zicodxapp',

#Default apps
```


![Setting up settings.py for Django](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5dgze0ws32xttu1dsxy5.png)

Now, in the same folder where you saw the settings.py file, open the urls.py file there, include the urls for zicodxapp by entering:

```
from django.urls import path,include

urlpatterns = [
.........................................
 path('', include('zicodxapp.urls'))
]
```


![Setting up urls.py for Django](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9d89akwmugia4ippg06e.png)

After that, go to the zicodxapp folder and create a new file in it, save it as urls.py. This will be the url patterns file for the zicodxapp.
Add these lines of code in it.

```
from django.urls import path #importing the necessary documents

from . import views

app_name ='zicodxapp'
urlpatterns = [
 path('', views.index, name='index'),
]
```


![Creating a urls file for Django](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qzq227mlwqbnhncadg86.png)

Then, open your views.py file (which is in the same folder where you created your urls.py) and add these lines of code:

```
from django.shortcuts import render
def index(request):
 """The home page for Zicodxapp.""”

return render(request, 'zicodxapp/index.html’)
```


![Creating a views.py file for Django](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2wpr2yb4h0hx0wp8t6l3.png)

**Creating a template;**
Now, you are going to create a template. A template is a html file Django renders on the page you are building. This is the index.html file that you already added in your views.py. 
 To create a template, follow a routine which is, create a folder in your zicodxapp folder and save it as templates, inside the templates, create another folder and save it as zicodxapp, create a file in it and save it as index.html. 
 This is a redundant practice which Django uses when searching for templates. So, make sure you save it like that: _zicodx_project/zicodxapp/templates/zicodxapp/index.html_
 After you are done, open your index.html file and enter this:

```
{% load static %}
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport"
content="width=device-width,
 initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible"
content="ie=edge">
 <link rel="stylesheet" href="{% static 'zicodxapp/main.css' %}"/>
 <title>Zicodx Insurance</title>
 </head>
 <body>
 <h1> Zicodx Insurance Homes</h1>

<p>At Zicodx Insurance, your home is secured.</p>
 <span>Give us a trial today</span>
 <small>A trial will convince you</small>
 <img src="{% static 'work1.jpg' %}" alt="work picture"/>
 </body>
 </html>
```


![Creating a html file for Django](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y05e2oqm5anzkqi5qrzl.png)

Then, create another folder in your zicodxapp, save it as static. Then create another folder in your static folder, save as zicodxapp, create a new file and save as main.css, which is the .css file that you will link with the index.html. For the image, save it in the static folder directly.
 The CSS file will be in this structure: _zicodx_project/zicodxapp/static/zicodxapp/main.css_

The image file will be in this structure:
_zicodx_project/zicodxapp/static/image.jpg_

To see how far you have gone, you can run

`python manage.py runserver`


![Creating a css file for Django](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m165z77x303ajintp3lf.png)

Seeing how you have come so far, the next thing is to style the html. Open the main.css file that was saved previously and add this:

```
html {
 font-size: 62.5%;
 }
body {
 font-size: 1.6rem;
 text-align: center;
 color: #333;
 }
html,body {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }
img {
 max-width: 100%;
 display: flex;
 justify-content: center;
 }
h1 {
 text-align: center;
 font-size: 35px;
 color: #596185;
 }
 small {
 color: #ff4040;
 }
```
After adding the CSS, you can check your progress by entering:

`python manage.py runserver`

You should see something like this.


![Django web app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqfotts4b5hufzkioclx.png)

Now, you have styled the page completely. It is time to push the code to GitHub.

## STEP 3 - PUSHING YOUR CODE TO GITHUB

First go to [GitHub](www.github.com) and create an account, if you haven't. After registration, head back to your Termux app.

Next thing is to install git. So, enter this in the termux app:

`pkg install git`


![Installing git on Termux](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iw8lvuvpgxgriai7ebj6.png)

After the installation, you need to configure your username and email, so enter this:

```
git config --global user.name "<username>"

git config --global user.email "email@example.com"
```

Don't forget to add your name and email in sample quotes above.

Enter:

`pip freeze > requirements.txt`


![Setting up pip requirements](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gydtf1wfi39sw185hbk2.png)

This will output the requirements needed to run the program in a file format. Saved as requirements.txt, if you check your storage, you would see a requirements.txt file saved, if you want to be familiar with all pip commands, you can enter:

`pip`

And it would showcase all of pip commands


![Pip commands on Termux](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qbi9idfaagzkickb4wl8.png)

Now, you need to create a .gitignore file, Git normally tracks all the changes made to a program when you initialize it. But there are some folders that you do not need to track their changes like the pycache folder that is created automatically when Django runs the .py files, Git should not track the database, and also the .env file where you would hide your secret key.

Save the .gitignore file in the same location as your manage.py file. Then, enter this:

```
.env/
__pycache__/
*.sqlite3
```


![Creating a .gitignore file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tgtzdjf9hl0fisl0fxmr.png)

To create the .env file, create a file in the same location as your manage.py file and .gitignore file, and save it as .env

Then, go to settings.py file to where your secret key is located, cut it out and paste in your .env file like this:

`SECRET_KEY = '....your secure key....'`

Then in your settings.py, where you had cut the secret key out from. Enter this:

```
from decouple import config

SECRET_KEY = config('my_key')
```

![Securing the secret key on Django](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lgmaxjknw7xcxh2xnz4v.png)

You can use any other word apart from my_key.

After saving it, open your termux, enter:

`pip install python-decouple`


![Installing python decouple](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iig7yos9fqff2dcihi9f.png)

This will install the decouple package in the terminal, which you imported in settings.py

Then, go to your GitHub account, click on the New repository and create a new repository. After choosing a name, click on create a new repository.


![Creating a repository on GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/act100g9jcicplu0328q.png)

After that, go back to termux and initialize git in your zicodx project by entering:

`git init`


![Initializing git on the Django project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lwxmypslebs3rljs6pib.png)

Then enter:

git add .
git commit -m "Deploying my code"


![Staging git and taking a snapshot of git on Termux](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3e0pwg3gm7iz8su3eg68.png)

Whenever you want to confirm your progress on Git. Enter this to the terminal:

`git status`


![Checking git status](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ldoxtz03u3r1z1fkim6.png)

Go back to GitHub, where you created that repository, and copy the second to last line.


![Setting up git on a remote repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3ft34w4249g5hbl0nic.png)

`git remote add origin “your repository link"`

Paste it in termux and press enter

Then to push your code, enter:

`git push -u origin master`


![Pushing the code from Termux to GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1bk8oazjf7ltxevwqhst.png)

When you press enter, GitHub will prompt you for your name and password. This is a recent feature that was implemented by GitHub last year. Whenever you want to push your code to GitHub from the terminal, you have to identify yourself.

This process differs completely from the initial global config pattern, which is to link your account to your local machine.

Now, when GitHub requests for your username, enter your username.
In the place of your password, you would have to generate a token. There are different ways to generate a token. You could use an app or you could use your phone number. You can follow the process [here](https://docs.github.com/en/authentication/securing-your-account-with-two-factor-authentication-2fa/configuring-two-factor-authentication)

After you have generated it, add it and press enter.

That’s it, go to GitHub, refresh your webpage and confirm the upload.


![Code pushed to GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dzlu5xjb5dhg8wdkf555.png) 

## CONCLUSION
With that, you have learned how to install termux correctly, build a web app using Django and how to install Git and push your code to GitHub with no hassle.

With continuous growth in technology and the resilience of the team maintaining termux, it is now possible to build server-side applications using your mobile phone. No need to wait for a laptop, before you can start learning how to code, you can start right away. Even if you have a laptop and you are used to working with your phone. Then, you can use your phone perfectly. Now, you could add a `ReadMe.Md` file to your GitHub repository and try out other features as well.