x
Desc set up.

My online log

Technology: Raspberry Pi, Git and web development.

Mead: Recipes and reviews.

Beer and more..

How to prepare Django to tango with Vue

22 Apr 2017 / Oscar F

This is how I have setup and prepared a Django app to tango with Vue.js as front-end.
The next post will be a post about how to get Vue to tango with Django.
This post is focusing on the Django backend.
I used Django, Django REST Framework, Vue, VueResource, VueRouter, NPM and Webpack.
You can find the more complete and extensive source code at my Github.

I assume that you know how to setup and work whit django,
otherwise I recommend that you begin looking at the official Django tutorial.

Back-end

Create your app

python manage.py startapp gallery

Django Model and Admin

The model.py and admin.py code we need in our app look like this.
model.py

from django.db import models


class Art(models.Model):
    art_file = models.ImageField(upload_to='gallery')
    pub_date = models.DateTimeField(blank=True, null=True))
    title = models.CharField(max_length=50, blank=True, null=True)

    class Meta:
        ordering = ['pk']

    def __unicode__(self):
        if self.title:
            return u'%s' % self.title
        return u'%s' % self.pk

    def __str__(self):
        if self.title:
            return u'%s' % self.title
        return u'%s' % self.pk

admin.py

from django.contrib import admin
from .models import Art
admin.site.register(Art)

Django REST-Framework

Now if you have a Django app setup and running you need a backend API
to get data from to the front-end.
Django REST framework is perfect for this.

We will follow the steps in the Django REST framework tutorial but I will use our models and code as examples,
so that we have that setup for the front-end part of this how to.

Begin to install it with:

pip install djangorestframework

add this to your settings.py file.

INSTALLED_APPS = (
    'rest_framework',
    'gallery',
)

REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.DjangoModelPermissionsOrAnonReadOnly'
    ],
    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
    'PAGE_SIZE': 10,
    'DEFAULT_RENDERER_CLASSES': (
        'rest_framework.renderers.JSONRenderer',
        'rest_framework.renderers.BrowsableAPIRenderer'
    )
}

and run the management command:

python manage.py migrate

Serialize models

We need to serialize our models to something the fron-end can handle.
Create a serializer.py file in the django app folder and add this code:

from rest_framework import serializers
from .models import Art


class ArtSerializer(serializers.ModelSerializer):
    class Meta:
        model = Art
        fields = ('pk', 'art_file', 'title')

API views

Now we need an API/view which return the serialized models to the front-end.
Add to your view.py file this view code:

from rest_framework.viewsets import ReadOnlyModelViewSet
from .models import Art
from .serializers import ArtSerializer


class ArtViewSet(ReadOnlyModelViewSet):
    queryset = Art.objects.all()
    serializer_class = ArtSerializer

API urls

In order to access the views there is a need to setup the urls.
First setup routers.
Create a routers.py file in the django app folder and add this code:

from rest_framework import routers
from .views import ArtViewSet

gallery_router = routers.DefaultRouter()
gallery_router.register(r'art', ArtViewSet)

To setup the urls add this code to the urls.py file.

from django.conf.urls import url, include
from .routers import gallery657_router


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

Now you should be able to browse the API at /gallery/api/.
From this API it's now also possible for any front-end to get the data.

References:

[1]: django-rest-framework tutorial Retrieved: 22 April 2017 12:00 django-rest-framework quickstart tutorial

[2]: Vue-router 2 - Getting Started Retrieved: 27 Augusti 2017 18:00 Vue-router 2 - Getting Started tutorial

Mead brewing

20 Dec 2016 / Oscar F

I am brewing some Mead.
The result will be tested in three months time from now.
Here is my recipe:

  • 750g of Honey.
  • 4 liter of cold boiled water.
  • Mead yeast from Weastlab STRAIN: 4184 Sweet Mead

For how to in English watch this youtube video.

For Swedish watch this Youtube video.

Update:

The result was really good.

Mead-test.jpg

References:

[1]: Allt Om Honung - Tillverka eget Mjöd Retrieved: 20 December 2016 18:00 Swedish, how to make Mead instructions.

Git how to

20 Apr 2016 / Oscar F

This post is basically just some notes to myself about the basics of how to use Git.

Configure git

git config --global user.name 'oscfr'
git config --global user.email 'oscfr@oscfr.se'
git init
git add .
git commit -m 'message'

Add a remote repository

git remote add github https://github.com/oscfr657/Gallery657.git

Push to the remote repository

When you have made your changes and made a commit locally then you can push the changes to the remote repository with the following command.

git push github main

Setup on a production server

Clone from a main git repository

git clone -o github https://github.com/oscfr657/Gallery657.git

and Pull for updates.

git pull github main

Backup your git repo

I think this is the best way.

git clone --mirror https://github.com/oscfr657/Gallery657.git

To refresh the backup

git remote update

Alternative setup on the production server

An alternative way to setup and handle the production server is to use a githook.

mkdir -p /var/www/project_name
chown -R git:git /var/www/project_name
mkdir -p /home/git/project_name.git
cd /home/git/project_name.git
git init --bare
sudo nano /home/git/project_name.git/hooks/post-receive and add the following:
#!/bin/sh
 GIT_WORK_TREE=/var/www/project_name git checkout -f
Ctrl-x
git remote add production ssh://website.com/home/git/project_name.git
git push production main

For more

What-is-a-bare-git-repository

Git Reference

References:

[1]: Git Reference Retrieved: 3 Juli 2018 20:00 Git Reference
[2]: Using git to deploy code to a server Retrieved: 20 April 2016 21:00 Using git to deploy code to a server