Draftbit updates
Draftbit updates
draftbit.com

πŸš€ What's New (25-Nov): Modal & Action Sheet components, Expo SDK 43 upgrade, Todo app demo, and more

 

New

  

Hi Community πŸ‘‹

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

πŸ”₯ New Components: Modal & Action Sheet

1.png

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

3.png

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!

πŸš€ What's New (19-Nov): REST API Data Synchronization, Intro to Draftbit videos, No Code Instagram clone, and more

 

New

  

Hi Community πŸ‘‹

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

πŸ”₯ REST API Data Synchronization is here!

1.png

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.

2.png

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. ο»Ώ

cv1.png

πŸ”— Link to the post

cv2.png

πŸ”— Link to the post

cv3.png

πŸ”— 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!

REST API Data Synchronization is here!

 

Improvement

  

data-synchronization-featuring-react-query-draftbit.png

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.

Applications are now open! πŸƒ Draftbit Sprint Cohort 2 starts Monday, 15-Nov

 

Resources

  

draftbit-sprint-community (1).png

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:

πŸš€ What's New (11-Nov): New Bottom Tab Bar Style Property, Deprecated Action, and more

 

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 ↗️

CleanShot 2021-11-11 at 13.03.30.png

CleanShot 2021-11-11 at 13.04.48.png

⛔️ 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.

4e11347-CleanShot_2021-11-10_at_15.32.32.png

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

πŸŽ“ Office Hours Recording

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

Catch you next week!

πŸš€ What's New (Nov-3): Dynamic image paths, ICYMI: Demo Day, Office Hours, and more!

[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ο»Ώ

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

Catch you next week! πŸ‘‹

πŸš€ What's New (28 - Oct): No-code Image upload, Build and Publish a Native Mobile App from Scratch and more

 

New

  

Hi Community πŸ‘‹, Let's learn what's new at Draftbit this week.

πŸ”₯ New Feature: No-code Image upload to any cloud service

dmeo.gif

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

61720dffa7baed8ec5328c73_shutterstock_714655705.jpg

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?

6172d822d56d718e6b47e0b6_shutterstock_1445888471.jpg

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

πŸš€ What's New (21 - Oct): Draftbit Sprint Demo Day, Accepting Draftbit Sprint Cohort Applications, Affiliate Program & more

 

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!

draftbit-sprint-community.png

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!

draftbit-affiliates-cover-photo.png

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!

πŸš€ What's New (14 - Oct): Using Navigation and Passing Variables in Custom Components, Hiding Default Header on a screen, & more

 

New

  

Hi Community πŸ‘‹

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

πŸ’» How to use Navigation in Custom Components

ο»Ώ 22c6d0f-CleanShot_2021-10-11_at_12.52.59.png

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

066ad42-CleanShot_2021-10-11_at_12.16.53.png

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

50c76d9-CleanShot_2021-10-11_at_12.29.23.png

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:

Catch you next week

πŸš€ What's New (7-Oct): New Builder Design, Draftbit is Hiring, Fetching data in Custom Code, and more

 

New

  

Hi Community πŸ‘‹,

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

πŸ₯³ We've updated the Draftbit's UI!

Screen Shot 2021-10-04 at 5.42.32 PM.png

As you may have noticed, we've just rolled out a bit of an update to the UI of our builder. Learn more ↗️ about the changes.

πŸ† Draftbit is hiring a Success Engineer

We're looking for a technical, community-minded, customer-obsessed individual to join our team. Learn more here about details and how to apply.

πŸ“ New Tutorials

youtube-cover (1).png

How to create a custom button with Touchable, Icon, and Text

You can create your own custom button using a Touchable component. Learn more ↗️

youtube-cover.png

Fetching data in Custom Component

JavaScript offers a Fetch API that can fetch resources asynchronously over the network. You can use the Fetch API from JavaScript to request data in a Custom Component. Learn more ↗️

πŸŽ™ No-Code Interviews: Sean Montgomery, CEO of Xano

Georges interviewed Sean Montgomery, CEO of Xano on the NoCodeFrance community's Twitch channel. Watch Recording ↗️

Catch you next week!