Our first app - Hello World
As is tradition in the development world, we are going to create our first Hello World.
The Hello World usually consists of printing in console the phrase "Hello World".
In our case we will place a text in the center of the screen with those words
Create your first project
Once you have logged in with your account you will find the HomeScreen where all your apps that you have opened on your computer are stored locally!
Waoo does not send or store your app code to our servers. We believe this code is yours alone and should not belong to anyone else.
We encourage you to follow good development practices such as saving the code you make in Waoo App Builder in a repository such as Github.
The HomeScreen should look like this:
To create your first app select the "Create new app" button, select the folder where your project will be saved and give it a name that is easy to understand and meaningful.
Since Waoo uses Flutter to generate the code, certain rules must be followed for the name and other objects. These are no capital letters, no spaces, and starting with a letter.
Super important!
In the "Flutter Path" select the folder where Flutter is hosted. It is usually a path similar to:
/Users/your_name/flutter
/Users/your_name/developer/flutter
Without this folder it is impossible for Waoo to create the apps and compile them.
Waoo is designed to automatically look for the folder but this process can fail. Change it manually if necessary
Double-check the name and flutter path is correct, and click the "Create app" button.
Wait a moment while Waoo generates your new project. Note that this process may take a few minutes depending on the speed of your Mac and the processor you have
App Home Screen
Once you have created your new project, Waoo App Builder will allow you to continue to the Home Screen of your App. This screen should look similar to the following screenshot:
This screen is divided into 3 sections: The top navigation bar (common to all screens), the tabs of your app and the detail of each tab.
Let's go through each tab (In the next days in the documentation I will publish more detailed documents to talk about each one)
Screens: Here you can create each screen for your app. Think that in the end, an app is a connection of screens. Example: A Login screen, a Home screen, a profile screen, etc.
Models (Coming soon...): In the programming world there are models or objects. In this screen you will be able to create them easily
Services (Coming soon...): For an app to be connected to the outside world it needs services. Create the services easily in this tab
Widgets (Coming soon...): In this tab you can create the reusable components that you use in more than one screen so you don't have to duplicate your nodes.
Resources: In this tab you can add the colors, images and texts of your app (Texts will be available soon).
Create your first screen by clicking on the "Create new screen" button and give it a clear name. Examples: "profile_screen", "login_screen", "settings_screen".
The ScriptingView
Welcome to the Scripting View. This is the place where the magic happens! Here you can add nodes and connect them to create your app without programming a single line of code!
The ScriptingView should look something like this:
As you can see, this screen is divided in multiple panels: (I will also publish new more detailed documents in the next days of each panel)
Breadcrumb: This is the small navigation bar you see above. It will help you navigate easily in the scripting view.
Central panel: Here you can add your nodes and connect them to form your app.
Right panel: This panel in turn has three tabs.
Detail: When you select an element from the central panel, you will see its options reflected here.
Preview: Coming soon...
Settings: Here you will be able to delete your full screen
Bottom panel: This panel also has three tabs:
Variables: As in programming, you can create variables for your screens. You will be able to store all kind of information in them. Coming soon a tutorial on how to use them but you can start playing with them right now.
Functions: As in programming, we can create functions in order to have our screen organized.
Widgets: When the Widgets screen is enabled soon, here you will be able to select and add them.
Building a Hello World
As is tradition in the development world, we are going to create our first Hello World.
The Hello World usually consists of printing in console the word "Hello World".
In our case we will place a text in the center of the screen that says "Hello World".
To add nodes to our central panel right-click in an empty space. A new screen similar to this one will open:
Here you will find all the nodes you can add.
You are going to add two nodes to your center panel:
Center: The center centers the elements you indicate in its container (in this case the screen).
Text: This is the basic text node.
Place them so that they are horizontally and look organized, similar to the following image:
Now let's connect them. Select the circle next to the word "body" of your "home_screen" and then select the circle next to the word "connector". This will connect with a red line your home screen with the center node.
Now you have to tell the center which node should be centered. For this you are going to connect the "child" of the center with the "connector" of the text.
You should have something similar to the following image:
Now let's tell the text what it should say. To do that select the "Text" node and in the right panel in the "value" property type "Hello World!"
You should have something similar to the following:
We are ready! Let's see our app working 🚀.
Build and Run our App
To test our app the first thing to do is to open the iOS simulator. Make sure it is open before moving on to the next step. You should be as in the following image:
To run our app we use the Play button at the top right of Waoo App Builder.
Press play now!
At this point Waoo App Builder will generate your code and launch your app in the simulator. Keep in mind it can take several minutes based on your machine.
You should see the following result in your simulator:
Congratulations, you finished the Hello World project! 🎉🎉🎉🚀🚀🚀🚀
What's next? Start experimenting with the other nodes, add colors, try new connections, when you feel ready you can even try to create a full screen or app!
In the next days I will add new tutorials and guides to the documentation to make it easier to understand and learn more about how Waoo App Builder works.
What are you waiting to tell your friends about Waoo App Builder?
Last updated
