No-Code Template of the Week (April 5 - April 11, 2021)

This week's template comes from Zeroqode (www.zeroqode.com). Their "Headstart Pro" template is a multi-purpose no-code template with all the features you need to launch your e-commerce website on Bubble. The standard license costs $99 and permits you to use Headstart Pro for your own personal or business purposes. However, If you want to use the template to create websites for other clients you'll need to buy the developer version which sells for $297. 

So, what's included in Headstart Pro? Here are all the features according to Zeroqode:

Use this pack to get a "headstart" on launching your app by incorporating responsive design, a plug-and-play landing page, eCommerce functionality (full catalog page, product page, cart page, wishlist, Stripe checkout pages), and subscriptions using Stripe to bill users for your products/services.

Make use of chat, blog, contact form, user profile, and login/sign up pages Manage your site using admin dashboard components. Use Subscriptions to bill users for your products/services.

The template comes packed with a large variety of UI elements like panels, efficient navigation elements, and CTAs & alerts.

The template comes with a batch of our best plugins. Check the plugin page for the demonstration and how they're set.

Note: Headstart 3.0 template comes with 8 Premium Zeroqode Plugins. Please check the plugin page for a complete demonstration and how they are set. You need to subscribe or purchase the plugins in order to use them after purchasing this template. Otherwise please simply remove the plugins from the template.

FEATURES:

- Responsive design

- Main Landing page

- 3 Landing page layouts

- E-commerce catalog (includes product filtering by price, and new/latest arrivals, adding products to a shopping cart or to a wish list, search)

- Huge set of UI elements like icons, buttons, paragraphs and many more.

- Product & "create a product" pages

- Wishlist page

- Checkout page

- One time payments through Stripe

- Subscriptions using Stripe

- Efficient Web Forms

- Messaging functionality

- Blog/Articles functionality

- Contact forms

- User profiles variations

- Login/signup pages

- 8 Plugins demos

- And more...

If you're looking for an affordable pre-built website that can be modified to suit your own needs, this template may be what you're looking for.

No-Code Video Games (Part 2)

In Part 1 of this post we talked briefly about the fact that you can now create professional looking video games yourself, without knowing how to code.  I also mentioned www.coregames.com as one place where you can create your own game without coding. In fact, you can even select an existing game, download it, modify it and re-publish it as your own (giving credit to the originator). 

To build a new "no-code" game on Core you start by clicking "New Project", then select  to use a "gameplay framework" (similar to using a template on your favorite no-code app platform). Core offers a number of frameworks to start from, ranging from "Dungeon Crawler" for developing an RPG game to "shooter" frameworks like "Deathmatch", "Assault", or "King of the Hill". In the tutorial mentioned in Part 1: 

https://www.youtube.com/watch?v=kWDzrRDuetU  "How to Make a Video Game Without Coding for Free (Step by Step)"

the recommendation is to use a "shooter" framework since it's the easiest to customize. Once you do that Core will generate a "base" framework that includes a game environment and a "shooter" character (if you chose a third-person game). In addition, character actions (running, jumping, firing a weapon) are all programmed into the game already, doors work, objects cast shadows, and so on.

Switching from "preview" mode to "edit" mode allows you to move objects around, add textures to the objects in the environments, add different weapons, add new objects, and (since Core offers this feature) you can make it into a 2-player (or even multi-player) game. When you're satisfied with your game you can publish it to the Core community along with a game summary that covers how your game works and which "action" keys or mouse/joystick clicks and movements do what. 

Obviously different game engines will implement no-code game creation a little differently, but Core is a pretty representative example of how this works. Other game engines that allow you to build a video game without doing any coding include Unity, Buildbox, Godot (completely open source), Game Salad, and even Unreal Engine (generally considered the most powerful game engine). Each company offers fairly extensive documentation and tutorials, so try out a few of them and have fun creating your own video games.

No-Code Video Games (Part 1)

There are all kinds of apps that you can build without knowing how to code, but until fairly recently video games weren't among the options available to you. However, that's no longer true. Now there are a variety of game engines that allow you to create professional-looking games without needing to write any program code.

When you create a video game (2D, 3D, etc.) you're basically doing the same thing you do when you create other types of apps. You're combining small reusable components (buttons, text boxes, lists and containers for example) to create a form or landing page or other user interface. Each of those components actually consist of a bundle of program code that defines their appearance and functionality. In the same way you create an environment for a video game by combining objects (characters, mountains, trees, ships, and so on), each of which includes scripting statements (usually in Python or JavaScript) that determine the object's behavior. 

