As of June 20, 2024, Google deprecated the old Firebase Cloud Messaging (FCM) Legacy API, so everyone using this service has to switch to the new and improved FCM HTTP (v1) API. This update brings better security, more messaging options, and smoother performance, helping you keep the lines of communication open with your users.

At SashiDo, we want to make this transition as smooth as possible for our clients, so we've prepared a tutorial on describing the introduced changes and on the exact steps to migrating to the new API. Check out the guide in the following lines!

Update Your Firebase Dependencies

Now that you know what’s changing and how the SashiDo Push Notifications Service works, we can continue with the actual settings. The first thing to do is ensure you’re using the latest versions of Firebase libraries in your app and familiarise yourself with the FCM REST API V1 Reference and the FCM Migration Guidelines.

FCM API (V1) Enabled

For both old and new projects, the FCM V1 API is already enabled by default. However, if you’ve got an older project you might have the Legacy API enabled as well until it’s fully deprecated*.

To check that head over to the Firebase Console and open your project. From there click on the gear icon next to Project Overview that’s located on top of the left-hand menu and select Project settings.

Once on the Project settings page, select the Cloud Messaging tab. If the V1 API is disabled, click on the kebab menu next to it and choose Manage API in Google Cloud Console.

*Pro tip: Referring to Firebase’s FAQ about the FCM features deprecated in June 2023, they will start generating a small number of errors on the current API around July 22th, 2024 and gradually ramp-down. Customers can apply for an extension here if they can't finish the migration by then.

Generate a Private Key

Head back to Project settings and click on the Service Accounts Tab. From there click on Generate new private key.

This will download a JSON file. Store it someplace safe.

Switch from Legacy to V1 in SashiDo

Go to your SashiDo app’s Dashboard. From there, on the left-hand menu, click on App Settings > Push. From there, upload the JSON file to the Android Push Credentials section and click on Save Changes on the bottom right of the screen.

Test Push Notification Functionality

And do not forget! After making the necessary changes, test your notifications to ensure they are being sent and received correctly.

We always recommend following the best practices and testing on a dev environment first before migrating in production. You can send push notifications in several ways. The most straightforward way to do that is through the Dashboard. On the left-hand menu click on Push and select Send New Push. From there, select your audience and write a quick message under “Write your message”. Once you’re ready, click on Send Push. After you’ve sent your push notification, you can check the status from the Activity tab.

If you haven’t set up push notifications for your Android app yet, check out our article on How to Integrate Push Notifications in Android Step by Step.

Conclusion

Although SashiDo’s Push Notification Service automatically handles many of the necessary adjustments, we strongly advise our customers to structure their payloads to align with FCM requirements and fields. Ensuring your payloads are properly formatted will lead to more reliable and efficient push notification delivery.

For more detailed information, refer to the FCM REST API V1 Reference and the FCM Migration Guidelines. If you need any assistance, feel free to reach out at support@sashido.io.

Happy Coding!

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.

In the following tutorial, we are going to cover what is Two-factor authentication, how the 2FA API works and how you can integrate it into your SashiDo app. We are certain that by the end of the article, you will be thrilled to take your application’s security to another level!

Introduction to Two-factor authentication

2FA is a security mechanism that adds an extra layer of protection to your online accounts, making them more secure than just relying on a password alone. It requires users to provide two different authentication factors before they can access their accounts, one of which is their password.

Nowadays, passwords are not a sufficient measure that guarantees 100% protection against malicious intents. A database breach, keylogger or a simple phishing email is sometimes enough to break a password and gain access to an account. Therefore it’s important to have this extra layer of protection.

How Two-factor authentication works

Whenever a user is logging into an account, usually they are required to use their username/email address and their password. As we have already deduced, it is not that hard to become a victim of a hacker’s attack, so it is crucial to have your credentials well protected.

