Code

INTRO Hello and welcome. In this lesson, we’ll be discussing setting up custom Code for your app. Let’s get started. EDITOR You can create 99% of features in your app with no code at all using the standard modules however if there’s anything that you need to build that’s beyond the scope of these modules, fortunately, you can write custom code into your app. To set up Code, click on the Platfio editor, then click Code. Let’s give our code a name. Now, we can go to the Header tab if we want to write a custom header. However, if we leave this blank, it will automatically use the standard header which is recommended for most situations. In the Body tab, we can write custom code in HTML. In the Footer, we can write custom code, however, if we have a tab bar, it’s advisable to leave this blank. In Styles, we can write custom CSS that will affect our HTML in the Body. In the Link tab, we can add links to import other libraries. And in the Scripts tab, we can create scripts that run JavaScript in our custom page. Let’s briefly test each feature. We can go to Body and we can press on the top right on the tools button and click on one of the tools to quickly add in a feature. Let’s say we want a card with just text in it. We can put some text, press okay and it will automatically generate HTML for us to get us started. You’ll notice that by default, the app prefers Ionic Framework to ensure that the styling is consistent across the app. Finally, press save.

Let’s add our custom page to the Left side hand menu. Go to Navigation, Left hand menu, add and if we search for Code, we can quickly look for and select the custom page we have created. Press add and save. EMULATOR Now, if we open the Left-Hand side menu, we can view our code. (Make sure the standard header is set to show in the Code editor.) As we can see, we have a standard ionic component with a card, a title, a subtitle, and some text. EDITOR Let’s further expand our HTML. Let’s go back to the Body tab of the Code Editor. Let’s delete our previous code and create something a little more interesting. We’ll use the helpers by pressing the tool button again to get us started, but you have the option to write any HTML you want. Let’s have a card with an image. Let’s title the card ‘Image’, add the text for our card, and once we press okay, it will open the media library where we can select and image. Then once an image is selected, it will generate the code for us. Let’s then press save. EMULATOR Now, if we go back to our custom page in the Emulator, we can see that an image has been incorporated into our code. EDITOR Let’s now add a heading outside. Let’s write Welcome, press okay and save. Let’s look at a couple more examples. Say we wanted to add a YouTube video. Press the YouTube helper, paste in the link, and press okay. Similarly, if we want to add a button, we can press the helper, use the link selector to choose where we want the button to take the user, press add and save. As you’ll notice, what you can create is virtually unlimited. You can check out the Ionic Framework website or any documentation to learn more on how to create any user interface you need. Let’s now look at JavaScript. If we go to the Scripts tab and press add, we can see that have two ways of adding JavaScript. We can add inline JavaScript in this tab, where we might for example write an alert, function test() alert [test]. Then, we can go to our H1 in the Body tab and write onclick=’test()’ and press save. EMULATOR Then, we can run this JavaScript by interacting with the page. As we can see, this JavaScript is running when we click on the page. OUTRO If you have experience with code, you’ll know that this means you can create virtually any Page using your Platfio app. Thank you for watching this tutorial on Code. If you have any questions or need further assistance, please don't hesitate to contact our team for support.