DEV Community: Stephen (Amedi) Imbira

Build a Blog Application: Step-by-step Integration with Django and Vue 3

Stephen (Amedi) Imbira — Tue, 14 May 2024 14:31:59 +0000

In the realm of Django development, models, views, URLs, and templates form the cornerstone of every project. These elements converge to sculpt a full-stack Python based web framework, meticulously adhering to the MTV design pattern. However, this project does not employ Django templates for the presentation layer. Instead, it uses Vue 3, a powerful JavaScript framework for building dynamic user interfaces. This innovative solution splits the roles of client and server, revolutionizing the traditional approach to web development.

Setting up Django
Installing Django with pipenv
Setting up Django involves installing it with pipenv, the preferred package management system for creating a virtual environment. To install Django with pipenv, simply run the following command at the shell:

pipenv install django

In addition to installing Django, you’ll also need to install the following packages: djangorestframework and djangocorsheaders. To do so, continue in your terminal or command prompt and execute the following commands.

pipenv install djangorestframework

pipenv install djangocorsheaders

Activate virtual environment

pipenv shell

Creating your first project
Django provides a command that allows you to create an initial project file structure. Run the following command in your shell prompt. Remember to add the dot at the end, so that Django can create the server files in the same folder.

django-admin startproject server .

To initialize the database migrations for your Django project, execute the following command in your terminal or command prompt: it ensures that your database schema aligns with your project’s models and configurations.

python manage.py migrate

To create a new Django app named "blog," navigate to your project directory in the terminal or command prompt and execute the following command:

python manage.py startapp blog

To create the blog data model in your Django project, you can define a model named Article in your models.py Here’s how you can do it:

from django.db import models
from django.contrib.auth.models import User

class Article(models.Model):
      title = models.CharField(max_length=200)
      body = models.TextField()

      def __str__(self):
            return self.title

In this model, we’ve defined an Article class that inherits from Django’s models.Model. It includes two fields: title field which is a character field with a maximum length of 200 characters, and body which is a text field to store the content of the article.

Activating the Application
To activate the newly created "blog" application, along with the third party apps we installed, navigate to your project's settings file (usually located at settings.py) and add blog to the INSTALLED_APPS list. Ensure that it follows the specified format, including third-party apps such as rest_framework and corsheaders. Here's how your INSTALLED_APPS list should look:

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",

    # Third party apps
    'rest_framework',
    'corsheaders',

    # Local apps
    'blog',
]

Creating and Applying Migrations
To create and apply migrations for your Django project, execute the following commands in your terminal or command prompt:

python manage.py makemigrations

python manage.py migrate

Create a superuser
To create a superuser for accessing the Django administration site, execute the following command in your terminal or command prompt:

python manage.py createsuperuser

This command will prompt you to enter a username, email (optional), and password for the superuser account. Once created, you can use these credentials to log in to the Django administration site and manage your blog application.

Django administration site
Now that the Blog model is synchronized with the database, we can establish a straightforward administration site to manage blog posts.
As depicted in the diagram, the Article model is prominently displayed within the admin site.

Let's proceed by adding two articles using the admin site.

Building List and Detail Views
These views define endpoints for listing all articles and retrieving a specific article. The article_list view fetches all articles from the database and serializes them. The article_detail view retrieves a single article based on its id.

from django.shortcuts import get_object_or_404
from rest_framework.decorators import api_view
from rest_framework.response import Response

from .models import Article
from .serializers import ArticleSerializer

@api_view()
def article_list(request):
      all_posts = Article.objects.all()
      serializer = ArticleSerializer(all_posts, many=True)
      return Response(serializer.data)

@api_view()
def article_detail(request, id):
      post = get_object_or_404(Article, id=id)
      serializer = ArticleSerializer(post)
      return Response(serializer.data)

Making sure the APIs are working
To verify that the APIs are functioning correctly, you can utilize django rest framework’s built-in UI.

Setting up the Vue.js
Installing Vue 3
To set up Vue.js for your project, begin by installing Vue 3 using npm. Execute the following command in your terminal or command prompt:

npm create vue@latest

During the installation process, make sure to select 'Yes' when prompted to add Vue Router. This will incorporate Vue Router into your Vue 3 project, enabling client-side routing for seamless navigation within your application.

cd frontend
npm install

To install Axios, a popular HTTP client for making requests in Vue.js applications, execute the following command in your terminal or command prompt:

npm install axios

In this main.js file, Axios is registered as $axios in the global properties of the Vue app. This allows Axios to be easily accessible from within Vue components using this.$axios. The app is then mounted to the DOM element with the ID app, completing the setup.

import './assets/main.css'
import './assets/main.scss'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'

const app = createApp(App)
app.config.globalProperties.$http = axios

app.use(router)

app.mount('#app')

*Fetching data and displaying API data with Vue.js
*

<template>
  <div class="container-fluid">
    <div class="container mt-6">
          <article class="media box has-background-light" v-for="(post, index) in posts" :key="index">

            <div class="media-content">
              <div class="content">
                <p>
                  <p class="title is-4">
                    <RouterLink :to="{ name: 'full', params: { id: post.id } }">{{ post.title }}</RouterLink>

                  </p>
                  {{ truncateWords(post.body, 30) }}
                </p>
              </div>

            </div>
            <div class="media-right">
              <figure class="image is-128x128">
                <img src="../assets/profile.jfif" alt="">
              </figure>
            </div>
          </article>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: []
    }
  },

  methods: {
    async getPosts() {
      try {
        const response = await         this.$http.get('http://127.0.0.1:8000/articles/');
        this.posts = response.data;
        console.log(this.posts)

      } catch (error) {
        console.log(error)

      }
    },

    truncateWords(text, limit) {
      const words = text.split(' ');
      if (words.length > limit) {
        return words.slice(0, limit).join(' ') + '...';
      }
      return text;
    }
  },

  created() {
    this.getPosts();
  },
}
</script>