This is where 2FA comes into play. In the unfortunate event when someone manages to access your users’ accounts, upon successful login, they will be prompted for a second verification - a one-time unique code will be generated and sent as an SMS to your user's mobile phone number. The code is only valid for a limited time window and if not added, it simply expires. Without the secret set of symbols, the user can’t complete the verification and no access will be granted which increases the safety of the account.

Implement Two-factor authentication into your app using Cloud Code.

If you are not familiar with implementing Cloud Code into your private GitHub repo, you can follow our Getting Started guide for a seamless setup.

Set up your Database and Twilio

First and foremost, to avoid database-related errors you have to complete a few steps:
1. Navigate to your SashiDo app’s Dashboard > Core > Browser > User. Select “Edit” from the top-right menu and click on “Add a new column”.
2. Create two database String fields called “phone_number” and “From” inside your User class.

Now that you have set up your database, you will need an SMS provider to send the authentication codes. We’ve chosen Twilio for the job. It is a cloud communications platform that allows software developers programmatically to make and receive phone calls, send and receive text messages, and perform other communication functions using web service APIs.

To get started, you just need to create an account in Twilio. As soon as your account is completed, you will be redirected to its Dashboard where you will find 3 keys that you need to implement into your Cloud Code: Auth Token*, Account SID* & Trial number*. Store the keys into a secure location. If you’d like to, you can store them as environment variables in your SashiDo app.

Add the code to your Cloud Code

Take a look at the code you need to implement. Firstly, you need to require the “crypto” module to generate random bytes from which a unique verification code will be created.

const crypto = require('crypto');

Afterwards, define the symbols that can be used to create the unique code.

const availableCharacters =
   'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';

Now you need to add the Twilio verification codes that you got when you created your account.

const accountSid = process.env.TWILLIO_ACCOUNT_SID || 'Account SID';
const authToken = process.env.TWILLIO_AUTH_TOKEN || 'Auth Token';
const twillio = require('twilio')(accountSid, authToken);

const TWILLIO_FROM_NUMBER = process.env.TWILLIO_FROM_NUMBER || 'Trial Number';

Once you’re done with the above-mentioned steps, you can add the function that will generate a random 6-digit code. It does this by accumulating random bytes and mapping them to characters from a predefined set. The resulting code is returned as a string.

function generateCode() {
   const codeLength = 6;

   const bytes = crypto.randomBytes(codeLength);
   const code = new Array(codeLength);

   let cursor = 0;
   for (i = 0; i < bytes.length; i++) {
       cursor += bytes[i];
       code[i] = availableCharacters.charAt(
           cursor % availableCharacters.length
       );
   }

   return code.join('');
}

You can now create a cloud function named "login" that handles user login.

Parse.Cloud.define('login', async request => {
   const { username, password, code } = request.params;
   const user = await Parse.User.logIn(username, password);

Using a conditional statement, the following code checks if the user has a 6-digit authentication code and if they don’t have it, it will generate it for them.

if (!code) {
       const generatedCode = generateCode();
       user.set('code_2fa', generatedCode);
       await user.save(null, { useMasterKey: true });
       await twillio.messages.create({
           body: `Your 2FA code is ${generatedCode}`,
           from: TWILLIO_FROM_NUMBER,
           to: user.get('phone_number')
       });

The conditional statement then check if the generated code and the one that’s been entered by the user are the same. If they aren’t, it will throw an error and won’t allow the user to sign in.

} else if (code && user.get('code_2fa') !== code) {
       throw new Error('Invalid 2fa code');
   } else {
       user.unset('code_2fa');
       await user.save(null, { useMasterKey: true });
       return {
           sessionToken: user.getSessionToken()
       };
   }
});

The upload itself will trigger a build & deploy on your application. Once they are successfully completed it is time to actually test if everything works as it should.

To verify the process was a success you can create an API POST request calling the function. In this example, my username & password are both “123”. Then press “Send Query”.

Note: Make sure your user already has a phone number stored in “phone_number” in your database. Otherwise, you’ll get an error.