Game engines like Unity, Unreal, Godot, and Buildbox have all created kits for the person who wants to build a video game but doesn't have any programming background. The kits (like no-code platforms) work by having the user drag and drop pre-built objects onto the game canvas, then setting the properties for each object. Just as a button's properties may include size, shape, color, and the actions to take place when the button is clicked, a character object's properties may include strength, speed, trustworthiness, and actions the character will take in a given situation. 

To see how you can build a video game without coding, there's a good example at: 

https://www.youtube.com/watch?v=kWDzrRDuetU  "How to Make a Video Game Without Coding for Free (Step by Step)"

There's a website (www.coregames.com) where you can play hundreds of video games for free, but you can also copy a game listed there, modify it, and even market it as your own version of that game. The process is very much the same as using an app template on a no-code platform and customizing it for your own use. 

In Part 2 of this post, I'll go into more detail on actually creating a no-code video game.

Your App is Finished - Now What?

If you plan to let other people use your no-code app there's something else you need to do once you finished testing. You understand what the app does and how to use it but your potential users are going to need a little guidance - and so will you in 6 months. So what do you need to tell someone about how the software works and how do you go about doing that?

The answer of course is documentation but exactly what documentation do you need? Documentation explains the "why" behind how you constructed your app, so it's a good idea to start with a "concept" section. A concept page gives an overview of your app so the user understands the purpose of the app and what it can do for them. This part of the documentation will include a written explanation of the app, but it may also incorporate screen shots, workflow diagrams, and even short videos about the overall design of the app.

Along with the overview you will probably need several sections that cover the different tasks the user has to carry out in order to use the app. For an inventory app for example, the user needs to know how to add, change and delete vendors, how to enter items received and sold, and how to keep track of quantities on hand and on order. Again, screen captures and flow diagrams can be useful in explaining how to carry out a certain task, but it's not necessary to explain everything in painstaking detail.

The details involved in each of the app's functions are best shown in tutorials. Tutorial pages are generally used to show how the different parts of your app work together. Stay focused on the overall picture you're trying to present and don't get too detailed about any particular feature - that's the purpose of the task pages.

OK, that's the basics of how you can structure your documentation. You can create docs like this with many different products ranging from Microsoft Word to Google Docs to apps specifically designed for software documentation. One way to make the process easier though, is to find or develop a set of templates that you can use to build your user guide. You don't want to have to start from a blank screen each time. By the way, if you're building your own templates however, make them as complete as you can. It's much easier to remove unnecessary parts of a template that to try to squeeze in a new section or added material. 

A final word - always leave comments and notes inside your app itself when appropriate. Sometimes you need to insert reminders about something you did and why that doesn't really belong in a user guide. A few platforms provide a specific way to add comments - with others you can always do something like entering your note in a text box element and then hiding that element in the live view.

Planning Your No-Code App

Some years ago I read an article that stated that a successful app consisted of 50 percent planning and 50 percent execution. Based on my own experience I firmly believe that's true. Of course, just like in the military, plans never survive intact once the coding and testing phase begins, but having a clear road map in mind from the start helps you avoid a lot of grief.

So, what's involved in developing a plan for building your app? Here are a few ideas for creating a solid software design:

• Define your app in as much detail as possible. 
• For example, "I want to create a game app" needs a lot of refinement. You might break that down into "I want a game app where you're being chased by a bunch of cut-throat thieves", or "I want a game app where you're being chased by cut-throat thieves in the jungle and there are supernatural creatures that may or may not help you".
• If it's a business app you might be creating an inventory app to handle inventory tracking, costing and stock alerts. But you might also want the app to handle barcoding and forecasting.
• Investigate any similar apps you can find to make sure you're not leaving out any important features that you might need and to see how others have designed their programs. It's not cheating to explore different ways to structure your app.
• Try to find potential users for your app and ask them what features they would expect or hope to find in that type of application. It's also a good idea to attempt to recruit a few people who would be willing to provide feedback while you're building your app and to act as beta testers for the completed application.
• List the main features for your app. In fact, sketch drawings of the basic pieces that make up the app and assemble them in a workflow showing user inputs, including possible user actions and resulting responses. input validation, error trapping, recovery procedures, data storage, integration and reporting. 
• If your app involves communication between multiple users, make sure to add that in your planning including whether that communication will be done directly in the app or externally via email, text, or notification software.
• Be sure to take timing into account. How much time do you have to create your app? Is there a deadline you have to meet? Time constraints can force you to prioritize certain features in your app and leave out some "nice to have but not essential" features.
• Decide which platform to use to build your app. Different platforms may be better for standard business apps, social apps, games, process management, etc. Also, check on the templates available to you. It's possible that you may find one that you can modify to do what you want with a minimum of modification. However, research templates carefully, because a template that's only slightly similar to what you want can end up taking more time and effort to change than if you create your app from scratch.
• Beta test your app. Get family, friends or anyone you can recruit to test your app as you're building it in order to get feedback on what you may need to change or improve. One big advantage you have by working with no-code is that with standard app development you end up spending a lot of time uncovering and chasing down program bugs - with no-code you may uncover some logic errors but (if the platform is reliable) you won't be exterminating bugs.
• If you want your app to be available to others, plan for how you're going to distribute or market your app. Your choice of development platform may affect the distribution methods available to you, so take that into account up front when you're deciding which platform to use.

Oh, and one final thing to include in your planning - document your app. Keep notes as you go so you or someone else can follow the purpose and structure of your program later on. Since you can't include remarks in the program coding, add documentation wherever you can so the app doesn't look like a mystery wrapped in an enigma six months after you finish it. 

Okay, that's it for planning your app. The only other advice I have is to actually take the time to do some detailed planning - you won't regret it.

How API Connectors Work

What is an Application Programming interface? It's exactly what it says - an interface between two application programs, a piece of software that allows different apps to communicate with each other. In the same way that you use the black box pieces of code on a no-code platform to build an app, your app can use an API to create a connection to another application like Stripe or Facebook and exchange information with that service. The API itself is simply a piece of software installed on the server you want to access. 

When the two computers connect or "integrate" via the API, they have to agree on the set of rules (or "protocol") they're going to use to communicate with each other (similar to two people deciding what language to use to carry on a conversation). Since Hyper-Text Transfer Protocol (HTTP) is the most common protocol on the Internet, many APIs use it as their communication protocol.

Once a connection is established, the client (your app) sends a request to the other computer (the server) and receives one of three responses (an acknowledgment that the request was handled successfully, an error message explaining that the request failed, or the data requested by your app). The request sent by your app is made up of four parts:

• A URL that provides the location you want to connect to on the server. The URL itself consists of three parts:
• The address of the server (www.youtube.com).
• The specific location you want to reach on the server (/results).
• The query string parameters (?search_query=bubble.io).
• The HTTP method:
• GET request - Asks the server to retrieve a resource (a webpage, product, image, etc.).
• PUT request - Asks the server to update a resource (change the address in a customer record for example).
• POST request - Asks the server to create a new resource (e.g. create a new customer record with the data in the body of the request).
• DELETE request - Asks the server to remove a resource (e.g. delete an inactive customer record).
• Header records: Additional information to pass on to the server, such as the time of the request, the request authorization, type of content, and response cookies. 
• The Body: The body of an API request contains the data that your app wants to send to the server and that data has to follow a specific format that the server can understand. A typical API connector encodes the data in a text-based format called JSON (JavaScript Object Notation). Here's an example of data in JSON format:  { “First name”:”Gary”, "Last name":"Morrison", ”Company”:”Global Imports”, "Email": "GaryM@global.com", “Primary contact”:true}.

Most servers require you to send a unique authorization code (referred to as an "API-Key") that identifies you to the server. The third-party service will issue you an API-key (normally a long string of random-looking characters) when you sign up. There are several ways that an HTTP API-key can be included in your request:

• As part of a query string in the URL (?something+API-key). 
• In an HTTP header record.
• A user name and password (which act as the API-key) can be sent as part of each request.

Once the server receives a request it will try to fulfill it, then it will send a response back to the client. Similar to a request, an HTTP response has three parts: a 3-digit status code, headers, and a body. 

Status codes indicate whether the request was handled successfully or not. Common status codes include:

• 200 - Request succeeded.
• 404 - The requested resource doesn't exist.
• 503 - Website is currently unavailable.

There are actually five classes of response:

• 1xx - Request received, continuing to process.
• 2xx - Success (requested data delivered or requested action completed).
• 3xx - Redirection (additional processing needed to complete the request).
• 4xx - Client errors; the request isn't correctly structured or can't be fulfilled.
• 5xx - Server errors; the server failed to handle the request correctly.

Once the response is delivered, that round of the request/response cycle is complete. Any further interaction through the API is up to the client. 

That's the general idea of how an API works - but how do you make use of one on your no-code platform? Most no-code platforms have a way to connect to various APIs, either through some function that's an integral part of the platform, or through a plugin or a third-party integration service. For example, Zoho Creator has an easy-to-follow description of how to use its API service at:https://www.zoho.com/creator/help/api/v2/  

I'll go into a little more detail on the mechanics of API connections in a later post. Meanwhile, I hope you get a chance to experiment with including API calls in your app - API integration has become an important part of application planning, whether for traditional, low-code, or no-code apps.

Google's New No-Code Machine Learning Platform – Teachable Machine

If you're interested in exploring the basics of machine learning (without having to learn complex coding methods), "Teachable Machine" can help you do just that. With Google's no-code “Teachable Machine” you can develop machine learning models and make them available to others without having to integrate them into an application. You can train models yourself to recognize certain images, sounds or poses (such as whether you're sitting down or standing up), and use them directly on the Teachable Machine website or in your own website or app.

(You can find Teachable Machine at: https://teachablemachine.withgoogle.com/ ).

To create a model on Teachable Machine start by gathering your samples and grouping them into classes or categories. Once you've done that you're ready to begin developing your machine learning model.

What can I train my machine learning model to do? By following the tutorials and examples on the website you can train your model to:

• Classify images, either from files or live, from a webcam.
• Classify sounds from short sound samples (WAV, MP3 file support coming soon).
• Classify body positions, using files or images from a web-cam.

Before you get started though, you may want to look through these frequently asked questions about “Teachable Machine”:

• What does Teachable Machine use to create the models? The models are built using TensorFlow.js, a Javascript library for machine learning.
• What method is used to train the models? The models are trained using a method called “transfer learning”. The image and pose models are taught from pre-trained mobilenet models, and the sound model is built on Speech Command Recognizer. In each case models that have already been trained “transfer” their knowledge to your model.
• Do I have to upload all my training data to the Internet? The training is done in your browser – your images, sound bites or other data stays on your computer.
• What if my model's predictions aren't very accurate after I finish training it? You can add additional samples and retrain the model in order to improve its accuracy. 
• What can you make with Teachable Machine? You can find a wide range of Teachable Machine projects (over 15,000 of them) at: https://experiments.withgoogle.com/experiments 
• How can I make my model available to others? Since Teachable Machine models are built with Tensorflow.js, they can be hosted on Teachable Machine for free or exported to any website, server, or machine that can run Javascript. You can also convert your model to TensorFlow or TensorFlow Lite and download it for local use.

To see a detailed step-by-step tutorial on how to train your model, do an Internet search for: “Teachable Machine Tutorial: Bananameter” by Barron Webster (November 7, 2019). The tutorial shows you how to use Teachable Machine to identify images of bananas that aren't ripe yet, bananas that are ripe, and bananas that are past their prime. Note: The same basic steps would work with any three objects.

One of the important points brought out in the tutorial is how much the model can be affected by using some images with a different lighting or background, images where the banana is between stages of ripeness, or images with a just drawing or photo of a banana, rather than the real thing. In general, the more types of images you include in your training the better the model will perform with real-life data. 

Barron Webster's tutorial should give you a pretty good idea of how to use Teachable Machine to train image classification models. In addition, if you're interested, the author has also created tutorials on how to make a audio model (“Teachable Machine Tutorial: Snap, Clap, Whistle”) and how to make a body position model (“Teachable Machine Tutorial: Head Tilt”).

And if you want to see additional tutorials, here are two more suggestions:

“An introduction to Teachable Machine — AI for dummies”, by Rafael Etereo, February 17, 2020. Creating a model to identify people's hand gestures.

“Teachable Machine 1: Image Classification”, The Coding Train, Nov 7, 2019 https://www.youtube.com/watch?v=kwcillcWOg0 

Finally, for a more in-depth look at how Teachable Machine works, take a look at: “How to build a Teachable Machine with TensorFlow.js”, Nikhil Thorat – deeplearnjs.org. Taken together, these tutorials should give you a basic understanding of what machine learning models are and how to build and train them.