Getting started with Django

So in Python web development, 2 major frameworks stand out: Flask and Django. Flask is very straight forward. Django is a little more involved and "batteries-included". This means it comes with lots of features including an admin page and ORM (with sqlite) built right in. However it is a bit hassle to set it up. The Django Tutorial is a good place to start.

It involves virtual environment. You need to generate a project and then generate an app within.. You run that manage.py to let it generate some files and hand change some stuff (in many places) to get a standard MVC app going.

It knows what you want... a view.py to tweak for your controller objects to give data to your template htmls to show, a urls.py to set up your routing from url to controllers. It even has a models.py that you put your DB objects in.

You have to run some migrations to generate that database behind the scene initially to create your database.

It even has a shell so you can tweak data in there if you like. It even has an admin page where you can see your data! But you have to create a super user first.

https://github.com/josephmaklc/crud_project

Playing with Vue

Vue is another javascript framework that is worth looking at besides the dominant React and Angular. It is kinda like React in some way. It uses its own extension .vue (not .js). You kinda work with its states with "ref". It likes single file components (SFC). You will need to install Node, then install Vue on your machine to make a new project to make it generate stuff for you to make your own app and components (like React).

The tutorial is fairly straight forward to follow. I like the fact it isn't a (giant) method to returning large html but you mark your code with its <template> tag. You can play in the Vue playground. Here is some simple code I tweaked from the tutorial.

<script setup>
import { ref } from 'vue'

// give each todo a unique id
let id = 0

const newTodo = ref('')
const todos = ref([
  { id: id++, text: 'Learn HTML' },
  { id: id++, text: 'Learn JavaScript' },
  { id: id++, text: 'Learn Vue' }
])

function addTodo() {  
  todos.value.push({ id: id++, text: newTodo.value })
  newTodo.value = ''
}

function removeTodo(todo) {
  todos.value = todos.value.filter((t) => t !== todo)
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" required placeholder="new todo">
    <button>Add Todo</button>
  </form>
  <table>
    <tr v-for="todo in todos">
      <td>{{todo.text}}</td>      
      <td><button @click="removeTodo(todo)">X</button></td>
    </tr>
  </table>
</template>

Using OpenAI in code

AI is everywhere you can't escape. Google search something? AI will want to chip in what it thinks. Every Microsoft thing has Co-Pilots that can help you in various ways in its products. Now how about write your own code using it? OpenAI's ChatGPT is the thing to go to...Python is the preferred language. Just about every example out there uses it. Watch out! Some examples you see from websites, youtube, even generated by AI itself... can be outdated as OpenAI is still constantly evolving.

Using OpenAI in code is isn't free but looks affordable at first glance. Look at its pricing though. A million tokens for a few cents? Well look again, one call can be many tokens as it counts output characters, and image generation is a lot of tokens. Watch your budget.

After you pay up to get a OPEN_API_KEY, do not include it in your code as you don't want that stolen. Put it in a file named .env, and then use load_dotenv after installing with "pip install python-dotenv". Then you have to install the OpenAI library with "pip install openai". After you have the client you can do A LOT of stuff with it. See https://github.com/openai/openai-python to start your adventure.

I did, see it in https://github.com/josephmaklc/openapi/blob/main/openai_experiment.py

I got OpenAI to answer questions, also remember my previous question so I can ask followup questions. I got it to generate an audio file that I cannot tell at all it isn't recorded by human. I even got it to generate code! One cool aspect of ChatGPT is generating images! However, that requires you to "Verify you Organization" which means take a picture of your government ID and send to them... Eew I don't want to do that.

curl in Windows

Developers (on the Mac) has long used curl to test out http calls on the command line. Sure you can use the browser to test out any GET commmands, and use other things such as Postman to test POST. But curl is very handy and it is right on the command line. Now Windows users do not have it previously.. it was a separate download. If you have Windows 10 or 11 you have it pre-installed in your C:\windows\system32 folder. However, the world's example code and documentation are not so fair to developers on Windows. Flatty copy paste what you see will result in errors due to differences in Windows.

For example you are doing a little API with music albums your curl (for Mac) for inserting a record looks like this:

$ curl http://localhost:8080/albums \
    --include \
    --header "Content-Type: application/json" \
    --request "POST" \
    --data '{"id": "4","title": "The Modern Sound of Betty Carter","artist": "Betty Carter","price": 49.99}'

But boom not working for Windows because of the following.

1. The not-yet-end-of-commmand character for Windows is not \, it is ^.
2. Don't use single quotes. Json double quotes need to be escaped.

So the command above to run for above is

  curl http://localhost:8080/albums ^
    --include ^
    --header "Content-Type: application/json" ^
    --request "POST" ^
    --data "{\"id\": \"4\",\"title\": \"The Modern Sound of Betty Carter\",\"artist\": \"Betty Carter\",\"price\": 49.99}"
    

Hello Typescript world

Typescript is javascript with type. Waita minute the very reason you use javascript (rather than java) is you want to be quick-and-dirty and not want to use types right? Well if you want to use React with types you will need Typescript. Its syntax is somewhat like Pascal: See https://www.geeksforgeeks.org/hello-world-in-typescript-language/ for a quick introduction. But in React you don't compile and run. It's mostly automatic. and you are likely not going to do a lot of heavy OOP either.

Search for "react typescript hello world" and you will find several ways to do that. I use npm. First you need to install node. Then create skeleton app:

npx create-react-app my-app --template typescript

Then go to the folder

cd my-app

A bunch of things has been generated for you. Go to src/App.tsx. This is where you put your components.

Here is a simple component. Call it MyComponentFC.tsx

import React from 'react';

const MyComponentFC: React.FC<{
  name: string;
  age: number}> = ({name,age}) => {

  return (
    <h1>Hello, {name}! you are {age} years old</h1>
  );
};

export default MyComponentFC;

In React instead of making things public you "export" it so it is known to outside world. Yes, people like returning not a single value these days. People don't mind mixing code with HTML in a giant return statement. You are cranky old school if you think this isn't so elegant.

See this little component (not a class, but a constant function) takes 2 parameters and you can give each a type (and you have to repeat the names in that interesting symtax). The parameters can be much more complex than strings and numbers. The idea is define your own tags and manage states (variables) within.

This simple component generates some simple html with parameters you passed in.

That index.html is what your browser hits... which in turns calls index.tsx, which calls the App component. Here is my tweaked App.tsx to call that component. FC stands for Function Component.

import './App.css';
import MyComponentFC from './MyComponentFC';

function App() {
  return (
      <MyComponentFC name="Johnny" age={20}/>
      )
}

export default App;

Launch the app with

npm start