Draftbit updates draftbit.com

New

👋 Hi Community

Let's learn what's new at Draftbit this week.

👁 New feature: Toggle Components visibility in the Components tree

 We added the ability to toggle between a component's visibility in a screen's Components tree. Using this, hiding a component will help you troubleshoot when a certain component is causing an error on the screen.

🔥 Better Custom Code editor experience

We've upgraded Custom Code Editor for writing Custom Components and Functions to provide a better experience.

The editor now

• has a new theme
• supports auto-suggestion for variable and function names
• mini-map on right-hand side to traverse large Components

📣 Shoutout to Karl Larson

Massive shoutout to our community member Karl Larson (founder of Spotter.so) for sharing a new guide with us:

How to get Relative Time Zone with Xano (eg: 3 Days ago)

✍️ New Tutorials

We released two new tutorials on using Open Camera and Open Image Picker actions:

• How to upload images to Airtable from a Draftbit app using Open Image Picker action
• How to use Open Camera action in Draftbit

🎓 Office Hours Recording

Missed Office Hours this past week? No worries, we've got you covered:

Draftbit Office Hours (November 30, 2021)

Catch you next week!

New

Hi Community 👋

We have a big announcement and new learning materials to share this week.

🔥 New Components: Modal & Action Sheet

We recently released two new components: Modal and Action Sheet. Read the complete announcement here ↗️

🚀 Expo SDK 43 upgrade

We're excited to announce we've upgraded Draftbit to Expo SDK 43. Expo powers Draftbit under the hood and allow us to build ios, android, and web apps behind the scenes. Read the major highlights here ↗️

📺 From Draftbit's YouTube Channel

Draftbit Todo List App Demo

✍️ From Draftbit's Blog

The 10 Best Design Tools for Mobile App Creators in 2021

This article will discuss some of the best design tools for creating mobile apps in 2021. Read More ↗️

Catch you next week!

New

Hi Community 👋

We have a big announcement and new learning materials to share this week.

🔥 REST API Data Synchronization is here!

We've made some big improvements to our REST API integrations, adding data synchronization and in-list editing.

Learn more about new changes ↗️

🎥 From Draftbit's YouTube Channel

Our own Georges Duverger created a video for you to get hands-on experience with Data Synchronization in Draftbit:

If you are just getting started with Draftbit, we produced five new "Introduction to Draftbit" videos for you to learn more.

Check the playlist here ↗️

✍️ From Draftbit's Blog

We recently published a new series of tutorials where we will create a full-stack Instagram clone app with Draftbit and Xano.

At the end of this 3-part tutorial series, you will have built a fully-functional Instagram clone (we call it Picbit) that allows:

• app users to sign up, login,
• create posts to their profile,
• and like and comment on other peoples’ posts. 

🔗 Link to the post

🔗 Link to the post

🔗 Link to the post

🎓 Office Hours Recording

Missed Office Hours this past week? No worries, we've got you covered:

Draftbit Office Hours (11 November)

Draftbit Office Hours (16 November)

Draftbit Office Hours (18 November)

Catch you next week!

Improvement

TLDR: We've made some big improvements to our REST API integrations, adding data synchronization and in-list editing.

REST-based API's are easily the most popular way to integrate with your backend or 3rd-party services and data. And this week, we're excited to roll out some big improvements to how these APIs are managed in Draftbit! For the engineers: we've added the well-known and well-worn React Query library into Draftbit for use with all REST-based API Services and Endpoints. These changes enable you to build more advanced apps, with improved performance and with better source code!

What's new or different?

• All of the objects that you pull or push to your REST endpoints will be in sync automatically. No more refetching or navigating to see changes.
• You can now update individual fields, inputs, and controls inside of a list of data.
• We automatically parse JSON for you, no need to add a separate action anymore.
• Your source code for REST requests is easier to read, less complex, and easier to extend or change.
• Massive improvements when making large or complex API requests and automatic deduplication of multiple requests to make your apps faster and more reliable.

These improvements also mean you can build new and complicated app use cases, like:

• Nested To-Do list or productivity apps
• Multi-item add-to-cart shopping experiences
• Saving items to bookmarks or carts without leaving the feed.

