Tutorial Build a Mobile FML App with only a Phone and a GitHub Account in 5 Minutes - AppDaddy-Software-Solutions-Inc/framework-markup-language GitHub Wiki

Overview

In 5 minutes you will have a FML application running on your phone, completely free, utilizing GitHub Pages as a file server.

Table of Contents

You will need

Step 1 - Create & Set up a GitHub Repository

Sign in to your GitHub account and click on your profile in the top right, click Your repositories then click the green New button.

Creating a GitHub Repo

Fill out the name for this repo, we recommend something short and lowercase.

Naming a GitHub Repo

Optional but recommended, tick the box to automatically generate a README.

Add README.md file

Finally click the green Create repository button at the bottom.

Step 2 - Setting up GitHub Pages

Awesome, you now have a repo for FML templates but we need to enable GitHub Pages. Go into the repo Settings and from the side menu click Pages.

Under Branch select main then click Save, you now have GitHub Pages enabled, it will take a few minutes to spin up so in the meanwhile lets configure the GitHub repo for the app. Setup GitHub Pages

Step 3 - Configuring GitHub Pages Repo for FML

If you are familiar with GitHub we encourage you to use whatever tools you prefer, for simplicity we will just use the web interface (but we highly recommend git CLI or GitHub Desktop).

Click on the Code tab then click README.md and click the edit button (pencil icon).

Paste the following in:

# Flutter Markup Language and GitHub Pages
Example of using GitHub Pages to test mobile FML applications and templates. 

Using the FML mobile app (available on both stores)