As soon as you execute the query, you will receive an SMS.

Now let’s give it a try inside a web browser for example. The front-end is connected to the code and the Submit button triggers the login function. The username & password are the same as the example above (123 & 123).

Once you click on the “Submit” button, the function is checking the username and password and if they are correct, a code is being generated to your phone as an SMS.

Now let’s get the code and type it into our 2fa code field.

There are 2 possible outcomes. If the code is correct, we will be granted access, if it is wrong we will be denied access.

Conclusion

Two-Factor Authentication (2FA) is a crucial security measure that adds an extra layer of protection to online accounts. By requiring users to provide two different authentication factors, such as a password and a one-time verification code, 2FA significantly enhances account security. With the ever-increasing cyber threats, implementing 2FA has become essential to safeguarding sensitive data and preventing unauthorized access. Embracing 2FA helps users stay one step ahead of potential attackers and creates a safer digital environment for online interactions.

In this tutorial, we will show you how to generate PDF reports from data stored in a SashiDo app’s database and the PDFKit library. We’ll go through the database setup, the prompt we used in ChatGPT, the code snippet ChatGPT wrote for us, and what are the next steps. Let’s get started!

You can watch our short video tutorial and if you’d like a more detailed explanation, continue reading.

Set Up Your Database

Diagram of the “movieData” class structure

For the purpose of this tutorial, we’ll need to create a new class called “movieData” in your database. You can do that from your app’s Dashboard > Core > Browser > Create a class.
Once you have your class, you can add the columns from the Dashboard by clicking on Add a new column and afterwards adding the data row by row.

You can also add the data using our REST API console that you can find in Core > API Console. From there, using the batch endpoint, you can add multiple rows of data. There’s also no need to create the columns beforehand. MongoDB automatically creates them when a column is missing.

The Prompt

When it comes to using ChatGPT for coding tasks, providing clear and concise instructions is essential for effective communication. By following the 4 guidelines below, we optimized our interactions with ChatGPT and improved the quality of the assistance the tool provided.

1. Clearly Define Your Objective

Before engaging with ChatGPT, it is crucial to have a clear understanding of your task. Take the time to define your objective and outline the specific problem or code-related challenge you need assistance with. By articulating your requirements, you can provide precise instructions to ChatGPT, increasing the likelihood of receiving relevant and helpful responses.

2. Be Direct and Concise

When formulating your prompts, it is important to get straight to the point. Avoid including unnecessary information or context that is not directly relevant to the task. By keeping your prompts concise and focused, you provide ChatGPT with a clear direction, reducing the chances of confusion.

3. Break Down Tasks into Manageable Steps

While ChatGPT is a powerful tool, it is not optimized for generating code for complex and large-scale projects. To make the most of its capabilities, it is advisable to break down your coding tasks into smaller, manageable steps. By dividing your problem into bite-size pieces, you can effectively utilize ChatGPT's assistance for specific aspects of your coding challenge.

4. Provide Sufficient Context

To ensure accurate and relevant responses from ChatGPT, you need to provide sufficient context in your prompts. Explain the problem statement, any relevant input/output examples, and any constraints or requirements that the solution should adhere to.

Here is the prompt we used for the purposes of this tutorial. It’s quite short and follows the 4 guidelines above.

I have a SashiDo app that uses Parse Server Version 3.1.3. In my database, I have a class named "movieData". It has the following columns: movieTitle, releaseDate, review, rating.
Write code that fetches the data from movieData and generates a pdf file with it.
Write the code in such a matter so that I won't need to edit it.

Connect Your Account to GitHub

Before we get to the code, you need to set up our development environment. With every SashiDo app, you get a free private GitHub repo where you have full access to your business logic, a.k.a your Cloud Code. So, to set up a dev environment, you’ll first need to link your GitHub and SashiDo accounts. If you’ve already done this, you can skip this step. For those who haven’t, you can connect your GitHub account to SashiDo from your app’s Dashboard > Core > Cloud Code > Start your Cloud Code.

