Home
Posted in Ask for Help
Hey everyone! I'm Brian, one of the co-founders of Draftbit. I've worked in startups for the past 20 years, founding multiple companies and investing in more. I live in Chicago and love helping people turn their ideas into reality.
So -- please feel free to ask me anything about Draftbit, no-code/low-code, startups, etc!
(I'll be following this thread for the next few days. It may take me a few hours to respond to your questions.)
So -- please feel free to ask me anything about Draftbit, no-code/low-code, startups, etc!
(I'll be following this thread for the next few days. It may take me a few hours to respond to your questions.)
Posted in Ask for Help
Posted in Ask for Help
We have a new item on the product backlog that is to add realtime data binding to the firebase integration. If you are interested in this as well, please take a moment and upvote the roadmap item!
https://roadmap.draftbit.com/features/p/firebase-realtime-database
https://roadmap.draftbit.com/features/p/firebase-realtime-database
Posted in Ask for Help
Posted in Ask for Help
Are the blocks provided in the editor available to look at how they are built? For example I'd like to create a different version of the button that has an Icon on the right vs the left, and I'd like to do it in the same fashion as the current button is created.
I can create a "fake" button by containers, text, and icons. But would like to make it as close to what ya'll have already as possible.
I can create a "fake" button by containers, text, and icons. But would like to make it as close to what ya'll have already as possible.
Posted in Ask for Help
I did a search here and didn't find this particular issue with DatePicker. I am getting a strange error when I use DatePicker on an actual device. I don't think I'm doing anything strange with it.ย
In code it looks like this:
In code it looks like this:
<DatePicker style={styles.DatePickerJz} label="Birth Date" mode="date" leftIconMode="inset" type="underline" date={birthDate} onDateChange={birthDate => setBirthDate(birthDate)} error={true} />
birthDate is a state variable and on initialization is set to undefined. I get the following error when rendering BabyDetailsScreen, where DatePicker is used:
TypeError: null is not an object (evaluating 'date.getMonth') This error is located at: in DatePicker (created by Context.Consumer) in ThemedComponent (created by withTheme(DatePicker)) in withTheme(DatePicker) (at BabyDetailsScreen.js:201) in RCTView (at View.js:34) in View (at BabyDetailsScreen.js:108) in RCTView (at View.js:34) in View (at ScrollView.js:1124) in RCTScrollView (at ScrollView.js:1260) in ScrollView (at ScrollView.js:1286) in ScrollView (at BabyDetailsScreen.js:103) in RCTView (at View.js:34) in View (at ScreenContainer.tsx:62) in RCTView (at View.js:34) in View (at SafeAreaView.js:41) in ForwardRef(SafeAreaView) (at ScreenContainer.tsx:53) in ScreenContainer (created by Context.Consumer) in ThemedComponent (created by withTheme(ScreenContainer)) in withTheme(ScreenContainer) (at BabyDetailsScreen.js:83) in BabyDetailsScreen (created by Context.Consumer) in ThemedComponent (created by withTheme(BabyDetailsScreen)) in withTheme(BabyDetailsScreen) (at SceneView.tsx:122)
*NOTE:* When I set the date prop directly to undefined, DatePicker works normally, only I can't see the new date set because it's not being captured in the date prop.
The only way I have been able to get this to work is the following:ย
The only way I have been able to get this to work is the following:ย
const [birthDate, setBirthDate] = React.useState(new Date().toISOString()); : // make certain to not overwrite birthDate with invalid ISO // date string in useEffect() data fetches from DB : <DatePicker style={styles.DatePickerJz} label="Birth Date" mode="date" leftIconMode="inset" type="underline" date={new Date(birthDate)} onDateChange={newBirthDate => setBirthDate(newBirthDate)} error={!isEmpty(birthDate)} />
If the date prop is not set to a Date object or undefined, then I get some form of the error above. It seems to me that DatePicker should be able to create a Date object from a string passed into the date prop. Is this documented somewhere? Where is the documentation for @draftbit/ui?
Thanks,
Paul
Paul
Posted in Tutorials
In the previous post on creating a Bookbit Starter app from scratch, we focused on fetching real-time data from a REST API endpoint and implementing UI elements such as image, vertical and horizontal scrollable lists.
In this tutorial, let's extend the Bookbit app by creating a Book Profile screen such that when a user wants to view the details from the Discover Books screen, they can tap the book thumbnail to navigate to the book's profile screen, where they will find the details in the form of its title, name of the author who wrote it, description, quotes from the book and a FAB button that leads to a purchase link for the book.
Create a Book Profile screen
The screen we are building in this tutorial is called Book Profile. It will be composed of two main elements. The first element is to add UI elements such as ScrollView and Fetch to organize a layout to display data. The second element is to show the data fetched for a specific book item only when its id passed while navigating from the parent screen or, in Bookbit's case, Discover Books screen.
The Layout of the Book Profile screen is composed of the following elements:
We will not be covering every layout element in detail since they have already been covered in the previous tutorial.
Add a scrolling view
The first two UI elements in the Book Profile screen are ImageBackground and ScrollView.
- Open the workspace in the Draftbit Builder, then open the app you are building.
- Add a new Blank screen using the plus icon button in the left panel and call it Book Profile.
- The contents of this screen are going to be wrapped inside a scrollable view. Add ScrollView from the Layout component.
- Add a background image using the ImageBackground Media component and change Source type to static for it from the Configs tab of the Properties panel on the right side to choose a custom background image.
- top: 34
- bottom: 34
- left: 32
- right: 32
- Then, add a View as the child of the ImageBackground component. Set the Align property on the View to center and set the height to 100%.
- Add Fetch component as a child to this View. It will be responsible for fetching the data once we enable the navigation from the API endpoint.
- Inside the Fetch, add another View that will act as a container for the content to be displayed on the Book Profile screen.
Add an image component to display the book cover
- Start by adding a View component as a child to the last View created in the previous step. This new View component will be displayed, the book cover image, the book's title, and the author's name.
- In the Styles tab in the Properties panel, under Flex Items set the value of Align property to center. Then, add a padding-top and padding-bottom of 34.
- Inside this View, add a Container component with margin-bottom of 24, width of 120 and height of 190, and set the value of Overflow to hidden. In the Configs tab, set the value of Elevation property to 3.
- Add an Image component as the child to the Container with a width of 120 and height of 190.
- Adjacent to Container, add another View component that will contain Text components to display the title and the author's name.
- For this View, in the Styles tab, under Flex Items set the value of Align property to center, and set padding-top and padding-bottom to 24.
- Add two Text components to this View as children.
- The first Text component will display the title of the book. In the Styles tab, set the Font Size to 28, set Color to Custom, and set the margin-bottom to 8.
- For the second Text component, set the font set Color to Strong.
Passing data from one screen to another
Draftbit uses the react-navigation library under the hood to let you implement different navigation patterns such as Stack, Tab, etc. A feature of this library allows us to pass data from one screen to another as parameters. In our Bookbit app, we need to pass the ID of the book displayed on the Discover Books screen such that when a book thumbnail is pressed, a user can navigate to the Book Profile screen in the app to see the details of the book. To ensure that the information displayed is correct when book is selected, the ID of the book item is used.
In the previous tutorial, we created an API endpoint in Draftbit to fetch the book of the day. The endpoint URL accepts the ID of the book to fetch a book item by its id. We can also use the same endpoint to fetch the data of an individual book item to display on the Book Profile screen based on the ID of the book passed from the Discover Books screen.
To enable this, go to the Discover Books screen and add Navigation action on Touchable components under the following sections displayed on the screen:
- Book of the day section
- Trending list
- New Books list
Assign a navigation action to all of these Touchable components:
- Select the Touchable in the Layout Tree.
- Go to the Interactions tab of the Properties Panel and click the '+' icon next to the 'Action' section.
- Select the Navigation action, then in the Basics section, select the Destination screen to navigate, in this case, Books Profile.
- In the Pass Data section, click the '+' icon, add id as the key and select the ID from the API endpoint, which is of format: Endpoint Name/id (fetch data).
In the Book Profile screen:
- Go to the Fetch component, go to the Data tab in the Properties panel.
- In the Setup section, select the Service name that is the REST API service. Then, select the Endpoint, which is to fetch a single book item.
- In the Configuration section, at the URL Structure, select the id (navigation) as the value for ID key.
- To display the data on the Image component, go to the Data tab in the Properties Panel, change the Source Type to Data, and select the image_url variable. Image component supports three type source types:
- Static used to display an image from a static asset.
- Remote URL (default option) used to display an image from a URL. Data used to map the image's source to the key in API endpoint such as image_url in the current example.
- Next, add a variable to display the title of a book from the API endpoint. Text component supports static text and dynamic values using {{varName}} format. For the Book Profile, select the {{getBookOfTheDayTitle}} to display the title.
- For the author's name, set it to variable By {{getBookOfTheDayAuthors}}. The prefix "By" remains static and is followed by the author's name from the API endpoint, which is dynamic.
Add the description section
To add the description section, follow the steps below:
- Start by adding a View component adjacent to the View that wraps the image, title, and author's name.
- In Styles tab, set the padding-top and padding-bottom values to 24. In the Size section, set width to 100%.
- Add two Text components inside it.
- For the first Text component, set the font size to 20 and a margin-bottom of 8 in the Styles tab. In the Data tab, set a static text value of About this book in the Input Text section. This component acts as the header of the section for a book's description.
- For the second Text component, in the Data tab, set the value of the variable {{getBookOfTheDayDescription}}.
Add the quotes section
After the description, let's display a quote section where three quotes are displayed from the book.
- Add a View component adjacent to the two previous View components. In the Styles tab, set margin-top to 34, margin-bottom to 64, and padding-top and padding-bottom to 24.
- Add a Container inside it. In the Styles tab, set padding-top and padding-bottom to 18, padding-left and padding-right to 4, and a margin-bottom to 34. In the same tab, set its Color to Background from the drop-down menu. Remove any default value for height property. In the Configs tab, set the value of the Elevation property to 3.
- Add a Text inside the Container. In the Styles tab, set its Align property value to center, set margin-top and margin-bottom to 6 and set the font-size to 22 . In the Data tab, set the value of the variable to {{getBookOfTheDayQuote1}}.
- The next two Contains are going to have the same styles properties. The Text component wrapped inside each of the components will differ in the dynamic value for quotes. These values are such as {{getBookOfTheDayQuote2}} and {{getBookOfTheDayQuote2}}.
- Instead of creating these two Containers on your own and then go through the whole process, you can save the first Container component and its contents as a Custom Block by clicking the "..." icon on the component and then click the Save Custom Block. Add a name for the Custom Block and then click Save.
- To add a Custom Block, click the "+" icon on the parent View component, go to Saved block components, and select the component name you just saved.
Add a FAB button
A FAB, or Floating Action Button, represents the screen's primary action and is normally positioned above the rest of the screen's content. In Draftbit, you can configure a FAB by setting the text to be displayed on the button, setting or changing the color of the button, or adding an icon. There are four types of FAB available in Draftbit:
- FAB Mini
- FAB Fixed
- FAB Outline
- FAB extended
The difference between each type varies in their appearance properties.
- Adjacent to the ScrollView component, add a FAB Fixed.
- In the Styles tab, select the value for Position to be absolute. Also, set the value for left, right, and bottom properties to 32.
- In the Config tab, change the value of the Label to "Buy this book".
- In the Interactions tab, add an action by clicking the '+' icon next to the 'Action' section. Select the "Open Site in Browser" from the menu.
- Add a mock URL for the Destination property such that when a user taps this button, it will open a link in the webview.
Further reading
Posted in Ask for Help
We are loving draftbit so far for building mobile PWA and React Native apps. What we'd like to know is how to format a project for a non mobile aspect ratio. It looks like the designer only allows for building mobile aspect ratios, but the technology seems like it would work great for just web apps. Is there a way to unlock the aspect ratio from mobile to web in the designer?
Thanks!
Thanks!
Posted in Ask for Help
Hi
I am a no code developer and try to understand if there is a way to get one external component to Draftbit.
Basically I try to use Algolia Search UI to show indexed search results from Algolia. The instructions are here. Can anybody explain what is the way to integrate it to Draftbit?
Regards
Indrek
๏ปฟ
๏ปฟ
I am a no code developer and try to understand if there is a way to get one external component to Draftbit.
Basically I try to use Algolia Search UI to show indexed search results from Algolia. The instructions are here. Can anybody explain what is the way to integrate it to Draftbit?
Regards
Indrek
๏ปฟ
Posted in What's New?
We've added two new features to make your Draftbit publications better.ย
First, published apps now support offline installation with service workers! This additional PWA support provides a more integrated offline experience on iOS, Android, and desktop (via Chromium Browsers like Google Chrome, Microsoft Edge, and Brave).
First, published apps now support offline installation with service workers! This additional PWA support provides a more integrated offline experience on iOS, Android, and desktop (via Chromium Browsers like Google Chrome, Microsoft Edge, and Brave).
As part of this update, we also added support for background updates. If you are using or developing the app in a browser or desktop installation, you will see a small notification when the new version of the app is ready to be installed:๏ปฟ
๏ปฟ
On mobile, any new version will be downloaded in the background the next time you use the app, and installed and available once you close and reopen the app:๏ปฟ
๏ปฟ
Second, when you view a published app on a non-mobile screen, your (usable) app will be wrapped in a phone frame, along with a name, description, and social links to help spread the word about what you've made!
๏ปฟ
๏ปฟ
Don't worry! You'll have the same experience as before when viewing the app on mobile screens.
On mobile, any new version will be downloaded in the background the next time you use the app, and installed and available once you close and reopen the app:๏ปฟ
Second, when you view a published app on a non-mobile screen, your (usable) app will be wrapped in a phone frame, along with a name, description, and social links to help spread the word about what you've made!
๏ปฟ
Don't worry! You'll have the same experience as before when viewing the app on mobile screens.