Open the webapplication

Intro

In this guide we are going to build our first webapplication.

1. Create an account on the App Engine

Background

Read the 2 posts Integrated Development Environment & Standard Framework Modules

Python

In case you never programmed before, there are lots of beginner courses available online.

Javascript

I myself prefere using a Javascript Library in favor of plain javascript, I'm a big fan of jQuery it makes the javascript less verbose
and in my opinion easier.

Feel free to use other tools or frameworks when building your apps.
I am aware jQuery is not the bleeding edge in javascript frameworks, because I'm more backend oriented I choose to stick with what I know. Here you can find some other options if you like to dive into the new: Top JavaScript Libraries and Trends for 2018
Here you can find a tutorial in case you prefer plain Javascript.

Bootstrap

I recomend using Bootstrap for building the front end. But feel free to use other tools or frameworks when building your apps.

Start your first project

1. Open up the IDE.
2. Click the "Start Project" button.
3. In the opened "Create New project" modal:

3.1. Choose a unique project key
3.2. Pick the project to clone from

1. Open the new project with the project selector in the top right corner of the screen.

Backend

Define your datamodel (Model)

For this simple application we need to define 1 Model Class, lets call it 'Task' in this task object we are going to map various fields.

FieldnametypepurposeidStringunique identifieruserStringto correlate tasks to userscompletedbooleanto determine if task is completed or notdetailsStringdescription of the task

1. Open the model dropdown and right-click the 'User' model & rename to 'Task'.
2. In the newly opened document rename the Python class to 'Task'.
3. Use the MongoEngine documentation as a reference
4. Add the 3 fields to the document class

Show answer

Write your business logic (Controller)

For our application we need the following functions:

FunctionPurposeInput variablesReturncreateTaskinstantiate a new task object to the databaseUserID & Task detailsTask ObjectgetTaskget a task by idTask idTask ObjectgetTasksget a list of tasks by userUserIDList containing Task ObjectstoggleCompletedtoggle the completed boolean true/falseTask idTask ObjectdeleteTaskremove a completed taskTask idTask Object

1. Open the Library dropdown and delete the userLib module, we don't need it.
2. Create a new library module named 'TaskService' & implement the required functions.

Show answer

Write procedures accessible over http (View)

In the procedures we:

1. extract the required information from the user request.
2. invoke the apropiate controller function.
3. construct a JSON serializable response.

We start with removing the count procedure from the starter project, after that we implement the following procedures:

FunctionInput variablesReturncreateTaskUserID & Task detailsTask ObjectgetTasksUserIDList containing Task ObjectstoggleCompletedTask idTask ObjectdeleteTaskTask idSucceeded true/false

1. Show answer: createTask
2. Show answer: getTask
3. Show answer: toggleCompleted
4. Show answer: deleteTask

Frontend

Javascript

Now we have to invoke the 4 procedures from the client side therefore we are going to implement 4 javascript functions.
Open the main.js script and delete all contents.

Show answer

Index.html

Index.html is the actual html page that represents your userinterface and binds together your HTML, CSS & Javascript.
Show answer