### Install Freelancer.com SDK Source: https://github.com/freelancer/freelancer-sdk-python/blob/master/docs/index.md Install the latest stable release of the freelancersdk using pip. ```bash pip install freelancersdk ``` -------------------------------- ### Install Project Requirements Source: https://github.com/freelancer/freelancer-sdk-python/blob/master/examples/demo_web_application/README.md Installs all the necessary Python packages listed in requirements.txt for the project. ```bash pip install -r /path/to/requirements.txt ``` -------------------------------- ### Run Flask Development Server Source: https://github.com/freelancer/freelancer-sdk-python/blob/master/examples/demo_web_application/README.md Starts the Flask development server to run the web application. ```bash flask run ``` -------------------------------- ### Install Python Virtual Environment Tool Source: https://github.com/freelancer/freelancer-sdk-python/blob/master/examples/demo_web_application/README.md Installs the virtualenv tool for creating isolated Python environments. ```bash pip install virtualenv ``` -------------------------------- ### Check Bids JavaScript Function Source: https://github.com/freelancer/freelancer-sdk-python/blob/master/examples/demo_web_application/templates/button.html This function periodically checks for new bids on a project using a GET request to '/project/{project_id}/bids'. It updates the UI with bid information and displays stormtrooper images for each bid. It also handles the case where a bid has already been awarded. ```javascript function checkBids(project_id){ $.ajax({ type: "GET", url: "/project/" + project_id + "/bids", success: function (data){ console.log(data); if (data["result"]["bids"].length > 0){ document.getElementById("status").innerHTML = "STORMTROOPERS ARE RECEIVING THE ORDER..."; document.getElementById("sub_status").innerHTML = "Choose a storm trooper to execute the order..."; } var str = ''; var awarded = document.getElementById('awarded').value; for (var i=0; i < data["result"]["bids"].length; i++){ if (!awarded || data["result"]["bids"][i]["id"] == awarded){ str += '
$' + data["result"]["bids"][i]["amount"] + '
' } } document.getElementById("bidders").innerHTML = str; } }); } ``` -------------------------------- ### Create Database Tables Source: https://github.com/freelancer/freelancer-sdk-python/blob/master/examples/demo_web_application/README.md Initializes the database by creating all tables defined in the application's models. ```python from app import db db.create_all() exit() ``` -------------------------------- ### Initiate Order and Status Check Source: https://github.com/freelancer/freelancer-sdk-python/blob/master/examples/demo_web_application/templates/button.html Initiates an order and sets up an interval to check the project status. This function is called when a button action triggers the order process. ```javascript function order(project_id) { $.ajax({ type: "PUT", url: "/project/" + String(project_id), contentType: "application/json; charset=utf-8", success: function (data){ console.log(data); document.getElementById("status").innerHTML = "WAITING FOR STORMTROOPER TO ACCEPT THE ORDER..."; document.getElementById("sub_status").innerHTML = ""; document.getElementById('intervalWatcher').value = window.setInterval(checkProjectStatus, 30*1000, document.getElementById('project_id').value, data["result"]["transaction_id"], data["result"]["amount"]); } }); } }); }); } ``` -------------------------------- ### Create Virtual Environment Source: https://github.com/freelancer/freelancer-sdk-python/blob/master/examples/demo_web_application/README.md Creates a new Python virtual environment in the specified directory. ```bash virtualenv ``` -------------------------------- ### Create a Session with OAuth Token Source: https://github.com/freelancer/freelancer-sdk-python/blob/master/docs/index.md Initialize a session object to communicate with Freelancer.com using your OAuth token. This is the first step to making API calls. ```python from freelancersdk.session import Session s = Session(oauth_token="myoauth$token") ``` -------------------------------- ### JavaScript AJAX to Create Project Source: https://github.com/freelancer/freelancer-sdk-python/blob/master/examples/demo_web_application/templates/create_project.html Submits project details from an HTML form to the /create_project endpoint using POST. Logs the response and updates the page with a link to the created project. ```javascript function submit(){ $.ajax({ type: "POST", url: "/create_project", data: JSON.stringify({ title: document.getElementById("title").value, description: document.getElementById("description").value, min_budget: parseFloat(document.getElementById("min_budget").value), max_budget: parseFloat(document.getElementById("max_budget").value), budget_currency: document.getElementById("budget_currency").value, currency: document.getElementById("currency").value, }), contentType: "application/json; charset=utf-8", success: function (data){ console.log(data); document.getElementById("result").innerHTML = "Job created! click here to view."; } }); } ``` -------------------------------- ### Activate Virtual Environment Source: https://github.com/freelancer/freelancer-sdk-python/blob/master/examples/demo_web_application/README.md Activates the created virtual environment. The command may vary based on the operating system. ```bash source /path/to/environment/bin/activate ``` -------------------------------- ### Create a Session Object Source: https://github.com/freelancer/freelancer-sdk-python/blob/master/README.rst Initializes a Session object for interacting with the Freelancer API. Requires a valid OAuth2 token. ```python from freelancersdk.session import Session session = Session(oauth_token=token) ``` -------------------------------- ### Create Project JavaScript Function Source: https://github.com/freelancer/freelancer-sdk-python/blob/master/examples/demo_web_application/templates/button.html This JavaScript function is triggered when the button is clicked. It checks if an order is already in progress, sets a flag, and makes a POST request to create a new project via the '/create_project' API endpoint. It updates the status message based on the API response. ```javascript function order(){ if (document.getElementById("clicks").value > 0){ return } document.getElementById("clicks").value = 1; document.getElementById("status").innerHTML = "PREPARING ORDER..." $.ajax({ type: "POST", url: "/create_project", data: JSON.stringify({ title: "Get me a beer.", description: "Get me a beer.", min_budget: 5, max_budget: 25, budget_currency: '', currency: '', }), contentType: "application/json; charset=utf-8", success: function (data){ console.log(data); document.getElementById("status").innerHTML = "TRANSMITTING " + "ORDER..." document.getElementById('project_id').value = data["result"]["id"]; document.getElementById('intervalWatcher').value = window.setInterval(checkBids, 30*1000, data["result"]["id"]); }, error: function (data){ console.log(data); document.getElementById("status").innerHTML = "Something went wrong with the force."; document.getElementById("sub_status").innerHTML = "(Seriously though, check your Midi-chlorian count (Freelancer balance) and try again)."; } }); } ``` -------------------------------- ### Configure PostgreSQL Database URI Source: https://github.com/freelancer/freelancer-sdk-python/blob/master/examples/demo_web_application/README.md Sets the SQLAlchemy database URI in config.py for PostgreSQL connection. ```python SQLALCHEMY_DATABASE_URI = 'postgresql://:@localhost:5432/' ``` -------------------------------- ### Set Flask Application Environment Variable Source: https://github.com/freelancer/freelancer-sdk-python/blob/master/examples/demo_web_application/README.md Sets the FLASK_APP environment variable to point to the main application file. ```bash export FLASK_APP=app.py ``` -------------------------------- ### Award Bid and Create Milestone JavaScript Function Source: https://github.com/freelancer/freelancer-sdk-python/blob/master/examples/demo_web_application/templates/button.html This function is called when a stormtrooper image (bid) is clicked. It disables all stormtrooper images, sends a PUT request to '/award/{bid_id}' to award the bid, and then initiates a POST request to '/create_milestone' with the bid details. It also clears the bid checking interval. ```javascript function awardAndCreateMilestone(bid_id){ $(function(){ $("input.stormtrooper").attr("disabled", true); }); $.ajax({ type: "PUT", url: "/award/" + String(bid_id), success: function (data){ document.getElementById('bid_id_'+String(bid_id)).innerHTML += ' (AWARDED)'; document.getElementById('awarded').value = bid_id; window.clearInterval(document.getElementById('intervalWatcher').value); $.ajax({ type: "POST", url: "/create_milestone", data: JSON.stringify({ "bid_id": bid_id }), contentType: "applicat ``` -------------------------------- ### Pay for Order Source: https://github.com/freelancer/freelancer-sdk-python/blob/master/examples/demo_web_application/templates/button.html Handles the payment process for an order. This function is called when the 'PAY STORMTROOPER' button is clicked. ```javascript function pay(transaction_id, amount) { $('#pay').hide(); $.ajax({ type: "PUT", url: "/pay/" + String(transaction_id), data: JSON.stringify({ "amount": amount }), contentType: "application/json; charset=utf-8", success: function (data){ console.log(data); document.getElementById("status").innerHTML = "THE JEDI ORDER IS NO MORE."; document.getElementById("sub_status").innerHTML = "THE LOYAL STORMTROOPER HAS BEEN PAID."; } }); } ``` -------------------------------- ### Check Project Status Source: https://github.com/freelancer/freelancer-sdk-python/blob/master/examples/demo_web_application/templates/button.html Periodically checks the status of a project. This function is called by a timer set up after an order is initiated. ```javascript function checkProjectStatus(project_id, transaction_id, amount){ $.ajax({ type: "GET", url: "/project/" + project_id, success: function (data){ console.log(data); if (data["projects"][0]["sub_status"] == "closed_awarded"){ window.clearInterval(document.getElementById('intervalWatcher').value); document.getElementById('pay').innerHTML = '' document.getElementById("status").innerHTML = "STORMTROOPER ACCEPTED THE ORDER..."; document.getElementById("sub_status").innerHTML = "Executing order 66..."; } } }); } ``` -------------------------------- ### Conditional Login/Logout Button in HTML Source: https://github.com/freelancer/freelancer-sdk-python/blob/master/examples/demo_web_application/templates/home.html This snippet shows how to conditionally display 'Logout' or 'Login with Freelancer' based on the user's session authorization status. It also includes JavaScript functions to handle opening authentication or logout URLs. ```html {% if session ['Authorization' ] %} * You're logged in! Logout {%else%} Login with Freelancer {% endif %} function login(){ window.open("/auth"); } function logout(){ window.open("/logout"); } ``` -------------------------------- ### Stylized Button CSS Source: https://github.com/freelancer/freelancer-sdk-python/blob/master/examples/demo_web_application/templates/button.html CSS for creating a circular, shadow-enhanced button with hover and active states. This is used for visual appeal and user feedback. ```css body { text-align: center; } .button { display: inline-block; margin: 10px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 8px 0 #5e0326, 0 15px 20px rgba(0, 0, 0, .35); -moz-box-shadow: 0 8px 0 #5e0326, 0 15px 20px rgba(0, 0, 0, .35); box-shadow: 0 8px 0 #5e0326, 0 15px 20px rgba(0, 0, 0, .35); -webkit-transition: -webkit-box-shadow .1s ease-in-out; -moz-transition: -moz-box-shadow .1s ease-in-out; -o-transition: -o-box-shadow .1s ease-in-out; transition: box-shadow .1s ease-in-out; font-size: 50px; color: #fff; } .button span { display: inline-block; padding: 20px 30px; background-color: #000000; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(hsla(338, 90%, 80%, .8)), to(hsla(338, 90%, 70%, .2))); background-image: -webkit-linear-gradient(rgb(73, 73, 73), hsla(338, 90%, 70%, .2)); background-image: -moz-linear-gradient(hsla(338, 90%, 80%, .8), hsla(338, 90%, 70%, .2)); background-image: -o-linear-gradient(hsla(338, 90%, 80%, .8), hsla(338, 90%, 70%, .2)); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15); -moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15); box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15); font-family: 'Bungee', Arial, sans-serif; line-height: 1; text-shadow: 0 -1px 1px rgba(175, 49, 95, .7); -webkit-transition: background-color .2s ease-in-out, -webkit-transform .1s ease-in-out; -moz-transition: background-color .2s ease-in-out, -moz-transform .1s ease-in-out; -o-transition: background-color .2s ease-in-out, -o-transform .1s ease-in-out; transition: background-color .2s ease-in-out, transform .1s ease-in-out; width: 400px; height: 400px; margin: 0; } .button:hover span { background-color: rgb(73, 73, 73); text-shadow: 0 -1px 1px rgba(175, 49, 95, .9), 0 0 5px rgba(255, 255, 255, .8); } .button:active, .button:focus { -webkit-box-shadow: 0 8px 0 #c5376d, 0 12px 10px rgba(0, 0, 0, .3); -moz-box-shadow: 0 8px 0 #c5376d, 0 12px 10px rgba(0, 0, 0, .3); box-shadow: 0 8px 0 #c5376d, 0 12px 10px rgba(0, 0, 0, .3); } .button:active span { -webkit-transform: translate(0, 4px); -moz-transform: translate(0, 4px); -o-transform: translate(0, 4px); transform: translate(0, 4px); } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.