Saturday, February 3, 2024

Show your work

Quora paywalled my answer to a question. 

As a high school junior with only basic coding experience, what should I do now to stand out on college resumes if my goal career is as a full-stack developer?

You should do a project where you can learn and build something that demonstrates you are able to do something useful. You can show what you have done, and having muddled through it you can explain what you did. Put it up on GitHub so you can point somebody to it and to show that you at least know what revision control is.

Note: AI is going to change everything fast so you need to add AI to your workflow. In this example here, use something like ChatGPT or Poe, etc. to ask/answer questions you need answered as you go along. When it comes to adding the database bit to your mini website, learn how to enter the code into an AI system and how to get it to aid you to write what you need. If you are organized and can walk through an AI session to go from this to that you can put up a blogger site, copy and paste this text, copy and paste your AI session, screenshots of the working system, code on Github, and perhaps a tree of the development system where it all resides you will be able to not only point to the working code you will be able to show how you did it. [Note: I taught core CS courses in the past :)]

Here’s an idea. Put together a web page for chat with a python web server. Create a script to load the server. Load the server using the script you created and then run two separate browser sessions loading the URL below. Chat with yourself about what a fine fellow you are.

http://localhost:5000

Test the chat to make sure you have it running OK, then pretty it up and maybe add a little bit of function like running another script for a program you have compiled in C/C++ or whatever. If you create a VirtualBox VM with an OS, do the whole thing under that VM, and add code to do something in a database (Example code to show how to use SQLite at the end) you will have have something that shows a stack from OS to development environment, scripting, web server, database, and user interface.

Code for a working web server is below. Note that flask expects your index.html file in a directory below where you run it called ‘templates’. Install python (you’ll have to look that up) on your machine, and install flask-socketio, eventlet, and flask:


pip install flask-socketio eventlet flask


./chatserver.py


from flask import Flask, render_template 

from flask_socketio import SocketIO, emit 

 

app = Flask(__name__) 

app.config['SECRET_KEY'] = 'secret_key' 

socketio = SocketIO(app) 

 

messages = [] 

 

@app.route('/') 

def index(): 

    return render_template('index.html', messages=messages) 

 

@socketio.on('connect') 

def handle_connect(): 

    emit('message', 'Connected to the server') 

 

@socketio.on('send_message') 

def handle_send_message(data): 

    message = data['message'] 

    messages.append(message) 

    emit('message', message, broadcast=True) 

 

if __name__ == '__main__': 

    socketio.run(app, host='0.0.0.0', port=5000, debug=True) 

./templates/index.html


<!DOCTYPE html> 

<html> 

<head> 

    <title>Chat Server</title> 

</head> 

<body> 

    <h1>Chat Server</h1> 

    <div id="messages"> 

        {% for message in messages %} 

            <p>{{ message }}</p> 

        {% endfor %} 

    </div> 

    <form id="message-form"> 

        <input type="text" id="message-input" name="message" placeholder="Enter your message"> 

        <button type="submit" id="send-button">Send</button> 

    </form> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.1/socket.io.js"></script> 

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 

    <script> 

        $(document).ready(function() { 

            var socket = io(); 

 

            socket.on('connect', function() { 

                console.log('Connected to the server'); 

            }); 

 

            socket.on('message', function(message) { 

                $("#messages").append("<p>" + message + "</p>"); 

            }); 

 

            $("#message-form").submit(function(event) { 

                event.preventDefault(); 

                var message = $("#message-input").val(); 

                socket.emit('send_message', { message: message }); 

                $("#message-input").val(""); 

            }); 

        }); 

    </script> 

</body> 

</html> 

Below is a python program that uses SQLite to create a table, insert some rows into it, and then retrieve the data. SQLite is a lightweight, disk-based database that doesn’t require a separate server process. If you hack the python server and html so that you can build, populate, and use a SQLite database from the above little set of code you will have done something that shows you can at least be a good helper. Best of luck!

The example will be simple for clarity:

1. Create a table named example_table with two columns: id (integer) and name (text).

2. Insert a few rows into the table.

3. Select the rows and print them out.

Here’s the Python code:


import sqlite3

# Connect to SQLite database (or create it if it doesn't exist) 

conn = sqlite3.connect('example.db') 

# Create a cursor object using the cursor method 

cursor = conn.cursor() 

# Create table 

cursor.execute('''CREATE TABLE IF NOT EXISTS example_table 

                  (id INTEGER PRIMARY KEY, name TEXT)''') 

# Insert rows 

cursor.execute("INSERT INTO example_table (name) VALUES ('Alice')") 

cursor.execute("INSERT INTO example_table (name) VALUES ('Bob')") 

cursor.execute("INSERT INTO example_table (name) VALUES ('Charlie')") 

# Commit the changes 

conn.commit() 

# Select and display all rows 

cursor.execute("SELECT * FROM example_table") 

rows = cursor.fetchall() 

for row in rows: 

    print(row) 

# Close the connection 

conn.close() 

This script sets up a basic SQLite database, adds some entries, and then fetches and prints them. Remember to handle database connections and exceptions properly in a production environment.

No comments:

Browser Check

What We Know About You IP Address: Loading... Browser Name: Browser Version: Operating S...