Moving to this new paradigm is optional, not automatic. To get started, you'll need to add object types and roles to your API requests to start utilizing these benefits. Want to learn how to do that? Our very own Georges Duverger has created a walkthrough showing off the feature and how to get it set up. Check it out!

Check it out and then show us what you've built with this new feature! Record a quick video and post it in the Draftbit Community Showcase, and we'll feature the best examples in our next newsletter.

Resources

Hey everyone, applications for Draftbit Sprint #2 are now open! So what are you waiting for? Apply Now

🏃Draftbit Sprint is a bootcamp designed to take aspiring app founders from idea to MVP in just 5 days. During those 5 days, you and your cohort-mates will get curriculum, coaching, and support from the Draftbit team as you build. Draftbit Sprint is free and we accept a limited number of founders in every cohort.

Is Draftbit Sprint for me?

• You want to quickly prototype an MVP and publish it to the App Stores.
• You want free 1-on-1 coaching & training to launch, ASAP.
• You can commit 3+ hours/day to build and iterate, starting on Monday, November 15th.

If this sounds like you, apply now: https://draftbit.typeform.com/to/Rude1pxx

We've made a few changes for DS2

• Starts Monday instead of Wednesday.
• Sprint is still free, but you'll be required to have a Draftbit plan to enroll. You'll get an exclusive discount to help with the cost.
• You're encouraged, but not required, to have published in the App Store to participate in Demo Day.

Need some extra inspiration?

Check out the last 2 Sprint Demo Day recordings below:

New

Hi Community 👋

Let's learn what's new at Draftbit this week.

🔥 New Bottom Tab bar Style property

The Bottom Tab Navigator in Draftbit has now a Border property. You can use it to style the Top Border of the tab bar according to your designs or hide it completely. Learn More ↗️

⛔️ ParseJSON action is deprecated

We've recently deprecated ParseJSON action. It was commonly used in no-code Authentication flows to extract the auth token key when chained with an API request action.

Now, parsing the response in JSON in an API request action is handled by Draftbit automatically.

If you are looking to implement authentication in your app, please make sure to go through the updated No-Code Authentication guides here:

• Intro to Authentication
• Xano
• Supabase
• Bubble CMS
• Backendless

🎓 Office Hours Recording

Missed Office Hours this past week? No worries, we've got you covered:

Catch you next week!

[New] Hey everyone, we've got a bunch of newness to talk about. So let's jump in!

🔌 Improved data-enabled Image Component

The Image component, as well as the Image Background and the Circle Image components, just became easier to use with data.

We heard from users that some APIs only return the relative path of a URL. Those APIs typically recommend that you prefix that path with a static, base URL. In Draftbit, we now let you construct that URL in any way you'd like. Meaning, you can mix and match dynamic data ({{imagePath}}) with static text (https://base-url.com/).

For a more visual explanation of what you can now accomplish in Draftbit, take a look at the video tutorial below.

🏃 ICYMI: Draftbit Sprint Demo Day - watch the recording now

On Tuesday we hosted Draftbit Sprint Cohort #1's demo day. Watch the recording below to see the cool apps that were demoed. Shoutout to Joanne Cooper, BRETT BERGEN, and Art Garcia for their amazing progress!

Applications for Cohort #2 are not yet open. If you'd like to receive a notification when they are, send an email to help@draftbit.com and mention you'd like to apply for Cohort #2 of Draftbit Sprint.

🎓 Office Hours Recording

Missed Office Hours this past week? No worries, we've got you covered:

Office Hours are every Tuesday & Thursday. We recommend RSVPing early, here: https://www.crowdcast.io/draftbit

✍️ From the Blog

9 Reasons Small Business Owners Should Be Thinking About Low-Code/No-Code

Catch you next week! 👋

New

Hi Community 👋, Let's learn what's new at Draftbit this week.

🔥 New Feature: No-code Image upload to any cloud service

This week introduced two new actions to allow your application to select an image either from a device's media library or using a camera and upload it to a cloud service of your choice.

• Open Camera
• Open Image Picker

Both of these actions can be mapped as interactions on a Button or a Touchable component. You do not have to write custom code to add these features to your app.

In the above example, you will see the example of the "Open Image Picker" action. Results of the picker using image picker or camera action return image data. The data is in Base64 format. It can be further chained with a "Run a Custom Function" action to upload the data to a cloud service.

