Day 2: Django Backend Work Now What?
Tags: 100daysofcode, django, oscar, wagtail
Published: 2020-02-27 17:29:11

I have to say, writing this is harder then I originally anticipated... But Okay I guess, don't want this to deter me from making the post and sharing my progress...

Continuing from the last post, we had set up a Code Red CMS ( Django App ) and successfully running the development server with 

```python
python manage.py runserver 
```

view the web server in our web browser ( google Chrome for me ) at http://localhost:8000 or http://127.0.0.1:8000 give us this (local host is mapped out in the system as 127.0.0.1.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6wyugixiu4efb93ajyyr.PNG)


btw if you are seeing this and thought I dont wanna use the 
http://localhost:8000 maybe cause you have some other webapp running using the port or the IP, you could actually specify a different IP and port using this command 

```python
python manage.py runserver <IP> <Port>
```

Change the IP or Port in <> to what ever private IP you want to use.. if possible  use the same 127.0.0.1 but a different port.

Now that is out of the way, Let see what the admin site looks like... since there is not button as of yet to divert our request to the admin page... we need to manually type /admin in the browser

the full url is now 

http://localhost:8000/admin

or 

http://127.0.0.1:8000/admin

going forward, for viewing the site subdirectory, I would only type <site>/subdirectory as a shorthand... use what ever you prefer as site... 


since we havent log in yet, we will be prompted with this page 
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0mak087hjcq00sqq79wr.PNG)

I just love how Code Red CMS add the Project Title into its login page

now... just sign in using the username and password you specify when creating the super user


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7huktfovoly049iscqwj.PNG)


I personally think wagtail admin page is polish and beautiful, simple but allow for so much room for customization. 

For now I will use the current Database (SQLite3) that comes build in with Django but later on in the build I'll change to PostgreSQL.


Lets talk about what a E-commerce site, I personally love Saleor but due to some time constrain and also the integration with Wagtail CMS, I think I prefer to use  
Oscar... There is a module for Integration with wagtail and Oscar called wait for it [Django-Oscar-Wagtail](https://django-oscar-wagtail.readthedocs.io/en/latest/).

Well to be honest I find it hard to understand the point of having a read doc page that redirect you to the github page {% github https://github.com/labd/django-oscar-wagtail %}

Anyway enough with my pet peeve, lets go down to business...

ouh wait... I still don't understand how this work even when I read the whole read me page... <del>Thankfully there is this github page that hand holding you every step of the way .... [Oscar-Wagtail demo](https://github.com/LUKKIEN/oscar-wagtail-demo/blob/master/TUTORIAL.md) <--- Click this for the step by step.</del>

{% github https://github.com/LUKKIEN/oscar-wagtail-demo %}

I guess now I will show you how to add the step by step method to install oscar and get oscar-wagtail to talk nicely with other.

from the command prompt, type 

```python
pipenv install django-oscar
```

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

wait for it to install 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8vkj6fcblsreltyvwzut.PNG)

and now we can install django-oscar-wagtail

```python
pipenv install django-oscar-wagtail
```

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

wait for it to install 

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

in case you are wondering how to clear your terminal...

for windows type 

```
cls
```

Now following oscar-wagtail documentation, 

add 'oscar_wagtail', in your installed app in your base.py file

```python
INSTALLED_APPS = [
    # ... your other apps
    'oscar_wagtail',
]
```

before
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v19jz8ww0j00yscefebh.PNG)

after
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t9fjc3q9v88p60wbkxx9.PNG)


Add the URLs to urls.py:

```python
import oscar_wagtail.urls
from django.conf.urls import url

urlpatterns += [
    url(r'^api/oscar_wagtail/', include(oscar_wagtail.urls)),
]
```

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

after

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


Now we need to fork the Oscar App following this page [Fork Oscar App](https://django-oscar.readthedocs.io/en/latest/topics/customisation.html#fork-oscar-app)

so first make a directory for the forked app...

I think Ill name it Oscar app

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0y5sxzj4ibzhnnpmpc1j.PNG)

after

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

now i need to create a file in the folder name __init__.py

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

now we can start forking the oscar app using the command python manage.py oscar_fork_app Oscar

```
python manage.py oscar_fork_app order oscar
```

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

it seem I hit a snag... Continue tomorrow then... Its almost 2 am now, I been writing this since 11... Im basically almost doing a live coding... hahahaha

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

to be continue