Setting up the Vue Router
In this setup, Vue Router is configured to use the HTML5 history mode for routing. Two routes are defined: one for the home page (/) which corresponds to the ListView component, and another for viewing detailed articles (/articles/:id)which corresponds to the DetailedView component.

import { createRouter, createWebHistory } from 'vue-router'
import ListView from '../views/ListView.vue'
import DetailedView from '../views/DetailedView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: ListView
    },
    {
      path: '/articles/:id',
      name: 'full',
      component: DetailedView
    }
  ]
})

export default router

Detailed

<template>
  <div class="container">
    <h1 class="title">{{ article.title }}</h1>
    <p>{{ article.body }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      article: null
    }
  },

  created() {
    this.fetchArticle();
  },

  methods: {
    async fetchArticle() {
      try {
        const id = this.$route.params.id;
        const response = await this.$http.get(`http://127.0.0.1:8000/articles/${id}/`)
        this.article = response.data;

      } catch (error) {
        console.log(error)

      }
    }
  }
}
</script>

The Final Project

Is Programming Safe from AI of the Future? AI’s Impact on Programming

Stephen (Amedi) Imbira — Fri, 10 May 2024 10:12:30 +0000

In the ever-evolving realm of technology, the rise of AI has sparked both excitement and agitation among software developers. With the advent of advanced AI entities like Cognition AI’s Devin, the spectre of mass layoffs seems inevitable; with nearly 29% of agitated developers fearing the end of their careers, as revealed by a survey conducted by Evans Data Corp. In contrast, other developers are dazzled by the smorgasbord of opportunities offered by AI. The allure of AI to revolutionize coding practices has captivated the imaginations of many developers.
The article ventures into the heart of the debate by delving into the impact of AI in the coding realm, along with the opportunities and challenges.

The Power of AI in Software Development
The impact of AI in coding surged with the introduction of OpenAI’s GPT-3 language model. This remarkable model could generate complete HTML websites from simple prompts, igniting a wave of excitement over the internet. Testimonies flooded in, showcasing how non-coders could build web applications without ever touching a single line of code.

Since then, the AI field has witnessed an array of breakthroughs. From AI automated coding assistant tools that revolutionized programmers’ productivity to systems now capable of building complete computer programs from natural language descriptions.

The recent revelation of Cognition AI’s, Devin hailed as the world’s first AI developer, reverberated through the software development realm. According to Cognition, Devin is capable of doing everything that a professional does. As a result, agitated and anxious programmers raised their worries about the future of their careers.

Will AI replace human programmers?
As we all know, coding is indeed facing disruptive technology. Therefore, AI coding models may indeed replace jobs of low-skilled coders. This is because the role of AI is to automate the low-level tasks. However, experts will likely become even more important as the problem-solving essence of computer programming is likely to remain a largely human endeavor for the foreseeable future. Thus, software engineers will provide architectural vision and direction.

However, it’s crucial to recognize that while AI may excel at automating routine coding processes, the essence of problem-solving in computer programming remains inherently human. As a result, experts in the field are poised to become even more vital, as their ability to navigate complex challenges and provide architectural vision and direction cannot be replicated by AI – at least not in the foreseeable future.

In conclusion, AI is a double-edged sword – a powerful tool that both augments and challenges the role of human programmers.

Opportunities for software developers
The integration of AI into software development presents a myriad of opportunities for human programmers. While challenges certainly exist, they serve as fertile ground for innovation and growth within the industry. Concerns regarding the reliability and quality of AI-generated code, as highlighted by a study from the University of Melbourne, underscore the importance of human oversight and rigorous code review processes.

Instances of AI-generated code producing unreliable or insecure results underscore the indispensable role of human programmers in ensuring the integrity and functionality of software systems. Through meticulous code reviews and hands-on intervention, programmers can mitigate risks and enhance the overall quality of AI-assisted projects.

Moreover, AI-assisted coding liberates programmers from mundane, repetitive tasks, allowing them to redirect their focus toward higher-level creative problem-solving. By leveraging AI to automate routine processes, programmers can devote more time and energy to tackling complex challenges, innovating new solutions, and driving forward technological advancements.

However, to fully capitalize on these opportunities, programmers must cultivate a deep understanding of AI technologies and learn to effectively collaborate with AI systems. Embracing AI as a collaborative partner rather than a replacement requires adaptability, curiosity, and a willingness to explore new avenues of development.

In essence, the integration of AI into software development heralds a new era of possibility and innovation for human programmers. By harnessing the capabilities of AI while retaining human expertise and creativity, developers can unlock the full potential of software development and drive meaningful progress in the field.

Conclusion
In conclusion, while AI is rapidly transforming the landscape of programming, it is unlikely to replace human programmers. The role of human programmers remains crucial for their creative ways of problem-solving software solutions, which AI cannot replicate. In the future, programming will involve a symbiotic relationship between human programmers and AI.

Savannah Tales Diaries Day #1

Stephen (Amedi) Imbira — Wed, 21 Feb 2024 20:21:03 +0000

What Happened today?
Learned Django data modelling
Focused on the database design, mostly data modelling.

What can I improve?
Focus and intensity during coding sessions

Savannah Tales blog project

Stephen (Amedi) Imbira — Sun, 04 Feb 2024 19:43:12 +0000

I am happy to be starting the Savannah Tales project. An East African blog catered to increase writing opportunities in the region, as well as inspire readers from the region and all around the world. I will be documenting every step of the project.