Other attributes to manipulate image data provided in each of these actions are:

• Media Types: set the value to either select an image or a video. For iOS only.
• Allow Editing: enable this option to edit image or a video after its picker. On iOS, you will find the native features like to trim a video.
• Quality: using the range slider, you set the value for the compression size of the image to be picked between 0 and 1. The value 0 represents compress for small size and 1 represents compress for maximum quality.
• Result Name: it is useful to store the image with a variable name such that the variable name can be used to send the image data in the body configuration of to a cloud service.

🤝 Makerpad - Build and Publish a Native Mobile App from Scratch in Just 1 Hour!

In this special guest appearance at Makerpad's Fundamentals of No-Code office hours, our own Georges builds and publishes a native app from 0 to App Store in just 60min! "No-Code Tools" is a directory app with Airtable (directory) and Xano (user data) back-ends, and has email/password authentication and commenting built-in. Watch now ↗️

📱 How To Get Your First 1,000 Mobile App Users

Lots of great mobile apps thrive and take off, and lots of great mobile apps never get off the ground.

In many cases, based on our interactions with thousands of founders in the Draftbit Community, success seems to come down to how well they enlist the support of those first mobile app users.

In this article, we’ll discuss some of the best strategies for doing that. Read More ↗️

✍️ React Native vs. Flutter: Which One is Better?

When it comes to selecting a cross-platform mobile application framework, many developers are indifferent. That’s because, in the beginning, the goal is often just to pick the most practical, expedient app maker and get the product to market as quickly as possible. Read More ↗️

Catch you next week

New

Hi Community 👋,

Let's learn what's new at Draftbit this week.

🚀 Draftbit Sprint Demo Day

This week at Draftbit, we held our pilot cohort where four app founders show off the apps that they built in just 5 days. You can watch the complete Demo Day on our YouTube channel ↗️

🏃‍♀️ Draftbit Sprint Cohort #1 • Applications are open!

Following a successful "Launch Class" of Draftbit Sprint, we are excited to say that we're doing it again! Learn more on how to apply here ↗️

💜 The Draftbit Affiliate program is now live!

We just accepted our pilot batch of Draftbit Affiliates into our affiliate program, and we have about 5 slots remaining. If you were on the fence about joining, get your application in ASAP. Learn more on how to apply ↗️

💼 Draftbit Office Hours are back!

Draftbit Office Hours is where we answer recently asked community questions posted in the Ask for Help section of the community. Watch Here ↗️

📝 Documentation updates

Authentication with Bubble CMS

Authentication is the way Bubble backend handles adding users and allows them access to certain areas or endpoints of the app. The process of authenticating a user typically needs the following steps in a mobile app:

• Sign Up: Provide a form for a user to enter credentials to create a new account.
• Log In: Provide a form for a user to enter credentials to authenticate their identity and login into the app.
• Save the Authentication Token when a user's credential verifies with the backend service. Authentication Token is received as a response from the REST API service.
• Making authenticated API requests.
• Log Out: An action to reset authentication and return the client to an unauthenticated state.

Read more ↗️

Passing Data from a List to a Custom Component

There may be scenarios in which you will want to nest a Custom Component inside a List component. Learn ↗️ how to use React Props Pattern to pass one or more fields from the List component to the nested Custom Component.

Catch you next week!

New

Hi Community 👋

Let's learn what's new at Draftbit this week.

💻 How to use Navigation in Custom Components



Draftbit uses the react-navigation library under the hood to let you implement different navigation patterns such as Stack and Tab. You can use the navigation prop from the library and pass it to a Custom Component when defining it on a screen. Read more ↗️

🛳 How to Pass Variables in Custom Components

Custom Components are plain React Native components that are written using JSX. If you receiving data in your Draftbit app from an API service, you can pass one or more fields using the React's prop pattern. Learn More ↗️

⛔️ How to hide default navigation header on any screen

Creating custom headers for your screens? You would want to hide the default header of an individual screen. Learn more ↗️

📝 New Docs Update

We're constantly making efforts to keep Draftbit's Documentation up to date. Some of the recently updated docs that you might want to check:

• Supabase
• Contentful

Catch you next week