If you aren't familiar with Cloud Code, we recommend watching our YouTube video tutorial on the topic, as well as going through Parse’s Cloud Code documentation.

Set Up a Local Development Environment

Once you’ve connected your GitHub and SashiDo accounts, you just need to head over to your private GitHub repo from your app’s Dashboard > Core > Cloud Code > Manage on GitHub.

There you will find the README.md with instructions. We’ve also prepared a very detailed tutorial about creating a local development environment from scratch. We recommend checking it out, as well.

Results and Testing

Now that we’ve set up our local development environment, let’s see the code ChatGPT wrote for us.

Now that we’ve set up our local development environment, let’s see the code ChatGPT wrote for us.

const Parse = require('parse/node');
const PDFDocument = require('pdfkit');
const fs = require('fs');

// Initialize Parse with your SashiDo app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://YOUR_PARSE_SERVER_URL/parse';

// Create a new PDF document
const doc = new PDFDocument();

// Fetch data from the "movieData" class
const MovieData = Parse.Object.extend('movieData');
const query = new Parse.Query(MovieData);
query.limit(1000); // Set a limit to the number of results to fetch

query.find()
  .then((results) => {
    // Loop through the fetched movieData objects
    results.forEach((movie) => {
      const movieTitle = movie.get('movieTitle');
      const releaseDate = movie.get('releaseDate');
      const review = movie.get('review');
      const rating = movie.get('rating');

      // Write the movie data to the PDF document
      doc.text(`Title: ${movieTitle}`);
      doc.text(`Release Date: ${releaseDate}`);
      doc.text(`Review: ${review}`);
      doc.text(`Rating: ${rating}`);
      doc.moveDown(); // Move down to the next line
    });

    // Save the PDF document to a file
    doc.pipe(fs.createWriteStream('movieData.pdf'));
    doc.end();

    console.log('PDF file generated successfully!');
  })
  .catch((error) => {
    console.error('Error fetching movieData:', error);
  });

In summary, the code snippet fetches the movieData objects from the "movieData" class and iterates through them. It extracts the relevant data, such as movie title, release date, review, and rating, and writes them to a PDF document using PDFKit. Finally, it saves the generated PDF file in the current directory.

You can insert this code into the functions.js file or into a separate one. Once you’ve done this, you just have to do two things:

1. Install the NPM modules – pdfkit and fs. I used the following command to install both: npm i pdfkit fs
2. Initialize your Parse Server – you can find your credentials in your app’s Dashboard > App Settings > Security & Keys. From there you’ll just need your Application ID, JavaScript Key, and your API URL Address.

After you’re done with these steps, you can run the code and see that your pdf file was created in your local directory.

You shouldn’t stop here and deploy your code to production. We always recommend testing code before deploying it. This is a crucial step for ensuring reliable software performance, minimizing the risk of glitches, and providing a positive user experience.

We haven’t included specific tests in this tutorial because every app is different and what works for one, might not work for another. Take your time to thoroughly test your code to ensure it doesn’t create any problems with your existing app.

Next Steps

After you’re done testing and you’re satisfied with the results, you just need to commit the changes to your GitHub repo. I did this by running the following command: git commit -m "write to pdf functionality" and afterwards pushing the changes to the master branch with git push. This will cause your app to build and deploy automatically.

After a few minutes, your app will be running with the latest changes you pushed.

Conclusion

In this tutorial, we explored how to leverage ChatGPT’s code-writing capabilities to quickly add new features to your apps and save time and effort. The code snippet in this tutorial is fairly simple but you can pull off more challenging use cases. The trick is in giving ChatGPT a simple prompt and asking short follow-up questions.

We’d be happy to hear how you’ve leveraged ChatGPT in your professional life and what positive effects it had on you.

Happy coding!