Tutoriale de programare web

  • Read a File Line by Line With PHP
    by Monty Shokeen on 31 iulie 2022 at 2:35

    There are two reasons why you might want to read a file line by line with PHP: The project you are working on requires you to process the file one line at a time. You are reading a very large file, and the only way to read it without going over the memory limit is to do it one line at a time. Using file() to Read the File You can use the file() function in PHP to read the entire file at once into an array. The array elements are individual lines of the file. So you will be able to iterate over the lines in the file by iterating over the array. The function accepts three parameters: filename: This is the file that you want to read. You can also supply a URL as the filename. flags: This is an optional parameter and can be set to one or more of the following constant values: FILE_USE_INCLUDE_PATH, FILE_IGNORE_NEW_LINES, and FILE_SKIP_EMPTY_LINES. context: This is also an optional parameter used to modify the behavior of a stream. We will be using the FILE_SKIP_EMPTY_LINES flag to skip all the empty lines in a file. You might also want to use FILE_IGNORE_NEW_LINES to remove the line endings from individual lines. This function returns an array with the file contents upon success and false upon failure. You will also get an E_WARNING level error if the file does not exist. Here is an example of using this function. <?php $lines = file(‘pride-and-prejudice.txt’); $count = 0; foreach($lines as $line) { $count += 1; echo str_pad($count, 2, 0, STR_PAD_LEFT).”. „.$line; } ?> The output of the above code looks like this: 01. The Project Gutenberg eBook of Pride and Prejudice, by Jane Austen 02. 03. This eBook is for the use of anyone anywhere in the United States and 04. most other parts of the world at no cost and with almost no restrictions 05. whatsoever. You may copy it, give it away or re-use it under the terms 06. of the Project Gutenberg License included with this eBook or online at 07. www.gutenberg.org. If you are not located in the United States, you 08. will have to check the laws of the country where you are located before 09. using this eBook. 10. 11. Title: Pride and Prejudice 12. 13. Author: Jane Austen 14. 15. Release Date: June, 1998 16. [Most recently updated: August 23, 2021] You can see that there are some empty lines in the output; we can get rid of them by using the FILE_SKIP_EMPTY_LINES flag. Also, it might not be evident, but the lines above include the newline character. That is why we did not have to add a newline character of our own when echoing the lines. You can get rid of the blank lines by using the FILE_IGNORE_NEW_LINES flag. <?php $lines = file(‘pride-and-prejudice.txt’, FILE_SKIP_EMPTY_LINES|FILE_IGNORE_NEW_LINES); $count = 0; foreach($lines as $line) { $count += 1; echo str_pad($count, 2, 0, STR_PAD_LEFT).”. „.$line; } ?> The output with those flags will look like this: 01. The Project Gutenberg eBook of Pride and Prejudice, by Jane Austen 02. This eBook is for the use of anyone anywhere in the United States and 03. most other parts of the world at no cost and with almost no restrictions 04. whatsoever. You may copy it, give it away or re-use it under the terms 05. of the Project Gutenberg License included with this eBook or online at 06. www.gutenberg.org. If you are not located in the United States, you 07. will have to check the laws of the country where you are located before 08. using this eBook. 09. Title: Pride and Prejudice 10. Author: Jane Austen 11. Release Date: June, 1998 [eBook #1342] 12. [Most recently updated: August 23, 2021] Using the file() function is an easy way to read a file line by line in PHP if you are not worried about memory usage. However, you will have to get more creative if memory usage is an issue because file() reads the entire file into an array at once. Using fgets() to Read the File Another way to read a file line by line with PHP is to use the fgets() function. It has one required parameter, which is a valid file handle. We will use the fopen() function to get access to the file handle. Here is the code that we are going to run: <?php $file_handle = fopen(‘pride-and-prejudice.txt’, ‘r’); function get_all_lines($file_handle) { while (!feof($file_handle)) { yield fgets($file_handle); } } $count = 0; foreach (get_all_lines($file_handle) as $line) { $count += 1; echo $count.”. „.$line; } fclose($file_handle); ?> On the first line, we open our file in read-only mode. Then, we define a function which accepts a $file_handle as a parameter and gives back a single line. Please note that we are using a yield statement, and our function get_all_lines() is a generator function. You might want to read about generator functions in PHP if you haven’t used them before. How to Use Yield and Generators in PHP Monty Shokeen 26 Dec 2021 We are using the feof() function inside get_all_lines() to check whether our file pointer has reached the end of the file. We only yield as long as we are not at the end of the file. You should get the following output by running the code above: 1. The Project Gutenberg eBook of Pride and Prejudice, by Jane Austen 2. 3. This eBook is for the use of anyone anywhere in the United States and 4. most other parts of the world at no cost and with almost no restrictions 5. whatsoever. You may copy it, give it away or re-use it under the terms 6. of the Project Gutenberg License included with this eBook or online at 7. www.gutenberg.org. If you are not located in the United States, you 8. will have to check the laws of the country where you are located before 9. using this eBook. 10. 11. Title: Pride and Prejudice 12. 13. Author: Jane Austen 14. 15. Release Date: June, 1998 16. [Most recently updated: August 23, 2021] The output looks the same as in our previous section. The only difference this time is that you are no longer in danger of running out of memory. I mentioned earlier that fgets() will allow you to read one line of the file at a time, and it only requires a single parameter that points to the file pointer for the file that you want to read. The memory consumption in this case would depend on the length of the line, and there is little chance of you running out of memory. However, let’s say you’re reading a text file which contains unusually long lines. You can then pass an optional second parameter to the fgets() function which specifies the number of characters that you want to read. It will then read length – 1 bytes from the file before stopping. It will stop earlier if it comes across a new line or the end of the file. This gives you more control over the memory consumption of your code. Final Thoughts I have discussed two methods of reading a file line by line with PHP in this tutorial. There are a couple more ways of doing this, but these two will meet almost all your needs. Use the file() function when memory consumption is not an issue, and use fgets() with a generator function if you want to conserve memory.

  • Inventory and Stock Management Plugins for WooCommerce and WordPress
    by Franc Lucas on 30 martie 2021 at 4:26

    Do you want to instantly know the amount of inventory you have and where it is stored? Maybe you’ve been in the unenviable position of products being out of stock, with back orders piling up. WooCommerce Product Stock Manager is an example of inventory plugins for WooCommerce and WordPress available on CodeCanyon When your inventory management is done well, order fulfillment goes smoothly. But you can’t achieve this if you’re using antiquated methods like managing inventory using spreadsheets or closing down your operations for a stock count. Here is where inventory plugins come in! Inventory plugins are automated inventory management systems that help you keep an accurate count of your inventory and see your stock situation in real time. They help you manage all your stock from one place, especially if you have multiple storage locations or warehouses. Before we look at the plugins, let’s explore the benefits of a monthly subscription to Envato Elements.  Get Access To Unlimited Premium Creative Assets With Envato Elements For designers and developers, access to unlimited digital assets makes it easy to focus on creating unique products. There are countless assets, tools and resources that you can download, all with an Envato Elements subscription. unlimited premium themes to download unlimited advanced plugins unlimited fonts for a stylish site unlimited icons and graphics for website design royalty-free stock photos and videos logos the Elements plugin for WordPress Envato Elements has plenty of high quality assets that you can use for your next project. The subscription is covered by simple commercial licensing that gives you the rights to use the item in a broad variety of projects, including those of a commercial nature. The licensing is future-proof, meaning even if you unsubscribe and can’t download items from Envato Elements any more, any existing uses that you registered are still covered. You can cancel or upgrade your Envato Elements subscription at any time. Subscribe today and start creating!  Let’s now go over the top inventory and stock plugins on Envato Elements and CodeCanyon. 40+ Reasons Envato Elements Is Great for WordPress Developers Daniel Strongin 12 Aug 2021 Top WooCommerce Inventory and Stock Management Plugins on Envato Elements (2022) Let’s now go over the top premium WooCommerce Inventory and Stock Management Plugins on Envato Elements for 2022. 1. WooCommerce Product and Related This plugin is crucial for managing inventory for your store. It is the perfect planning tool because it gives you detailed stats of what products are selling well, related products customers buy together, and so on. It simplifies decision making: what to have in stock, what sells well together, and what to get rid of.  2. WooCommerce Pricing and Discounts This is another must-have stock management plugin for small stores. It allows you to price stock items as well as discount stock products that are slow and you want to quickly get rid of them and make room for new products or those that sell well.  Bestselling Inventory Plugins for WooCommerce and WordPress on CodeCanyon (2022) With a low-cost, one-time payment, you can purchase any of these high-quality inventory plugins for WooCommerce and WordPress and streamline how you manage your inventory. Best Premium WooCommerce Stock Inventory Plugins (2022) These plugins are WooCommerce add-ons that will assist with your stock and inventory management. 3. WooCommerce Out of Stock! Manager WooCommerce Out of Stock! Manager is a powerful and flexible tool that lets the store admin assign custom low stock values to a set of products and/or categories. You can set custom levels for each product. An email is sent to the store admin if one or more of the items has reached a configured custom warning level. You can also customize each product page to show messages like „in stock”, „out of stock”, „above custom stock level”, or „under custom stock level”. 4. WooCommerce Multi Locations Inventory Management Do you ship products to customers from multiple warehouses? Does your business sell from multiple store locations? WooCommerce Multi Locations Inventory Management is the perfect plugin to manage your product stock from multiple locations. Here are a few features for this plugin supports multiple locations for simple as well as variable product types adds each location’s inventory to your default WooCommerce inventory assigns a delivery area for locations with a WooCommerce shipping zone visitors can see the selected warehouse location on the checkout and cart page It is compatible with WooCommerce Shipping Pro for UPS and WooCommerce Shipping Pro for FedEx. The system integrates with Google Maps and third-party inventory tools with the WooCommerce Rest API. 5. WooCommerce Attribute Stock: Share Stock Between Products The WooCommerce Attribute Stock plugin allows you to manage stock based on product attributes. Products that share more than one attribute are tracked, and available quantities are displayed on the front-end to prevent over purchasing. You can easily track and manage shared stock, variable stock, linked stock, product add-ons, product combos, parts, measurements, ingredients, and more! It is compatible with 99% of other plugins, such as variation swatches, POS systems, subscriptions, product bundles, cart stock reducer, WP-Lister, WPML, and more. 6. WooCommerce Quickbooks Connector WooCommerce Quickbooks Connector automatically syncs your WooCommerce store orders, customers, inventory, products, payments, and bank deposits to QuickBooks Online. It offers real-time two-way syncing. Any updates you make on your QuickBooks Online automatically reflect on your WooCommerce store and vice versa. 7. Stock Synchronization for WooCommerce Suppliers usually keep their inventory in a regularly updated file that you can sync to update your stock. With Stock Synchronization for WooCommerce, you can synchronize your stock quantities from an external CSV file, Google Spreadsheet, Google Drive, Dropbox, or FTP. You can also synchronize your product prices by simply updating your product prices from the same CSV file. Other features: multi-vendor support daily, twice daily, or hourly updates compatible with variation products 8. Product Alerts for WooCommerce You need a system to notify you when your stock levels are running low. It should be able to do so by sending low stock alerts via email, SMS, or notifications on your dashboard. Using Product Alerts for WooCommerce, you can enable or disable this alert for individual products, set the low stock quantity, and set the message subject, heading, and types of message you would like to receive: HTML, plain text, or multipart. 9.WooCommerce Product Stock Manager WooCommerce Product Stock Manager makes it easy for you to manage stock for your products. On the admin interface, you can add products by product name and ID, status, weight, SKU, title, and much more. You can also search for products by name within the same page, and even edit and update information. You can manage the sale price of all products in the same window. You can also do bulk edits and updates for variation products. Variations will include attributes like SKU, sale price, regular price, stock status, and more. There is color labeling of low and full stock. Let’s now go over a few free options that you can download if you are on a budget. Free Inventory Plugins for WooCommerce and WordPress There are plenty of free options as well for inventory plugins for WooCommerce and WordPress. They won’t have as many features as the premium plugins, but are a great for starting out if you are on a budget. WooCommerce Stock Manager With this free WooCommerce stock plugin, you can set up products by SKU, display a product thumbnail image, and filter products by type, category, stock managed, or stock status. You can also manage stock, stock status, and back orders. Z Inventory Manager: Inventory Tracking and Management Plugin Z Inventory Manager lets you manage your inventory and check stock levels in real time. You can act on low inventory and generate purchase orders to fill your stock, and then keep track as your items arrive with purchase receipts. Reports allow you to monitor all your inventory at a glance and focus on specific items. WooCommerce POS Inventory Count If you want to conduct a physical inventory check by scanning QR codes and importing and updating the quantities in an electronic system, try WooCommerce POS Inventory Count. It’s a simple, free WooCommerce plugin that makes it easy to keep track of physical inventory. Importance of Inventory Management Inventory done right means happy customers, which translates to return customers. Inventory management means planning, forecasting, and being aware of different seasons of the year because some products perform better in particular seasons. It also means that if products are left over at the end of the season, instead of letting them fill up space, you can offer them at a discounted price in the next season to get rid of them and open up space for newer products. Inventory Management Best Practices Choosing the right inventory management plugin is only one aspect of inventory management. When inventory management is not done right, some problems you will come across include: overstock out of stock back orders no idea what location a product is housed in defective products shipped Let’s look at some inventory management best practices that will help you avoid these problems. Proper Training of Inventory Staff Nearly every aspect of your business is dependent on a proper inventory count. When the inventory shows an item is available and this turns out to be wrong, it puts salespeople in the uncomfortable position of explaining to customers why they sold something that wasn’t available. Train your staff on how to manage inventory and how to use the in-house inventory management system. Investing in Counting Cycles How many inventory counts do you want to have each year? Do you want to have a continuous or periodic count? Categorize which products to give priority in each count? Do you want to order yearly or periodically? Connect Your Inventory System to Your Sales System Every item that is sold should be automatically deducted from the inventory so you can see what your true stock levels are. Yes, you’ll still need to count your stock when the time comes in order to smooth out discrepancies. Understand Your Best Customers What your best customers buy can often be a reflection of a market trend, and you can promote it to customers that fit a similar profile. Knowing what they want helps you have it in stock. Don’t disappoint your return customers! Prioritize Quality Control Do your products meet the quality standards that customers expect? Defects in products mean loss of sales as a result of returns and customer dissatisfaction. This is where quality control comes in. Implement a system for detecting defective products.Look out for defects such as tears, breakages, leakages, color discrepancies, or faulty descriptions on labels. Count damaged or defective products separately.Many defective products indicate poor storage conditions, bad quality control by manufacturers, or a flawed transportation process. Of course, return damaged goods to manufacturers for a refund or replacement. Storage conditions can also affect the quality of your products.Think about what storage conditions are ideal for your inventory. Consider the effect that light, heat, or humidity can have on your products. Take Advantage of Surplus Stock Surplus stock creates an opportunity for sales and promotions. This can be a source of easy money. Donate what you can’t sell and get a tax write-off instead of dumping it. What Should You Look for in an Inventory Management Plugin? Here are some things you should consider when choosing an inventory management system: Compatibility and Customization In addition to being able to customize it to the specific needs of your company, an inventory system should be compatible with your existing software and hardware. Variants and Composite Products Same products can come in different colors or alternative feature sets. The system must be capable of accommodating variants. And if you want to create new product packages by combining existing products, then the system should accommodate composite products. Scalability An inventory management system should be capable of growing and expanding with your business. Looking for a new system years down the road will cause unwanted distraction. Offline Access and Synchronization An inventory management system should allow you to access your files both online and offline, so you can provide uninterrupted service to your customers. It should also be capable of offline-to-online synchronization so you don’t need to worry about losing any information. Mobile Access You may need to be able to manage your inventory anytime, anywhere, from your smartphone or tablet, and even create purchase orders automatically from your mobile. Integration With Third-Party Services Compatibility with other plugins, including third-party services like payment gateways, marketing gateways, etc., should be a no-brainer. Security, Technical Support, Regular Updates The safety of your customers’ personal and financial information should be a high priority. Download Even More WooCommerce Plugins The plugins listed in this article are only a small selection of the high quality WordPress and WooCommerce plugins available from Envato. Check out the articles below for even more plugins that you can download.  8 Best WooCommerce Subscription Plugins Franc Lucas 28 Oct 2021 9 Best Email and Mailchimp WooCommerce Plugins Daniel Strongin 27 Jan 2022 25+ Best WooCommerce Plugins for Products, Pricing, Payments, and More Eric Dye 16 Aug 2021 12 Best WooCommerce Plugins for Your Online Store Jane Baker 31 Oct 2018 Manage Your Inventory With an Inventory Plugin from CodeCanyon! Streamline your inventory management using inventory management plugins from CodeCanyon. Choosing the right plugins vastly simplifies how you run your business. The following selected posts will guide you to the right plugins. 35+ Best Shipping and Pricing WooCommerce Plugins Daniel Strongin 20 Dec 2021 Top 12 Tips for a Better WooCommerce Store Franc Lucas 27 May 2022 Choosing a WooCommerce Plugin for WordPress eCommerce Success Franc Lucas 11 Jun 2019 The Best WordPress Plugins of All Time (Free and Paid) Franc Lucas 28 Jul 2022 5 Best Store Locator WordPress Plugins Esther Vaati 30 Mar 2021 9 Best Coupon Plugins for WooCommerce Daniel Strongin 24 Jun 2022 This post has been updated with contributions from Daniel Strongin. Daniel is a writer for Envato Tuts+, an avid electronic music producer, and has an online store dedicated to melodic electronic music producers.

  • How to Turn Your WordPress Website Into a Mobile App
    by Franc Lucas on 22 octombrie 2020 at 1:19

    If you’re wondering how to turn a website into an app, then you’ve come to the right place. Do you want to turn your existing WordPress website into a mobile app without writing a single line of code?  WebView templates and WordPress app builders are an easy and affordable way to turn your WordPress website into a mobile app. They’re perfect for a non-technical person—no mobile app development experience is required!  WebView templates and WordPress mobile app builders turn your website into a responsive app that can be used on all mobile devices. And any changes or updates you make to your website will be reflected immediately in the mobile app.  Web2App for Android and Web2App for iOS are examples of WebView templates on CodeCanyon that can turn your website into a mobile app. Let’s look at some of the best WebView templates and WordPress app builders on CodeCanyon.  Turn Any Website Into an App (For Mobile) You can also easily turn any other kind of website into a mobile app. For a one-time payment, you can grab one of these best-selling WebView app templates and convert your website into a mobile app.  CondeCanyon is the place to go If you want to convert your WordPress to a mobile app. Turn your WordPress site into an app if you want to optimize it for mobile users. Web apps or responsive web apps are essentially webpages that can be read on mobile devices. They can be accessed through mobile web browsers, without needing to install anything.  To give a web app the look and feel of mobile apps, including the ability to add the app to the Google Play Store or App Store so it can be installed on a mobile device for easy access, you will need a WebView template.  Best WebView Templates to Convert Your Website to a Mobile App The following best-selling WebView templates for Android and iOS available on CodeCanyon will be your best bet for turning your website into a web app. 1. Best-Seller: Universal Android App – Turn Your Website Into an App The Universal Android App template allows developers to create an app for almost any purpose using the template’s dedicated layouts, with different layouts designed for different kinds of content. The template’s „configurator” tool can be used to define the content without you needing to write a single line of code, and the template has tons of built-in features to give you a head start. In addition to step-by-step documentation, it comes with in-app purchase options, AdMob advertising, push notifications by OneSignal, and more.  2. Trending: WebViewGold for Android and WebViewGold for iOS – Turn Your WordPress Site Into an App WebViewGold wraps your web-based or local HTML content into a real, native Android app or iOS app! No more coding, no more plugins needed. This app template supports all kinds of web apps and websites, including HTML, PHP, WordPress, progressive web apps, and HTML5 games. It also supports AdMob banners and full-screen interstitial ads. 3. Trending: Web2App for Android and Web2App for iOS – Turn WordPress Website Into an App If you’re looking to convert a website into an Android or iOS app, then Web2App is for you! The template is packed with features and has powerful customization, such as seven different layout options where you can choose your own theme and customize the app to fit your particular brand identity. Not only that, but its comprehensive documentation, along with video tutorials and step-by-step instructions, make your job much easier than you might have thought possible. Go ahead and turn your WordPress website into an app! 4. Best-Seller: Universal Android WebView App – A WordPress to Android App Universal WebView App is a native Android application which uses a WebView component for displaying content. With this template, you can turn your responsive website into a universal mobile app. It’s quick, easy, and affordable, and it does not require programming skills. The code is easily configurable and customizable. And there is just one config file to set up everything!  It has lots of nice extra features such as Material Design styling, geolocation, and pull-to-refresh gesture support. Universal WebView App is also compatible with WordPress or any other web framework. It supports HTML5, CSS3, JavaScript, jQuery, Bootstrap, and other web technologies. Create your own app in less than 15 minutes without any special knowledge! It’s easier than you think. 5. RocketWeb for Android – WordPress to Android App RocketWeb is yet another WebView-based app for Android. It comes with a lot of configuration options, and you don’t need to learn any programming languages to make changes to the app. What sets it apart from the competition is the wide selection of available themes. There are over 50 color schemes for you to choose from, based on the theme of your own website It comes with support for RTL view, a dynamic sliding menu, and push notifications. There is also integration for AdMob to serve ads. Start with this template and turn your WordPress website into an app.  6. SuperView WebView App for Android and SuperView for iOS – Turn Your Website Into an App SuperView WebView App for Android and SuperView for iOS are great for people who already have a website and want to quickly create a mobile app that pulls up the content from the website. They come integrated with AdMob, social login, and in-app billing. Other features of the app templates include Firebase push notifications, geolocation, a splash screen, and a loading indicator. 7. Web To App: Android Web View – WordPress to Android App Web To App converts your web app to an Android app using a drag-and-drop web view template. This universal app builder combines the power of the web view with native features to create a web app which feels native with less effort. Content can be loaded from local files or localized using the inbuilt HTML editor. The app can ask permission to store users’ data and location. With this web to app template, your Android App can have four different navigation menus, AdMob banner ads, interstitial ads, and push notifications. It’s integrated with Ratebolt so users can rate your app. A video tutorial is included online for a quick start. This template will help you turn your WordPress site into an app.  The Best WordPress App Builder Plugins  Grab one of these best-selling mobile app builders and convert your WordPress website into a mobile app. Purchase one of these high-quality mobile app builders to create your app in minutes.   On CodeCanyon you can find the best WordPress app builders. What Is a Builder for WordPress With Mobile App Plugins? One of the top questions we get is: „Can you turn a website into an app?” the answer is of course you can! A builder for WordPress with mobile app plugins helps you convert your WordPress site to a mobile app and save development costs.  Let’s have a look at some top-selling WordPress App Builders on CodeCanyon. 1. WappPress a WordPress App Builder  WappPress is an excellent tool for converting any WordPress website into an Android app instantly. It’s very easy to use and simple to navigate. You don’t need any coding skills.  It is packed with highly useful features like push notifications, AdMob, a custom launcher icon, a custom splash screen, and instant app builds in real time.  You can even replicate the functionality and features of your website in this app.  2. Android App Builder – WordPress Mobile App Plugin Convert your WordPress to a mobile app and into a native Android app from the convenience of your desktop! You can do all this using Android App Builder. This software creates native apps for Android without you having to write a single line of code. It’s perfect for both seasoned Android developers and people without programming skills.  Android App Builder writes the new classes and activities, scales the icons, creates key stores, etc. You won’t even need to open Android Studio! In addition, you can do all of the following operations with this WordPress mobile app plugin: Generate your ready-to-run project. Test your new application on an emulator or a real device. Generate a signed APK or App Bundle to publish to the Play Store. Convert your WordPress site to a mobile app. You only have to install it once. Your project is created and compiled on your computer. You don’t have to enter your secret codes, IDs, or passwords on anyone’s website. Everything starts and ends on your computer. 3. Cirilla: Multipurpose Flutter WordPress App Builder Cirilla is a drag-and-drop app builder that will convert any WordPress to a mobile app, (Android and iOS). You have unlimited customizable layout templates to design apps that match your brand. The apps are compatible with WooCommerce. They are multilingual and will accept multiple currencies. Products can be displayed in grid, carousel, and product list form. Customers can leave their reviews. Promotions can be done using banners.  4. React Native WooCommerce and WordPress App Builder  React Native allows you to convert your website to a mobile app for Android and iOS. It also works for sites that have WooCommerce. It’s perfect for food, grocery, pharmacy, and store delivery businesses.  Once you’ve converted your WooCommerce store into an app, it will have multiple screens to choose from, multiple payment gateways, push notifications, social login, product display, product cart, and more.  5. Flink: WordPress App Builder The Flink WordPress App Builder makes it possible to easily create a native Android app from your WordPress website and blog. Your native app is created automatically, and an APK file is built and sent by email. The app will work smoothly with many features of WordPress, like posts, pages, categories, tags, in-post galleries, audio and video players, and users.  Because your app is connected to your website via the WordPress API, any content that you update on your website is also updated in your app instantaneously. No need for extra actions. You can send out push notifications via Firebase. Also, your users can use the app in different languages by switching to their preferred language on the settings page.  Free WordPress Mobile App Builders If you’re on a tight budget, the following free mobile app builders are worth exploring: AppMySite – Convert WordPress Sites to Android App for Free AppMySite allows you to convert your WordPress site to an Android app for free! AppMySite also works for WooCommerce sites. You can create native apps that offer your customers a premium experience that keeps them coming back for more. In addition, you can publish them on the App Store or Google Play Store.  Note that you can get started with AppMySite for free, but if you want white-label branding, you’ll have to pay a monthly fee ($9 per month at the time of writing). SuperPWA: Super Progressive Web Apps – Convert Website to Mobile App Super Progressive Web Apps is open-source software that converts your WordPress website into a progressive web app. Progressive Web Apps require that your WordPress website is served securely—i.e. your website should be HTTPS. Users can come back to your website by launching the app from their home screen and can interact with your website through an app-like interface. Your return visitors will experience almost instant loading times and enjoy the great performance benefits of your PWA! Progressive WordPress Mobile App Plugin Progressive WordPress is another PWA plugin that helps encourage users to add your website to their home screen. But that’s not all. It also allows you to control the display behaviour of your website so it will be shown without any browser elements, just like a native app. No connection? No problem. Progressive WordPress pre-caches all critical assets of your website, as well as all visited resources. So if there’s no internet connection, it will serve the resources from the local storage. Appmaker WP – Convert WordPress Sites to Android App for Free Appmaker WP helps you convert your WordPress site to an Android app for free!  You just need to install Appmaker’s WordPress mobile app builder plugin and then upload your WordPress website’s URL, giving your app a name and icon. Best Practices to Convert WordPress to Mobile App When you convert WordPress to a mobile app, try following these best practices so your  app performs effectively. 1. Funnel Mobile Devices to the Mobile Site Redirect mobile devices to mobile versions of your website using server-side redirects.  2. Use a Mobile-First Design A mobile-first approach to developing websites ensures that your website will work on all devices. So use HTML5 DocType for mobile devices.  3. Use Viewport Metadata to Create a Responsive Site By using viewport metadata specifying device sizes on your document (head), it will resize your webpage for different mobile devices. 4. Use a Vertical Layout Scrolling up and down on phone devices is more user-friendly than trying to do it from left to right. Make use of a vertical linear layout.  5. Steer Clear of Wrapping To avoid incorrect sizing of your website on mobile devices, you must set the width and height to match the parent. Avoid wrapping content because it will result in incorrect sizing.  6. Reduce Bandwidth Requirements Mobile devices have a slower loading speed than desktops, so avoid multiple file requests.  Turn Your Website Into an App Today! You have a chance to reach millions of mobile users by simply converting your WordPress website into a mobile app. WebView templates and mobile app builders on CodeCanyon will get you started right away!  In addition to all the WebView templates and WordPress app builders available, there are also thousands of other high-quality WordPress plugins on CodeCanyon that can help you improve your website for you and your users. This incredible collection of plugins contains all types of plugins including video, SEO, eCommerce, and email plugins. 30+ Best Android App Templates for 2022 Franc Lucas 16 Jul 2021 12 Best iOS App Templates of 2022 Daniel Strongin 12 Jul 2022 16 Best React Native App Templates of 2022 (+3 Free) Franc Lucas 15 Jun 2022 20+ Stunning Ionic App Templates and Ionic Themes Franc Lucas 11 Nov 2021 Editorial Note: This post has been updated with contributions from Gonzalo Angulo. Gonzalo is a staff writer with Envato Tuts+.

  • How to Make a Drop-Down Menu in WordPress
    by Rachel McCollin on 20 martie 2019 at 10:40

    What You’ll Be Creating Do you want to create a drop-down menu in WordPress? You’ve come to the right place! In this tutorial I’ll teach you how to create a professional drop-down menu design. Navigation menus are having a bit of a moment in the spotlight. From burger menus for mobile through mega menus for stores to sticky menus for enhanced user experience, there’s a great choice in the way you can present your navigation menu in your WordPress site. But what if you want to create a straightforward drop-down menu for WordPress with a few top-level items and some more items that drop down from them when the user hovers over them? Before you start getting into coding advanced menus like mega menus and burger menus, it’s a good idea to learn how to create a drop-down menu. This will come in useful on more sites than you might imagine (not every site needs a fancy menu), and it will give you the foundation you need to start building more advanced menus. If you’d rather watch our video on creating a drop-down menu in HTML for WordPress, just press play and get started. In this tutorial, I’m going to show you how to create a drop-down menu in your WordPress theme, using CSS to target the HTML that’s output by the WordPress menu function. This is designed to be used in a theme you’re coding yourself, and not for a third-party theme, which will already have its own menu. However, if you’re working with a third-party theme whose menu isn’t drop-down and you want to add this, then you’ll need to create a child theme and add your menu code to that. Here’s What You’ll Learn in This Drop-Down Menu Design Tutorial Understand how WordPress drop-down menus work through its built-in menu functionality. Get familiar with code so you can learn how to make a drop-down menu in HTML.  Making your drop-down menu design mobile-friendly.  What You’ll Need to Create a Drop-Down Navigation Menu in HTML on WordPress To follow along with this tutorial, you’ll need: a development installation of WordPress a theme you’re coding yourself, or a child theme of a third-party theme if you want to modify the menu a code editor 1. WordPress’s Built-in Menu Functionality The first thing you’ll need to understand is how WordPress drop-down menus work. Unlike for static sites, menus aren’t hard-coded into your site. Instead, WordPress uses a PHP function to query the database and fetch navigation menu items, then display them in the correct structure. Each item in your navigation menu is actually a post in the wp_posts table in your database—not a normal post, but a special kind of post that’s used just for navigation menu items, with its own metadata including the text to be displayed and the target of the link. In your theme, open up the header.php file. You should be able to find this line: wp_nav_menu( array( ‘container_class’ => ‘main-nav’, ‘theme_location’ => ‘primary’ ) ); Your function may look a little different depending on the parameters, but let’s break down the example above and see what each element does: wp_nav_menu() is the function that fetches a navigation menu and outputs it. The parameters are then wrapped in an array. container_class is the CSS class that will be given to the container in which the menu is wrapped. In this case, it’s main-nav. That’s what we’ll be targeting with our CSS later on. theme_location => primary tells WordPress that this is the primary navigation. If I create a menu in the admin screens and check the Primary box, then this menu will be used for this spot in the code. Sometimes you might want to add a navigation menu elsewhere in your theme, for example in the footer, in which case you don’t want to use theme_location => primary. You can only use this for one menu. But you may want to use additional parameters, which you can find in the WordPress handbook page on wp_nav_menu(). Here’s the checkbox for the primary navigation in the Menus admin screen:  2. Code Output by the wp_nav_menu() Function Before we can add CSS for our dropdown menu, it helps to be familiar with the code that WordPress generates for menus. Here’s a typical drop-down menu example for a small business, shown in the Menus admin screen: Now here’s the drop-down navigation menu in HTML: <div class=”main-nav”> <ul id=”menu-navbar” class=”menu”> <li id=”menu-item-610″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-609 current_page_item menu-item-610″><a href=”https://121interviewcoaching.co.uk/”>Home</a></li> <li id=”menu-item-613″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-613″><a href=”https://121interviewcoaching.co.uk/about/”>About Me</a></li> <li id=”menu-item-615″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-615″><a href=”https://121interviewcoaching.co.uk/services/”>Services</a> <ul class=”sub-menu”> <li id=”menu-item-618″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-618″><a href=”https://121interviewcoaching.co.uk/services/services-for-individuals/”>Preparing for interviews / individuals</a></li> <li id=”menu-item-617″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-617″><a href=”https://121interviewcoaching.co.uk/services/services-for-groups/”>Preparing for interviews / groups</a></li> <li id=”menu-item-619″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-619″><a href=”https://121interviewcoaching.co.uk/services/conducting-interviews/”>Conducting interviews</a></li> </ul> </li> <li id=”menu-item-30780″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-30780″><a href=”https://121interviewcoaching.co.uk/succeed-at-your-next-job-interview/”>My Book</a></li> <li id=”menu-item-614″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-614″><a href=”https://121interviewcoaching.co.uk/clients-2/”>Clients</a></li> <li id=”menu-item-616″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-616″><a href=”https://121interviewcoaching.co.uk/interview-tips/”>Interview Tips</a></li> <li id=”menu-item-612″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-612″><a href=”https://121interviewcoaching.co.uk/where-i-work/”>Areas covered</a></li> <li id=”menu-item-611″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-611″><a href=”https://121interviewcoaching.co.uk/contact/”>Contact &#038; Links</a></li> </ul> </div><!– #main-nav –> Creating a drop-down menu in HTML consists of some code we need to understand before starting with our drop-down menu for WordPress:  A div with the main-nav class, defined in the wp_nav_menu() function. Inside that, a ul with the ID menu-navbar and the class menu. These are defaults defined by WordPress. Inside that, a number of li elements, each with the class of menu-item menu-item-type-post_type, plus other classes specific to the type of post that the menu item leads to and the state of that menu item at the time. Each one also has a unique ID, with a number corresponding to the post ID of the navigation menu item in the database. Inside one of the li elements is another ul with its own li elements inside—the second-level menu items. It’s this that we want to drop down when the user hovers over the top-level menu item. Coding the CSS for our Drop-Down Menu So now we know what’s being output by WordPress, we can determine which elements we want to target with our CSS for the drop-down menu. We want to achieve a couple of things: When the page is opened, the second-level menu items are hidden. When the user hovers over a top-level item, the second-level items below it appear. Hiding the Second-Level Items by Default In your theme’s stylesheet, start by hiding the second-level items by default. Add this: main-nav ul ul { display: none; } This will hide the ul element inside another ul element inside the main-nav element. It won’t hide a top-level ul element, however, as it requires one ul to be nested inside another ul inside the menu. Now, if you open the page and try to view the second-level items, it won’t be possible—they’ll be hidden. Let’s fix that. Drop-Down Menu Design: Creating Second-Level Items Appear on Hover Now we need to ensure that the ul nested inside the top-level li will be displayed when the top-level li is hovered over. Add this to your stylesheet: .main-nav ul li:hover > ul { display: block; } Now, when you hover your mouse over the top-level item, the list beneath it will appear. But you’ll find that it won’t display the way you want it. Specifically, it will be pushing down the content below the menu. We want it to appear as if it’s floating on top of the content. To fix that, we need to add some layout styling to our ul ul element. Adding Layout Styling to the Second-Level List Open your stylesheet and find the line with display: none in it. Edit that block to add layout styling: .main-nav ul ul { display: none; position: absolute; top: 3em; left: 0; z-index: 99999; width: 180px; background: #fff; box-shadow: 0px 3px 3px rgba(0,0,0,0.2); } You also need to give the top-level list item relative positioning: .main-nav li { position: relative; } Let’s take a look at what a simple drop-down menu code has: position: absolute gives the second-level list absolute positioning, taking it out of the flow of elements in the page. For the higher-level item, position: relative puts the top-level list in the flow of the page and allows for an absolutely positioned element to be placed inside it. top: 3em positions the top of the list relative to the top of the element it’s inside, namely the top-level list item. This 3em value reflects the height of the top-level navigation bar. Edit yours if your top-level navigation has a different height. left: 0 places the list to the left, relative to the item above it. z-index: 99999 defines where the element sits in a three-dimensional model of the page. A high value of 99999 ensures that it is displayed on top of everything else. The remaining code gives the list width and also adds display styling to it, including a shadow to make it look as if it’s on top of the page. Now let’s take a look at what we see when we hover over the top-level item: This is a drop-down menu example of how the hover effect looks. It works! When I hover over the top-level item, the drop-down menu is now displayed. 3. Making Your Drop-Down Menu Mobile-Friendly The simple drop-down menu code above is great for the desktop version of the site, but the reality is that most people will be visiting your site on a mobile phone. The menu here is too big to fit onto a small screen, so the best solution is to edit the CSS for our drop-down menu on small screens and use some JavaScript to create a burger menu. Here’s how to do it. Adding a Menu Icon to the Banner of a Drop-Down Menu on WordPress First, add the icon that people will need to tap on to access the menu on a small screen. Add this to the header.php file, in the place where you want the menu icon to go: <a class=”toggle-nav” href=“#”>&#9776;</a> That will output the burger symbol, using the HTML code for the symbol, inside an element with a class we’ll use to hide it on larger screens. Adding the CSS for the Burger Menu Now you need to add the CSS to your stylesheet. First, hide the icon on larger screens: .toggle-nav { display: none !important; } Now inside a media query, add the CSS for the menu: @media screen and ( max-width: 550px) { a.toggle-nav { float: right; margin: 0 0 0.5em 0.5em; display: inline-block !important; color: #fff; transition: color linear 0.15s; } a.toggle-nav:hover, a.toggle-nav:active { text-decoration: none; color: #fff; } .menu-header { display: inline-block; position: relative; margin: 0; width: 100%; } #access .menu-header ul { display: none; position: absolute; top: 80%; right: 0px; min-width: 200px; background-color: #7B3D84; font-size: 1.2em; } #access .menu-header li { display: block; float: none; padding-right: 2%; text-align: right; } #access ul li:hover > ul { display: none; } } Note that you’ll need to edit this if you’re using different classes and IDs in your theme. Adding the JavaScript The final step is to add a script to make the menu appear when a user taps on the icon. Create a folder in your theme called scripts, and inside that, a new file called burger-menu.js, and add this to it: jQuery(document).ready(function() { jQuery(‘.toggle-nav’).click(function(e) { jQuery(‘.menu-header ul.menu’).slideToggle(500); e.preventDefault(); }); }); Now make sure the script is called by the theme. In your theme’s functions.php file, add a function to enqueue the script: function tutsplus_burger_menu_scripts() { wp_enqueue_script( ‘burger-menu-script’, get_stylesheet_directory_uri() . ‘/scripts/burger-menu.js’, array( ‘jquery’ ) ); } add_action( ‘wp_enqueue_scripts’, ‘tutsplus_burger_menu_scripts’ ); Now save all your files, and you’ll have a burger menu on small screens. Drop-Down Menus Are Useful for Small, Multi-Level Menus When your site needs a menu with multiple levels but you don’t need a lot of links outside your top-level menu, a drop-down menu is the simplest way to achieve this. The site I’ve used to demonstrate this only has one item in its menu with other items below it, and there are only three of those. Using a mega menu would be overkill, and a single-level menu wouldn’t allow me to display everything I want. That’s It! This is How to Make a Drop-Down Menu in HTML Being able to add a menu like this to your themes will give you more flexibility with your menus and enhance the user experience. And you can do it with just a few lines of CSS. An Easy Way to Code a Mega Menu in WordPress Rachel McCollin 17 May 2019 The Best WordPress Menu Plugins: Mega Menus, Sticky Menus, and More Franc Lucas 31 Aug 2019 How to Use the UberMenu Plugin to Create a WooCommerce Mega Menu Daniel Strongin 27 Nov 2019 Better Navigation: How to Add a Dropdown Menu in WordPress Jessica Thornsby 17 Dec 2019

  • Easier React Native Development With Expo
    by Wern Ancheta on 13 februarie 2018 at 6:14

    With Expo, developers can create React Native apps without going through the hassle of installing and configuring software dependencies such as Android Studio, Xcode, or all the other tools which are needed to develop and run a React Native app. In this tutorial, I’m going to show you how to create a simple memory game using Expo. Along the way you’ll also learn the following: How to use the tools provided by Expo. This includes the CLI, the SDK and the Expo client app. How to create a React Native app using Expo. What Is Expo? Expo is a framework for quickly developing React Native apps. It’s like Laravel or Symphony for PHP developers, or Ruby on Rails for Ruby developers. Expo provides a layer on top of the React Native APIs to make them easier to use and manage. It also provides tools that make it easier to bootstrap and test React Native apps. Lastly, it provides UI components and services that are commonly only available when you install a third-party React Native component. All of those are made available via the Expo SDK. Limitations of Expo Before you proceed further, it’s important to be aware of some of the limitations of Expo: Expos apps are limited to the native APIs that the Expo SDK supports. This means that if your app has a very specific use-case such as communicating with a Bluetooth peripheral, the only option to implement such functionality is with plain React Native, or by writing native code. Expo locks you into their toolset. This means you cannot simply install and use most of the great tools available for React Native development such as command-line tools, scaffolders, and UI frameworks. But the good thing is that the Expo SDK is compatible with plain React Native apps, so you won’t have any problem when you eject your app from Expo. Even with these limitations, it’s important to keep in mind that Expo is a fully functional framework with lots of support for commonly used Android or iOS APIs. This means that it has got you covered for most of the functionalities that apps commonly need. So there’s often no need to look outside of Expo to implement the native functionality. App Overview The app that we’re going to create is a memory game. You may be familiar with this type of game—the user has to find matching pairs by turning over cards two at a time. Here’s what the default screen looks like: And here’s how it looks like once all the pairs have been opened: Once they’ve solved the game, the user can tap on the reset button to reset the items to their initial state. This allows them to start the game all over again. Installing Expo Unlike with plain React Native where you have to install and configure Android Studio or Xcode and other dependencies, with Expo there are only a few steps to follow in order to start developing apps: Download and Install Node.js and npm. Expo depends on the Node.js platform for its command-line tools and dependency management. Node.js includes a package manager called npm. Ensure that your npm version is 5.2 or higher, you can check it with the npm -v command. If not, upgrade it or download the latest version of Node.js. This is in order to be able to run npm executables using npx. Install the Expo Client on your iOS or Android device. This is used to preview the app while you’re developing it. Install the command line tool. This allows you to generate a new Expo project, initiate a build process, and more. Execute the following command to install it globally: npm install -g expo-cli Or if you prefer yarn: yarn global add expo-cli As a sidenote, Expo also provides a browser-based tool called snack. Snack is like a browser-based IDE tailored for React Native app development. You can write code and see the result right in your web browser even without a connecting a mobile device. It’s also very easy to use—no setup required. Generating a New Expo App Once you’ve installed all the dependencies, you can now generate a new Expo app: npx create-expo-app MemoryGame Once that’s done, it will create a new folder called MemoryGame. Navigate inside it and start running the development server: cd MemoryGame expo start Once the development server is running, you should now be able to see something like this: That’s the QR code which points to the live preview of the project. Open the Expo client app on your phone and scan the code using the QR scanner. At this point, you should now be able to view the default screen. Every time you hit Control-S on any of the project files, the preview should automatically reload to reflect the changes. You can find the full source code of the project on its GitHub repo. Or if you want to give the app a try, you can check out the demo. Just select QR Code, and scan it on your phone using the Expo client app. Coding the App Now we’re ready to code the app. Let’s begin with some UI components before we go back and implement the main component. Header Component The header is used to display the title of the app. Create a components folder. Inside it, create a Header.js file and add the following: import * as React from ‘react’; import { Text, View, StyleSheet} from ‘react-native’; export default function Header() { return ( <View style={styles.header}> <Text style={styles.header_text}>MemoryGame</Text> </View> ); } const styles = StyleSheet.create({ header: { flex: 1, flexDirection: ‘column’, alignSelf: ‘stretch’, paddingTop: 20, paddingBottom: 5, backgroundColor: ‘#f3f3f3’ }, header_text: { fontWeight: ‘bold’, fontSize: 17, textAlign: ‘center’ } }); This is just a basic React Native component, with some styling to match the UI of our app. Score Component Next is the component for displaying the score (components/Score.js): import * as React from ‘react’; import { Text, View, StyleSheet} from ‘react-native’; export default function Score() { return ( <View style={styles.score_container}> <Text style={styles.score}>{this.props.score}</Text> </View> ); } const styles = StyleSheet.create({ score_container: { flex: 1, alignItems: ‘center’, padding: 10 }, score: { fontSize: 40, fontWeight: ‘bold’ } }); Again, just a simple display component with a text view and some basic styling. Card Component The card component (components/Card.js) will display the cards. These cards use icons from the Expo vector icon set. This is one of the features that come right out of the box when you use Expo: it includes icons from icon sets like FontAwesome, Entypo, and Ionicons. In the code below, you can see that we’re only using FontAwesome. It has the icon that we want for displaying the card’s default state: a question mark. As you’ll see later in the main app component, we’ll also be using icons from Entypo and Ionicons. The reference to those icon sources will be passed to this component, so there’s no need to specify them here: import React from ‘react’; import { StyleSheet, Text, View, TouchableHighlight } from ‘react-native’; import { FontAwesome } from ‘@expo/vector-icons’; // use FontAwesome from the expo vector icons Inside the render() method, we only use the source and icon passed as props if the card is opened. By default, it will only display the question mark icon from FontAwesome. But if the card is open, it will use the icon source, icon, and color that were passed as props. Each of the cards can be tapped. When tapped, the clickCard() function will be run, which is also passed via the props. Later on you’ll see what the function does, but for now, just know that it updates the state to reveal the icon on the card: export default function Card(props) { let CardSource = FontAwesome; // set FontAwesome as the default icon source let icon_name = ‘question-circle’; let icon_color = ‘#393939’; if(props.is_open){ CardSource = props.src; icon_name = props.name; icon_color = props.color; } return ( <View style={styles.card}> <TouchableHighlight onPress={props.clickCard} activeOpacity={0.75} underlayColor={„#f1f1f1″}> <CardSource name={icon_name} size={50} color={icon_color} /> </TouchableHighlight> </View> ); } Don’t forget to add the styles: const styles = StyleSheet.create({ card: { flex: 1, alignItems: ‘center’ }, card_text: { fontSize: 50, fontWeight: ‘bold’ } }); Helpers We’ll also be using a helper function called shuffle(). This allows us to sort the array of cards in random order so that their order will be different every time the game is reset: Array.prototype.shuffle = function() { var i = this.length, j, temp; if(i == 0) return this; while(–i){ j = Math.floor(Math.random() * (i + 1)); temp = this[i]; this[i] = this[j]; this[j] = temp; } return this; } Main Component The main component (App.js) contains the main app logic and brings everything together. Start by including the React and Expo packages that we will be using. This time we’re using all of the icon sources from Expo vector icons: import React from ‘react’; import { StyleSheet, View, Button } from ‘react-native’; import { Ionicons, FontAwesome, Entypo } from ‘@expo/vector-icons’; Next, include the components and the helper that we created earlier: import Header from ‘./components/Header’; import Score from ‘./components/Score’; import Card from ‘./components/Card’; import helpers from ‘./helpers’; Inside the constructor, we first create the array which represents the unique cards. src is the icon source, name is the name of the icon (you can find the names on GitHub if you want to use other icons), and color is, naturally, the color of the icon: export default class App extends React.Component { constructor(props) { super(props); // bind the functions to the class this.renderCards = this.renderCards.bind(this); this.resetCards = this.resetCards.bind(this); // icon sources let sources = { ‘fontawesome’: FontAwesome, ‘entypo’: Entypo, ‘ionicons’: Ionicons }; // the unique icons to be used let cards = [ { src: ‘fontawesome’, name: ‘heart’, color: ‘red’ }, { src: ‘entypo’, name: ‘feather’, color: ‘#7d4b12’ }, { src: ‘entypo’, name: ‘flashlight’, color: ‘#f7911f’ }, { src: ‘entypo’, name: ‘flower’, color: ‘#37b24d’ }, { src: ‘entypo’, name: ‘moon’, color: ‘#ffd43b’ }, { src: ‘entypo’, name: ‘youtube’, color: ‘#FF0000’ }, { src: ‘entypo’, name: ‘shop’, color: ‘#5f5f5f’ }, { src: ‘fontawesome’, name: ‘github’, color: ‘#24292e’ }, { src: ‘fontawesome’, name: ‘skype’, color: ‘#1686D9’ }, { src: ‘fontawesome’, name: ‘send’, color: ‘#1c7cd6’ }, { src: ‘ionicons’, name: ‘ios-magnet’, color: ‘#d61c1c’ }, { src: ‘ionicons’, name: ‘logo-facebook’, color: ‘#3C5B9B’ } ]; // next: add code creating the clone and setting the cards in the state } } Note that instead of directly specifying the src as FontAwesome, Entypo or Ionicons for each of the objects, we’re using the property names used in the sources object. This is because we will need to create a copy of the array of cards in order for each card to have a pair. Creating a copy using array methods such as slice() will create a copy of the array, but the problem is that once the individual objects are modified in either the copy or the original, both arrays are also modified. This brings us to the solution below which is to create a completely new object by converting the cards array into a string and then parsing it to convert it back to an array. This is the reason why we’re using strings since functions can’t be converted into strings. We then combine the two to come up with the array, which contains all the cards that we need: let clone = JSON.parse(JSON.stringify(cards)); // create a completely new array from the array of cards this.cards = cards.concat(clone); // combine the original and the clone Next, go through that array and generate a unique ID for each one, set the icon source, and then set it to a closed state by default: // add the ID, source and set default state for each card this.cards.map((obj) => { let id = Math.random().toString(36).substring(7); obj.id = id; obj.src = sources[obj.src]; obj.is_open = false; }); Sort the cards randomly and set the default state: this.cards = this.cards.shuffle(); // sort the cards randomly // set the default state this.state = { current_selection: [], // this array will contain an array of card objects which are currently selected by the user. This will only contain two objects at a time. selected_pairs: [], // the names of the icons. This array is used for excluding them from further selection score: 0, // default user score cards: this.cards // the shuffled cards } The render() method renders the header, cards, score, and the button for resetting the current game. It’s using the renderRows() function to render the individual card rows. The screen will have six rows containing four cards each: render() { return ( <View style={styles.container}> <Header /> <View style={styles.body}> { this.renderRows.call(this) } </View> <Score score={this.state.score} /> <Button onPress={this.resetCards} title=”Reset” color=”#008CFA” /> </View> ); } Here’s the code for the renderRows() function. This uses the getRowContents() function, which is responsible for creating an array of arrays with four items each. This allows us to render each row, and then use another function for rendering cards for each iteration of the map() function: renderRows() { let contents = this.getRowContents(this.state.cards); return contents.map((cards, index) => { return ( <View key={index} style={styles.row}> { this.renderCards(cards) } </View> ); }); } Here’s the getRowContents() function: getRowContents(cards) { let contents_r = []; let contents = []; let count = 0; cards.forEach((item) => { count += 1; contents.push(item); if(count == 4){ contents_r.push(contents) count = 0; contents = []; } }); return contents_r; } Next is the renderCards() function. This accepts the array of card objects and renders them via the Card component. All we need to do here is to pass the individual properties of each card object as props. This is then used to render the correct icon, as you’ve seen in the code for the Card component. The clickCard() function is also passed as a prop. The card ID is passed to that function so that the unique card can be identified and updated: renderCards(cards) { return cards.map((card, index) => { return ( <Card key={index} src={card.src} name={card.name} color={card.color} is_open={card.is_open} clickCard={this.clickCard.bind(this, card.id)} /> ); }); } Inside the clickCard() function, we get the details of the selected card and check if it should be processed any further: clickCard(id) { let selected_pairs = this.state.selected_pairs; let current_selection = this.state.current_selection; let score = this.state.score; // get the index of the currently selected card let index = this.state.cards.findIndex((card) => { return card.id == id; }); let cards = this.state.cards; // the card shouldn’t already be opened and is not on the array of cards whose pairs are already selected if(cards[index].is_open == false && selected_pairs.indexOf(cards[index].name) === -1){ // next: add code for processing the selected card } } Now let’s fill in the code for handling a selected card. First, we open the card and add it to the array of currently selected cards: cards[index].is_open = true; current_selection.push({ index: index, name: cards[index].name }); // next: add code for determining whether the user has selected the correct pair or not Once there are two items in the array of currently selected cards, we check if the icon names are the same. If they are then it means that the user has selected the correct pair. If they are not the same then it’s an incorrect pair. In that case, we close the first card that was selected and then add a bit of delay before closing the second card. (This way the user can see the card icon before it reverts to the closed state.) if(current_selection.length == 2){ if(current_selection[0].name == current_selection[1].name){ score += 1; // increment the score selected_pairs.push(cards[index].name); }else{ cards[current_selection[0].index].is_open = false; // close the first // delay closing the currently selected card by half a second. setTimeout(() => { cards[index].is_open = false; this.setState({ cards: cards }); }, 500); } current_selection = []; } // next: add code for updating the state The last thing we need to do in the click event handler is to update the state to reflect the changes in the UI: this.setState({ score: score, cards: cards, current_selection: current_selection }); A related function is the reset event handler. When the reset button is tapped, we simply restore the default state by closing all the cards and shuffling. resetCards() { // close all cards let cards = this.cards.map((obj) => { obj.is_open = false; return obj; }); cards = cards.shuffle(); // re-shuffle the cards // update to default state this.setState({ current_selection: [], selected_pairs: [], cards: cards, score: 0 }); } Finally, we’ll add a few basic styles to make our app look good. const styles = StyleSheet.create({ container: { flex: 1, alignSelf: ‘stretch’, backgroundColor: ‘#fff’ }, row: { flex: 1, flexDirection: ‘row’ }, body: { flex: 18, justifyContent: ‘space-between’, padding: 10, marginTop: 20 } }); Test the App Since your Expo development server has been running this whole time, every change should be pushed to your mobile device with live reloading. Try the app out and make sure it works as it’s supposed to. Conclusion That’s it! In this tutorial you’ve learned how to use the Expo XDE to quickly wire up a React Native app. Expo is a really good way to start developing React Native apps because it removes the need to install a lot of software which is often a cause of frustration, especially for beginners. It also provides tools which makes it really easy to preview the app while it’s being developed. Be sure to check out the resources mentioned on the Expo website if you want to learn more. This post has been updated with contributions from Kingsley Ubah. Kingsley is passionate about creating content that educates and inspires readers. Hobbies include reading, football and cycling.