[<img src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg"
     alt="Download it on the App Store"
     height="48">](https://apps.apple.com/gb/app/flutter-markup-language/id1629916140)[<img src="https://play.google.com/intl/en_us/badges/images/generic/en-play-badge.png"
     alt="Get it on Google Play"
     height="48">](https://play.google.com/store/apps/details?id=co.appdaddy.fml&hl=en_CA&gl=US)
     

Connect to `https://YOUR_GITHUB_USERNAME.github.io/YOUR_REPO_NAME/` to view the templates!

and before clicking Commit Changes make sure to replace YOUR_GITHUB_USERNAME and YOUR_REPO_NAME.

After 5 minutes has passed you should be able to go to the link in the browser and see the updated README.

After committing your changes click the Code tab again and click Add File > Create new file name the file config.xml.

<FML>
    <CONFIG>
        <APP_ICON               value="assets/logo.png"/>
        <APPLICATION_NAME       value="GitHub Pages Mobile App"/>
        <BRIGHTNESS             value="light"/>
        <COLOR_SCHEME           value="purple"/>
        <FONT                   value="Archivo Narrow"/>
        <HOME_PAGE              value="assets/templates/home.xml"/>
        <REFRESH                value="true"/>
    </CONFIG>
</FML>

paste this in it and click Commit new file. To learn more about the config click here.

Step 4 - Creating FML Templates

Lets add a couple templates starting with our homepage, from the Code tab click Add file > Create new file.

Enter the name assets/templates/home.xml this will place home.xml in the assets/templates directory.

Create Homepage Template

Paste in home.xml

<FML title="Image Editor Settings" linkable="true" onstart="">

    <VAR id="brightness" value="{THEME.brightness}" onchange="theme({brightness}, {selectedcolor})"/>
    <VAR id="selectedcolor" value="{THEME.colorscheme}" onchange="theme({brightness}, {selectedcolor})" />

    <HEADER height="48" color="{THEME.onSecondary}">
        <POS top="6" left="35">
            <TEXT style="h4" label="Image Settings" />
        </POS>
    
        <POS top="0" right="30">
            <POPOVER color="{THEME.primary}" icon="color_lens">
                <ITEM label="Red" onclick="selectedcolor.set('red')"></ITEM>
                <ITEM label="Blue" onclick="selectedcolor.set('blue')"></ITEM>
                <ITEM label="Green" onclick="selectedcolor.set('green')"></ITEM>
            </POPOVER>
        </POS>
        <POS top="12" right="5">
            <LINK onclick="{THEME.brightness} == 'light' ? brightness.set('dark') : brightness.set('light')">
                <ICON color="{THEME.primary}" size="24" icon="invert_colors" />
            </LINK>
        </POS>
    </HEADER>

    <!-- Preview --> 
    <POS top="20">
        <ROW halign="center" width="100%">
            <PAD left="100">
                <BOX width="100" height="100" layout="stack" center="true" radius="{radius}"
                elevation="={hasshadow} ? 0.1 : 0"
                border="={hasborder} ? 'all' : 'none'" bordercolor="{radiocolor}">
                    <ICON icon="image_outlined" size="64" />
                    <BOX width="100" height="100" color="={hasblur} ? 'blur' : 'transparent'" />
                </BOX>
            </PAD>
        </ROW>
    </POS>

    <!-- Settings -->
    <BOX height="100%" width="100%" center="true">
        <BOX width="250">
            <PAD top="20" />
            <TEXT value="**Border?**" />
            <SWITCH id="hasborder" value="false"/>
    
            <PAD top="20" />
            <TEXT value="**Border color**" />
            <RADIO id="radiocolor" enabled="={hasborder}" size="30" value="black">
                <OPTION value="redaccent" label="Red"/>
                <OPTION value="blueaccent" label="Blue"/>
                <OPTION value="greenaccent" label="Green"/>
                <OPTION value="black" label="Black"/>
            </RADIO>
    
            <PAD top="20" />
            <TEXT value="**Border Radius**" />
            <SLIDER id="radius" value="0" minimum="0" maximum="50" divisions="25" width="100%" editable="={hasborder}" />
    
            <PAD top="20" />
            <TEXT value="**Image Transformations**" />
            <VAR id="hasblur" value="=contains({checkboxinput}, 'blur')" />
            <VAR id="hasshadow" value="=contains({checkboxinput}, 'shadow')" />
            <CHECKBOX id="checkboxinput">
                <OPTION value="blur" label="Blur"/>
                <OPTION value="shadow" label="Shadow"/>
            </CHECKBOX>

            <PAD top="20" />
            <ROW halign="end">
                <BUTTON label="Next Step" onclick="open('assets/templates/image.xml?hasborder={hasborder}&amp;bordercolor={radiocolor}&amp;hasblur={hasblur}&amp;hasshadow={hasshadow}&amp;radius={radius}')" />
            </ROW>
        </BOX>
    </BOX>
</FML>

Click Commit new file now we have a homepage for the application, lets add another template file with the same process but this time name it image.xml, make sure it goes into the same directory as before.

Paste in image.xml

<FML title="Image Upload Viewer" linkable="true" onstart="">

    <VAR id="brightness" value="{THEME.brightness}" onchange="theme({brightness}, {selectedcolor})"/>
    <VAR id="selectedcolor" value="{THEME.colorscheme}" onchange="theme({brightness}, {selectedcolor})" />

    <HEADER height="48" color="{THEME.onSecondary}">
        <POS top="12" left="5">
            <LINK onclick="back()">
                <BOX expand="false" width="60">
                    <ICON icon="arrow_back_ios" color="{THEME.primary}" size="24" />
                </BOX>
            </LINK>
        </POS>
        <POS top="6" left="35">
            <TEXT style="h4" label="Image Upload" />
        </POS>
    
        <POS top="0" right="30">
            <POPOVER color="{THEME.primary}" icon="color_lens">
                <ITEM label="Red" onclick="selectedcolor.set('red')"></ITEM>
                <ITEM label="Blue" onclick="selectedcolor.set('blue')"></ITEM>
                <ITEM label="Green" onclick="selectedcolor.set('green')"></ITEM>
            </POPOVER>
        </POS>
        <POS top="12" right="5">
            <LINK onclick="{THEME.brightness} == 'light' ? brightness.set('dark') : brightness.set('light')">
                <ICON color="{THEME.primary}" size="24" icon="invert_colors" />
            </LINK>
        </POS>
    </HEADER>

    <BOX height="100%" width="100%" center="true">
        <FILEPICKER id="fp1" allow=".jpg,.png" />
        <BUTTON onclick="fp1.start()">
            <ICON icon="add_a_photo"/>
            <PAD left="8" />
            <TEXT style="h6" value="Choose an Image" />
        </BUTTON>	
        <PAD top="20"/>
        <BOX height="200" width="200" layout="stack" center="true" visible="={fp1.data.file} != null"
        elevation="={hasshadow} ? 0.1 : 0" radius="={radius} * 2"
        border="={hasborder} ? 'all' : 'none'" bordercolor="{bordercolor}">
            <IMAGE url="{fp1.data.file}" fit="cover" width="200" height="200" />
            <BOX color="={hasblur} ? 'blur' : 'transparent'" />
            <BUSY visible="{fp1.busy}" size="50" expand="false" color="red" />
        </BOX>
        <PAD all="20" visible="false">
            <TEXT value="hasborder: {hasborder}" />
            <TEXT value="bordercolor: {bordercolor}" />
            <TEXT value="hasblur: {hasblur}" />
            <TEXT value="hasshadow: {hasshadow}" />
            <TEXT value="radius: {radius}" />
        </PAD>
    </BOX>

</FML>

Step 5 - Running the Application

Open the FML App on your phone, click + Add App, for the Application Web Address put the url you edited in Step 3 (https://YOUR_GITHUB_USERNAME.github.io/YOUR_REPO_NAME/) and for the Application Name put any name you like, click Connect.

Now you have connected your app, click the tile to open it!

If you update your templates on GitHub the changes will be reflected within a few minutes and the app will update the next time you visit the template!

Conclusion

How simple was that? There is lots of room to explore and experiment in FML with pure client-side features. Next try out building interfaces, navigation, events, evals or even some Datasources such as camera/filepicker.

If you are ready to put FML on your own server begin with our Quick Start Guide.

Resources

Framework Markup Language is an open source programming language created by AppDaddy Software Solutions Inc. FML and is licensed under a fair source license agreement and is maintained by a community of developers.

⚠️ **GitHub.com Fallback** ⚠️