Introduction

In today's fast-paced world, integrating AI into your work can significantly streamline your project's development process and make your life easier. SashiDo, a fully managed mobile backend-as-a-service (MBaaS), and Locofy, an AI-powered platform that converts your designs into production-ready code, together provide a powerful combination that seamlessly integrates backend and frontend functionalities.

In this tutorial, we'll show you how you can launch a functional notes app in 30 minutes without compromising the quality of your work. From design to production with the help of SashiDo and Locofy.

Set up your SashiDo app and development environment

If you’re new to SashiDo, make sure to first check our Getting Started Guide to seamlessly initiate your SashiDo app and get to know the platform.

To get started, you’ll need to create a SashiDo app. Once your app is ready, head over to its Dashboard > Core > Cloud Code and click on Start your Cloud Code.

Note: If you haven’t connected your SashiDo and GitHub accounts, click on the button Connect to GitHub. Once you’ve connected the accounts you’ll see the Start your Cloud Code button.

Afterwards, head over to your app’s private GitHub repo and fork the project. You’ll need the forked repo once you’re ready to export the code from Locofy.

Then, simply follow the steps from the repo’s README to set up your local development environment. You can also follow our Blog post on creating a development environment from scratch for more details.

Set up your database in SashiDo

The app is very simple so you just need to create a new class where you’re going to store the notes. You can do that from your app’s Dashboard > Core > Browser > Create a Class.

Get started with Locofy

Locofy is a Figma and AdobeXD plugin that accelerates Frontend Development with the help of AI by transforming designs into robust frontend code for web applications.

To get started with Locofy you can first create an account. After that, simply create a new project and pick the framework you wish to work with. You can also check out Locofy’s documentation beforehand if you want to get familiar with the tool.

Make your design responsive

You can find the Figma design we’re using here. However, feel free to use a design of your own if you’d like.

Essentially, if your design is responsive in Figma, then it will also be responsive in Locofy. With that in mind, let’s get into it.

To make the design responsive in Figma, you can use Auto Layout. This is a property you can add to frames and components. It lets you create designs that grow to fill or shrink to fit, and reflow as their contents change.

You can add auto layout to each frame/component as well as change the horizontal resizing to Fill and the vertical resizing to Hug.
Once you’re done with the previous step, you can open the Locofy plugin from Figma to continue preparing the design for production. To open the plugin, click on Resources > Plugins and type in Locofy.

If this is your first time using the plugin, you’ll need to link your Figma and Locofy accounts. Just follow the instructions that appear on the plugin screen to link your accounts.

Once you’re done with that and have the plugin opened, select the outermost frame and click on Step 1: Optimise design. From there, under Next, let’s apply Auto-Layout click on the green button next to Actions and select Fill container.

Moving forward, let’s handle the different screen sizes. Simply click on Fix next to each frame and if necessary change how the frames should move on different screen sizes.

The next step is to tag your layers. Click on Step 2: Tag your layers and click on View all layers. Below you can find how we’ve tagged our layers.

Once the above-mentioned layers have been tagged you can continue manually tagging your layers or you can go back and click on Auto-Tag so Locofy can give you suggestions.

After you tagged your layers, you can click on Preview and see what the design looks like. You may notice a border around the input area. You can remove the border by clicking on Step 3: Edit styling & layout. From there scroll to the bottom and under Advanced CSS Properties you can add outline: none to remove it. You can also change the colour of the text you’re inputting if you’d like.

Export the Locofy code to your private GitHub repo

Now it’s time to sync all of these changes to the Locofy Builder. Simply go back to the start page of the plugin and click on Sync to Builder. After that click on Selected Frames (you should sync the Content frame) and Start Sync.

Once you’re in the Builder you can view your prototype to see if you’re satisfied with the results. After that, you can sync the project with the forked GitHub repo of your SashiDo app. Simply click on Sync /Export /Deploy and from there select Sync Project.

If you haven’t linked your Locofy and GitHub accounts, you’ll be prompted to do so. Simply follow the instructions that appear onscreen.

Once your accounts are linked select the forked repo of your SashiDo app. A new window will appear. On the left will be the current contents of your repo and on the right will be the Locofy files. Our recommendation is to match the file structure of your GitHub repo. On this window, you can move around files, create new folders and select which files you’d like to push to GitHub.

Once you’re done with the file structure, you can deselect the .gitignore and package.json files. You’ll also be prompted to first resolve conflicts. After that, simply click on Push to GitHub and in a matter of seconds the code generated by Locofy will be in your GitHub repo.

Check your files

Head over to VisualStudio Code and open a terminal. If you’ve already set up your development environment, type git pull to get the newest addition from your app’s repo.
As a first step check if any files are missing. The following files from Locofy should have been imported:

• global.css
• index.css
• index.html

Afterwards, open index.html and check if the paths of your CSS files are correct. If they aren’t, now’s the time to fix them.

Connect your Locofy code with your SashiDo app

Now it’s time to write some code so the app actually works. Firstly, let’s add some id’s to three classes. Head over to index.html and add the following id’s to these classes:

class="share-something-cool" id="noteInput"
class="actions1" id="saveButton">
class="notes1" id="notesSection">

Then, create a new JS file feed.js and initialize Parse. After that, add the following code to save new entries to your SashiDo app.

If you haven’t done so already, this code will create a new class called “Note” with a field called “content” where the entries will be saved.

const saveButton = document.getElementById("saveButton");
saveButton.addEventListener("click", () => {
  const Note = Parse.Object.extend("Note");
  const note = new Note();


  const noteInput = document.getElementById("noteInput").value;
  note.set("content", noteInput);


  note.save().then(
    () => {
      alert("Data saved to your app.");
    },
    (error) => {
      console.error("Error saving to your app: ", error);
    }
  );
});

Afterwards, you’ll add a query that fetches the entries from your database and sorts them by date and time (the newest entries will be on top of the page)

const Notes = Parse.Object.extend("Note");
const query = new Parse.Query(Notes);


query
  .find()
  .then((results) => {
    const notesSection = document.getElementById("notesSection");


    results.reverse().forEach((note) => {
      const noteContent = note.get("content");
      const createdAt = note.get("createdAt");


      const noteSection = document.createElement("div");
      noteSection.classList.add("notes2");


      noteSection.innerHTML = `
                <div class="infos-actions1">
                    <div class="info">
                        <div class="heading-infos">
                            <div class="username">John Doe</div>
                            <div class="right-infos">
                                <div class="min">${createdAt.toLocaleString()}</div>
                            </div>
                        </div>
                        <div class="lorem-ipsum-dolor">${noteContent}</div>
                    </div>
                </div>
                `;
      notesSection.appendChild(noteSection);
    });
  })
  .catch((error) => {
    console.error("Error fetching from Parse Server: ", error);
  });

As a last step, you’ll need to add a new line to your CSS file. Head over to index.css and ensure this is what your notes1 class looks like:

.notes1 {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border-color);
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-base) 0;
  text-align: left;
  font-size: var(--font-size-sm);
  color: var(--color-black);
  font-family: var(--font-inter);
}

After that simply open your page and your app should look something like this:

Conclusion

In conclusion, the integration of AI tools with the functionalities of SashiDo presents a forward-looking solution for developers to streamline and expedite their project management and deployment processes. By implementing the outlined steps, you can effortlessly establish a dynamic development environment and seamlessly synchronize your AI-generated code between Locofy and your SashiDo application.

Integrating AI into your daily work life not only ensures an efficient and user-friendly development experience but also empowers you to dedicate more energy to your creative concepts and less to the intricacies of technical implementation.